事実を使用して、js_javascript スキルにおける cssText の高いパフォーマンスを証明する

コードをコピー コードは次のとおりです。 ; ; || コンテナ' ); 関数 appendElement(){ var ary = []; for(var i=0;i var div = document.createElement('div'); ary.push(div); } 戻り値>関数 test1(){ var ary = appendElement(); var d1 = 新しい日付; for(var j=0;j ary[j ].style.width = '50px'; ary[j].style.height = 'gold'; d2 = 新しい日付; console.log('時間がかかります:' (d2-d1)); 関数 test2(){ var ary = appendElement(); d1 = 新しい日付; for(var j=0;j var sty = ary[j].style; sty.cssText = 'width:50px;height; :50px ;背景色:赤;'; } var d2 = 新しい日付; console.log('時間がかかります:' (d2-d1));

テスト 1 とテスト 2 は両方とも 1000 div をページに追加します。

テスト 1 次の 3 行のコードを使用します

コードをコピーします

コードは次のとおりです:

ary[j].style.width = '50px'; ary[j].style.height = '50px'; ary[j].style.backgroundColor = 'gold ';

テスト 2 cssText を使用して 1 行で実行します コードをコピーします は次のとおりです:

sty .cssText = 'width:50px;height:50px;background-color:red;';

テスト 1 とテスト 2 はどちらも 1000 div をページに追加します。 テスト 1 次の 3 行のコードを使用します コードをコピーします コードは次のとおりです:

ary[ j].style.width = '50px'; ary[j].style.height = '50px'; ary[j].style.backgroundColor = 'gold';

テスト 2 cssText を使用して 1 行で実行します

コードをコピーします コードは次のとおりです:

sty.cssText = 'width:50px;height:50px;background-color:red;';

テストコード:

直接テストするにはここをクリックしてください: || ||

[Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、更新して実行する必要があります

]