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为搜索栏增加tag提示
Jun 22 Javascript
setTimeout()递归调用不加引号出错的解决方法
Sep 05 Javascript
JavaScript中的条件判断语句使用详解
Jun 03 Javascript
JS+CSS实现大气清新的滑动菜单效果代码
Oct 22 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
Dec 10 Javascript
jquery 手势密码插件
Mar 17 Javascript
jQuery实现腾讯信用界面(自制刻度尺)样式
Aug 15 jQuery
JS 中使用Promise 实现红绿灯实例代码(demo)
Oct 20 Javascript
vue组件中的数据传递方法
May 14 Javascript
vue 解决循环引用组件报错的问题
Sep 06 Javascript
使用js在layui中实现上传图片压缩
Jun 18 Javascript
ES6模板字符串和标签模板的应用实例分析
Jun 25 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实现兼容2038年后Unix时间戳转换函数
2015/03/18 PHP
PHP生成及获取JSON文件的方法
2016/08/23 PHP
Mac版PhpStorm之XAMPP整合apache服务器配置的图文教程详解
2016/10/13 PHP
php读取XML的常见方法实例总结
2017/04/25 PHP
关于Yii中模型场景的一些简单介绍
2019/09/22 PHP
PHP中-&gt;和=&gt;的含义及使用示例解析
2020/08/06 PHP
javascript数组使用调用方法汇总
2007/12/08 Javascript
JavaScript 监听textarea中按键事件
2009/10/08 Javascript
JQuery拖拽元素改变大小尺寸实现代码
2012/12/10 Javascript
javascript实现图片切换的幻灯片效果源代码
2012/12/12 Javascript
js原型继承的两种方法对比介绍
2014/03/30 Javascript
javascript操作excel生成报表示例
2014/05/08 Javascript
javascript搜索框点击文字消失失焦时文本出现
2014/09/18 Javascript
浅谈jquery回调函数callback的使用
2015/01/30 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
2016/09/21 Javascript
JavaScript中callee和caller的区别与用法实例分析
2019/06/28 Javascript
Vue.js标签页组件使用方法详解
2019/10/19 Javascript
ES6 十大特性简介
2020/12/09 Javascript
[05:45]Ti4观战指南(下)
2014/07/07 DOTA
[50:50]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.20
2020/12/23 DOTA
python 中字典嵌套列表的方法
2018/07/03 Python
python 读取文件并替换字段的实例
2018/07/12 Python
Python Selenium 之数据驱动测试的实现
2019/08/01 Python
用python画一只可爱的皮卡丘实例
2019/11/21 Python
使用python快速实现不同机器间文件夹共享方式
2019/12/22 Python
Python检测端口IP字符串是否合法
2020/06/05 Python
Python爬取微信小程序Charles实现过程图解
2020/09/29 Python
教你使用Sublime text3搭建Python开发环境及常用插件安装另分享Sublime text3最新激活注册码
2020/11/12 Python
Html5移动端获奖无缝滚动动画实现示例
2018/06/25 HTML / CSS
乡镇领导干部个人对照检查材料思想汇报
2014/09/23 职场文书
教师自查自纠工作情况报告
2014/10/29 职场文书
2014年教师个人工作总结
2014/11/10 职场文书
小学班主任事迹材料
2014/12/17 职场文书
军训通讯稿范文
2015/07/18 职场文书
求职自我评价参考范文
2019/05/16 职场文书
图解排序算法之希尔排序Java实现
2021/06/26 Java/Android