js异步加载

同步加载

在介绍js异步加载之前，我们先来看看什么是js同步加载。我们平时最常使用的就是这种同步加载形式：

<script src="http://XXX.com/script.js"></script>

同步模式，又称阻塞模式，会阻止浏览器的后续处理，停止了后续的解析，因此停止了后续的文件加载（如图像）、渲染、代码执行。一般的script标签（不带async等属性）加载时会阻塞浏览器，也就是说，浏览器在下载或执行该js代码块时，后面的标签不会被解析，例如在head中添加一个script，但这个script下载时网络不稳定，很长时间没有下载完成对应的js文件，那么浏览器此时一直等待这个js文件下载，此时页面不会被渲染，用户看到的就是白屏。以前的一般建议是把<script>放在页面末尾</body>之前，这样尽可能减少这种阻塞行为，而先让页面展示出来。

异步加载

它允许无阻塞资源加载，并且使 onload 启动更快，允许页面内容加载，而不需要刷新页面，也可以根据页面内容延迟加载依赖。

常见异步加载举例：

1.动态创建<script>标签

（Script DOM Element）

[js] view plain copy

1. <strong>(function() {  
2.      var s = document.createElement('script');  
3.      s.type = 'text/javascript';  
4.      s.async = true;  
5.      s.src = 'http://yourdomain.com/script.js';  
6.      var x = document.getElementsByTagName('script')[0];  
7.      x.parentNode.insertBefore(s, x);  
8.  })();</strong>  

这种方法是在页面中<script>标签内，用 js 创建一个 script 元素并插入到 document 中。这样就做到了非阻塞的下载 js 代码。

2.使用$(document).ready()

从异步加载的定义上来看，jQuery的$(document).ready()也解决了同步加载所带来的不便，也可以归结到异步加载的方式中。

3.使用 <script>标签的async="async"属性

此属性是html5中新增属性，存在浏览器兼容问题，不推荐使用。async 属性仅适用于外部脚本（只有在使用 src 属性时）。

4.使用<script>标签的defer="defer"属性

defer 属性规定是否对脚本执行进行延迟，直到页面加载为止。

延迟加载（lazy loading）

前面解决了异步加载（async loading）问题，再谈谈什么是延迟加载。
延迟加载：有些 js 代码并不是页面初始化的时候就立刻需要的，而稍后的某些情况才需要的。延迟加载就是一开始并不加载这些暂时不用的js，而是在需要的时候或稍后再通过js 的控制来异步加载。
也就是将 js 切分成许多模块，页面初始化时只加载需要立即执行的 js ，然后其它 js 的加载延迟到第一次需要用到的时候再加载。
特别是页面有大量不同的模块组成，很多可能暂时不用或根本就没用到。
就像图片的延迟加载，在图片出现在可视区域内时（在滚动条下拉）才加载显示图片。

异步加载，需要将所有 js 内容按模块化的方式来切分组织，其中就存在依赖关系，而异步加载不保证执行顺序。​js模块化解决了这个问题。