JavaScript 异步加载JS

╰半夏微凉° 2022-05-28 00:15 301阅读 0赞

### 文章目录 ###

*   *  script 标签属性
     *  XMLHttpRequest 脚本注入
     *  动态创建 script 元素
     *  LazyLoad
     *  LABjs
     *  sea.js

> [https://wildye.cn/posts/737ef138/][https_wildye.cn_posts_737ef138]

## script 标签属性 ##

defer *HTML4中定义，兼容 IE 4+ 和 firebox 3.5 +*  
async *HTML5中引入*

<script defer src="one.js" onload="callBack()"></script>  <script async src="one.js" onload="callBack()"></script>

## XMLHttpRequest 脚本注入 ##

## 动态创建 script 元素 ##

readystatechange //readyState的状态改变时触发

readystate 状态：

<table> 
 <thead> 
  <tr> 
   <th>状态码</th> 
   <th>状态</th> 
   <th>备注</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>0</td> 
   <td>“uninitilized”</td> 
   <td>未初始化</td> 
  </tr> 
  <tr> 
   <td>1</td> 
   <td>“loading”</td> 
   <td>开始下载</td> 
  </tr> 
  <tr> 
   <td>2</td> 
   <td>“loaded”</td> 
   <td>下载完成</td> 
  </tr> 
  <tr> 
   <td>3</td> 
   <td>“interactive”</td> 
   <td>解析/数据完成下载但尚不可用</td> 
  </tr> 
  <tr> 
   <td>4</td> 
   <td>“completed”</td> 
   <td>所有数据已准备就绪</td> 
  </tr> 
 </tbody> 
</table>

## LazyLoad ##

*  下载地址 [https://github.com/rgrove/lazyload/][https_github.com_rgrove_lazyload]
 *  文件大小：2.66 KB
 *  loadScript( )函数的增强版

## LABjs ##

*  下载地址 [https://www.drupal.org/project/labjs][https_www.drupal.org_project_labjs]
 *  文件大小：5.37 KB
 *  适用于按指定顺序加载，有依赖关系，支持链式操作\*
 *  $LAB.script()：方法用来定义需要下载的JavaScript文件\*
 *  $LAB.wait()：用来指定文件下载并执行完毕后所调用的函数\*
 *  `.setOptions(AlwaysPreserveOrder:false)` 默认false，若为true，则每个script()后都会默认设置一个wait()，使得链上的脚本一个个执行。

## sea.js ##

*  下载地址 [https://github.com/seajs/examples][https_github.com_seajs_examples]
 *  适用于模块化开发 加载

[https_wildye.cn_posts_737ef138]: https://wildye.cn/posts/737ef138/
[https_github.com_rgrove_lazyload]: https://github.com/rgrove/lazyload/
[https_www.drupal.org_project_labjs]: https://www.drupal.org/project/labjs
[https_github.com_seajs_examples]: https://github.com/seajs/examples