[TOC]
浏览器渲染原理
网页的解析过程
- 输入 URL
- 域名解析
- 下载 html 文件
浏览器渲染流程
浏览器内核
- Trident(三叉戟)IE 360 搜狗，百度，uc 浏览器
- Gecko(壁虎)Firefox
- Presto(羁绊乐曲) -> Blink(眨眼)：Opera
- WebKit: safari,360 极速。。。
- webkit-Blink: chrome,Edge
一，HTML 解析过程
- 默认情况下服务器会给浏览器返回 index.html 文件，所以解析 HTML 是所有步骤的开始
- 解析 HTML，构建 DOM Tree
二，生成 css 规则
- 下载 css 文件不会阻塞 html 解析
- 浏览器下载完 CSS 文件后，就会对 css 文件进行解析，解析出对应的规则树
三，构建 Render Tree DOM Tree 和 CSS Tree 不一定一一对应 link 元素不会阻塞 DOM Tree 的构建过程，但是会阻塞 Render Tree 的构建过程
四，布局和绘制 在渲染树上运行布局以计算每个节点的几何体
- 渲染树会表示显示哪些节点以及其他样式，但是不表示每个节点的尺寸，位置等信息；
- 布局是确定呈现树中所有节点的宽度，高度和位置等信息
五，将每个节点绘制到屏幕上
- 在绘制阶段，浏览器将布局阶段计算的每个 frame 转为屏幕上实际的像素点;
- 包括将元素的可见部分进行绘制，比如文本，颜色，边框，阴影，替换元素（比如 img）
回流和重绘解析
回流（重排）
- 第一次确定节点的大小和位置，称之为布局（layout）
- 之后对节点的大小，位置修改重新计算称之为回流
引起回流的情况
- 比如 DOM 结构发生改变（添加新的节点或者删除节点）
- 比如改变了布局（修改了 width,height,padding,font-size 等值）
- 比如窗口 resize(修改了窗口的尺寸等)
- 比如调用 getComputedStyle 方法获取尺寸，位置信息(在浏览器没有优化的情况下调用 getComputedStyle 时会重新计算 frames,引起回流)，非常消耗性能
重绘（性能消耗比较小）
- 修改颜色等样式
避免重排
- 修改样式尽量一次性修改
比如通过 cssTest 修改，比如通过添加 class 修改
- 尽量避免频繁的操作 dom
我们可以在一个 DocumentFragment 或者 父元素中将要操作的 DOM 操作完成，在一次性的操作
- 尽量避免通过 getComputedStyle 获取尺寸，位置等信息
- 对某些元素使用 position 的 absolute 或者 fixed
并不是不会引起回流，而是开销相对较小，不会对其他元素造成影响
合成和性能优化
特殊解析 composite 合成
- 绘制的过成，可以将布局后的元素绘制到多个合成图层中
- 这是浏览器的一种优化手段
- 默认情况下，标准流中的内容都是被绘制在同一个图层中的
- 而一些特殊的属性，会创建一个新的合成层，并且新的图层可以利用 GPU 来加速绘制
- 因为每个合成层都是单独渲染的
形成新的合成层的属性
- 3D transforms
- video,canvas,iframe
- opacity 动画转换时
- position:fixed
- will-change 一个实验属性，提前告诉浏览器元素可能发生哪些变化
- animation 或 transition 设置了 opacity ,transform
defer 和 async 属性
script 元素和页面解析的关系
- 浏览器在解析 html 的过程中，遇到了 script 元素是不能继续构建 DOM 元素的
- 他会停止继续构建，首先下载 javascript 代码，并且执行 javascript 脚本
- 只有等到 javascript 脚本执行结束后，才会继续解析 HTML,构建 DOM 树
defer 属性 保证编写顺序 建议放到 header 中（提前让浏览器下载） 仅限于外部脚本
- 告诉浏览器不要等待脚本下载，而继续解析 HTML,构建 DOM Tree
脚本会由浏览器来进行下载，但是不会阻塞 DOM Tree 的构建过程 如果脚本提前下载好了，他会等待 DOM Tree 构建完成，在 DOMContentLoaded 事件之前先执行
async 属性 执行时间不受限制 操作比较危险 不能保证 script 执行顺序 async 不会保证在 DOMContentLoaded 之前或者之后执行
- 特性与 defer 作用类似
- 不保证顺序
