JavaScript|JS异步加载

欢迎点击「算法与编程之美」↑关注我们！

本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。

1 问题描述

JS为什么需要异步加载？首先要了解到JS在默认情况下是以同步模式（阻塞模式）加载的，浏览器对于代码请求的资源都是瀑布式的加载，而不是阻塞式的，但是JS的执行总是阻塞的。而对于异步加载（非阻塞加载），浏览器在加载JS的同时，还会继续进行后续页面的处理。接下来，就来看看异步加载是怎么回事吧。

2 问题解决

（1）动态生成script标签

<body>

(function(){

var s=document.createElement("script");

s.type="text/javascript";

s.src="http://china-addthis.googlecode.com/svn/trunk/addthis.js";

document.body.appendChild(s);

})();

</script>

alert("hello world");

</script>

</body>

（2）async属性

async属性规定一旦脚本可用，则会异步执行（一旦下载完毕就会立刻执行）。其仅适用于外部脚本（在使用src属性时适用）。

<body>

alert("hello world");

</script>

</body>

（3）defer属性

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

<body>

alert("hello world");

</script>

</body>

3 其他方法

XHR注入（通过XMLHttpRequest对象来获取JS，然后创建一个script元素插入到DOM结构中）；ajaxeval(使用ajax得到脚本内容，然后通过eval（xmlhttp.responseText）来运行脚本)；iframe等。

END

主编 | 王楠岚

责编 | wrape

where2go 团队

微信号：算法与编程之美

长按识别二维码关注我们!

温馨提示：点击页面右下角“写留言”发表评论，期待您的参与！期待您的转发！

本文分享自微信公众号 - 算法与编程之美（algo_coding）。
如有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。

来源：oschina

链接：https://my.oschina.net/u/271937/blog/4408639

标签