js异步加载的方式

同步加载:同步模式又叫阻塞模式,如果js中有输出内容,修改DOM等操作,就会造成页面阻塞。建议将script引用放到body后面,尽量减少阻塞。

异步加载:非阻塞加载。下载执行js 的同时,不会影响页面其他加载。

                  1.Script DOM Element:仍然会阻塞onload的执行

(function(){
  var scriptEle = document.createElement("script");
  scriptEle.type = "text/javasctipt";
  scriptEle.async = true;
  ...
})()

2.onload里面异步加载

(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; 
    ...
 }
})()

3.其他方法:  HTML5新属性:async和defer属性

defer是之前属性,IE4.0出现,保证js按顺序执行。

async是新属性,不保证顺序。

Firefox 3.6、Opera 10.5、IE 9和最新的Chrome和Safari都支持async属性。可以同时使用async和defer,这样IE 4之后的所有IE都支持异步加载。

-------分割-------

异步加载只是保证了js下载时不阻塞其他,只是解决了下载的问题,但是下载完之后就会立即执行,同样会阻塞浏览器。

所以,需要‘’延迟加载‘’;就是再浏览器滚动到某个位置时才执行相关操作。

原文地址:https://www.cnblogs.com/shirleysblog/p/15193095.html