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

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

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 结构，减少首屏时间

原文地址：https://www.cnblogs.com/SallyShan/p/11520620.html