夏日博客

A-A+

Javascript/jquery异步加载使用方法详解

2016年10月16日 前端设计 暂无评论 阅读 5 views 次

本文章来给大家介绍在js中实现异步加载方法介绍，这里包括有各种各样的异步加载效果，最后来还给大家介绍异步加载jquery实现代码，有需要了解的朋友可参考。

一、同步加载与异步加载的形式

1. 同步加载

我们平时最常使用的就是这种同步加载形式：

同步模式，又称阻塞模式，会阻止浏览器的后续处理，停止了后续的解析，因此停止了后续的文件加载（如图像）、渲染、代码执行,js 之所以要同步执行，是因为 js 中可能有输出 document 内容、修改dom、重定向等行为，所以默认同步执行才是安全的。
以前的一般建议是把放在页面末尾之前，这样尽可能减少这种阻塞行为，而先让页面展示出来。

简单说：加载的网络 timeline 是瀑布模型，而异步加载的 timeline 是并发模型。

2. 常见异步加载Script DOM Element,代码如下:

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

异步加载又叫非阻塞，浏览器在下载执行 js 同时，还会继续进行后续页面的处理。

这种方法是在页面中标签内，用 js 创建一个 script 元素并插入到 document 中。这样就做到了非阻塞的下载 js 代码。
async属性是HTML5中新增的异步支持，见后文解释，加上好（不加也不影响）。

此方法被称为 Script DOM Element 法，不要求 js 同源。

将js代码包裹在匿名函数中并立即执行的方式是为了保护变量名泄露到外部可见，这是很常见的方式，尤其是在 js 库中被普遍使用,例如 Google Analytics 和 Google+ Badge 都使用了这种异步加载代码：

  1. (function() {  
  2.      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;  
  3.      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';  
  4.      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);  
  5.  })();(function()//xiariboke.net  
  6.     {var po = document.createElement("script");  
  7.     po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js";  
  8.     var s = document.getElementsByTagName("script")[0];  
  9.     s.parentNode.insertBefore(po, s);  
  10.  })();  

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

3. onload 时的异步加载,代码如下:

  1. (function() {  
  2.      function async_load(){  
  3.          var s = document.createElement('script');  
  4.          s.type = 'text/javascript';  
  5.          s.async = true;  
  6.          s.src = 'http://yourdomain.com/script.js';  
  7.          var x = document.getElementsByTagName('script')[0];  
  8.          x.parentNode.insertBefore(s, x);  
  9.      }  
  10.      if (window.attachEvent)  
  11.          window.attachEvent('onload', async_load);  
  12.      else  
  13.          window.addEventListener('load', async_load, false);  
  14.  })();  

这和前面的方式差不多,但关键是它不是立即开始异步加载 js,而是在 onload 时才开始异步加载,这样就解决了阻塞 onload 事件触发的问题。

补充：DOMContentLoaded 与 OnLoad 事件.

DOMContentLoaded:页面(document)已经解析完成，页面中的dom元素已经可用。但是页面中引用的图片、subframe可能还没有加载完。

OnLoad：页面的所有资源都加载完毕（包括图片）。浏览器的载入进度在这时才停止。

这两个时间点将页面加载的timeline分成了三个阶段。

4.异步加载的其它方法

由于Javascript的动态特性，还有很多异步加载方法：

1.XHR Eval

2.XHR Injection

3.Script in Iframe

4.Script Defer

5.document.write Script Tag

6.还有一种方法是用 setTimeout 延迟0秒 与 其它方法组合。

XHR Eval:通过 ajax 获取js的内容,然后 eval 执行,代码如下:

  1. var xhrObj = getXHRObject();  
  2.  xhrObj.onreadystatechange =  
  3.    function() {  
  4.      if ( xhrObj.readyState != 4 ) return;  
  5.      eval(xhrObj.responseText);  
  6.    };  
  7.  xhrObj.open('GET', 'A.js', true);  
  8.  xhrObj.send('');Script in Iframe：创建并插入一个iframe元素，让其异步执行 js 。  
  9. var iframe = document.createElement('iframe');  
  10.  document.body.appendChild(iframe);  
  11.  var doc = iframe.contentWindow.document;  
  12.  doc.open().write('<body onload="insertJS()">');  

doc.close();GMail Mobile:页内 js 的内容被注释,所以不会执行,然后在需要的时候，获取script元素中 text 内容，去掉注释后 eval 执行,代码如下:

  1. <script type="text/javascript">  
  2.  /* 
  3.  var ... 
  4.  */  
  5.  </script>  
标签：

给我留言