浏览器的关键渲染路径

浏览器从输入url到页面展示，中间发生了什么

1. DNS 解析:将域名解析成 IP 地址
2. TCP 连接：TCP 三次握手
3. 发送 HTTP 请求
4. 服务器处理请求并返回 HTTP 报文
5. 浏览器解析渲染页面（如何渲染）
   1. 构建dom文档对象
   2. 获取外部资源
   3. 构建css文档对象
   4. 执行javascript，启动事件循环
   5. 合并dom，css文档对象，生成渲染树
   6. 计算布局和绘制（触发重绘和回流）
6. 断开连接：TCP 四次挥手

load事件和DOMConentLoaded事件的区别

• load事件指dom、css、js、图片等资源全部加载完成
• DOMConentLoaded指dom元素加载完成，其他资源不一定加载完成

图层

通常渲染dom时只有一个图层，但当满足特定情况时，会渲染多个图层

渲染DOM时的实际情况

1. 获取dom后查看是否需要分割为多个图层
2. 对每个图层的元素计算样式结果（Recalculate style）
3. 为每个元素生成图形和位置（Layout--重排,回流）
4. 将元素绘制填充到图层位图中（Paint--重绘）
5. 图层作为纹理提交给gpu，gpu组合图层渲染到页面

创建新图层的条件

1. 具有3D变换的CSS属性：transform:translateZ(0)
2. video、canvas元素
3. iframe元素
4. css animation元素
5. 拥有css加速属性的元素：will-change

调试工具查看图层

1. more tools
2. layouts

重绘和重排（回流）

• 重绘：当一个元素的布局不变，外观发生改变时
• 回流：当改变一个页面的布局时就会发生回流，在获取某些属性时也会触发重排

减少重绘和重排：

• 减少DOM操作，多次使用时缓存DOM元素
• 减少获取某些属性，将他们缓存起来使用
• 使用动画时，使元素脱离文档流
• 使用css3硬件加速，下列属性将触发硬件加速
  • transform
  • opacity
  • filters
  • will-change