css加載會(huì)造成阻塞嗎

結(jié)論:

  1. css不會(huì)阻塞js的解析
  2. css會(huì)阻塞js的渲染
  3. css會(huì)阻塞js的執(zhí)行
  4. 如果頁面中同時(shí)存在css和js,并且存在js在css后面則DOMContentLoaded會(huì)在css加載完后執(zhí)行
    其他情況下 DOMContentLoaded 都不會(huì)等待css執(zhí)行
<!--<!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  rel="stylesheet">-->
<!--</head>-->
<!--<body>-->
<!--<h1 style="color: #00a854">這是紅色的</h1>-->
<!--</body>-->
<!--</html>-->
<!--dom 執(zhí)行 解析  -> 渲染-->
<!--
  1. 頁面先打印 既 執(zhí)行了 解析
  2. 打印了dom 頁面沒加載出來 既 渲染沒執(zhí)行
  總結(jié): 1. css不會(huì)阻塞js的解析 2.css會(huì)阻塞js的渲染
  -->

<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!--  <title>css加載會(huì)阻塞js運(yùn)行嗎？</title>-->
<!--  <meta charset="UTF-8">-->
<!--  <meta name="viewport" content="width=device-width, initial-scale=1">-->
<!--  <script>-->
<!--    console.log('before css')-->
<!--    var startDate = new Date()-->
<!--  </script>-->
<!--  <link  rel="stylesheet">-->
<!--</head>-->
<!--<body>-->
<!--<h1>這是紅色的</h1>-->
<!--<script>-->
<!--  var endDate = new Date()-->
<!--  console.log('after css')-->
<!--  console.log('經(jīng)過了' + (endDate -startDate) + 'ms')-->
<!--</script>-->
<!--</body>-->
<!--</html>-->

<!--20kb網(wǎng)絡(luò)經(jīng)過了9503ms -->
<!--總結(jié)：css會(huì)阻塞js的執(zhí)行-->

<!DOCTYPE html>
<html lang="en">
<head>
  <title>css阻塞</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      console.log('DOMContentLoaded');
    })
  </script>
  <link  rel="stylesheet">
  <h6>www</h6>
  <script>
    console.log("后面的");
  </script>
</head>
<body>
</body>
</html>
<!--如果js在css前面 DOMContentLoaded 不會(huì)被css加載影響 -->
如果頁面中同時(shí)存在css和js，并且存在js在css后面，則DOMContentLoaded事件會(huì)在css加載完后才執(zhí)行。
其他情況下，DOMContentLoaded都不會(huì)等待css加載，并且DOMContentLoaded事件也不會(huì)等待圖片、視頻等其他資源加載。
<!--
如果頁面中同時(shí)存在css和js,并且存在js在css后面則DOMContentLoaded會(huì)在css加載完后執(zhí)行
其他情況下 DOMContentLoaded 都不會(huì)等待css執(zhí)行
-->


<!--大總結(jié):
1. css不會(huì)阻塞js的解析
2. css會(huì)阻塞js的渲染
3. css會(huì)阻塞js的執(zhí)行
4. 如果頁面中同時(shí)存在css和js,并且存在js在css后面則DOMContentLoaded會(huì)在css加載完后執(zhí)行
   其他情況下 DOMContentLoaded 都不會(huì)等待css執(zhí)行
-->
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容