ONLY JS: Execution time: 13
ONLY JQ: Execution time: 85ONLY JS: Execution time: 13
ONLY JQ: Execution time: 42ONLY JS: Execution time: 0
ONLY JQ: Execution time: 2<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.red {
background: red;
}
.green {
background: green;
}
</style>
</head>
<body>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="script.js"></script>
</html>function timeExecutions(title, callback) {
var start = new Date().getTime();
callback();
var end = new Date().getTime();
var time = end - start;
console.log(title + ' Execution time: ' + time);
}
function callOnlyJs() {
var span = document.createElement('span');
span.innerHTML = 'Test JS';
span.classList.add("red");
document.body.appendChild(span);
}
function callOnlyJQ() {
var body = $("body");
var span = document.createElement('span');
span.innerHTML = 'Test JS';
span.classList.add("green");
body.append(span);
}
document.addEventListener('DOMContentLoaded', function() {
timeExecutions("ONLY JS:", callOnlyJs);
}, false);
$(document).ready(function(){
timeExecutions("ONLY JQ:", callOnlyJQ);
});