共计 1446 个字符，预计需要花费 4 分钟才能阅读完成。
浏览器次要组成
浏览器是多过程的，一个页面从申请到渲染，是多个过程在同时进行，这些过程次要由以下的组件产生。
浏览器次要组成：
- 用户界面（The user interface）
- 浏览器引擎（The browser engine）
- 渲染引擎（The rendering engine）
- 网络（Networking）
- UI 后端绘制（UI backend）
- js 解析器（JavaScript interpreter）
- 数据存储（Data storage）
渲染引擎
渲染引擎次要渲染 html、css、图片 等内容。 不同浏览器的渲染机制有差别。
渲染步骤
浏览器渲染网页的过程，次要有以下几个步骤
- 解析 HTML，生成 DOM 树
- 构建 DOM 树：此时只有形态和色彩等属性
- 渲染树结构：给每个节点都加上坐标，形成显示布局
- 绘制树：给节点加上 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、如何缩小重排？
- 不要一条一条地批改 DOM 的款式，事后定义好 class，而后批改 DOM 的 className
- 把 DOM 离线后批改，比方：先把 DOM 给 display:none (有一次 Reflow)，而后你批改 100 次，而后再把它显示进去
- 不要把 DOM 结点的属性值放在一个循环里当成循环里的变量
- 尽可能不要批改影响范畴比拟大的 DOM
- 为动画的元素应用相对定位 absolute / fixed
- 不要应用 table 布局，可能很小的一个小改变会造成整个 table 的从新布局
参考文章：
- How Browsers Work: Behind the scenes of modern web browsers
- css 重排和重绘总结
- 你真的理解回流和重绘吗
正文完
