1.页面渲染过程
解析HTML构建 DOM Tree
解析CSS构建 CSSOM Tree
构建渲染树(Render Tree)
根据Render Tree渲染网页节点实现布局
2.什么是回流和重绘
2.1回流
当渲染树render tree
中的一部分因为元素的规模尺寸,布局,隐藏等,而需要重新构建。
在回流的时候,浏览器会使渲染树中受到影响的部分失效,并重新构造这部分渲染树,完成回流后,浏览器会重新绘制受影响的部分到屏幕中,该过程称为重绘
回流代价远大于重绘,回流必然发生重绘,而重绘不一定发生回流
回流就是计算元素在设备内确切的位置和大小并且重新绘制
导致回流操作(影响布局):
页面首次渲染
浏览器窗口大小发生变化(resize事件)
元素尺寸或位置发生改变(边距,宽高,边框)
元素内容变化(文字数量或图片大小)
添加或者删除可见的DOM元素
激活CSS伪类
查询某些属性或调用某些方法
width,heigth,margin,padding,display,font-size…
2.2 重绘
当渲染树render tree
中的一些元素需要更新样式,但这些央视属性只改变元素的外观,风格而不影响布局,就成为重绘(repaint)
导致重绘操作(不影响布局):
color,background…
2.3 为什么不建议频繁操作DOM?
浏览器线程中DOM和JS的实现,并不是在同一个引擎中完成的。通过JS操作DOM涉及到两个线程之间的通信,损耗性能
3.浏览器的优化机制
由于每次回流(重排)都会造成额外的计算小号,因此大多数浏览器都会通过队列化修改并批量执行来优化重排搓成。浏览器会将修改操作放入到队列里,直到过了一段时间或者操作达到一个阈值,才会进行批量修改并且清空队列。
4.优化回流重绘
1.合并对DOM样式的修改(class)
- 避免使用table布局
- CSS尽可能扁平化
- 如果需要对DOM进行多次访问,尽量使用局部变量缓存该DOM
2.DOM离线处理
- display:none仅触发一次回流(visibility : hidden 的元素只对重绘有影响,不影响重排)
- 通过 documentFragment 创建一个 dom 文档片段进行批量操作
- 克隆节点,修改完再替换原始节点
3.DOM脱离普通文本流
- 使用
absoult
或fixed
让元素脱离普通文档流
4.CSS3硬件加速
transform
opacity
filters
Will-change