-
回流一定会触发重绘
- 回流: DOM结构的增删改
- 重绘: 颜色,背景, 字体等视觉上页面的改变
重绘不一定触发回流
- 如何避免?
- Display: 会影响布局,从而影响整个页面元素的位置变化, 所以会更改render树的结构
- 现将元素从document中删除, 完成修改后再把元素放回原来的位置
- 如果需要创建多个DOM节点, 可以使用documentFragment, 完成创建后一次性加入document
- 如何分辨重绘
- 改变字体
- 增加或者删除样式表
- 内容变化, 比如input框中输入文字
- 激活CSS伪类, 比如 :hover
- 脚本操作DOM (回流->重绘都会发生)
- 计算offsetWidth和offsetHeight属性
- 设置style属性的值回流