浏览器渲染页面的性能优化

  由前文内容浏览器工作原理与事件循环引出的问题：当我们的页面足够复杂，足够大时，如何使页面更快展示内容呢？现在在本文来做一次抛砖引玉。若有其他加载优化，希望评论区不吝赐教。
  首先，我们需要先了解的是浏览器网络进程和渲染进程。（具体内容参照文章：浏览器是如何渲染页面的？）接下来，我会根据每一个渲染阶段提出可以优化的内容。

一.解析HTML阶段

  解析HTML阶段，浏览器可能会遇到需要加载外部资源的 script 标签与 link 标签。浏览器会通过网络进程去加载 JS ，CSS 等外部资源，若JS资源较大，加载时间过长可能会导致因等待资源而无法继续解析HTML。（解析CSS生成CSSOM树不会改变DOM树，所以HTML解析不会阻塞，解析JS也不会改变DOM树，但是执行JS可能会改DOM树和CSSOM树，所以CSSOM树解析好后才会执行JS。因此JS会阻塞HTML解析，CSS不会阻塞但可能因JS而暂停HTML解析。）
  解析顺序图如下：

因此，为了尽可能防止HTML解析被阻塞，我们需要人为干涉浏览器的默认操作。我暂时能想到的就是两个方面：

1. 异步加载(defer、async、module)和预加载(preload、prefetch、dns-prefetch、preconnect 、prerender)。
2. HTTP2里请求的多路复用。

1.异步加载和预加载

  使用异步加载是在script标签上增加对应字段。如下图所示：

  根据上图，我们可以知道以下信息：
1.默认情况下，HTML解析的过程中，如果遇到script脚本，就会停止页面的解析进行下载，当脚本都执行完毕后，才会继续解析页面。