DOM编程 --《高性能JavaScript》

标签：--   大小   节点   dom   委托   order   删除   浏览器   解析   

1.重绘和重排

　　浏览器下载完页面的所有组件 —— HTML标记，CSS，JavaScript，图片，会解析并生成两个内部数据结构。

　　DOM树

　　　　表示页面结构

　　渲染树（CSS）

　　　　表示DOM节点如何显示

　　当DOM变化影响了元素的几何属性（宽和高）会发生重新构造渲染树，进而进行重绘。

2.重排何时发生

　　1.添加或删除可见的DOM元素

　　2.元素的位置改变

　　3.元素尺寸的改变（外边距，内边距，宽，高，border等）

　　4.内容改变

　　5.页面的渲染器初始化

　　6.浏览器的窗口大小改变

3.最小化重排和重绘

　　1.使用绝对位置定位页面上的动画元素，使元素脱离文档流

　　2.对其应用多重改变

　　3.把元素带回文档中

4.总结

　　1.最小化DOM访问次数，尽可能在JavaScript端处理

　　2.如果需要多次访问某个DOM节点，使用局部变量存储起来

　　3.要留意重绘和重排

　　4.动画中使用绝对定位，使用拖放代理

　　5.使用事件委托来减少事件的处理数量。

DOM编程 --《高性能JavaScript》

标签：--   大小   节点   dom   委托   order   删除   浏览器   解析   

原文地址：http://www.cnblogs.com/linwx/p/7749832.html