浏览器组成与渲染-重绘与重排总结

浏览器主要组成

浏览器是多进程的，一个页面从请求到渲染，是多个进程在同时进行，这些进程主要由以下的组件产生。

浏览器主要组成：

• 用户界面（The user interface）
• 浏览器引擎（The browser engine）
• 渲染引擎（The rendering engine）
• 网络（Networking）
• UI 后端绘制（UI backend）
• js 解析器（JavaScript interpreter）
• 数据存储（Data storage）

渲染引擎

渲染引擎主要渲染 html 、css 、图片 等内容。不同浏览器的渲染机制有差异。

渲染步骤

浏览器渲染网页的过程，主要有以下几个步骤

1. 解析HTML，生成 DOM 树
2. 构建 DOM 树：此时只有形状和颜色等属性
3. 渲染树结构：给每个节点都加上坐标，构成显示布局
4. 绘制树：给节点加上 UI 样式，进行绘制显示

下图是 webkit 内核（chrome） 的渲染流程：

重绘和重排

• 重绘：当元素外观的改变时触发。如改变vidibility、outline、背景色等属性。
• 重排/回流：当元素的位置和几何信息改变时触发。如改变窗口大小、元素的width、height、position 等。

重排处于layout阶段、重绘处于paint阶段，越往前损耗越高，所以重排会比重绘要消耗性能。

注意：重排一定会触发重绘，而重绘不一定会重排。

重绘（repaint）

1. 导致 repaint 的操作：

• 所有改变元素外观的操作：color、background、box-shadow 等。

2. 常见的引起 repaint 的元素

常见 repaint 元素
color	border-style	visibility	background
text-decoration	background-image	background-position	background-repeat
outline-color	outline	outline-style	border-radius
outline-width	box-shadow	background-size

重排/回流（reflow）

1、导致 reflow 的操作：

• 改变窗口大小
• 改变文字大小
• 添加/删除样式表
• 内容的改变，(用户在输入框中写入内容也会)
• 激活伪类，如:hover
• 操作class属性
• 脚本操作DOM
• 计算offsetWidth和offsetHeight
• 设置style属性
• ...

2、常见的引起的 reflow 元素

常见 reflow 元素
width	height	padding	margin
display	border-width	border	top
position	font-size	float	text-align
font-family	line-height	vertical-align	right
clear	white-space	bottom	min-height

3、如何减少重排？

1. 不要一条一条地修改 DOM 的样式，预先定义好 class，然后修改 DOM 的 className
2. 把 DOM 离线后修改，比如：先把 DOM 给 display:none (有一次 Reflow)，然后你修改100次，然后再把它显示出来
3. 不要把 DOM 结点的属性值放在一个循环里当成循环里的变量
4. 尽可能不要修改影响范围比较大的 DOM
5. 为动画的元素使用绝对定位 absolute / fixed
6. 不要使用 table 布局，可能很小的一个小改动会造成整个 table 的重新布局

参考文章：

• How Browsers Work: Behind the scenes of modern web browsers
• css 重排和重绘总结
• 你真的了解回流和重绘吗