1 问题描述 JS为什么需要异步加载?首先要了解到JS在默认情况下是以同步模式(阻塞模式)加载的,浏览器对于代码请求的资源都是瀑布式的加载,而不是阻塞式的,但是JS的执行总是阻塞的。而对于异步加载(非阻塞加载),浏览器在加载JS的同时,还会继续进行后续页面的处理。接下来,就来看看异步加载是怎么回事吧。 2 问题解决 (1)动态生成script标签 <body> <p>这是文本</p> <script type="text/javascript"> (function(){ var s=document.createElement("script"); s.type="text/javascript"; s.src="http://china-addthis./svn/trunk/addthis.js"; document.body.appendChild(s); })(); </script> <script type="text/javascript" src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'></script> <script type="text/javascript"> alert("hello world"); </script> </body> |
(2)async属性 async属性规定一旦脚本可用,则会异步执行(一旦下载完毕就会立刻执行)。其仅适用于外部脚本(在使用src属性时适用)。 <body> <p>这是文本</p> <script type="text/javascript" src='http://china-addthis./svn/trunk/addthis.js' async="async"></script> <script type="text/javascript" src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'></script> <script type="text/javascript"> alert("hello world"); </script> </body> |
(3)defer属性 defer属性规定是否对脚本执行进行延迟,直到页面加载为止。 <body> <p>这是文本</p> <script type="text/javascript" src='http://china-addthis./svn/trunk/addthis.js' defer="defer"></script> <script type="text/javascript" src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'></script> <script type="text/javascript"> alert("hello world"); </script> </body> |
3 其他方法 XHR注入(通过XMLHttpRequest对象来获取JS,然后创建一个script元素插入到DOM结构中);ajaxeval(使用ajax得到脚本内容,然后通过eval(xmlhttp.responseText)来运行脚本);iframe等。
主 编 | 王楠岚 责 编 | wrape
|