cssTextの性能が高いことを事実で証明する
4369 ワード
まずEtherDreamの異なる観点に感謝し、巧みにcssText属性で一括操作スタイル編で彼の疑問の態度で私はさらなるテストをした.
テスト1,テスト2はそれぞれ2000個のdivをページに追加した.
テスト1は、次の3行のコードを使用します.
テスト2はcssText行で行います
私と同じようにcssTextはreflowを1回しか使わないと聞いたり、テスト1(reflow 3回)のページレンダリングよりもパフォーマンスが高いと思ったりするかもしれません.事実は確かにそうです.テストの結果を見てください.
IE6
IE7
IE8
IE9
Firefox
Chrome
Safari
Opera
テスト1
75
68
28
32
857
31
26
20
テスト2
47
39
25
24
308
27
17
21
以上から、すべてのブラウザで複数のスタイルが操作する場合style.cssTextの効率はstyleより高い.width/height/background-color.数量を2000から5000に変更すれば、効果はさらに顕著になります.したがって、複数のスタイルを操作する場合は、cssTextを使用することをお勧めします.もちろん、以上は1回のテスト結果を記録するだけで、2回以上試してもいいです.クリックテストの単一性を保証するために、測定ごとに次のページをリフレッシュすることをお勧めします.
以上のデータから、以下の結果を得ることができます.
1,IEはバージョンが上がるにつれて、両者の効率はますます近づいてきた.
2,Firefoxは両者の性能差が大きい.
3,Chrome/Safari/Operaでは両者の性能差が小さく,Operaではたまにテスト2の効率がテスト1より低い.
4、テスト1にかかわらず、テスト2.Firefoxの効率は他のブラウザよりも低く、IE 6も含まれています.これはめがねを落とす.
ここをクリックすると、直接テストできます.
||
||
//<![CDATA[
var container = document.getElementById('container');
function appendElement(){
var ary = [];
container.innerHTML = '';
for(var i=0;i<=2000;i++){
var div = document.createElement('div');
ary.push(div);
container.appendChild(div);
}
return ary;
}
function stop(){
container.innerHTML = '';
}
function test1(){
var ary = appendElement();
var d1 = new Date;
for(var j=0;j<ary.length;j++){
var sty = ary[j].style;
sty.width = '50px';
sty.height = '50px';
sty.backgroundColor = 'gold';
}
var d2 = new Date;
alert('消費時間:'+(d 2-d 1);
}
function test2(){
var ary = appendElement();
var d1 = new Date;
for(var j=0;j<ary.length;j++){
var sty = ary[j].style;
sty.cssText = 'width:50px;height:50px;background-color:red;';
}
var d2 = new Date;
alert('消費時間:'+(d 2-d 1);・13;
}
//]]>
関連:
巧みにcssText属性で一括操作スタイル
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gbk">
<title> cssText </title>
</head>
<body>
<input type="button" value=" 1" onclick="test1()"/> ||
<input type="button" value=" 2" onclick="test2()"/>
<div id="container"></div>
<script>
var container = document.getElementById('container');
function appendElement(){
var ary = [];
container.innerHTML = '';
for(var i=0;i<=2000;i++){
var div = document.createElement('div');
ary.push(div);
container.appendChild(div);
}
return ary;
}
function test1(){
var ary = appendElement();
var d1 = new Date;
for(var j=0;j<ary.length;j++){
var sty = ary[j].style;
sty.width = '50px';
sty.height = '50px';
sty.backgroundColor = 'gold';
}
var d2 = new Date;
alert(' ：' + (d2-d1));
}
function test2(){
var ary = appendElement();
var d1 = new Date;
for(var j=0;j<ary.length;j++){
var sty = ary[j].style;
sty.cssText = 'width:50px;height:50px;background-color:red;';
}
var d2 = new Date;
alert(' ：' + (d2-d1));
}
</script>
</body>
</html>テスト1,テスト2はそれぞれ2000個のdivをページに追加した.
テスト1は、次の3行のコードを使用します.
sty.width = '50px';
sty.height = '50px';
sty.backgroundColor = 'gold';
テスト2はcssText行で行います
sty.cssText = 'width:50px;height:50px;background-color:red;';
私と同じようにcssTextはreflowを1回しか使わないと聞いたり、テスト1(reflow 3回)のページレンダリングよりもパフォーマンスが高いと思ったりするかもしれません.事実は確かにそうです.テストの結果を見てください.
IE6
IE7
IE8
IE9
Firefox
Chrome
Safari
Opera
テスト1
75
68
28
32
857
31
26
20
テスト2
47
39
25
24
308
27
17
21
以上から、すべてのブラウザで複数のスタイルが操作する場合style.cssTextの効率はstyleより高い.width/height/background-color.数量を2000から5000に変更すれば、効果はさらに顕著になります.したがって、複数のスタイルを操作する場合は、cssTextを使用することをお勧めします.もちろん、以上は1回のテスト結果を記録するだけで、2回以上試してもいいです.クリックテストの単一性を保証するために、測定ごとに次のページをリフレッシュすることをお勧めします.
以上のデータから、以下の結果を得ることができます.
1,IEはバージョンが上がるにつれて、両者の効率はますます近づいてきた.
2,Firefoxは両者の性能差が大きい.
3,Chrome/Safari/Operaでは両者の性能差が小さく,Operaではたまにテスト2の効率がテスト1より低い.
4、テスト1にかかわらず、テスト2.Firefoxの効率は他のブラウザよりも低く、IE 6も含まれています.これはめがねを落とす.
ここをクリックすると、直接テストできます.
||
||
//<![CDATA[
var container = document.getElementById('container');
function appendElement(){
var ary = [];
container.innerHTML = '';
for(var i=0;i<=2000;i++){
var div = document.createElement('div');
ary.push(div);
container.appendChild(div);
}
return ary;
}
function stop(){
container.innerHTML = '';
}
function test1(){
var ary = appendElement();
var d1 = new Date;
for(var j=0;j<ary.length;j++){
var sty = ary[j].style;
sty.width = '50px';
sty.height = '50px';
sty.backgroundColor = 'gold';
}
var d2 = new Date;
alert('消費時間:'+(d 2-d 1);
}
function test2(){
var ary = appendElement();
var d1 = new Date;
for(var j=0;j<ary.length;j++){
var sty = ary[j].style;
sty.cssText = 'width:50px;height:50px;background-color:red;';
}
var d2 = new Date;
alert('消費時間:'+(d 2-d 1);・13;
}
//]]>
関連:
巧みにcssText属性で一括操作スタイル