js、css的阻塞问题

　　这篇文章主要是探索js、css的加载顺序及其影响问题。

　　下面的代码可以让浏览器阻塞：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>阻塞代码</title>

</head>

<body>

  <script>

    // 阻塞代码，参数单位s

    function blocking(blockingTime) {

      function getTime() {

        return new Date().getTime();

      }

      var startTime = getTime();

      // getTime()得到的时间单位是ms，所以乘1000

      while (getTime() < startTime + blockingTime*);

    }

    blocking();

  </script>

  <h3>hello</h3>

</body>

</html>

测试一：

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>JS/css</title>

  <script>var start = +new Date;</script>

  <script>

    var end = +new Date;

    console.log(end-start);

  </script>

  <link href="http://udacity-crp.herokuapp.com/style.css?rtt=2" rel="stylesheet">

</head>  

<body>

</body>

</html>

注：其中的+为单目运算符，可以将对象转化为数字。

显然，在控制台输出的结果为0。因为上面的js语句刚刚执行完，就执行下面的语句，所以时间间隔几乎为0。

测试二：

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>JS/css</title>

  <script>var start = +new Date;</script>

  <link href="http://udacity-crp.herokuapp.com/style.css?rtt=2" rel="stylesheet">

  <script>

    var end = +new Date;

    console.log(end-start);

  </script>

</head>  

<body>

</body>

</html>

这个测试中，我将css置于两个script之间，最后的输出结果为2870，当然这个值是个随机数，一定是远远大于0的。

然后我们在打开开发者工具的Network的情况下点击刷新，这时再看console控制台打印出的值为2967，然后我们观察加载css所需的时间：

2.97s，也就是2967ms。

结论：外部样式的加载会阻塞在它之后的<script>语句的加载，并且<script>是在<link>完全加载结束之后执行的。

测试3：

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>JS/CSS</title>

  <script>var start = +new Date;</script>

  <link href="http://udacity-crp.herokuapp.com/style.css?rtt=2" rel="stylesheet">

  <script>

    var endAfterCss = +new Date;

    console.log("css", (endAfterCss - start));

  </script>

</head>

<body>

  <script src="http://udacity-crp.herokuapp.com/time.js?rtt=1&a"></script>

  <div id="result"></div>

  <script>

    var endAfterScript = +new Date;

    console.log("js",(endAfterScript - start));

  </script>

</body>

</html>

在console控制台的输出如下：

我们可以看到在两者之间还有一个外部的script标签，为什么两者的执行却是几乎同时发生的呢？

　　我们同样在network中刷新，然后得到的console控制台信息如下：

然后查看network,并查看外部css的详情，如下所示：

　可以看出，css的加载时间就是3.12s，然后它的加载阻塞了下面的script的执行，css一旦加载完毕，下面的script立即执行，所以得到了3118这个值。这个很容易理解。

　注意观察上图，可以发现外部css和外部js的加载时间几乎是同时的，也就是说外部css的加载不会影响到下面的js的加载。

但是为什么在外部js文件下面的js却是3130呢？外部的script的加载不是也需要一定的时间吗？我们看看js的加载时间。

我们可以看到，外部js的加载时间仅为1.38s，也就是说在外部css还没有加载完的时候js就加载结束了，但是它并没有执行，而是等到css加载完了之后才执行的。所以才会得到3130这个数值。其中的差值就是js执行的时间。

结论：在css加载的过程中，下面的外部js同时也会加载，只是下面的外部js必须等到上面的css加载完成之后才能执行。并且js会阻断下面的js的执行，因为js的执行是单线程的，所以在外部css执行结束之后，下面的内联css才会继续执行。

测试4：

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>JS/CSS</title>

  <script>var start = +new Date;</script>

  <link href="http://udacity-crp.herokuapp.com/style.css?rtt=2" rel="stylesheet">

  <link rel="stylesheet" href="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/mancard/css/card_min_dee38e45.css">

  <script>

    var endAfterCss = +new Date;

    console.log("css", (endAfterCss - start));

  </script>

</head>

<body>

  <script src="http://udacity-crp.herokuapp.com/time.js?rtt=1&a"></script>

  <div id="result"></div>

  <script>

    var endAfterScript = +new Date;

    console.log("js",(endAfterScript - start));

  </script>

</body>

</html>

network如下：

即页面中的两个css是同时加载的，并且js也是，即两个css和js都是同时加载的，我的第二个css在html中是在js上面的，但是这里显示js却是先加载的，也就是说第一个css加载的时候，后面的js和css是同时加载的，至于谁最先加载，就不好说了，看下图，在代码没有改变的情况下，js是最后加载的。

说明：黄色部分为 Initial Connection ，即初始链接网络所消耗的时间，这种情况的发生往往是因为多个请求导致的。

如果我将耗时较长的css删除，那么我们得到的瀑布流如下所示：

可以看到这里确是js先加载的！

console控制台输出的结果是：

所以说link的加载不会影响js的加载是完全正确的。

结论：如果同时具有两个link，一个外部的css，那么此三者是同时加载的，只是无法确定后面两者的先后关系。同样的，必须要在css加载结束之后js才能执行。

　　　 如果只有一个css、一个js，那么两者的加载顺序是不确定的。

测试5：

　　异步加载js

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>JS Bin</title>

  <script>var start = +new Date;</script>

  <link href="http://udacity-crp.herokuapp.com/style.css?rtt=2" rel="stylesheet">

</head>

<body>

  test

  <script src="http://udacity-crp.herokuapp.com/time.js?rtt=1&a" async></script>

  <div id="result"></div>

  <script>

    var end = +new Date;

    console.log(end - start);

  </script>

</body>

</html>

　　表现如下：

　　可以看出，css的加载时间为2.37s， 在控制台的输出时间为2368ms，也就是说在css执行完成之后，外部js并没有阻碍下面的内联js的执行，而在页面中我们可以看到2094.6450000，这是指外联js执行的时间，我们在console控制台中可以看到外联js的执行时间为2.07s，也就是说在外联js加载完成之后就立即执行了，而没有等待外联css加载完毕再执行。

　　说明：再外联js的代码中我们使用了window.performance.now()方法，这个方法返回的是页面开启后的时间，且其单位为ms，小数点之后保留了13位，这样的好处是较之于Data.now()更有利于我们检测性能。

　　更多关于window.performance.now()的内容可以参照这篇文章：http://www.cnblogs.com/xiaohuochai/archive/2017/03/09/6523397.html

结论：使用了async属性之后，就可以实现js的异步加载，即该文件的执行不必等待外联css文件加载完成就可以执行，并且也不会阻塞后面的js的加载。

测试6：

　　创建<script>元素实现加载外部js

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>JS Bin</title>

  <script>var start = +new Date;</script>

  <link href="http://udacity-crp.herokuapp.com/style.css?rtt=2" rel="stylesheet">

</head>

<body>

  test

  <script>

    var script = document.createElement('script');

    script.src = "http://udacity-crp.herokuapp.com/time.js?rtt=1&a";

    document.getElementsByTagName('head')[].appendChild(script);

  </script>

  <div id="result"></div>

  <script>var end = +new Date;document.getElementById("result").innerHTML = end-start;</script>

</body>

</html>

　　我们可以看到瀑布流如下所示：

　　也就是说，在这种情况下，只有css完全加载完成之后，js才会加载。

结论：在script标签是动态创建的情况下，其加载的优先级较低，会在css完全加载之后再加载。注意观察： js的优先级为Low，所以会在css完全加载结束之后加载。

因为动态创建标签也是js语句，之前降到了语句的执行会被css阻塞。

测试7：

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>JS Bin</title>

  <script>var start = +new Date;</script>

  <link href="http://udacity-crp.herokuapp.com/style.css?rtt=2" rel="stylesheet">

  <script>

  var end0 = +new Date;

  console.log(end0 - start);

  </script>

</head>

<body>

   <script src="http://udacity-crp.herokuapp.com/time.js?rtt=1&a"></script>

  <div id="result"></div>

  <script>

  var end1 = +new Date;

  console.log(end1 - start);

  </script>

  <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

  <script>

  var end2 = +new Date;

  console.log(end2 - start);

  </script>

</body>

</html>

输出如下所示：

瀑布流如下所示：

可以看出css加载的过程中，后面的两个js同时加载，且加载的速度比css要快，这时css阻塞着后面的加载，一旦css加载完毕，已经加载好的js立即执行。

参考文章：http://www.cnblogs.com/shinnyChen/p/3762704.html