优化浏览器渲染

Posted 2020-11-23 lyralee

优化浏览器渲染，要从关键渲染路径出发，基本上是优化html、CSS、JS的依赖关系。

其中HTML构建的DOM消耗是必须的。

1. 从阻塞渲染的CSS出发

CSS默认是阻塞渲染的资源。

根据浏览器渲染的过程可知，浏览器渲染的基础是DOM和CSSOM。在生成CSSOM之前，不会渲染任何内容。

生成CSSOM的过程是先从服务器下载CSS文件（不管阻塞与否都要先下载），然后过滤出阻塞渲染的CSS文件生成CSSOM。

为了缩短生成CSSOM的时间：

1. 应该尽量精简CSS

2. 利用媒体类型和媒体查询来解除对渲染的阻塞。

示例：（都会下载，但是只有满足media条件，才用于CSSOM）

// 只有当页面>=400px时才会阻塞渲染
<link href="./1.css" rel="stylesheet" media="(min-width:400px)">

2. 从阻塞渲染的内联脚本出发

在关键渲染路径中，如果HTML解析器遇到script标签，会暂停构建DOM，将控制权转给JS引擎，

等js执行完成，再从之间暂停的地方继续构建DOM。也就是说，js脚本会阻碍DOM构建，延缓首次渲染。

如果在js脚本执行过程中，遇到修改CSSOM的情况：
--firefox浏览器会等js前的CSSOM构建完成再执行脚本；
--webkit浏览器会暂停执行js脚本和DOM构建，直到完成CSSOM的下载和构建。

 

 

 

3. 从阻塞渲染的JS文件下载出发

 

为了缩短JS脚本的阻塞时间：

1. script添加async属性

async属性只能用于外联脚本；内联脚本不能使用async属性。

遇到外联js， 浏览器渲染暂停，先从磁盘/缓存/远程服务器获取获取脚本，下载时间大大阻塞了渲染。

添加异步标识，会解除文件下载导致的渲染阻塞。

 <script src="../js/1.js" async></script>

async属性的作用是： 使用另一个进程下载脚本；

1. HTML解析器遇到async属性的script外联标签；
2. 会继续HTML解析，同时并行下载js文件；
3. 等js文件下载完成，暂停HTML解析，立即执行脚本；
4. 脚本执行后，继续HTML解析。

如果遇到多个含有async属性的script标签，执行顺序会按照下载完成的顺序。