如果要是优化前端性能，首先我们就要了解前端是如何进行渲染的，废话不多说，直接上图
v2-56925e49beed07b72574f88074e41074_720w.jpg
- 解析 HTML 文件，构建 DOM 树，同时浏览器主进程负责下载 CSS 文件
- CSS 文件下载完成，解析 CSS 文件成树形的数据结构，然后结合 DOM 树合并成 RenderObject 树
- 布局 RenderObject 树 （Layout/reflow），负责 RenderObject 树中的元素的尺寸，位置等计算
- 绘制 RenderObject 树 （paint），绘制页面的像素信息
- 浏览器主进程将默认的图层和复合图层交给 GPU 进程，GPU 进程再将各个图层合成（composite），最后显示出页面
优化方案
1、如果想要加载更快，首先肯定是要先减少对http的请求，因为都是需要网路，所以一些比较小的图，我们可以给他放在一张大图上，使用精灵图，这样的话就相当于一张大图上有很多小图，只用下载一次即可，就极大的省下了很多不必要的http请求
2、页面中的图片大小尽量不要超过10kb左右，这样的话加载起来图片较小，加载出来速度会更快。
3、再就是使用懒加载的方式，只刷新设备可视区域的图片和文字，在用户在向下翻时在加载。
优化 DOM
- 删除不必要的代码和注释包括空格，尽量做到最小化文件。
- 可以利用 GZIP 压缩文件。
- 结合 HTTP 缓存文件。
优化 CSSOM
首先，DOM 和 CSSOM 通常是并行构建的，所以 CSS 加载不会阻塞 DOM 的解析。
然而，由于 Render Tree 是依赖于 DOM Tree 和 CSSOM Tree 的，
所以他必须等待到 CSSOM Tree 构建完成，也就是 CSS 资源加载完成(或者 CSS 资源加载失败)后，才能开始渲染。因此，CSS 加载会阻塞 Dom 的渲染。
由此可见，对于 CSSOM 缩小、压缩以及缓存同样重要，我们可以从这方面考虑去优化。
- 减少关键 CSS 元素数量
- 当我们声明样式表时，请密切关注媒体查询的类型，它们极大地影响了 CRP 的性能 。
优化 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 。
