页面优化——js异步载入

同步载入

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

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

同步模式。又称堵塞模式，会阻止浏览器的兴许处理，停止了兴许的解析。因此停止了兴许的文件载入（如图像）、渲染、代码运行。一般的script标签（不带async等属性）载入时会堵塞浏览器，也就是说，浏览器在下载或运行该js代码块时。后面的标签不会被解析，比如在head中加入一个script，但这个script下载时网络不稳定，非常长时间没有下载完毕相应的js文件，那么浏览器此时一直等待这个js文件下载，此时页面不会被渲染，用户看到的就是白屏。

曾经的一般建议是把<script>放在页面末尾</body>之前，这样尽可能降低这样的堵塞行为。而先让页面展示出来。

异步载入

它同意无堵塞资源载入。而且使 onload 启动更快，同意页面内容载入。而不须要刷新页面，也能够依据页面内容延迟载入依赖。

常见异步载入举例：

（Script DOM Element）

(function() {
     var s = document.createElement('script');
     s.type = 'text/javascript';
     s.async = true;
     s.src = 'http://yourdomain.com/script.js';
     var x = document.getElementsByTagName('script')[0];
     x.parentNode.insertBefore(s, x);
 })();

这样的方法是在页面中<script>标签内，用 js 创建一个 script 元素并插入到 document 中。

这样就做到了非堵塞的下载 js 代码。

延迟载入（lazy loading）

前面攻克了异步载入（async loading）问题，再谈谈什么是延迟载入。
延迟载入：有些 js 代码并非页面初始化的时候就立马须要的，而稍后的某些情况才须要的。延迟载入就是一開始并不载入这些临时不用的js，而是在须要的时候或稍后再通过js 的控制来异步载入。

也就是将 js 切分成很多模块，页面初始化时仅仅载入须要马上运行的 js ，然后其他 js 的载入延迟到第一次须要用到的时候再载入。
特别是页面有大量不同的模块组成，非常多可能临时不用或根本就没用到。

就像图片的延迟载入，在图片出如今可视区域内时（在滚动栏下拉）才载入显示图片。

异步载入。须要将全部 js 内容按模块化的方式来切分组织，当中就存在依赖关系，而异步载入不保证运行顺序。​js模块化攻克了这个问题，请移步 了解模块化开发 

​