css加载会不会造成文档解析阻塞？

一般的script标签（不带async等属性）加载时会阻塞浏览器，也就是说，浏览器在下载或执行该js代码块时，后面的标签不会被解析，例如在head中添加一个script，但这个script下载时网络不稳定，很长时间没有下载完成对应的js文件，那么浏览器此时一直等待这个js文件下载，此时页面不会被渲染，用户看到的就是白屏（网页文件已下载好，但浏览器不解析）
而使用async属性，浏览器会下载js文件，同时继续对后面的内容进行渲染
通常如果js不需要改变DOM结构时可以使用async进行异步加载（比如一些统计代码可以异步加载，因为此代码与页面执行逻辑无关，不会改变DOM结构）

打开chrome控制台(按下F12),可以看到下图，重点在我画红圈的地方

点击我画红圈的地方(No throttling),会看到下图,我们选择GPRS这个选项

这样，我们对资源的下载速度上限就会被限制成20kb/s，好，那接下来就进入我们的正题

css加载会阻塞DOM树的解析渲染吗？

用代码说话：

<!DOCTYPE html><html lang="en">
  <head><title>css阻塞</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><style>  h1 {color: red !important  }</style><script>  function h () {console.log(document.querySelectorAll('h1'))      }  setTimeout(h, 0)</script>    <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css?1.1.11" rel="stylesheet">  </head>
  <body><h1>这是红色的</h1>  </body></html>

查看更多关于css加载会不会造成文档解析阻塞？的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did72361

更新时间：2022-10-19 阅读：46次