DOM解析和优化

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.使用事件委托减少事件绑定