JS优化与惰性载入函数实例分析


Posted in Javascript onApril 06, 2017

本文实例讲述了JS优化与惰性载入函数。分享给大家供大家参考,具体如下:

惰性载入函数

由于现在浏览器之间的差异,为了实现跨浏览器工作,很多函数要书写大量if语句或者try…catch…语句。当每次调用函数时,都要对每个if分支或try语句进行检查,这样会使得浏览器反应变慢。实际上,当我们用某个浏览器打开网页时,就决定了某个if分支或try语句是可用的,没有必要每次调用都检查。为了解决以上问题,JavaScript中出现一种名为惰性载入的技巧。

惰性载入表示函数执行的分支仅会发生一次。有两种实现惰性载入的方式:在函数被调用时再处理函数;在声明函数时就指定适当函数。

借用JavaScript高级程序设计中的例子来说明这两种解决方案。

创建XHR对象的兼容写法如下:

function createXHR(){
  if (typeof XMLHttpRequest != "undefined"){
    return new XMLHttpRequest();
  } else if (typeof ActiveXObject != "undefined"){
    if (typeof arguments.callee.activeXString != "string"){
      var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0",
              "MSXML2.XMLHttp"];
      for (var i=0,len=versions.length; i < len; i++){
        try {
          var xhr = new ActiveXObject(versions[i]);
          arguments.callee.activeXString = versions[i];
          return xhr;
        } catch (ex){
          //skip
        }
      }
    }
    return new ActiveXObject(arguments.callee.activeXString);
  } else {
    throw new Error("No XHR object available.");
  }
}

使用惰性载入的第一种方法——在函数被调用时再处理函数:

function createXHR(){
  if(typeof XMLHttpRequest!="undefined"){
    createXHR=function(){
      return new XMLHttpRequest();
    };
  }else if(typeof ActiveXObject!="undefined"){
    createXHR=function(){
      if(typeof arguments.callee.activeXString!="string"){
        var versions=["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"],
          i,len;
        for(i=0,len=versions.length;i<len;i++){
          try{
            new ActiveXObject(versions[i]);
            arguments.callee.activeXString=versions[i];
            break;
          }catch(ex){
            //skip
          }
        }
      }
      return new ActiveXObject(arguments.callee.activeXString);
    };
  }else{
    createXHR=function(){
      throw new Error("No XHR object available.");
    };
  }
  return CreateXHR();
}

使用惰性载入的第二种方法——在声明函数时就指定适当函数:

var createXHR=(function(){
  if(typeof XMLHttpRequest!="undefined"){
    return function(){
      return new XMLHttpRequest();
    };
  }else if(typeof ActiveXObject!="undefined"){
    return function(){
      if(typeof arguments.callee.activeXString!="string"){
        var versions=["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"],
          i,len;
        for(i=0,len=versions.length;i<len;i++){
          try{
            new ActiveXObject(versions[i]);
            arguments.callee.activeXString=versions[i];
            break;
          }catch(ex){
            //skip
          }
        }
      }
      return new ActiveXObject(arguments.callee.activeXString);
    };
  }else{
    return function(){
      throw new Error("No XHR object available.");
    };
  }
})();

上例中,使用的是一个匿名、自执行的函数,用以确定应该使用哪个函数。

以上两种使用惰性载入函数的共同优点是,只在第一次执行函数时牺牲部分性能,可以提高代码效率。

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 字符编码规则
May 04 Javascript
使用ExtJS技术实现的拖动树结点
Aug 05 Javascript
只需20行代码就可以写出CSS覆盖率测试脚本
Apr 24 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
Nov 23 Javascript
Bootstrap缩略图与警告框学习使用
Feb 08 Javascript
从零开始做一个pagination分页组件
Mar 15 Javascript
JS 组件系列之 bootstrap treegrid 组件封装过程
Apr 28 Javascript
BootStrap Select清除选中的状态恢复默认状态
Jun 20 Javascript
EasyUI的TreeGrid的过滤功能的解决思路
Aug 08 Javascript
webpack手动配置React开发环境的步骤
Jul 02 Javascript
JS实现拼图游戏
Jan 29 Javascript
JavaScript小技巧带你提升你的代码技能
Sep 15 Javascript
大白话讲解JavaScript的Promise
Apr 06 #Javascript
JS实现的二叉树算法完整实例
Apr 06 #Javascript
JavaScript结合HTML DOM实现联动菜单
Apr 05 #Javascript
js实现按座位号抽奖
Apr 05 #Javascript
Angularjs 实现移动端在线测评效果(推荐)
Apr 05 #Javascript
微信小程序中的onLoad详解及简单实例
Apr 05 #Javascript
微信小程序 页面跳转如何实现传值
Apr 05 #Javascript
You might like
解决163/sohu/sina不能够收到PHP MAIL函数发出邮件的问题
2009/03/13 PHP
php 分页类 扩展代码
2009/06/11 PHP
关于php支持分块与断点续传文件下载功能代码
2014/05/09 PHP
windows下配置apache+php+mysql时出现问题的处理方法
2014/06/20 PHP
iis6+javascript Add an Extension File
2007/06/13 Javascript
javascript div 弹出可拖动窗口
2009/02/26 Javascript
由Javascript实现的页面日历
2011/11/04 Javascript
js创建子窗口并且回传值示例代码
2013/07/02 Javascript
移动节点的jquery代码
2014/01/13 Javascript
node.js中的fs.linkSync方法使用说明
2014/12/15 Javascript
js实现键盘Enter键提交表单的方法
2015/05/27 Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
2016/06/16 Javascript
JS实现简单的右下角弹出提示窗口完整实例
2016/06/21 Javascript
angular route中使用resolve在uglify压缩后问题解决
2016/09/21 Javascript
基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
2016/11/22 Javascript
JS实现的表头列头固定页面功能示例
2017/01/10 Javascript
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
2017/05/15 jQuery
nodejs socket服务端和客户端简单通信功能
2017/09/14 NodeJs
PyCharm配置mongo插件的方法
2018/11/30 Python
利用ctypes获取numpy数组的指针方法
2019/02/12 Python
使用python接入微信聊天机器人
2020/03/31 Python
python中p-value的实现方式
2019/12/16 Python
详解Python中字符串前“b”,“r”,“u”,“f”的作用
2019/12/18 Python
tensorflow入门:tfrecord 和tf.data.TFRecordDataset的使用
2020/01/20 Python
CSS3弹性伸缩布局之box布局
2016/07/12 HTML / CSS
美国女士内衣在线折扣商店:One Hanes Place
2019/03/24 全球购物
存储过程的优缺点是什么
2015/01/10 面试题
销售代表求职自荐信
2013/10/01 职场文书
导游的职业规划书范文
2013/12/27 职场文书
一年级评语大全
2014/04/23 职场文书
消防安全宣传标语
2014/06/07 职场文书
大学生感恩父母演讲稿
2014/08/28 职场文书
2014年教学工作总结
2014/11/13 职场文书
北京故宫导游词
2015/01/31 职场文书
五年级语文教学反思
2016/03/03 职场文书
PyQt5爬取12306车票信息程序的实现
2021/05/14 Python