页面渲染性能

​ 如果把浏览器呈现页面的整个过程一分为二，前面所讨论的诸如图像资源优化、加载优化，以及构建中如何压缩资源大小等，都可视为浏览器为呈现页面请求所需资源的部分:本篇将主要关注浏览器获取到资源后，进行渲染部分的相关优化内容。在前面前端页面的生命周期中，介绍过关键渲染路径的概念，浏览器通过这个过程对HTML、CSS、JavaScript 等资源文件进行解析，然后组织渲染出最终的页面。本篇将以此为基础，对渲染过程进行更深入的讨论，不仅包括打开一个网站的首次渲染，还有用户与页面进行交互后导致页面更改的渲染，即所谓的重绘与重排。其中除了对渲染过程的充分介绍，更重要的是对提升渲染过程性能的优化手段的探讨。

​ 本节我们需要明白，页面渲染阶段对性能体验的影响与资源加载阶段同样重要，而对于涉及高交互频次的应用来说可能更加重要。为了方便后文对渲染优化进行深入分析，本节稍后会将整个渲染过程划分为五个串行阶段进行概述。其实优化渲染的实质，就是尽量压缩每个阶段的执行时间或跳过某些阶段的执行。

一、流畅的使用体验

​ 随着网站承载的业务种类越来越多，业务复杂性越来越高，用户的使用要求也跟着升高。不但网站页面要快速加载出来，而且运行过程也应更顺畅，在响应用户操作时也要更加及时，比如我们通常使用手机浏览网上商城时，指尖滑动屏幕与页面滚动应很流畅，拒绝卡顿。那么要达到怎样的性能指标，才能满足用户流畅的使用体验呢?

​ 目前大部分设备的屏幕分辨率都在60fps左右，也就是每秒屏幕会刷新60次，所以要满足用户的体验期望，就需要浏览器在渲染页面动画或响应用户操作时，每一帧的生成速率尽量接近屏幕的刷新率。若按照60fps来算，则留给每一帧画面的时间不到17ms再除去浏览器对资源的一些整理工作，帧画面的渲染应尽 量在10ms内完成，如果达不到要求而导致帧率下降，则屏幕上的内容会发生抖动或卡顿。

二、渲染过程

​ 为了使每一帧页面渲染的开销都能在期望的时间范围内完成，就需要开发者了解谊染过程的每个阶段，以及各阶段中有哪些优化空间是我们力所能及的。经过分析根据开发者对优化渲染过程的控制力度，可以大体将其划分为五个部分: JavaScript 处里计算样式、页面布局、绘制与合成，下面先简要介绍各部分的功能与作用。

• JavaScript处理: 前端项目中经常会需要响应用户操作，通过JavaScript对数据集进行计算、操作DOM元素，并展示动画等视觉效果。当然对于动画的实现，除了JavaScript,也可以考虑使用如CSS Animations、Transitions 等技术。
• 计算样式: 在解析CSS文件后，浏览器需要根据各种选择器去匹配所要应用CSS规则的元素节点，然后计算出每个元素的最终样式。
• 页面布局: 指的是浏览器在计算完成样式后，会对每个元素尺寸大小和屏幕位置进行计算。由于每个元素都可能会受到其他元素的影响，并且位于DOM树形结构中的子节点元素，总会受到父级元素修改的影响，所以页面布局的计算会经常发生。
• 绘制: 在页面布局确定后，接下来便可以绘制元素的可视内容，包括颜色、边框、阴影及文本和图像。
• 合成: 通常由于页面中的不同部分可能被绘制在多个图层上，所以在绘制完成后需要将多个图层按照正确的顺序在屏幕上合成，以便最终正确地渲染出来，如图所示。

​ 这个过程中的每一阶段都有可能产生卡顿，本章后续章节将会对各阶段所涉及的性能优化进行详细介绍。这里值得说明的是，并非对于每一帧画面都会经历这五个部分。比如仅修改与绘制相关的属性(文字颜色、背景图片或边缘阴影等)，而未对页面布局产生任何修改，那么在计算样式阶段完成后，便会跳过页面布局直接执行绘制。如果所更改的属性既不影响页面布局又不需要重新绘制，便可直接跳到合成阶段执行。具体修改哪些属性会触发页面布局、绘制或合成阶段的执行，这与浏览器的内核类型存在一定关系， 如表所示列出了一些常见属性分别在Blink.Gecko和Webkit等不同内核的浏览器上的表现。

Google的Chrome实验室在网站上列出了更多有关CSS属性的详细表现，如有需要可自行去查看。