DOM树 :
在 DOM 树构建完成后,WebKit 会触发 “DOMContentLoaded” 事件,当所有资源都被加载完成后,会触发 “onload” 事件。
重排:(重排次数多可能会导致浏览器垮掉而页面闪烁)
完成重排后,浏览器会重新绘制受影响的部分到屏幕,该过程称为重绘。
添加或者删除可见的DOM元素
元素位置改变
元素尺寸改变
元素内容改变(例如:一个文本被另一个不同尺寸的图片替代)
页面渲染初始化(这个无法避免)
浏览器窗口尺寸改变
优化:
例子:var ele = document.getElementById('myDiv');
ele.style.borderLeft = '1px';
ele.style.borderRight = '2px';
ele.style.padding = '5px’;
优化1. 重写style
ele.style.cssText = 'border-left: 1px; border-right: 2px; padding: 5px;’;
优化2. add style
ele.style.cssText += ‘border-left: 1px;’
优化3.use class
ele.className = 'active’;
优化4.fragment:
如果添加两个子节点 先 var fragment = document.creatDocumentFragment();
将两个子节点添加到fragment.appendChild();再添加frag节点
优化5 .让动画脱离文档流
将元素设置absolute可以脱离文档流 避免大部分元素重排
总结
重排和重绘是DOM编程中耗能的主要原因之一,平时涉及DOM编程时可以参考以下几点:
1.尽量不要在布局信息改变时做查询(会导致渲染队列强制刷新)
2.同一个DOM的多个属性改变可以写在一起(减少DOM访问,同时把强制渲染队列刷新的风险降为0)
3.如果要批量添加DOM,可以先让元素脱离文档流,操作完后再带入文档流,这样只会触发一次重排(fragment元素的应用)