測試js與css的引入位置與性能的關係

時間 2019-11-11

標籤測試 css 引入位置性能關係欄目 JavaScript 简体版

原文原文鏈接

背景

測試的目的是爲了確認在head與body中js與css的引入的前後順序對頁面性能的影響。因爲瀏覽器的更新，本文中的測試需依賴固定的瀏覽器版本。javascript

測試環境

客戶端環境：win7 + chrome 56 + 隱身模式css

服務端環境：node v4.6.1 + koa + koa-router + koa-statichtml

工具使用：fiddlerhtml5

對應版本：java

項目結構：node

分組測試

1.html + img

1.1代碼

<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
  </head>
  <body>
    <img src="/img/img1.jpg">
  </body>
</html>

1.2數據

1.3結論

html下載完成後，解析並完成構建dom樹以後纔會觸發DOMContentLoaded
紅色框表名dom樹解析構建所消耗的時間
img的圖片內容顯示與否不會影響到DOMContentLoaded
Load的時間包括img的圖片內容下載時間以及render時間
頁面中全部的元素加載完成後纔會觸發Load
時間分爲兩部分：鏈接創建時間 + 請求/響應時間，綠色部分爲接收到第一個字節所消耗的時間

2.HTML + EXTERNAL CSS（HEAD中） + IMG

2.1代碼

<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
    <link rel="stylesheet" type="text/css" href="/css/style1.css">
  </head>
  <body>
    <div class="test">hello test!</div>
    <img src="/img/img1.jpg">
  </body>
</html>

2.2數據

當style1.css掛起時：chrome

2.3結論

head中的css會增長頁面白屏時間，頁面須要等待css下載解析完成，可是在css下載解析過程當中，頁面會預加載img等資源
即便css掛起也不影響DOMContentLoaded的觸發（綁定事件需放在css的前面）

源碼：shell

<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
    <script type="text/javascript">
      
      var DOMContentLoaded = function() {
          document.removeEventListener( "DOMContentLoaded", DOMContentLoaded, false );
          console.log('okkkk')
        };

      document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
    </script>
    <link rel="stylesheet" type="text/css" href="/css/style1.css">
  </head>
  <body>
    <div class="test">hello test!</div>
    <img src="/img/img1.jpg">
  </body>
</html>

3.HTML + EXTERNAL CSS（HEAD中）+ EXTERNAL JS（HEAD中）+ IMG

3.1代碼

<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
      <link rel="stylesheet" type="text/css" href="/css/style1.css">
      <script type="text/javascript" src="/js/a.js"></script>
  </head>
  <body>
    <div class="test">hello test!</div>
    <img src="/img/img1.jpg">
  </body>
</html>

3.2數據

3.3結論

head中增長js會增長DOMContentLoaded時間
head中的js會增長白屏時間，頁面一直等待js下載執行結束
head中的js須要等待css加載解析完成後纔會加載執行
head中的css會阻塞dom構建，img必須等待直到css下載解析完成

4.HTML + EXTERNAL JS（HEAD中） + EXTERNAL CSS（HEAD中） + IMG

4.1代碼

<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
      <script type="text/javascript" src="/js/a.js"></script>
      <link rel="stylesheet" type="text/css" href="/css/style1.css">
  </head>
  <body>
    <div class="test">hello test!</div>
    <img src="/img/img1.jpg">
  </body>
</html>

4.2數據

4.3結論

head中的js會增長白屏時間，但不影響head中的css下載，js和css能夠並行加載
head中的css會阻塞dom構建，img必須等待直到css下載解析完成

5.HTML + EXTERNAL JS（BODY中）+ EXTERNAL CSS（HEAD中） + IMG

5.1代碼

<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
      <link rel="stylesheet" type="text/css" href="/css/style1.css">
  </head>
  <body>
    <div class="test">hello test!</div>
    <img src="/img/img1.jpg">
    <script type="text/javascript" src="/js/a.js"></script>
  </body>
</html>

5.2數據

5.3結論

js會增長DOMContentLoaded時間，因爲以前頁面已經構建了大部分dom tree，已經渲染，因此此時不會再出現頁面白屏狀況

6.HTML + EXTERNAL JS（BODY中）+ EXTERNAL CSS（BODY中） + IMG

6.1代碼

<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
  </head>
  <body>
    <div class="test">hello test!</div>
    <script type="text/javascript" src="/js/a.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/style1.css">
    <img src="/img/img1.jpg">
    <div class="test">hello2 test!</div>
  </body>
</html>

6.2數據

當js掛起時：瀏覽器

當css掛起時：網絡

6.3結論

body中的css掛起時，不影響DOMContentLoaded的時間，css以後的內容能夠預加載，可是隻有當css下載解析完成以後才能顯示
body中的js掛起時，會影響DOMContentLoaded的時間，js以後資源提早串行加載，直到js下載執行完成後才能顯示

7.HTML + EXTERNAL CSS（BODY中） + EXTERNAL JS（BODY中）+ IMG

7.1代碼

<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
  </head>
  <body>
    <div class="test">hello test!</div>
    <link rel="stylesheet" type="text/css" href="/css/style1.css">
    <script type="text/javascript" src="/js/a.js"></script>
    <img src="/img/img1.jpg">
    <div class="test">hello2 test!</div>
  </body>
</html>