如何提升页面加载速度，并简述原理

Posted 2022-11-01 sallyshan

页面的加载过程主要分为下载、解析、渲染三个步骤，下面从这三个方面阐述提升加载速度的方法：

1、加快文件下载速度，减小资源文件下载对页面解析的阻塞。页面加载过程首先会下载 html 文件，然后自上而下开始解析，解析过程中如果遇到外部资源则会开始下载，直至下载完成才会继续解析。所以，加快文件下载速度方式是有效的提升页面加载速度的方法。具体可以是

1）通过设置 CDN、HTTP 缓存等方式，减少 HTTP 传输时间；

2）对文件进行压缩，减小文件体积；

3）对 script、CSS 文件引用标签设置异步下载属性，避免对 HTML 文件解析产生阻塞

 

2、将样式写在 head 中，将 JS 代码或文件引用写在 body 的最后。

在 HTML 文件下载的过程中，会同步的对文件流进行解析成 DOM 结构，当遇到 CSS 代码时，会将其解析成 CSSOM 树；当遇到 JS 脚本时，会将其同步执行，并且阻塞继续解析，执行之后方才继续解析。最后，将 DOM 和 CSSOM 渲染至页面上。所以，将样式写在 head 中，可以尽早地构建 CSSOM 树；将 JS 代码写在 body 最后，不会对 DOM 解析造成阻塞，可以最快地完成页面地构建

 

3、尽可能地提升浏览器渲染速度。包括

1）避免出现冗余 HTML 标签，提升 DOM 结构地构建速度；

2）精简 CSS 样式及选择器，提升 CSSOM 构建及匹配速度；

3）如果是单页面应用，则页面结构依赖 JS 的执行。可以优化 JS 代码，尽早输出首屏结构；或采用服务端渲染的方式，直接传输 HTML 结构，减少首屏时间