Speed Test
Speed Test for 1 Million Text Updates
*Featured Code Created by Calvin
Click here to Run Speed Test
Source Code
HTML with CSS, JavaScript and JQUERY
<html>
<head>
<title>Page Title</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<style>
html, body {
min-height: 100%;
}
body {
margin: 0;
min-height: 100vh;
}
body {
font-family: Arial;
}
#main {
margin: 5%;
padding: 2%;
min-width: 86%;
min-height: 80vh;
background-color: beige;
border-radius: 5px;
position: relative;
}
div, p {
margin: 5px;
}
#notes {
font-style: italic;
position: absolute;
font-size: smaller;
bottom: 10px;
}
</style>
</head>
<body>
<div id="main">
<h3>
Dom Update Functions - Speed Testing (for 1 million text updates)</h3>
<div id="test1">
Test is running. Please wait, this may take 30s to 60s to complete the test....</div>
<div id="test2">
</div>
<br />
<div class="test">
</div>
<div id="jq1">
</div>
<div id="notes">
</div>
</div>
<script>
setTimeout(main, 10);
function main() {
var test, i, start, end;
var count = 1000000;
start = window.performance.now();
for(i=0; i<count; i++) {
test = document.getElementById('test1');
test.innerText = 'Speed Testing...'
}
end = window.performance.now();
test.innerText = 'Speed of getElementById: ' + ((end - start)/1000).toFixed(2) + "sec.";
start = window.performance.now();
for(i=0; i<count; i++) {
test = document.getElementsByTagName('p')[0];
test.innerText = 'Speed Testing...'
}
end = window.performance.now();
test.innerText = 'Speed of getElementsByTagNames: ' + ((end - start)/1000).toFixed(2) + "sec.";
start = window.performance.now();
for(i=0; i<count; i++) {
test = document.getElementsByClassName('test')[0];
test.innerText = 'Speed Testing...'
}
end = window.performance.now();
test.innerText = 'Speed of getElementsByClassName: ' + ((end - start)/1000).toFixed(2) + "sec.";
start = window.performance.now();
for(i=0; i<count; i++) {
test = document.querySelector('#test2');
test.innerText = 'Speed Testing...'
}
end = window.performance.now();
test.innerText = 'Speed of querySelector: ' + ((end - start)/1000).toFixed(2) + "sec.";
start = window.performance.now();
for(i=0; i<count; i++) {
$( "#jq1" ).text( 'Speed Testing...' );
}
end = window.performance.now();
$( "#jq1" ).text( 'Speed of jQuery: ' + ((end - start)/1000).toFixed(2) + "sec." );
document.getElementById('notes').innerHTML = 'Kindly copy & paste the output result to comment section, for comparison.<br/>Thank you for all the feedbacks, and also thanks for @Morpheus suggestion.'
}
</script>
</body>
</html>
I hope you enjoyed this content please consider supporting the development of Free Code Examples
Comments
Post a Comment