- 默认加载js方式是同步加载(阻塞模式)
- 加载script脚本会阻塞css和其他文件加载 所以一般放在后面(只是减少阻塞 不能根本解决)
defer和async
- defer(IE8及以下): 表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。
- async(W3C html5属性 IE9及以上支持):表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本。只对外部脚本文件有效。
- 两者功能类似,都会告诉浏览器立即开始下载。不过与defer不同的是,async的脚本并不保证能按照它们出现的次序执行
- 如果想把script脚本写在加载css及其他前,加上
defer
,避免出现直接执行别且操作DOM对象的js报找不到对象的错误。相当于 window.onload 异步加载的js脚本里不要写dom操作
,所以完全与dom无关的就可以使用异步加载- 异步脚本保证会在页面的load事件前执行,但可能会在DOMContentLoaded之前或之后
<script type="text/javascript" src="util.js" defer="defer"></script>
什么时候执行?主动创建就是异步加载
<script type="text/javascript">
var s = document.createElement('script');
s.type = 'text/javascript';
s.src = 'util.js'
document.body.appendChild(s); //此步才会执行
//这里会阻塞window.onload
</script>
加载文件
在onload之后进行异步加载
(function(){
function async_load() {
//动态加载脚本
var s = document.createElement("script");
var oScript = document.getElementsByTagName('script')[0];
s.type = "text/javascript";
s.src = "util.js";
document.body.appendChild(s); //此步才会执行
oScript.parentNode.insertBefore(s,oScript);
}
if(window.attachEvent) {
window.attachEvent('onload',async_load)
}else {
window.addEventListener('load', async_load, false)
}
})()
标签不影响script 但script影响标签执行
异步加载demo