var thing = document.getElementById("first");
console.time("first");
thing.setAttribute("style", "width: 100px; height: 100px; background-color: block;");
console.timeEnd("first");
var thing3 = document.getElementById("thing-3");
console.time("green");
thing3.style.cssText = "width: 100px; height: 100px; background-color: green;";
console.timeEnd("green");
var thing = document.getElementById("thing-4");
console.time("blue");
thing.style.width = "100px";
thing.style.height = "100px";
thing.style.backgroundColor = "blue";
console.timeEnd("blue");
var thing2 = document.getElementById("thing-2");
console.time("yellow");
thing2.setAttribute("style", "width: 100px; height: 100px; background-color: yellow;");
console.timeEnd("yellow");
var thing1 = document.getElementById("thing-1");
console.time("red");
thing1.setAttribute("style", "width: 100px; height: 100px; background-color: red;");
console.timeEnd("red");
console.log('---------');
Result :
first: 0.13ms
blue: 0.11ms
yellow: 0.08ms
red: 0.06ms
心得: 第一次執行的, 都明顯偏慢. 但是當調換 thing-* 的執行順序, 結果又不近相同. 看來這種設定 css 方法, 若是多次執行, 可能會變很快吧.(ps: 謝謝提醒, 改變了做法.)
1 則留言:
這個測試很不客觀，應該要排除 getElementById 的時間
張貼留言