1. 网页解析的过程
- 输入URL地址后, 下载index.html文件
- 解析html文件,遇到css或者js文件,再下载
2. 浏览器的内核
常见的浏览器内核有
- Trident （ 三叉戟）：IE、360安全浏览器、搜狗高速浏览器、百度浏览器、UC浏览器；
- Gecko（ 壁虎） ：Mozilla Firefox；
- Presto（急板乐曲）-> Blink （眨眼）：Opera
- Webkit ：Safari、360极速浏览器、搜狗高速浏览器、移动端浏览器（Android、iOS）
- Webkit -> Blink ：Google Chrome，Edge
经常说的浏览器内核指的是浏览器的排版引擎：
排版引擎（layout engine），也称为浏览器引擎（browser engine）、页面渲染引擎（rendering engine）或样版引擎。
3. 解析引擎的工作流程
4. 渲染页面的详细流程
5. HTML解析过程
默认情况下服务器会给浏览器返回index.html文件，所以解析HTML是所有步骤的开始：
解析HTML，会构建DOM Tree：
6. 解析css规则
解析的html过程中，如果遇到CSS的link元素，那么会由浏览器负责下载对应的CSS文件：
- 注意：下载CSS文件是不会影响DOM的解析的；
解析出对应的规则树：称之为 CSSOM（CSS Object Model，CSS对象模型）；
7. 构建Render Tree
1. 注意一：link元素不会阻塞DOM Tree的构建过程，但是会阻塞Render Tree的构建过程
- 这是因为Render Tree在构建时，需要对应的CSSOM Tree；
2. 注意二：Render Tree和DOM Tree并不是一一对应的关系，比如对于display为none的元素，压根不会出现在render tree中；
8. 布局（layout）和绘制（Paint）
在渲染树（Render Tree）上运行布局（Layout）以计算每个节点的几何体。
渲染树会表示显示哪些节点以及其他样式，但是不表示每个节点的尺寸、位置等信息；
布局是确定呈现树中所有节点的宽度、高度和位置信息；
在绘制阶段，浏览器将布局阶段计算的每个frame转为屏幕上实际的像素点；
包括将元素的可见部分进行绘制，比如文本、颜色、边框、阴影、替换元素（比如img）
8. 回流和重绘
8.1 理解回流reflow：（也可以称之为重排）
第一次确定节点的大小和位置，称之为布局（layout）。
之后对节点的大小、位置修改重新计算称之为回流。
8.2 什么情况下引起回流?
- 比如DOM结构发生改变（添加新的节点或者移除节点）；
- 比如改变了布局（修改了width、height、padding、font-size等值）
- 比如窗口resize（修改了窗口的尺寸等）
- 比如调用getComputedStyle方法获取尺寸、位置信息；
8.3 理解重绘repaint：
第一次渲染内容称之为绘制（paint）。
之后重新渲染称之为重绘。
8.4 什么情况下会引起重绘？
比如修改背景色、文字颜色、边框颜色、样式等；
8.5 两者的关系
回流一定会引起重绘，所以回流是一件很消耗性能的事情
8.6 避免发生回流
- 修改样式时尽量一次性修改, 比如通过cssText修改，比如通过添加class修改
- 尽量避免频繁的操作DOM, 我们可以在一个DocumentFragment或者父元素中, 将要操作的DOM操作完成，再一次性的操作；
- 尽量避免通过getComputedStyle获取尺寸、位置等信息；
- 对某些元素使用position的absolute或者fixed
9. 特殊解析 – composite合成
默认情况下，标准流中的内容都是被绘制在同一个图层（Layer）中的；
一些特殊的属性，会创建一个新的合成层（ CompositingLayer ），并且新的图层可以利用GPU来加速绘制；
因为每个合成层都是单独渲染的；
创建新图层的常见属性：
- 3D transforms
- video、canvas、iframe
- opacity 动画转换时；
- position: fixed
- will-change：一个实验性的属性，提前告诉浏览器元素可能发生哪些变化；
- animation 或 transition 设置了opacity、transform；
分层确实可以提高性能，但是它以内存管理为代价，因此不应作为 web 性能优化策略的一部分过度使用。
