浅谈页面渲染

渲染

渲染引擎所做的事是将请求内容展现给我们，默认支持HTML,XML和图片类型，对于其他诸如PDF等类型的内容则需要安装相应插件，但浏览器的展示工作流程基本是一样的。

通过网络模块加载到HTML文件后渲染引擎渲染流程如下，这也通常被称作关键渲染路径（Critical Rendering Path）：

1.构建DOM树(DOM tree)：从上到下解析HTML文档生成DOM节点树（DOM tree），也叫内容树（content tree）；
2.构建CSSOM(CSS Object Model)树：加载解析样式生成CSSOM树；
3.执行JavaScript：加载并执行JavaScript代码（包括内联代码或外联JavaScript文件）；
4.构建渲染树(render tree)：根据DOM树和CSSOM树,生成渲染树(render tree)；
渲染树：按顺序展示在屏幕上的一系列矩形，这些矩形带有字体，颜色和尺寸等视觉属性。
5.布局（layout）：根据渲染树将节点树的每一个节点布局在屏幕上的正确位置；
6.绘制（painting）：遍历渲染树绘制所有节点，为每一个节点适用对应的样式，这一过程是通过UI后端模块完成；

优化渲染：
为了尽快的让用户看到页面内容，我们需要快速的完成DOM+CSSOM - Layout - Paint - Composite Layers的整个过程。一切会阻塞DOM生成，阻塞CSSOM生成的动作都应该尽可能消除，或者延迟。
分割CSS
对于不同的浏览终端，同一终端的不同模式，我们可能会提供不同的规则集：

@media print {
  html {
      font-family: 'Open Sans';
      font-size: 12px;
  }
}

@media orientation:landscape {
  //
}

如果将这些内容写到统一个文件中，浏览器需要下载并解析这些内容（虽然不会实际应用这些规则）。更好的做法是，将这些内容通过对link元素的media属性来指定

<link rel="stylesheet" type="text/css" href="print.css" media="print"/>//显示在打印机

避免嵌套css

#container p .title span {
  color: #f3f3f3;
}

使用GPU加速
很多动画都会定时执行，每次执行都可能会导致浏览器的重新布局，比如：

@keyframes my {
  20% {
      top: 10px;
  }
  
  50% {
      top: 120px;
  }
  
  80% {
      top: 10px;
  }
}

这些内容可以放到GPU加速执行（GPU是专门设计来进行图形处理的，在图形处理上，比CPU要高效很多）。可以通过使用transform来启动这一特性：

@keyframes my {
  20% {
      transform: translateY(10px);
  }

  50% {
      transform: translateY(120px);
  }
      
  80% {
      transform: translateY(10px);
  }
}

异步JavaScript和script标签加defer

<script type="text/javascript" defer="defer" src="example2.js"></script>

这个属性的用途是表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕后再运行。因此，在<script>元素中设置defer 属性，相当于告诉浏览器立即下载，但延迟执行。

<script type="text/javascript" dasync src="example2.js"></script>

带有async标记的脚本，浏览器仍然会下载它，并在合适的时机执行，但是不会影响DOM树的构建过程。
本文非原创，参考资料：
如何提升页面渲染效率
浅析前端页面渲染机制