DOM解析和優化

看風景就發表於2017-11-06
優化

DOM解析

1. css不會阻塞DOM解析(DOM Tree)，但會阻塞DOM渲染(css Tree + DOM Tree -> render Tree )
2. JS阻塞DOM解析，但瀏覽器會預解析DOM，提前下載相關資源，img，script等

DOM優化

DOM操作會導致repaint和reflow，減少repaint和reflow可以優化效能。

1.合併多次dom操作為一次

element.style.borderColor = '#f00';
element.style.borderStyle = 'solid';
element.style.borderWidth = '1px';

變成

// 優化方案1，用+=，否則會覆蓋原有樣式
element.style.cssText += 'border: 1px solid #f00;';
// 優化方案2
element.className += 'empty';

2.使用文件片段(documentFragment)或innerHTML批量插入DOM

3.讀取DOM元素的佈局資訊，並且用變數快取，而不是在迴圈中多次讀取

for (var i=0; i < len; i++) {
    myElements[i].style.top = targetElement.offsetTop + i*5 + 'px';
}

變為

var targetTop = targetElement.offsetTop;
for (var i=0; i < len; i++) {
    myElements[i].style.top = targetTop+ i*5 + 'px';
}

4.動畫元素使用absolute定位，脫離文件，使用transform，opacity等進行動畫，不要使用left,top進行動畫

5.使用事件委託減少事件繫結

相關文章