DOM编程 --《高性能JavaScript》

Posted 2020-10-12 im.lhc

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.使用事件委托来减少事件的处理数量。