javascript延迟加载

有些 js 代码并不是页面初始化的时候就立刻需要的,而稍后的某些情况才需要的。延迟加载就是一开始并不加载这些暂时不用的js,而是在需要的时候或稍后再通过js 的控制来异步加载。

实现延迟加载的方式有很多种:

1.直接将script节点放置在</body>之前,这样js脚本就会在页面显示出来之后再加载。
但是这种方法有时候会收到google延时加载js的警告,处理这种问题的方法:
在body底部加入如下代码:

<script type='text/javascript'>
function downloadJSAtOnload(){
  var element = document.createElement('script');
  element.src = 'test.js';
  document.body.appendChild(element);
}
if(window.addEventListener){
  window.addEventListener('load',downloadJSAtOnload,false);
}
else if(window.attachEvent){
  window.attachEvent('onload',downloadJSAtOnload)
}
else{
  window.onload = downloadJSAtOnload;
}
</script>

2.使用script标签的defer和async属性。

  • defer="defer":该属性用来通知浏览器,这段脚本代码将不会产生任何文档内容。例如 JavaScript代码中的document.write()方法将不会起作用,浏览器遇到这样的代码将会忽略,并继续执行后面的代码。属性只能是 defer,与属性名相同。在HTML语法格式下,也允许不定义属性值,仅仅使用属性名。
  • async="true/false":该属性为html5中新增的属性,它的作用是能够异步地下载和执行脚本,不因为加载脚本而阻塞页面的加载。一旦下载完毕就会立刻执行。

3.通过监听onload事件,动态添加script节点:
Firefox,Opera,Chrome,Safari的方式:

var script = document.createElement('script');
script.type = 'text/javascript';
script.onload = function(){
  alert('script loaded');
}
script.src = 'test.js';
document.getElementByTagName('head')[0].appendChild(script);

IE的方式

var script = document.createElement('script');
script.type = 'text/javascript';
script.onreadystatechange = function(){
  if(script.readyState == 'loaded' || script.readyState == 'complete'){
    script.onreadystatechange = null;
    alert('script loaded');
  }
}
script.src = 'test.js';
document.getElementByTagName('head')[0].appendChild(script);

其实IE和其它浏览器加载添加节点的方式都一样,只是加载之后监听是否成功的事件不一样,其实这个不需要也无所谓。

4.通过ajax下载js脚本,动态添加script标签

var xhr = new XMLHttpRequest();
xhr.open('get','test.js',true);
xhr.onreadystatachange = function(){
  if(xhr.readyState == 4){
    if(xhr.state >= 200 && xhr.state < 300 || xhr.state == 304){
      var script = document.createElement('script');
      script.type = 'text/javascript';
      script.text = xhr.requestText;
      document.body.appendChild(script);
    }
  }
}
xhr.send(null);

推荐阅读更多精彩内容