默认情况javascript是同步加载的,也就是javascript的加载时阻塞的,后面的元素要等待javascript加载完毕后才能进行再加载,对于一些意义不是很大的javascript,如果放在页头会导致加载很慢的话,是会严重影响用户体验的。
1:async
注释:async 属性仅适用于外部脚本(只有在使用 src 属性时)。
有多种执行外部脚本的方法:
•如果 async="async":脚本相对于页面的其余部分异步地执行(当页面继续进行解析时,脚本将被执行)
•如果不使用 async 且 defer="defer":脚本将在页面完成解析时执行
•如果既不使用 async 也不使用 defer:在浏览器继续解析页面之前,立即读取并执行脚本
<script type= "text/javascript" async = "async"></script>
2:defer
defer 属性规定是否对脚本执行进行延迟,直到页面加载为止。
<script type = "text/javascript" defer = "defer"><script>
3:创建script,插入到DOM中,加载完毕后callBack
<script type ="text/javascript">
function asyncloaded(url,callback){
var script = document.createElement("script");
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)
}
syncloaded("",function(){
fn()
})
</script>