Copyright © 2015-2021,
www.cda.cn
All Rights Reserved. CDA数据分析师(北京国富如荷网络科技有限公司) 版权所有
京ICP备11001960号-9
京公网安备 11010802034615号
经营许可证编号:京B2-20210330

联系电话:13321103290 (微信同号)
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); } })();
完 谢谢观看