DOM優化 筆記

webilt型別的瀏覽器 dom 方法要比 innerhtml 要好，而別的瀏覽器則是innerhtml效能要比dom要好。

儘量減少dom操作：節點轉殖，訪問元素集合（盡量使用區域性變數），元素節點，選擇器api

console.time('hello3');

var oli = document.createelement('li');
for(var i = 0; i<80000;i++)
console.timeend('hello3');

var oli = document.getelementbyid("#li");

var ospan = document.getelementbyid("#span");
...可以改寫成
var doc = document;
var oli = doc.getelementbyid("#li");
var ospan = doc.getelementbyid("#span");

var oul = documen.getelemntbyid('ul');

var ali  = oul.getelementsbytagname('li);
可以改寫成
var ali = document.queryselectorall('
#ull li');

window.onload = function()

console.timeend('hello1');
console.time('hello2');
for (var i = 0 ;i<20000;i++)
oul.innerhtml = str;
console.timeend('hello2');
console.time('hello3');
var oli = document.createelement('li');
oli.innerhtml = "li";
for(var i = 0; i<20000;i++)
console.timeend('hello3');
console.time('hello4');
var frag = document.createdocumentfragment();
var li = document.createelement('li');
for( var i=0 ;i<20000;i++)
console.timeend('hello4');
console.time('hello5');
var frag = document.createdocumentfragment();
var li = document.createelement('li');
for( var i=0 ;i<20000;i++)
console.timeend('hello5');
};

li.style.csstext = 'width:100px;height:100px';

DOM優化方案

重繪是指一些樣式的修改，元素的位置和大小都沒有改變 重排是指元素的位置或尺寸發生了變化，瀏覽器需要重新計算渲染樹，而新的渲染樹建立後，瀏覽器會重新繪製受影響的元素。去參加面試總會被問到乙個問題，那就是 向瀏覽器輸入一行url會發生什麼？這個問題的答案除了要回答網路方面的知識還牽扯到瀏覽器渲染頁面問題...

DOM解析和優化

dom解析 dom優化 dom操作會導致repaint和reflow，減少repaint和reflow可以優化效能。1.合併多次dom操作為一次 element.style.bordercolor f00 element.style.borderstyle solid element.style.b...

javascript基礎六 （DOM優化）

dom優化 1 innerhtml與dom操作方法，那個效率會更高 chrome dom方法要比innerhtml的方法要好 firefox 正好相反 2 clonenode複製節點要比建立新節點，效能優化的多 3 減少dom的頻繁操作 4 新的選擇器queryselectorall dmon與瀏覽...