测试js与css的引入位置与性能的关系

背景

测试的目的是为了确认在head与body中js与css的引入的先后顺序对页面性能的影响。由于浏览器的更新，本文中的测试需依赖固定的浏览器版本。

测试环境

客户端环境：win7 + chrome 56 + 隐身模式

服务端环境：node v4.6.1 + koa + koa-router + koa-static

工具使用：fiddler

对应版本：

项目结构：

分组测试

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挂起时：

2.3结论

head中的css会增加页面白屏时间，页面需要等待css下载解析完成，但是在css下载解析过程中，页面会预加载img等资源
即使css挂起也不影响DOMContentLoaded的触发（绑定事件需放在css的前面）

源码：

<!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>

7.2数据