Normalerweise müssen wir die Funktion optimieren, indem wir die Zeit am Anfang und am Ende ermitteln. Die aufgewendete Zeit kann durch Subtrahieren der beiden Zeiten ermittelt werden. Die Funktion läuft so schnell, im Grunde genommen in Millisekunden.
Die unten aufgeführten Funktionen sind hierfür vorbereitet.
// 时间转为时间戳(毫秒) function time2stamp(){ var d = new Date(); return Date.parse(d)+d.getMilliseconds(); }
Verwendung:
var t1 = time2stamp(); // 比较各游览器的DOM运行速度。 var divs = document.getElementByTagName("div"); var t2 = time2stamp(); alert("耗时:" + (t2 - t1) + " 毫秒");
Neue Methode:
var time1 = new Date // 比较各游览器的DOM运行速度。 var divs = document.getElementByTagName("div"); alert("耗时:" + (new Date - time1) + " 毫秒");
Testen Sie die Effizienz verschiedener Schleifen, langsamer Schleifen wie for...in Etwas Unerwartetes ist passiert !
<!doctype html> <html dir="ltr"> <head> <meta charset="utf-8"/> <title>类</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 = "第一重div<div>第二重div<div>第三重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>遍历页面上12000个DIV</li> </ul> <input id="start-test" type="button" value="Start test"> <h2>循环1: var i = -1, n = divs.length;while (++i < n) { }<span>顺序</span></h2> <p id="time-1"></p> <h2>循环2:var n = divs.length; while (--n >= 0) { }<span>倒序</span></h2> <p id="time-2"></p> <h2>循环3:for (var i=0, n=divs.length; i<n; i++)<span>顺序</span></h2> <p id="time-3"></p> <h2>循环4:for (var n = divs.length - 1; n >= 0; n--) { }<span>倒序</span></h2> <p id="time-4"></p> <h2>循环5:for (var n = divs.length - 1; n--;) { }<span>倒序</span></h2> <p id="time-5"></p> <h2>循环6: var n = divs.length-1; do { } while (n--)<span>倒序</span></h2> <p id="time-6"></p> <h2>循环7: for(var i=0,el;el = divs[i++];){ } <span>顺序</span></h2> <p id="time-7"></p> </body> </html>
Vielen Dank fürs Lesen, ich hoffe, es kann Ihnen helfen, vielen Dank für Ihre Unterstützung dieser Website!
Weitere Artikel zur JSP-Implementierung der Back-Methode im IE finden Sie auf der chinesischen PHP-Website!