前端性能优化-基础篇

叁歲伎倆 2022-12-07 15:26 156阅读 0赞

#### 页面加载及渲染过程优化 ####

首先介绍一下浏览器渲染页面的流程：

1.解析 HTML 文件，构建 DOM 树，同时浏览器主进程负责下载 CSS 文件  
2.CSS 文件下载完成，解析 CSS 文件成树形的数据结构，然后结合 DOM 树合并成 RenderObject 树  
3.布局 RenderObject 树 （Layout/reflow），负责 RenderObject 树中的元素的尺寸，位置等计算  
4.绘制 RenderObject 树 （paint），绘制页面的像素信息  
5.浏览器主进程将默认的图层和复合图层交给 GPU 进程，GPU 进程再将各个图层合成（composite），最后显示出页面。

**重点来了----------------------------------------------------------**

**1.优化 DOM**

*  删除不必要的代码和注释及空格
 *  可以利用 GZIP 压缩文件
 *  结合 HTTP 缓存文件

**2.优化 CSSOM**

DOM 和 CSSOM 通常是并行构建的，所以 CSS 加载不会阻塞 DOM 的解析。  
但是，由于 Render Tree 是依赖于 DOM Tree 和 CSSOM Tree 的，  
所以他必须等待到 CSSOM Tree 构建完成，也就是 CSS 资源加载完成(或者 CSS 资源加载失败)后，才能开始渲染。因此，CSS 加载会阻塞 Dom 的渲染。  
因此，对于 CSSOM 缩小、压缩以及缓存同样重要，我们可以从这方面考虑去优化。

*  减少关键 CSS 元素的数量
 *  当我们声明样式表时，请密切关注媒体查询的类型，它们极大地影响了 CRP 的性能 。

**3.优化 JavaScript**

当浏览器遇到 script 标记时，会阻止解析器继续操作，直到 CSSOM 构建完毕，JavaScript 才会运行并继续完成 DOM 构建过程。

*  async: 当我们在 script 标记添加 async 属性以后，浏览器遇到这个 script 标记时会继续解析 DOM，同时脚本也不会被 CSSOM 阻止，即不会阻止 CRP。
 *  defer: 与 async 的区别在于，脚本需要等到文档解析后（ DOMContentLoaded 事件前）执行，而 async 允许脚本在文档解析时位于后台运行（两者下载的过程不会阻塞 DOM，但执行会）。
 *  当我们的脚本不会修改 DOM 或 CSSOM 时，推荐使用 async 。
 *  预加载 —— preload & prefetch 。
 *  DNS 预解析 —— dns-prefetch 。

**小结**

*  分析并用 `**`关键资源数 关键字节数 关键路径长度\*\* 来描述我们的 CRP 。
 *  最小化关键资源数: 消除它们（内联）、推迟它们的下载（defer）或者使它们异步解析（async）等等
 *  优化关键字节数（缩小、压缩）来减少下载时间 。
 *  优化加载剩余关键资源的顺序: 让关键资源（CSS）尽早下载以减少 CRP 长度 。