Of Stack

The Method of Running Speed of jsp Test Function

  • 2021-10-16 02:24:46
  • OfStack

Usually, we need to optimize the function. The general practice is to get the time at the beginning and get the time again at the end. Subtract the time twice to get the time spent. The speed of function running is basically millisecond.

The function given below is prepared for this. 


//  Time to timestamp (milliseconds) 
function time2stamp(){
  var d = new Date();
  return Date.parse(d)+d.getMilliseconds();
}

Usage: 


var t1 = time2stamp();
//  Compare the sightseeing of each sightseeing DOM Running speed. 
var divs = document.getElementByTagName("div"); 
var t2 = time2stamp();
alert(" Time consuming: " + (t2 - t1) + "  Milliseconds ");

A new approach: 


var time1 = new Date
//  Compare the sightseeing of each sightseeing DOM Running speed. 
var divs = document.getElementByTagName("div"); 
alert(" Time consuming: " + (new Date - time1) + "  Milliseconds ");

Test the efficiency of various loops, so slow loops like for... in are unexpected! 


<!doctype html>
<html dir="ltr" lang="zh-CN">
 <head>
  <meta charset="utf-8"/>
  <title> Class </title>
  <script type="text/javascript" charset="utf-8">
   window.onload = function(){
 
    for (var i=0, elm; i<4000; i++) {
     elm = document.createElement("div");
     elm.innerHTML = " No. 1 1 Heavy div<div> No. 1 2 Heavy div<div> No. 1 3 Heavy div</div></div>";
     document.body.appendChild(elm);
    }
    document.getElementById("start-test").onclick = startTest;
    var uuid = 0;
    function startTest() {
     var divs = document.getElementsByTagName("div");
 
     var time1 = new Date();
     var i = -1, n = divs.length;while (++i < n) { 
       divs[i].uuid = uuid++;
     }
     document.getElementById("time-1").innerHTML = new Date() - time1;
 
     var time2 = new Date();
     var i = divs.length; while (--i >= 0) { 
      divs[i].uuid = uuid++;
     }
 
     document.getElementById("time-2").innerHTML = new Date() - time2;
 
     var time3 = new Date();
     for (var i=0, n=divs.length; i<n; i++) {
       divs[i].uuid = uuid++;
     }
     document.getElementById("time-3").innerHTML = new Date() - time3;
 
 
     var time4 = new Date();
     for (var n = divs.length - 1; n >= 0; n--) {
        divs[n].uuid = uuid++;
      }
     document.getElementById("time-4").innerHTML = new Date() - time4;
 
     var time5 = new Date();
     for (var n = divs.length - 1; n--;) {
        divs[n].uuid = uuid++;
      }
     document.getElementById("time-5").innerHTML = new Date() - time5;
 
     var time6 = new Date();
     var n = divs.length-1; do { 
       divs[n].uuid = uuid++;
     } while (n--);
     document.getElementById("time-6").innerHTML = new Date() - time6;

     var time7 = new Date();
     for(var i=0,el;el = divs[i++];){
      el.uuid = uuid++;
     };
     document.getElementById("time-7").innerHTML = new Date() - time7;
 
    }
   }
  </script>
 </head>
 <body>
  <style>
   h2 {
    margin:0;
    padding:10px;
    font-weight:500;
    font-size:13px;
    background:#8080C0;
    color:#fff;
   }
   p {
    margin:0;
    text-indent:2em;
    border-bottom:2px solid #a9ea00;
    background:#F2F1D7;
   }
   span.red{
    color:red;
   }
  </style>
  <h1>JavaScript loop speed test</h1>
  <ul>
   <li> Traverse the page 12000 A DIV</li>
  </ul>
  <input id="start-test" type="button" value="Start test">
  <h2> Cycle 1 :  var i = -1, n = divs.length;while (++i < n) { }<span class="red"> Sequence </span></h2>
  <p id="time-1"></p>
 
  <h2> Cycle 2 : var n = divs.length; while (--n >= 0) { }<span class="red"> Reverse order </span></h2>
  <p id="time-2"></p>
 
  <h2> Cycle 3 : for (var i=0, n=divs.length; i<n; i++)<span class="red"> Sequence </span></h2>
  <p id="time-3"></p>
 
  <h2> Cycle 4 : for (var n = divs.length - 1; n >= 0; n--) { }<span class="red"> Reverse order </span></h2>
  <p id="time-4"></p>
 
  <h2> Cycle 5 : for (var n = divs.length - 1; n--;) { }<span class="red"> Reverse order </span></h2>
  <p id="time-5"></p>
 
  <h2> Cycle 6 :  var n = divs.length-1; do { } while (n--)<span class="red"> Reverse order </span></h2>
  <p id="time-6"></p>

  <h2> Cycle 7 :  for(var i=0,el;el = divs[i++];){ } <span class="red"> Sequence </span></h2>
  <p id="time-7"></p>
 </body>
</html>

Thank you for reading, hope to help everyone, thank you for your support to this site!

Related articles: