讲一讲你知道的前端性能优化方案

[JCHappytime]

参考文章

1. 前端性能优化的24条建议

前言

要想对前端性能进行实质上的优化，就需要清楚的知道：从输入URL到页面展示出来这个过程发生了什么？从这个过程中的某些环节来具体的了解一下性能优化。

从输入URL到页面展示出来这个过程发生了什么？

这是一道经典的前端面试题目，重要性不必多说，它的大致流程如下：

• URI解析
• DNS服务器进行DNS解析
• TCP三次握手：建立客服端与服务端的连接通道
• 发送HTTP请求
• 服务器处理和响应
• TCP四次挥手：关闭客户端与服务端的连接
• 浏览器解析和渲染
• 页面加载完成
  接下来我们就来看一看浏览器的渲染过程到底是怎样的。

浏览器渲染过程

构建DOM树

构建DOM树的大致流程如下:

• 首先浏览器从磁盘或网络中读取HTML原始字节，并根据文件的指定编码将他们转成字符；
• 然后通过分词器将字节流转换为Token，在Token（令牌）生成的同时，另一个流程会同时消耗这些令牌并转换成HTML head这些节点对象，起始和结束令牌表明了节点之间的关系。
• 当所有令牌消耗完以后就转换成了DOM（文档对象模型）；
• 最终构建出DOM结构。
  DOM树构建完成之后，接下来就是CSSOM树的构建了。

构建CSSOM树

与HTML的转换类似，浏览器会去识别CSS正确的令牌，然后将这些令牌转化为CSS节点；
PS：子节点会继承父节点的样式规则，这里对应的就是层叠规则和层叠样式表。
有了DOM和CSSOM，接下来就可以合成布局树（Render Tree）了。

构建渲染树

等 DOM 和 CSSOM 都构建好之后，渲染引擎就会构造布局树。布局树的结构基本上就是复制 DOM 树的结构，不同之处在于 DOM 树中那些不需要显示的元素会被过滤掉，如 display:none 属性的元素、head 标签、script 标签等。
复制好基本的布局树结构之后，渲染引擎会为对应的 DOM 元素选择对应的样式信息，这个过程就是样式计算。

样式计算

样式计算的目的是为了计算出 DOM 节点中每个元素的具体样式，这个阶段大体可分为三步来完成。

• 把 CSS 转换为浏览器能够理解的结构
• 转换样式表中的属性值，使其标准化
• 计算出 DOM 树中每个节点的具体样式
  样式计算完成之后，渲染引擎还需要计算布局树中每个元素对应的几何位置，这个过程就是计算布局。

计算布局

现在，我们有 DOM 树和 DOM 树中元素的样式，但这还不足以显示页面，因为我们还不知道 DOM 元素的几何位置信息。那么接下来就需要计算出 DOM 树中可见元素的几何位置，我们把这个计算过程叫做布局。

绘制

通过样式计算和计算布局就完成了最终布局树的构建。再之后，就该进行后续的绘制操作了。
到这里，浏览器的渲染过程就基本结束了。

从浏览器的渲染过程中可以做的优化点

通常一个页面有三个阶段：加载阶段、交互阶段和关闭阶段。

• 加载阶段，是指从发出请求到渲染出完整页面的过程，影响到这个阶段的主要因素有网络和 JavaScript 脚本。
• 交互阶段，主要是从页面加载完成到用户交互的整合过程，影响到这个阶段的主要因素是 JavaScript 脚本。
• 关闭阶段，主要是用户发出关闭指令后页面所做的一些清理操作。
  这里我们需要重点关注加载阶段和交互阶段，因为影响到我们体验的因素主要都在这两个阶段，下面我们就来逐个详细分析下。

加载阶段