网站性能优化·前端篇

我们的目标是优先显示与用户要在网页上执行的主要操作有关的内容。

上面这句话出自《关键呈现路径》。

什么是前端性能？

前端性能，即页面性能，简单来说就是能看到页面内容的时间以及可以开始在页面上操作的时间。

前端性能与浏览器的运作方式密切相关，故想要优化性能就要从了解浏览器是如何显示页面的入手。

浏览器显示页面的原理

基本流程：

1. 获取 HTML 文档及样式表文件

2. 解析成对应的树形数据结构

   • DOM tree
   • CSSOM tree
3. 计算可见节点形成 render tree
4. 计算 DOM 的形状及位置进行布局
5. 将每个节点转化为实际像素绘制到视口上（栅格化）

render tree（页面上所显示的最终结果）是由 DOM tree（开发工具中所显示的 HTML 所定义的内容结构）与 CSSOM tree（样式表所定义的规则结构）合并并剔除不可见的节点所形成的，其中不包含如下节点：

• 本身不可见的