页面渲染及性能优化

页面渲染的过程

• 构建DOM树
  • 解析HTML，创建DOM树，解析过程:
    1. 如果遇到link & style，就会去下载这些外部的css资源,但是css跟DOM的构建是并行的，不会阻塞DOM树的构建。
    2. 遇到script标签,页面就会将控制权交给js,直到js脚本加载完毕或者是执行完毕。会造成页面阻塞
    3. 页面的渲染是靠render树，如果css没有加载完成，页面也不会渲染显示。
    4. js执行过程中可能需要改变样式，所以css加载也会阻塞js的加载。
• 构建CSS树
  • 解析CSS
• DOM树 和CSS树 合并为Render树
  • 浏览器就知道了有哪些节点、各个节点的css定义以及他们的从属关系
• 布局
  • 通过render树，浏览器开始计算各个节点的位置和样式
• 绘制paint
  • 遍历render树，在页面上绘制每个节点
• 重排reflow
  • 比如改变样式或添加节点，render树重新计算
  • 触发重排的属性:
    • 盒子模型相关属性

    * width
    * height
    * padding
    * margin
    * display
    * border-width
    * border
    * min-height
    

    • 定位属性及浮动

        * top
    * bottom
    * left
    * right
    * position
    * float
    * clear
    

    • 改变节点内部文字结构

    * text-align
    * overflow-y
    * font-weight
    * overflow
    * font-family
    * line-height
    * vertival-align
    * white-space
    * font-size
    

    display: none; 会引起一次重排和重绘, visibility: hidden; 只会引起一次重绘(因为他只是把那个层隐藏了，但是还占据空间存在着)

• 重绘repaint
  • 重排之后就得重绘
  • 只发生重绘的属性:

  * color
  * border-style
  * border-radius
  * visibility
  * text-decoration
  * background
  * background-image
  * background-position
  * background-repeat
  * background-size
  * outline-color
  * outline
  * outline-style
  * outline-width
  * box-shadow
  

这样可以看到，这些属性都不会修改节点的大小和位置，自然不会触发重布局，但是节点内部的渲染效果进行了改变，所以只需要重绘就可以了

手机重绘也很慢
在重绘时，这些节点会被加载到GPU中进行重绘，这对移动设备如手机的影响还是很大的。因为CPU不如台式机或笔记本电脑，所以绘画的时间更长。而且CPU与GPU之间的有较大的带宽限制，所以纹理的上传需要一定时间

通过触发图层重组来避免重绘

1. 透明度(opacity)不会触发重绘？
   • 原因: 实际上透明度的改变后，GPU在绘画时只是简单的降低之前已经画好的纹理的alpha值来达到效果，并不需要整体的重绘。
   • 注意: 前提是这个被修改opacity本身必须是一个图层，如果图层下还有其他节点，GPU也会将他们透明化
2. 强迫浏览器创建图层(Blink & webkit)
   • 方法:
     • translateZ(0)
     • translate3d(0,0,0)
   • 优点: 这种方式可以消除在动画开始之前的图层创建时间(提前启动GPU)，使得动画尽管开始(创建图层和绘制图层还是比较慢的)
   • 缺点:
3. 最佳选择---transform
   • 我们一般都会使用left & top属性来修改节点位置，但是如上所述会造成重绘&重排，性能代价相当大。所以取而代之更好的方法是用transform，不回触发重排

扩展理解图层的概念

浏览器在渲染一个页面时，会将页面分为很多个图层，图层有大有小，每个图层上有一个或多个节点。在渲染DOM的时候，浏览器所做的工作实际上是：

1. 获取DOM后分割为多个图层
2. 对每个图层的节点计算样式结果（Recalculate style--样式重计算）
3. 为每个节点生成图形和位置（Layout--回流和重布局）
4. 将每个节点绘制填充到图层位图中（Paint Setup和Paint--重绘）
5. 图层作为纹理上传至GPU
6. 符合多个图层到页面上生成最终屏幕图像（Composite Layers--图层重组）

Chrome中满足以下任意情况就会创建图层：

• 3D或透视变换（perspective transform）CSS属性
• 使用加速视频解码的<video>节点
• 拥有3D（WebGL）上下文或加速的2D上下文的<canvas>节点
• 混合插件（如Flash）
• 对自己的opacity做CSS动画或使用一个动画webkit变换的元素
• 拥有加速CSS过滤器的元素
• 元素有一个包含复合层的后代节点（一个元素拥有一个子元素，该子元素在自己的层里）
• 元素有一个z-index较低且包含一个复合层的兄弟元素（换句话说就是该元素在复合层上面渲染）

需要注意的是，如果图层中某个元素需要重绘，那么整个图层都需要重绘。比如一个图层包含很多节点，其中有个gif图，gif图的每一帧，都会重回整个图层的其他节点，然后生成最终的图层位图。所以这需要通过特殊的方式来强制gif图属于自己一个图层（translateZ(0)或者translate3d(0,0,0)），CSS3的动画也是一样（好在绝大部分情况浏览器自己会为CSS3动画的节点创建图层)

图层和CSS动画

gif或者动画运动过程，每一帧可能需要做如下工作:

1. 计算需要被加载到节点上的样式结果（Recalculate style--样式重计算）
2. 为每个节点生成图形和位置（Layout--回流和重布局）
3. 将每个节点填充到图层中（Paint Setup和Paint--重绘）
4. 组合图层到页面上（Composite Layers--图层重组）

所以提高动画的性能，就是减少它做的工作。最好的情况是，将它所有的变化映射到属于动画或gif的图层，变化(transform) & 透明度 (opacity)就属于这种情况。

现代浏览器如Chrome，Firefox，Safari和Opera都对变换和透明度采用硬件加速，但IE10+不是很确定是否硬件加速

前瞻

Google目前正在探究通过JS的多线程（Web Workers）来提供更好的动画效果，而不会触发重布局及样式重计算

结论

动画给予了页面丰富的视觉体验。我们应该尽力避免使用会触发重布局和重绘的属性，以免失帧。最好提前申明动画，这样能让浏览器提前对动画进行优化。由于GPU的参与，现在用来做动画的最好属性是如下几个：

• opacity
• translate
• rotate
• scale