JS异步加载的几种方式
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS异步加载的几种方式相关的知识，希望对你有一定的参考价值。
一：同步加载
我们平时使用的最多的一种方式。
<script src="http://yourdomain.com/script.js"></script> <script src="http://yourdomain.com/script.js"></script>
同步模式，又称阻塞模式，会阻止浏览器的后续处理，停止后续的解析，只有当当前加载完成，才能进行下一步操作。所以默认同步执行才是安全的。但这样如果js中有输出document内容、修改dom、重定向等行为，就会造成页面堵塞。所以一般建议把<script>标签放在<body>结尾处，这样尽可能减少页面阻塞。
二：异步加载
异步加载又叫非阻塞加载，浏览器在下载执行js的同时，还会继续进行后续页面的处理。主要有三种方式。
方法一：也叫Script DOM Element
(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); })();
<async>属性是HTML5中新增的异步支持。此方法被称为Script DOM Element 方法。Google Analytics 和 Google+ Badge 都使用了这种异步加载代码.
(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时的异步加载
(function(){ if(window.attachEvent){ window.attachEvent("onload", 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); } )();
这种方法只是把插入script的方法放在一个函数里面，然后放在window的onload方法里面执行，这样就解决了阻塞onload事件触发的问题。
注:DOMContentLoaded与load的区别。前者是在document已经解析完成，页面中的dom元素可用，但是页面中的图片，视频，音频等资源未加载完，作用同jQuery中的ready事件；后者的区别在于页面所有资源全部加载完毕。
由于JavaScript的动态性，还有很多异步加载方法： XHR Injection、 XHR Eval、 Script In Iframe、 Script defer属性、 document.write(script tag)。
方法三：XHR Injection
//获取XMLHttpRequest对象，考虑兼容性。 var getXmlHttp = function(){ var obj; if (window.XMLHttpRequest) obj = new XMLHttpRequest(); else obj = new ActiveXObject("Microsoft.XMLHTTP"); return obj; }; //采用Http请求get方式;open()方法的第三个参数表示采用异步(true)还是同步(false)处理 var xmlHttp = getXmlHttp(); xmlHttp.open("GET", "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js", true); xmlHttp.send(); xmlHttp.onreadystatechange = function(){ if (xmlHttp.readyState == 4 && xmlHttp.status == 200){ var script = document.createElement("script"); script.text = xmlHttp.responseText; document.getElementsByTagName("head")[0].appendChild(script); } }
方法四：XHR Eval
与XHR Injection对responseText的执行方式不同，直接把responseText放在eval()函数里面执行。
//获取XMLHttpRequest对象，考虑兼容性。 var getXmlHttp = function() { var obj; if (window.XMLHttpRequest) obj = new XMLHttpRequest(); else obj = new ActiveXObject("Microsoft.XMLHTTP"); return obj; }; //采用Http请求get方式;open()方法的第三个参数表示采用异步(true)还是同步(false)处理 var xmlHttp = getXmlHttp(); xmlHttp.open("GET", "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js", true); xmlHttp.send(); xmlHttp.onreadystatechange = function() { if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { eval(xmlHttp.responseText); //alert($);//可以弹出$,表明JS已经加载进来。click事件放在其它出会出问题，应该是还没加载进来 $("#btn1").click(function() { alert($(this).text()); }); } }
方法五：Script In Irame
在父窗口插入一个iframe元素，然后再iframe中执行加载JS的操作。
var insertJS = function(){alert(2)}; var iframe = document.createElement("iframe"); document.body.appendChild(iframe); var doc = iframe.contentWindow.document;//获取iframe中的window要用contentWindow属性。 doc.open(); doc.write("<script>var insertJS = function(){};<\\/script><body onload=‘insertJS()‘></body>"); doc.close();
方法六：GMail Mobile
页内JS内容被注释，所以不会执行，在需要的时候，获取script中的text内容去掉注释，调用eval()执行。
<script type="text/javascript">
/*
var ...
*/
</script>
方法七：html5新属性
defer属性：IE4.0就出现。defer属声明脚本中将不会有document.write和dom修改。浏览器会并行下载其他有defer属性的script。而不会阻塞页面后续处理。注：所有的defer脚本必须保证按顺序执行的。
<script type="text/javascript" defer></script>
async属性：Html5新属性。脚本将在下载后尽快执行，作用同defer，但是不能保证脚本按顺序执行。他们将在onload事件之前完成。
<script type="text/javascript" async></script>
Firefox 3.6、Opera 10.5、IE 9和最新的Chrome和Safari都支持async属性。可以同时使用async和defer，这样IE 4之后的所有IE都支持异步加载。
没有async属性，script将立即获取（下载）并执行，期间阻塞了浏览器的后续处理。如果有async属性，那么script将被异步下载并执行，同时浏览器继续后续的处理。
总结： 对于支持HTML5的浏览器，实现JS的异步加载只需要在script元素中加上async属性，为了兼容老版本的IE还需加上defer属性；对于不支持HTML5的浏览器(IE可以用defer实现)，可以采用以上几种方法实现。原理基本上都是向DOM中写入script或者通过eval函数执行JS代码，你可以把它放在匿名函数中执行，也可以在onload中执行，也可以通过XHR注入实现，也可以创建一个iframe元素，然后在iframe中执行插入JS代码。
三：延迟加载
有些JS代码在某些情况在需要使用，并不是页面初始化的时候就要用到。延迟加载就是为了解决这个问题。将JS切分成许多模块，页面初始化时只加载需要立即执行的JS，然后其它JS的加载延迟到第一次需要用到的时候再加载。类似图片的延迟加载。
JS的加载分为两个部分：下载和执行。异步加载只是解决了下载的问题，但是代码在下载完成后就会立即执行，在执行过程中浏览器处于阻塞状态，响应不了任何需求。
解决思路：为了解决JS延迟加载的问题，可以利用异步加载缓存起来，但不立即执行，需要的时候在执行。如何进行缓存呢？将JS内容作为Image或者Object对象加载缓存起来，所以不会立即执行，然后在第一次需要的时候在执行。
1：模拟较长的下载时间：
利用thread让其sleep一段时间在执行下载操作。
2：模拟较长的JS代码执行时间
var start = Number(new Date());
while(start + 5000 > Number(new Date())){//执行JS}
这段代码将使JS执行5秒才完成！
JS延迟加载机制(LazyLoad)：简单来说，就是在浏览器滚动到某个位置在触发相关的函数，实现页面元素的加载或者某些动作的执行。如何实现浏览器滚动位置的检测呢？可以通过一个定时器来实现，通过比较某一时刻页面目标节点位置和浏览器滚动条高度来判断是否需要执行函数。
一个LazyLoad例子：
原文:http://www.qiqiboy.com/2010/08/27/js-delayed-loading-mechanism-function-lazyload.html
最近应该大家都发现了，我的博客很多模块都使用了延迟加载技术。这个延迟加载(lazyload)我第一次听说其实还是不久前，那是在别人博客看到 介绍的一个基于jQuery的图片延迟加载插件。我对这个很感兴趣，其实很多网站也都应用了这个技术，尤其是大型网站，可以有效地减少服务器压力。
我原先觉得这个技术挺神秘的，实现起来应该比较困难，并且在网上也并没有找到相关的文章或者介绍。但是当我真正决定要去这样做时，却发现其实这个真的挺简单的，原理也容易理解。
lazyload，简单地说，就是在浏览器滚动到某个位置时再出发相关函数，实现页面元素的加载或者某些动作的执行。浏览器的滚动位置检测，可以通 过一个定时器来循环检测，通过比较某一时刻页面目标节点位置和浏览器滚动条高度来判断需不要要执行函数。我将这个方法写成了一个类，我自己博客即是使用我 的这个方法。
（下面代码纯属自己的小试手，如果有不完善地方可以指出）
1 function Lazyload(func, obj) { //obj目标节点对象, func要触发的函数 2 this.func = func; 3 this.obj = obj; 4 this.it = setInterval(function() { //2s检查一次 5 this.checkScroll(); 6 }.bind(this), 2000); //bind为setInterval绑定lazyload对象，否则this会指向window对象 7 } 8 9 Function.prototype.bind = function(obj) { //对象绑定 10 var __method = this; 11 return function() { 12 return __method.apply(obj, arguments); 13 }; 14 } 15 16 Lazyload.prototype.checkScroll = function() { 17 var scrollY = document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset || 0, //页面滚动条高度 18 seeY = window.innerHeight || document.documentElement.clientHeight, //浏览器可视区域高度 19 func = this.func; 20 if (Math.abs(this.getY() - scrollY) < seeY) { //当目标节点进入可视区域，即页面滚动条高度减去节点距页面顶部距离小于浏览器可视高度 21 clearInterval(this.it); //清除定时器 22 return func(); 23 } 24 } 25 26 Lazyload.prototype.getY = function() { //目标节点距页面顶部高度 27 var obj = this.obj; 28 tp = obj.offsetTop; 29 if (obj.offsetParent) 30 while (obj = obj.offsetParent) tp += obj.offsetTop; 31 return tp; 32 }
关于代码的一些解释都在注释里了。如何使用呢？
使用这个方法要通过new来新建类对象的方法。参数func即是要触发的函数，obj即是页面上某个节点对象，即当此obj节点进入可视区域时（浏 览器滚动到此处）即触发func函数。比如，你要实现当浏览器滚动到页面上id为“test”的节点（b）时触发弹出窗口alert(‘yes’),可以 这么做
1: function a(){alert(‘yes‘);}//要出发的函数
2: var b=document.getElementById(‘tests‘);//获取页面节点
3: new Lazyload(a,b);//使用new关键字建立对象执行
以上就是我自己的lazyload的全部代码与实现方式了。当然，我相信它还有改进之处。
补充一些其他的东西：
我的代码中定时检测的时间设定是2s，也就是说每两秒去比较一次。如果你浏览器拖动太快，目标节点被很快的一闪而过，很可能此时就刚好没有执行 checkScroll函数，所以也就不会触发动作了。你可以将时间改为更小的值（在第6行），如500ms，可以避免大多数的快速拖动造成的问题。当 然，我觉得其实没必要，如果某人很快的拖动滚动条，说明他要浏览的东西在页面底部，那么其实是没必要加载他快速拖动过的节点的，所以2s我觉得是一个很合理的值。
另外一个问题是我的代码是只触发出现在可视区域中的节点动作，如果你想要实现在当前浏览的页面以上部分的节点全部要加载，那么可以将代码的第20行去掉Math.abs即可。如果要实现在滚动到距目标节点一定高度时就开始触发函数，那么可将20行的seeY改为seeY+200(200即为设定的距离高度)。
关于lazyload的一个具体的实现，就还拿图片的延迟加载来说吧。你可以将图片的地址都改成一个默认的小图片（这个可以在后台用php直接修改 输出，也可以用js实现），将正真的图片地址存到图片的alt属性中（也可以指定一个自定义的属性），然后对每个图片绑定new lazyload，要触发的动作函数就是将alt中的值赋给src即可。这样，就实现了图片的lazyload（你就可以消灭jQuery，消灭 jQuery的lazyload插件了，也就消灭了那100来K的JS文件）。如果再结合ajax技术，那么也就可以实现如我博客一样的模块延迟加载了。
（本文摘自网友的微博组合而成，并不是我本人所写。如有冒犯，敬请谅解并告知!）
以上是关于JS异步加载的几种方式的主要内容，如果未能解决你的问题，请参考以下文章