详解JS异步加载的三种方式


Posted in Javascript onMarch 07, 2017

一:同步加载

我们平时使用的最多的一种方式。

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

同步模式,又称阻塞模式,会阻止浏览器的后续处理,停止后续的解析,只有当当前加载完成,才能进行下一步操作。所以默认同步执行才是安全的。但这样如果js中有输出document内容、修改dom、重定向等行为,就会造成页面堵塞。所以一般建议把<script>标签放在<body>结尾处,这样尽可能减少页面阻塞。

二:异步加载

异步加载又叫非阻塞加载,浏览器在下载执行js的同时,还会继续进行后续页面的处理。主要有三种方式。

方法一:也叫Script DOM Element

(function(){
  var scriptEle = document.createElement("script");
  scriptEle.type = "text/javasctipt";
  scriptEle.async = true;
  scriptEle.src = "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js";
  var x = document.getElementsByTagName("head")[0];
  x.insertBefore(scriptEle, x.firstChild); 
 })();
<async>属性是HTML5中新增的异步支持。此方法被称为Script DOM Element 方法。Google Analytics 和 Google+ Badge 都使用了这种异步加载代码
(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); 
})();

但是这种加载方式执行完之前会阻止onload事件的触发,而现在很多页面的代码都在onload时还执行额外的渲染工作,所以还是会阻塞部分页面的初始化处理。

方法二: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; 
    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);
  }
)();

这种方法只是把插入script的方法放在一个函数里面,然后放在window的onload方法里面执行,这样就解决了阻塞onload事件触发的问题。

注:DOMContentLoaded与load的区别。前者是在document已经解析完成,页面中的dom元素可用,但是页面中的图片,视频,音频等资源未加载完,作用同jQuery中的ready事件;后者的区别在于页面所有资源全部加载完毕。

方法三:其他方法

由于JavaScript的动态性,还有很多异步加载方法: XHR Injection、 XHR Eval、 Script In Iframe、 Script defer属性、 document.write(script tag)。

XHR Injection(XHR 注入):通过XMLHttpRequest来获取JavaScript,然后创建一个script元素插入到DOM结构中。ajax请求成功后设置script.text为请求成功后返回的responseText。

//获取XMLHttpRequest对象,考虑兼容性。
  var getXmlHttp = function(){
    var obj;
    if (window.XMLHttpRequest)
      obj = new XMLHttpRequest();
    else
      obj = new ActiveXObject("Microsoft.XMLHTTP");
    return obj;
  }; 
  //采用Http请求get方式;open()方法的第三个参数表示采用异步(true)还是同步(false)处理
  var xmlHttp = getXmlHttp();
  xmlHttp.open("GET", "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js", true);
  xmlHttp.send(); 
  xmlHttp.onreadystatechange = function(){
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
      var script = document.createElement("script");
      script.text = xmlHttp.responseText;
      document.getElementsByTagName("head")[0].appendChild(script);
    }
  } 
XHR Eval:与XHR Injection对responseText的执行方式不同,直接把responseText放在eval()函数里面执行。
  //获取XMLHttpRequest对象,考虑兼容性。
  var getXmlHttp = function(){
    var obj;
    if (window.XMLHttpRequest)
      obj = new XMLHttpRequest();
    else
      obj = new ActiveXObject("Microsoft.XMLHTTP");
    return obj;
  }; 
  //采用Http请求get方式;open()方法的第三个参数表示采用异步(true)还是同步(false)处理
  var xmlHttp = getXmlHttp();
  xmlHttp.open("GET", "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js", true);
  xmlHttp.send(); 
  xmlHttp.onreadystatechange = function(){
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
      eval(xmlHttp.responseText);
      //alert($);//可以弹出$,表明JS已经加载进来。click事件放在其它出会出问题,应该是还没加载进来
      $("#btn1").click(function(){
        alert($(this).text());
      });
    }
  }

Script In Irame:在父窗口插入一个iframe元素,然后再iframe中执行加载JS的操作。

var insertJS = function(){alert(2)};
  var iframe = document.createElement("iframe");
  document.body.appendChild(iframe);
  var doc = iframe.contentWindow.document;//获取iframe中的window要用contentWindow属性。
  doc.open();
  doc.write("<script>var insertJS = function(){};<\/script><body onload='insertJS()'></body>");
  doc.close();

GMail Mobile:业内JS内容被注释,所以不会执行,在需要的时候,获取script中的text内容去掉注释,调用eval()执行。

<script type="text/javascript"> 
  /* 
  var ... 
  */ 
  </script>

    HTML5新属性:async和defer属性

defer属性:IE4.0就出现。defer属声明脚本中将不会有document.write和dom修改。浏览器会并行下载其他有defer属性的script。而不会阻塞页面后续处理。注:所有的defer脚本必须保证按顺序执行的。

<script type="text/javascript" defer></script>

async属性:Html5新属性。脚本将在下载后尽快执行,作用同defer,但是不能保证脚本按顺序执行。他们将在onload事件之前完成。

<script type="text/javascript" defer></script>

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

没有async属性,script将立即获取(下载)并执行,期间阻塞了浏览器的后续处理。如果有async属性,那么script将被异步下载并执行,同时浏览器继续后续的处理。

总结: 对于支持HTML5的浏览器,实现JS的异步加载只需要在script元素中加上async属性,为了兼容老版本的IE还需加上defer属性;对于不支持Html5的浏览器(IE可以用defer实现),可以采用以上几种方法实现。原理基本上都是向DOM中写入script或者通过eval函数执行JS代码,你可以把它放在匿名函数中执行,也可以在onload中执行,也可以通过XHR注入实现,也可以创建一个iframe元素,然后在iframe中执行插入JS代码。

三:延迟加载

有些JS代码在某些情况在需要使用,并不是页面初始化的时候就要用到。延迟加载就是为了解决这个问题。将JS切分成许多模块,页面初始化时只加载需要立即执行的JS,然后其它JS的加载延迟到第一次需要用到的时候再加载。类似图片的延迟加载。
JS的加载分为两个部分:下载和执行。异步加载只是解决了下载的问题,但是代码在下载完成后就会立即执行,在执行过程中浏览器处于阻塞状态,响应不了任何需求。

解决思路:为了解决JS延迟加载的问题,可以利用异步加载缓存起来,但不立即执行,需要的时候在执行。如何进行缓存呢?将JS内容作为Image或者Object对象加载缓存起来,所以不会立即执行,然后在第一次需要的时候在执行。

    1:模拟较长的下载时间:

    利用thread让其sleep一段时间在执行下载操作。

    2:模拟较长的JS代码执行时间

var start = Number(new Date());
  while(start + 5000 > Number(new Date())){//执行JS}

    这段代码将使JS执行5秒才完成!

JS延迟加载机制(LazyLoad):简单来说,就是在浏览器滚动到某个位置在触发相关的函数,实现页面元素的加载或者某些动作的执行。如何实现浏览器滚动位置的检测呢?可以通过一个定时器来实现,通过比较某一时刻页面目标节点位置和浏览器滚动条高度来判断是否需要执行函数。

以上所述是小编给大家介绍的详解JS异步加载的三种方式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
浅谈Javascript鼠标和滚轮事件
Jun 27 Javascript
关于页面嵌入swf覆盖div层的问题的解决方法
Feb 11 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
Apr 11 Javascript
实践中学习AngularJS表单
Mar 21 Javascript
jQuery验证插件validate使用详解
May 11 Javascript
jQuery实现鼠标经过购物车出现下拉框代码(推荐)
Jul 21 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
Aug 11 Javascript
canvas实现绘制吃豆鱼效果
Jan 12 Javascript
JS之if语句对接事件动作逻辑(详解)
Jun 28 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
Aug 03 Javascript
angular基于ng-alain定义自己的select组件示例
Feb 23 Javascript
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
Jun 14 Javascript
无法获取隐藏元素宽度和高度的解决方案
Mar 07 #Javascript
angularjs+bootstrap菜单的使用示例代码
Mar 07 #Javascript
JQuery中Ajax的操作完整例子
Mar 07 #Javascript
js判断手机系统是android还是ios
Mar 07 #Javascript
jQuery设计思想
Mar 07 #Javascript
Node.js读取文件内容示例
Mar 07 #Javascript
JQuery查找子元素find()和遍历集合each的方法总结
Mar 07 #Javascript
You might like
使PHP自定义函数返回多个值
2006/11/26 PHP
php 常用算法和时间复杂度
2013/07/01 PHP
PHP中session跨子域的三种实现方法
2016/07/25 PHP
JS判断是否为数字,是否为整数,是否为浮点数的代码
2010/04/24 Javascript
jQuery ajax BUG:object doesn't support this property or method
2010/07/06 Javascript
JavaScript ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_] )
2011/02/25 Javascript
JS等比例缩小图片尺寸的实例
2013/02/27 Javascript
javascript检测是否联网的实现代码
2014/09/28 Javascript
常见的jQuery选择器汇总
2014/11/24 Javascript
jquery实现鼠标滑过小图查看大图的方法
2015/07/20 Javascript
AngularJS全局scope与Isolate scope通信用法示例
2016/11/22 Javascript
jQuery导航条固定定位效果实例代码
2017/05/26 jQuery
vue router2.0二级路由的简单使用
2017/07/05 Javascript
利用node.js爬取指定排名网站的JS引用库详解
2017/07/25 Javascript
node获取客户端ip功能简单示例
2019/08/24 Javascript
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
2020/09/17 Javascript
python 应用之Pycharm 新建模板默认添加编码格式-作者-时间等信息【推荐】
2019/06/17 Python
Python在OpenCV里实现极坐标变换功能
2019/09/02 Python
Python能做什么
2020/06/02 Python
利用python绘制中国地图(含省界、河流等)
2020/09/21 Python
HTML5验证以及日期显示的实现详解
2013/07/05 HTML / CSS
HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题
2020/05/28 HTML / CSS
aden + anais英国官网:美国婴儿贴身用品品牌
2019/09/08 全球购物
几道PHP的面试题
2012/05/19 面试题
历史专业毕业生的自我鉴定
2013/11/15 职场文书
平面设计求职信
2014/03/10 职场文书
房屋租赁协议书范本
2014/04/10 职场文书
文秘求职信范文
2014/04/10 职场文书
国际贸易本科毕业生求职信
2014/09/26 职场文书
工作失职检讨书500字
2014/10/17 职场文书
实习推荐信格式模板
2015/03/27 职场文书
2015年财务人员个人工作总结
2015/07/27 职场文书
nginx 多个location转发任意请求或访问静态资源文件的实现
2021/03/31 Servers
超级详细实用的pycharm常用快捷键
2021/05/12 Python
MySQL高速缓存启动方法及参数详解(query_cache_size)
2021/07/01 MySQL
一行Python命令实现批量加水印
2022/04/07 Python