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 相关文章推荐
Jquery 插件开发笔记整理
Jan 17 Javascript
js去字符串前后空格5种实现方法及比较
Apr 03 Javascript
javascript的列表切换【实现代码】
May 03 Javascript
解析JavaScript面向对象概念中的Object类型与作用域
May 10 Javascript
AngularJs Forms详解及简单示例
Sep 01 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
Dec 28 Javascript
JS中from 表单序列化提交的代码
Jan 20 Javascript
Vue2.0 实现歌手列表滚动及右侧快速入口功能
Aug 08 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
Oct 29 Javascript
vue插件draggable实现拖拽移动图片顺序
Dec 01 Javascript
Vue CL3 配置路径别名详解
May 30 Javascript
electron实现静默打印的示例代码
Aug 12 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
PHP 将图片按创建时间进行分类存储的实现代码
2010/01/05 PHP
apache+php完美解决301重定向的两种方法
2011/06/08 PHP
PHP性能优化 产生高度优化代码
2011/07/22 PHP
thinkPHP订单数字提醒功能的实现方法
2016/12/01 PHP
php自定义函数br2nl实现将html中br换行符转换为文本输入中换行符的方法【与函数nl2br功能相反】
2017/02/17 PHP
php中file_get_contents()函数用法实例
2019/02/21 PHP
[对联广告] JS脚本类
2006/08/27 Javascript
静态页面下用javascript操作ACCESS数据库(读增改删)的代码
2007/05/14 Javascript
jquery 应用代码 方便的排序功能
2010/02/06 Javascript
为原生js Array增加each方法
2012/04/07 Javascript
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
2013/06/04 Javascript
扩展jQuery对象时如何扩展成员变量具体怎么实现
2014/04/25 Javascript
JS修改iframe页面背景颜色的方法
2015/04/01 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
2015/06/19 Javascript
浅析JavaScript中命名空间namespace模式
2016/06/22 Javascript
基于JavaScript实现验证码功能
2017/04/01 Javascript
前端主流框架vue学习笔记第一篇
2017/07/26 Javascript
JS基于对象的特性实现去除数组中重复项功能详解
2017/11/17 Javascript
详解在React中跨组件分发状态的三种方法
2018/08/09 Javascript
python中的内置函数getattr()介绍及示例
2014/07/20 Python
在Python中使用cookielib和urllib2配合PyQuery抓取网页信息
2015/04/25 Python
解决pycharm界面不能显示中文的问题
2018/05/23 Python
Django框架之登录后自定义跳转页面的实现方法
2019/07/18 Python
python GUI库图形界面开发之PyQt5表格控件QTableView详细使用方法与实例
2020/03/01 Python
在python3.64中安装pyinstaller库的方法步骤
2020/06/02 Python
Python3爬虫里关于Splash负载均衡配置详解
2020/07/10 Python
python实现数学模型(插值、拟合和微分方程)
2020/11/13 Python
Rockport乐步美国官网:风靡美国的白宫鞋
2016/11/24 全球购物
收款委托书
2014/10/14 职场文书
教师党员整改措施
2014/10/24 职场文书
工作失误检讨书范文
2015/01/26 职场文书
大学生党员自我评价
2015/03/04 职场文书
建党伟业的观后感
2015/06/01 职场文书
遗愿清单观后感
2015/06/09 职场文书
银行柜员优质服务心得体会
2016/01/22 职场文书
Java 异步任务计算FutureTask
2022/04/28 Java/Android