一、HTML
渲染页面过程
- 浏览器获取到
html
代码解析成DOM
树:html
中每一个tag
都是DOM
中的一个子节点,根节点就是document
对象。DOM
树里包含了所有的html
标签,包括display:none
隐藏的标签、js
动态添加的元素等 - 浏览器整理样式:首先解析所有样式(用户自定义的和用户代理的),解析成样式结构体,再解析的过程中会去掉浏览器不能识别的样式,比如
ie
去掉-moz
开头的样式,firefox
去掉-ms
开头的样式等 DOM
树 + 样式结构体 组合成render
树:render
树类似DOM
树,但区别很大;render
树可以识别样式,每一个node
中都有自己的style
,而且render
树不包含隐藏的节点比如display:none
的节点、head
节点,因为这些节点不会呈现也不影响其他node
的呈现,所以不被包含;但是visibility:hidden
会被包含。根据css2
的标准,render
树中的每一个节点都被成为Box
,理解页面元素为一个具有填充、边距、边框和位置的盒子Painting
:浏览器根据render
树绘制页面
二、回流和重绘
回流:当render
树中因为元素的大小、定位布局、隐藏等发生改变而需要重新构建的,称为回流reflow
;每个页面至少需要回流一次,就是在页面第一次加载的时候,在回流的时候,浏览器会使渲染树中受到影响的部分失效,并重新构造这部分渲染树,完成回流之后,再重新绘制
重绘:当render
树中因为元素的一些属性发生更改比如**color
、background-color
等只影响元素的外观风格而不是影响布局时**需要重新绘制,称为重绘
回流必会引起重绘,重绘不一定会引起回流
引起回流
- 添加或者删除可见的
DOM
元素 - 元素位置改变
- 元素尺寸改变-边距、填充、边框、宽度、高度
- 内容改变-比如文本的改变或者图片大小的改变引起计算值宽高度的变化
- 页面渲染初始化
- 浏览器窗口大小的改变-比如
resize
事件发生
引起重绘
- 元素背景颜色改变
- 元素字体颜色改变
- 元素边框颜色等改变
三、优化(减少回流和重绘)
- 合并多次
DOM
和样式修改 - 尽量不要使用
table
布局:因为某一元素的变化可能使整个table
回流 - 将需要多次重排回流的元素设置
position
为absoluted
或者fixed
,因为脱离了文档流,变化不会引发回流 - 动画的实现也最好使用
absoluted
或者fixed
定位