背景

为了尽快让用户看到渲染的页面，我们有哪些可以做的呢？

网络方面

浏览器解析 HTML 过程中，遇到 link 标签跟外部 script ，会再发起网络请求，因此在网络方面，如果将 CSS 写成内联，即可减少请求次数，只需一次请求。这在大的项目不太现实，但在简单页面上还是可以应用的。

在 CSS 中使用 @import 也会再发起请求，因此， CSS 减少 @import 的使用也可以减少网络请求次数。

默认情况下， CSS 是阻塞渲染的，而渲染是需要 DOM 跟 CSSOM 结合构建渲染树才能进行，因此 CSS 需要尽快下载并解析，以便缩短首次渲染时间。

对于非首屏必须的 CSS 外部文件，可以使用 媒体查询 来使其不阻塞渲染，即 link 标签的 media 。注意，这里指的是不阻塞渲染，媒体查询的 CSS 最终还是会被下载的，相当于降低了其优先级。

还有一点优化就是写 CSS 选择器时的优化，这点网上应该都有，例如 div.test 不比 .test 快之类的。

浏览器遇到 script 标签，会阻塞渲染，停下来执行 JS ，因此将 script 放到 body 标签末尾。

对于非必须立刻执行的外部脚本，可以添加 async 防止阻塞。

这边复习一下 script 标签中 async 与 defer 的区别：

defer：

async：

在 JavaScript 操作 DOM 的方面，尽量减少对 DOM 的大量操作，对 DOM 节点的增删改查；且尽量减少会造成浏览器重排的操作，比如改变尺寸、位置、修改 display 等。