如何提升页面加载速度,并简述原理
页面的加载过程主要分为下载、解析、渲染三个步骤,下面从这三个方面阐述提升加载速度的方法:
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 结构,减少首屏时间