Speed Test

Speed Test for 1 Million Text Updates


This awesome speed test will test the amount of time it takes for 1 Million Text Updates on your device. I recommend trying this multiple times and on multiple devices to see the varying results.

*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


Thank you and have a Blessed Day










Try these Fun Games by Bobbie:


Ocean Treasures Game


Travel Blast Game New York


Play and Learn Russian


Battlestarship Game



Take a look at these Groovy Codes:


Fun IQ Test


Html Svg Starburst


Javascript Particles Fishes



Read the Latest Breaking Programming and Tech News, Great Articles and Tips:


Codenewz Programming and Tech News








Comments

Popular posts from this blog