标签：CSSOM 脚本 浏览器 渲染 阻塞 js HTML 优化

优化浏览器渲染，要从关键渲染路径出发，基本上是优化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标签，执行顺序会按照下载完成的顺序。

 

标签：CSSOM,脚本,浏览器,渲染,阻塞,js,HTML,优化
来源： https://www.cnblogs.com/lyraLee/p/11875595.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。