标签：tps 导致 浏览器 生成 html解析器 资源 pre 依赖 远程服务器
优化浏览器渲染，要从关键渲染路径出发，基本上是优化HTML、CSS、JS的依赖关系。
其中HTML构建的DOM消耗是必须的。
CSS默认是阻塞渲染的资源。
根据浏览器渲染的过程可知，浏览器渲染的基础是DOM和CSSOM。在生成CSSOM之前，不会渲染任何内容。
生成CSSOM的过程是先从服务器下载CSS文件（不管阻塞与否都要先下载），然后过滤出阻塞渲染的CSS文件生成CSSOM。
为了缩短生成CSSOM的时间：
示例：（都会下载，但是只有满足media条件，才用于CSSOM）
// 只有当页面>=400px时才会阻塞渲染 <link href="./1.css" rel="stylesheet" media="(min-width:400px)">
在关键渲染路径中，如果HTML解析器遇到script标签，会暂停构建DOM，将控制权转给JS引擎，
等js执行完成，再从之间暂停的地方继续构建DOM。也就是说，js脚本会阻碍DOM构建，延缓首次渲染。
如果在js脚本执行过程中，遇到修改CSSOM的情况：
--firefox浏览器会等js前的CSSOM构建完成再执行脚本；
--webkit浏览器会暂停执行js脚本和DOM构建，直到完成CSSOM的下载和构建。
为了缩短JS脚本的阻塞时间：
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标签，执行顺序会按照下载完成的顺序。
标签：tps 导致 浏览器 生成 html解析器 资源 pre 依赖 远程服务器
原文地址：https://www.cnblogs.com/lyraLee/p/11875595.html
