关于前端:浏览器渲染页面的性能优化

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

一.解析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脚本，就会进行页面的解析进行下载，当脚本都执行结束后，才会持续解析页面。