-
将<script>标签放到<body>底部
严格来说，这并不算是异步加载，但是这也是常见的通过改变js加载方式来提升页面性能的一种方式，所以也就放到这里来说。
将<script>放到<body>底部，解决上上面说到的几个问题，一是不会造成页面解析的阻塞，就算加载时间过长用户也可以看到页面而不是一片空白，而且这时候可以在脚本中操作DOM。 -
defer属性
通过给<script>标签设置defer属性，将脚本文件设置为延迟加载，当浏览器遇到带有defer属性的<script>标签时，会再开启一个线程去下载js文件，同时继续解析HTML文档，等等HTML全部解析完毕DOM加载完成之后，再去执行加载好的js文件。
这种方式只适用于引用外部js文件的<script>标签，可以保证多个js文件的执行顺序就是它们在页面中出现的顺序，但是要注意，添加defer属性的js文件不应该使用document.write方法。 -
async属性
async属性和defer属性类似，也是会开启一个线程去下载js文件，但和defer不同的时，它会在下载完成后立刻执行，而不是会等到DOM加载完成之后再执行，所以还是有可能会造成阻塞。
同样的，async也是只适用于外部js文件，也不能在js中使用document.write方法，但是对多个带有async的js文件，它不能像defer那样保证按顺序执行，它是哪个js文件先下载完就先执行哪个。 -
动态创建<script>标签
可以通过动态地创建<script>标签来实现异步加载js文件，例如下面代码：
(function(){
var scriptEle = document.createElement(“script”);
scriptEle.type = “text/javasctipt”;
scriptEle.async = true;
scriptEle.src = “http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js”;
var x = document.getElementsByTagName(“head”)[0];
x.insertBefore(scriptEle, x.firstChild);
})();
或者
(function(){
if(window.attachEvent){
window.attachEvent(“load”, asyncLoad);
}else{
window.addEventListener(“load”, asyncLoad);
}
var asyncLoad = function(){
var ga = document.createElement(‘script’);
ga.type = ‘text/javascript’;
ga.async = true;
ga.src = (‘https:’ == document.location.protocol ? ‘https://ssl’ : ‘http://www’) + ‘.google-analytics.com/ga.js’;
var s = document.getElementsByTagName(‘script’)[0];
s.parentNode.insertBefore(ga, s);
}
})();
上面两种方法中，第一种方式执行完之前会阻止onload事件的触发，而现在很多页面的代码都在onload时还执行额外的渲染工作，所以还是会阻塞部分页面的初始化处理。第二种则不会阻止onload事件的触发。
这里要简要说明一下window.DOMContentLoaded和window.onload这两个事件的区别，前者是在DOM解析完毕之后触发，这时候DOM解析完毕，JavaScript可以获取到DOM引用，但是页面中的一些资源比如图片、视频等还没有加载完，作用同jQuery中的ready事件。后者则是页面完全加载完毕，包括各种资源。
说完了这几种常见的异步加载js脚本的方式，再来看最后一个问题，什么时候用defer，什么时候用async呢？一般来说，两者之间的选择则是看脚本之间是否有依赖关系，有依赖的话应当要保证执行顺序，应当使用defer没有依赖的话使用async，同时使用的话defer失效。要注意的是两者都不应该使用document.write，这个导致整个页面被清除。
下面一幅图表明了同步加载以及defer、async加载时的区别，其中绿色线代表 HTML 解析，蓝色线代表网络读取js脚本，红色线代表js脚本执行时间：
314
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
