异步加载:
如何实现?不会阻断HTML CSS的下载,
defer:只有IE9以下能用
和htmlcss并行下载
也可以这样在里面写:代码可以写到内部
执行:
正常js标签:下载完毕执行,执行完后加载html,css
defer:整个页面解析完毕,即dom树生成完 ,页面加载完之前(有文字图片没有加载完)
async :IE9九以下不行
加载完就执行,只能写scr,不能在内部写
重点:
script.src="demo.js"这时,进行下载,在执行后两行document.head.appendChild(script)和test(),demo.js也不一定就下载完了。
script.onload中onload方法,下载完才执行方法(兼容性好:Sarfi chrome firefox opera):
IE状态码:readyState=“loading”/“loaded”“complete”(加载完了)
onreadystatechange事件监听
异步加载封装函数:
// An highlighted blockfunction loadScript(url, callback) {var script = document.createElement("script");script.type = "text/javascript";if (script.readyState) {script.onreadystatechange = function () {if (script.readyState == "complete" || script.readyState == "loaded") {callback();}}} else {script.onload = function () {callback();}}script.src = url;document.head.appendChild(script);}
调用方式:
// An highlighted blockloadScript("test.js",function(){test();});
test.js内是:
// An highlighted block
function test(){console.log("a");
}
结果: