首页 > 代码库 > javascript脚本异步加载的几种方式
javascript脚本异步加载的几种方式
一般而言，javascript脚本一般是建议放在body标签的底部，因为使用script标签加载js时，会停止加载后面的内容而停下来解析脚本并对页面进行渲染，使用src属性加载外部脚本也会造成这样的情况，这样的话，如果在head或者body的前面放入过多的script标签，并且内容很多的时候，会造成页面在解析完所有script标签的内容前有短暂的时间整个页面空白，给用户的体验会很差。但是如果所有的脚本都放在底部，又会造成dom加载完毕后有一段时间页面虽然能看到，但是和用户的交互却很差，因此需要让一些脚本与页面异步加载。
1.在html5中，script新增了async的属性，script添加了该属性之后，下载脚本时将可以与页面其他内容并行下载，但是该属性必须在ie9以上的浏览器中才可以使用，并且只能用于加载外部js脚本。
2.同样，在html4中也有一个defer属性，该属性的兼容性更好一点，但是与async一样，可以让js脚本实现异步加载，同样只能用于加载外部js脚本。
asyc与defer属性的不同点是，async会让脚本在加载完可用时立即执行，而defer脚本则会在dom加载完毕后执行，defer脚本的执行会在window.onload之前，其他没有添加defer属性的script标签之后。
<!DOCTYPE html><html lang="en"><head> <title></title> <meta charset="UTF-8"></head><script> window.onload = function() { console.log("window.onload"); }</script><script src="js/defer.js" defer></script><script> console.log("normal");</script><body></body></html>
显示的顺序为：normal defer window.onload
3.利用XHR异步加载js内容并执行，代码如下
<!DOCTYPE html><html lang="en"><head> <title></title> <meta charset="UTF-8"></head><script> var xhr = new XMLHttpRequest(); xhr.open("get", "js/defer.js",true) xhr.send(); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { eval(xhr.responseText); } }</script><body></body></html>
4.动态创建script标签，主要代码如下
var script = document.createElement("script"); script.src = "js/test.js"; document.head.appendChild(script);
该方式还可以通过script的onreadyState监视加载的状态。
5.iframe方式，利用iframe加载一个同源的子页面，让子页面内的js影响当前父页面的一种方式。
javascript脚本异步加载的几种方式
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。