高性能JavaScriptのDOMプログラミング
9252 ワード
DOMはXMLとHTMLドキュメントを操作するためのアプリケーションインターフェースであり、シナリオでDOM操作すると高価であることを知っています.適切な比喩があります.DOMとJavaScriptはそれぞれ一つの島を想像しています.その間は有料の橋で接続しています.ECMAScriptは毎回DOMを訪問します.この橋を経由して、そして「橋を渡る費用」を納めて、DOMを訪問する回数が多いほど、費用も高くなります.そのため、橋を渡る回数をできるだけ減らして、ECMAScript島にいるようにするのがオススメです.DOMインターフェースを使わないわけにはいかないですが、どうやってプログラムの効率を上げることができますか?
1、DOMアクセスと修正
DOM元素にアクセスすると、より高価な要素の修正ができます.これはブラウザがページの幾何学的変化を再計算することにつながるからです.もちろん最悪の場合はループ中に要素にアクセスしたり、修正したりします.次の二つのコードを見てください.
2、HTML集合&エルゴードDOM
DOMを操作するもう一つの消耗点はDOMを遍歴することです.一般的に私達はHTMLの集合を収集します.例えばgetElements ByTagName()を使ったり、document.linksを使ったりします.みんなはこれに慣れていないと思います.収集の結果は、同じ配列の集合であり、「リアルタイム状態」でリアルタイムに存在しています.これは、下の文書オブジェクトが更新されると自動的に更新されることを意味します.どう言いますか?簡単に栗を挙げます.
今回の最後に2つの原生DOM方法を紹介します.querySelector()とquerySelectorAll()はみんながよく知らないと信じています.前者は一つの配列に戻ります.後者はマッチの最初の要素に戻ります.いいですよね.すべての場合、その性能は前者のHTML集合より優れています.
1、DOMアクセスと修正
DOM元素にアクセスすると、より高価な要素の修正ができます.これはブラウザがページの幾何学的変化を再計算することにつながるからです.もちろん最悪の場合はループ中に要素にアクセスしたり、修正したりします.次の二つのコードを見てください.
var times = 200;
// code1
console.time(1);
for(var i = 0; i < times; i++) {
document.getElementById('myDiv1').innerHTML += 'a';
}
console.timeEnd(1);
// code2
console.time(2);
var str = '';
for(var i = 0; i < times; i++) {
str += 'a';
}
document.getElementById('myDiv2').innerHTML = str;
console.timeEnd(2);1: 5.538ms
2: 0.111ms
2、HTML集合&エルゴードDOM
DOMを操作するもう一つの消耗点はDOMを遍歴することです.一般的に私達はHTMLの集合を収集します.例えばgetElements ByTagName()を使ったり、document.linksを使ったりします.みんなはこれに慣れていないと思います.収集の結果は、同じ配列の集合であり、「リアルタイム状態」でリアルタイムに存在しています.これは、下の文書オブジェクトが更新されると自動的に更新されることを意味します.どう言いますか?簡単に栗を挙げます.
<body>
<ul id='fruit'>
<li> apple </li>
<li> orange </li>
<li> banana </li>
<li> stabery </li>
</ul>
</body>
<script type="text/javascript"> var lis = document.getElementsByTagName('li'); var peach = document.createElement('li'); peach.innerHTML = 'peach'; document.getElementById('fruit').appendChild(peach); console.log(lis.length); // 4 </script>console.time(0);
var lis0 = document.getElementsByTagName('li');
var str0 = '';
for(var i = 0; i < lis0.length; i++) {
str0 += lis0[i].innerHTML;
}
console.timeEnd(0);
console.time(1);
var lis1 = document.getElementsByTagName('li');
var str1 = '';
for(var i = 0, len = lis1.length; i < len; i++) {
str1 += lis1[i].innerHTML;
}
console.timeEnd(1);0: 0.974ms
1: 0.664ms
console.time(1);
var lis1 = document.getElementsByTagName('li');
var str1 = '';
for(var i = 0, len = lis1.length; i < len; i++) {
str1 += lis1[i].innerHTML;
}
console.timeEnd(1);
console.time(2);
var lis2 = document.getElementsByTagName('li');
var a = [];
for(var i = 0, len = lis2.length; i < len; i++)
a[i] = lis2[i];
var str2 = '';
for(var i = 0, len = a.length; i < len; i++) {
str2 += a[i].innerHTML;
}
console.timeEnd(2);console.time(2);
var lis2 = document.getElementsByTagName('li');
var a = [];
for(var i = 0, len = lis2.length; i < len; i++)
a[i] = lis2[i];
str2 += a[i].innerHTML;
console.timeEnd(2);1: 2.615ms
2: 0.164ms
今回の最後に2つの原生DOM方法を紹介します.querySelector()とquerySelectorAll()はみんながよく知らないと信じています.前者は一つの配列に戻ります.後者はマッチの最初の要素に戻ります.いいですよね.すべての場合、その性能は前者のHTML集合より優れています.
console.time(1);
var lis1 = document.getElementsByTagName('li');
console.timeEnd(1);
console.time(2);
var lis2 = document.querySelectorAll('li');
console.timeEnd(2);
// 1: 0.038ms
// 2: 3.957msvar elements = document.querySelectorAll('#menu a');
var elements = document.querySelectorAll('div.warning, div.notice');