登录
首页大数据时代这三种JS异步加载的方式,你必须掌握!
这三种JS异步加载的方式,你必须掌握!
2020-07-16
收藏

通常情况下javascript是默认同步加载的,也就是所说的javascript的加载时阻塞的,后面的页面要等到javascript加载结束后,才能再进行加载,这样对于一些意义不是很大的javascript来说,如果放在页头会导致加载很慢的话,会严重影响用户的体验度的。

异步加载又叫非阻塞加载,也就是说浏览器在下载执行js的同时,还能继续进行后续页面的处理。举个生活中的例子:同步:早上起床,先刷牙,然后烧水,等水烧开了再洗脸,之后再整理发型.异步:先刷牙,然后烧水,烧水同时整理发型,等水烧开后,再取刚烧开的水洗脸

异步加载通常有以下几种方式:

1、defer,

只支持IEdefer 属性规定是否对脚本执行进行延迟,需要等dom文档全部解析完毕才会被执行。


<script type="text/javascript" src="demo.js" defer="defer"></script>

//行内js
<script type="text/javascript"  defer="defer">
console.log(“a”);
</script>

2、async:async属性是HTML5中新增的异步支持,async 属性规定一旦脚本可用,加载完毕就会执行,但是async只能加载外部js脚本,不能把js书写在script标签内(W3C标准方法)


<script type="text/javascript" src="demo.js" async="async"></script>



3.onload时的异步加载

创建script,插入到DOM中,加载完毕后callback

(function(){
	if(window.attachEvent){
    	window.attachEvent("load", asyncLoad);
    }else{
    	window.addEventListener("load", asyncLoad);
    }
    var asyncLoad = function(){
    	var ga = document.createElement('script'); 
        ga.type = 'text/javascript'; 
        ga.async = true; 
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 
        var s = document.getElementsByTagName('script')[0]; 
        s.parentNode.insertBefore(ga, s);
    }
})();


数据分析咨询请扫描二维码

客服在线
立即咨询