如何实现JS异步加载

2020-11-03 本文已影响0人张晖

问题在前：
1.当CSS执行卡住时，DOM会不会继续渲染？如果是JS卡住呢？
2.有没有用过<script>标签的async属性？

该总结看似和以上两个问题不相关，实则回答了以上问题。

一、为什么要JS异步加载？

因为同步加载存在问题！即某个请求迟迟得不到响应。

JS在默认情况下是以同步模式（又称阻塞模式）加载的，这里“加载”的意思是“解析、执行”。
在最新版本的浏览器中，浏览器对于代码请求的资源都是瀑布式的加载，而不是阻塞式的，但是 JS 的执行总是阻塞的。这会引起什么问题呢？

如果在页面中加载一些 JS，但其中某个请求迟迟得不到响应，位于此 JS 后面的 JS 将无法执行，同时页面渲染也不能继续，用户看到的就是白屏（此时JS在<head>标签之后引入）。

<head>
       <meta charset="UTF-8">
       <title>test</title>
       <script type="text/javascript" src='http://china-addthis.googlecode.com/svn/trunk/addthis.js'></script>
       <script type="text/javascript" src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'></script>
</head>
<body>
   <p>我是小仙女</p>
</body>

这是一个简单的html文件，页面的主体是简单地文本段落，但是代码执行后迟迟都是空白。为什么呢？

因为第一个请求的JS迟迟无法加载，于是阻塞了后面代码的执行，页面得不到渲染。

那该怎么办呢？你可能会想到一个方法，把JS代码放到</body>标签之前！
好主意！于是我们把 JS 放在HTML语句后面（这也是所提倡的页面结构）。

<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
   <p>我是小仙女</p>
   <script type="text/javascript" src='http://china-addthis.googlecode.com/svn/trunk/addthis.js'></script>
   <script type="text/javascript" src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'></script>
</body>

页面瞬间被渲染，问题似乎解决了，可是...

<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
   <p>我是小仙女</p>
   <script type="text/javascript" src='http://china-addthis.googlecode.com/svn/trunk/addthis.js'></script>
   <script type="text/javascript" src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'></script>
   <script type="text/javascript">
      alert("hello world");
   </script>
</body>

我们在前面代码的基础上简单加了一段代码，但 "hello world" 迟迟无法被弹出，显然是因为前面的 JS 请求阻塞了后面代码的加载。

这时同步加载的问题依然存在：改变 JS 的加载位置只能改变页面的渲染，JS 还是会阻塞。

二、如何实现JS异步加载？

异步加载即非阻塞加载，浏览器在加载JS的同时，还会继续进行后续页面的处理。

在本例中，我们想实现在请求第一段谷歌提供的JS的同时，下面的JS不受影响，继续执行。
如何实现？现在提供常用的几种方法：

1. 动态生成<script>标签

<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
   <p>我是小仙女</p>
   <script type="text/javascript">
   (function(){
      var s=document.createElement("script");
      s.type="text/javascript";
      s.src="http://china-addthis.googlecode.com/svn/trunk/addthis.js";
      document.body.appendChild(s);
   })();
   </script>
   <script type="text/javascript" src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'></script>
   <script type="text/javascript">
      alert("hello world");
   </script>
</body>

但是上面的代码还有点问题，这种加载方式在加载执行完之前会阻止 onload 事件的触发，而现在很多页面的代码都在 onload 时执行额外的渲染工作等，所以还是会阻塞部分页面的初始化处理。

<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
   <p>我是小仙女</p>
   <script type="text/javascript">
   (function(){
      //function lazy(){
        var s=document.createElement("script");
        s.type="text/javascript";
        s.src="http://china-addthis.googlecode.com/svn/trunk/addthis.js";
        document.body.appendChild(s); 
     // }
     // window.addEventListener("load",lazy,false);
   })();
   window.onload=function(){
      alert("hello world");
   };
   </script>
   <script type="text/javascript" src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'></script>
</body>

上面带注释的代码不能很好的渲染 "hello world"，因为存在阻塞onload事件问题；
可以把注释去掉，让谷歌提供的 JS 在 onload 时才开始异步加载，这就解决了上述问题。

2. async属性

async是HTML5的新属性，该属性规定一旦脚本可用，则会异步执行（一旦下载完毕就会立刻执行）。
需要注意的是：async 属性仅适用于外部脚本（只有在使用src属性时）。

<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
   <p>我是小仙女</p>
   <script type="text/javascript" src='http://china-addthis.googlecode.com/svn/trunk/addthis.js' async="async"></script>
   <script type="text/javascript" src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'></script>
   <script type="text/javascript">
      alert("hello world");
   </script>
</body>

3. defer属性

defer 属性规定是否对脚本执行进行延迟，直到页面加载为止。
之前只有IE的hack支持defer属性，现在H5开始全面支持defer属性。

<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
   <p>我是小仙女</p>
   <script type="text/javascript" src='http://china-addthis.googlecode.com/svn/trunk/addthis.js' defer="defer"></script>
   <script type="text/javascript" src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'></script>
   <script type="text/javascript">
      alert("hello world");
   </script>
</body>

async和defer看起来差不多呀？而且经常一起出现！来辨析一下：

a. 如果没有 async 和 defer 属性，那么浏览器会立即执行当前的 JS 脚本，阻塞后面的脚本；
b. 如果有 async 属性，加载和渲染后续文档的过程和当前 JS 的加载与执行并行进行（异步），它是乱序执行的，不管你声明的顺序如何，只要它加载完了就会执行；
c. 如果有 defer 属性，加载后续文档元素的过程和 JS 的加载是并行进行（异步）的，但是 JS 的执行在所有元素解析完成之后进行，而且它是按照加载顺序执行脚本的。

作者：寻找薛定谔的猫
链接：https://www.jianshu.com/p/3aa3a3e27417
来源：简书