js异步加载和同步加载

2020-08-19

异步加载也叫非阻塞模式加载,浏览器在下载的同时,同时还会执行后续的页面处理。

在script标签内,用js创建一个script元素并插入到document中,这种就是异步加载js文件了:

(function() {     
    var s = document.createElement('script');    
    s.type = 'text/javascript';     
    s.async = true;    
    s.src = 'http://yourdomain.com/script.js';    
    var x = document.getElementsByTagName('script')[0];    
     x.parentNode.insertBefore(s, x); 
})();

同步加载

平常默认用的都是同步加载。如:

<script src="http://yourdomain.com/script.js"></script>

同步模式又称阻塞模式,会阻止浏览器的后续处理。停止了后续的文件的解析,执行,如图像的渲染。

浏览器之所以会采用同步模式,是因为加载的文件中有对的操作,重定向,输出等默认行为,所以同步才是最安全的。

通常会把要加载的放到结束标签之前,使得可在页面最后加载,尽量减少阻塞页面的渲染。这样可以先让页面显示出来。

同步加载流程是瀑布模型,异步加载流程是并发模型。

留言回复
我们只提供高质量资源,素材,源码,坚持 下了就能用 原则,让客户花了钱觉得值
上班时间 : 周一至周五9:00-17:30 期待您的加入