css與dom的渲染與解析

時間 2019-11-19

標籤 css dom 渲染解析欄目 CSS 简体版

原文原文鏈接

js阻塞文檔渲染與解析那麼css呢？css

結論1、css：阻塞渲染，不阻塞dom解析html

<head>
      <script>
        document.addEventListener('DOMContentLoaded',function(){
            alert(document.getElementById("myinput"))
        })
    </script>
<!--    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>-->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<body>
    <input type="text" id="myinput" />
<span class="label label-default">Default</span>
</body>

當css樣式還未加載完成的時候，初始的html文檔已經加載，解析完畢了jquery

結論2、css的加載阻塞後面加載npm

<head>
      <!--<script>
        document.addEventListener('DOMContentLoaded',function(){
            alert(document.getElementById("myinput"))
        })
    </script>-->
  <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script>
    alert(1)
</script>
</head>

<body>
    <input type="text" id="myinput" />
<span class="label label-default">Default</span>
</body>

因爲js的性值，加載後當即執行，能夠判斷，css阻塞js的加載bootstrap

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。