js、css的引入方式测试

- 日理万妓 2022-05-20 02:00 220阅读 0赞

## [测试js与css的引入位置与性能的关系][js_css] ##

# 背景 #

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

# 测试环境 #

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

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

工具使用：fiddler

对应版本：

![730281-20170331104258711-1186505882.png][]

项目结构：

![730281-20170331104318461-85530877.png][]

# 分组测试 #

## 1.html + img ##

## 1.1代码 ##

![复制代码][Image 1]

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

![复制代码][Image 1]

## 1.2数据 ##

![730281-20170331105251602-781350660.png][]

![730281-20170331105259930-841950008.png][]

## 1.3结论 ##

*  html下载完成后，解析并完成构建dom树之后才会触发DOMContentLoaded
 *  红色框表名dom树解析构建所消耗的时间
 *  img的图片内容显示与否不会影响到DOMContentLoaded
 *  Load的时间包括img的图片内容下载时间以及render时间
 *  页面中所有的元素加载完成后才会触发Load
 *  时间分为两部分：连接建立时间 + 请求/响应时间，绿色部分为接收到第一个字节所消耗的时间

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

## 2.1代码 ##

![复制代码][Image 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>

![复制代码][Image 1]

## 2.2数据 ##

![730281-20170331105449180-887883358.png][]

当style1.css挂起时：

![730281-20170331105513914-1647122710.png][]

## 2.3结论 ##

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

源码：

![复制代码][Image 1]

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

![复制代码][Image 1]

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

## 3.1代码 ##

![复制代码][Image 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>

![复制代码][Image 1]

## 3.2数据 ##

![730281-20170331105736117-707004964.png][]

## 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代码 ##

![复制代码][Image 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>

![复制代码][Image 1]

## 4.2数据 ##

![730281-20170331105959461-1004568065.png][]

## 4.3结论 ##

*  head中的js会增加白屏时间，但不影响head中的css下载，js和css可以并行加载
 *  head中的css会阻塞dom构建，img必须等待直到css下载解析完成

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

## 5.1代码 ##

![复制代码][Image 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>

![复制代码][Image 1]

## 5.2数据 ##

![730281-20170331110108664-687756195.png][]

## 5.3结论 ##

*  js会增加DOMContentLoaded时间，由于之前页面已经构建了大部分dom tree，已经渲染，所以此时不会再出现页面白屏情况

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

## 6.1代码 ##

![复制代码][Image 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>

![复制代码][Image 1]

## 6.2数据 ##

当js挂起时：

![730281-20170331110222352-296693991.png][]

当css挂起时：

![730281-20170331110238133-2092524269.png][]

## 6.3结论 ##

*  body中的css挂起时，不影响DOMContentLoaded的时间，css之后的内容可以预加载，但是只有当css下载解析完成之后才能显示
 *  body中的js挂起时，会影响DOMContentLoaded的时间，js之后资源提前串行加载，直到js下载执行完成后才能显示

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

## 7.1代码 ##

![复制代码][Image 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>

![复制代码][Image 1]

## 7.2数据 ##

当js挂起时：

![730281-20170331110350883-1347002475.png][]

当css挂起时：

![730281-20170331110404180-1430896307.png][]

## 7.3结论 ##

*  当css置于js前面时，css挂起会导致页面白屏，需等待css加载完成后才能显示
 *  当css置于js前面时，js挂起只会影响它之后内容的显示

## 8.css的加载顺序 ##

*  不保证加载css的加载顺序，因为可以预加载，但可以保证解析的顺序

# 参考资料： #

*  [The future of loading CSS][]
 *  [浏览器的渲染原理简介][Link 1]
 *  [How browsers work][]
 *  [浏览器的工作原理：新式网络浏览器幕后揭秘][Link 2]

[js_css]: https://www.cnblogs.com/stonevina/p/6650093.html
[730281-20170331104258711-1186505882.png]: /images/20220520/669c4c8141404ae4996f9e0da735f38c.png
[730281-20170331104318461-85530877.png]: /images/20220520/6d0902aebe6b4305bb54d8b93ce6efaa.png
[Image 1]: 
[730281-20170331105251602-781350660.png]: /images/20220520/d36e3f8ef423403e8b9904807d6d2d52.png
[730281-20170331105259930-841950008.png]: /images/20220520/02de544a9e144748a0755db03c1c2559.png
[730281-20170331105449180-887883358.png]: /images/20220520/7aed831f8405485dbcf7005dd5105a6c.png
[730281-20170331105513914-1647122710.png]: /images/20220520/832304672beb409aa3729dba097ff19a.png
[730281-20170331105736117-707004964.png]: /images/20220520/53e1e65315ba47f9b490e70c1c0f902a.png
[730281-20170331105959461-1004568065.png]: /images/20220520/4c7ac31106c5482a838c9f139287ba4c.png
[730281-20170331110108664-687756195.png]: /images/20220520/2bbfa352971a4ad980da095da70a41bd.png
[730281-20170331110222352-296693991.png]: /images/20220520/58379b91a2fa4178937bbd7aec561012.png
[730281-20170331110238133-2092524269.png]: /images/20220520/5a399966168c4bc985e975ad2339e8b4.png
[730281-20170331110350883-1347002475.png]: /images/20220520/84ebaa3290bd4b53993d86f317f00392.png
[730281-20170331110404180-1430896307.png]: /images/20220520/0fe6acd5385b453f96e3161afbd67afb.png
[The future of loading CSS]: https://jakearchibald.com/2016/link-in-body/
[Link 1]: http://coolshell.cn/articles/9666.html/comment-page-1
[How browsers work]: http://taligarsiel.com/Projects/howbrowserswork1.htm
[Link 2]: https://www.html5rocks.com/zh/tutorials/internals/howbrowserswork