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制作的产品广告效果
Dec 08 Javascript
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
Oct 11 Javascript
基于jQuery选择器的整理集合
Apr 26 Javascript
jquery中交替点击事件toggle方法的使用示例
Dec 08 Javascript
javascript实现playfair和hill密码算法
Dec 07 Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
Sep 10 Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
Apr 19 Javascript
JQuery中queue方法用法示例
Jan 31 jQuery
JS实现的合并两个有序链表算法示例
Feb 25 Javascript
React如何实现浏览器打印部分内容详析
May 19 Javascript
js实现鼠标点击飘爱心效果
Aug 19 Javascript
通过实例解析javascript Date对象属性及方法
Nov 04 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
古巴咖啡 Cubita琥爵咖啡 独特的加勒比海风味咖啡
2021/03/06 新手入门
php截取字符串之截取utf8或gbk编码的中英文字符串示例
2014/03/12 PHP
php使用Jpgraph创建折线图效果示例
2017/02/15 PHP
PHP微信发送推送消息乱码的解决方法
2019/02/28 PHP
PHP反射实际应用示例
2019/04/03 PHP
php5.6.x到php7.0.x特性小结
2019/08/17 PHP
asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
2012/03/14 Javascript
JS判断当前日期是否大于某个日期的实现代码
2012/09/02 Javascript
Extjs Gird 支持中文拼音排序实现代码
2013/04/15 Javascript
对于this和$(this)的个人理解
2013/09/08 Javascript
javascript判断两个IP地址是否在同一个网段的实现思路
2013/12/13 Javascript
JavaScript小技巧整理篇(非常全)
2016/01/26 Javascript
jquery对象与DOM对象转化
2017/02/08 Javascript
BootStrap与Select2使用小结
2017/02/17 Javascript
layui分页效果实现代码
2017/05/19 Javascript
深入理解vue中的$set
2017/06/01 Javascript
vue中接口域名配置为全局变量的实现方法
2018/09/20 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
2020/01/26 Javascript
在vue中使用Base64转码的案例
2020/08/07 Javascript
原生JavaScript实现拖动校验功能
2020/09/29 Javascript
[04:29]2016国际邀请赛中国区预选赛Ehome战队教练采访
2016/06/27 DOTA
Python的pycurl包用法简介
2015/11/13 Python
python使用xpath中遇到:到底是什么?
2018/01/04 Python
对Tensorflow中的矩阵运算函数详解
2018/07/27 Python
Python实现繁体中文与简体中文相互转换的方法示例
2018/12/18 Python
python 图像处理画一个正弦函数代码实例
2019/09/10 Python
python GUI库图形界面开发之PyQt5单选按钮控件QRadioButton详细使用方法与实例
2020/02/28 Python
windows下Pycharm安装opencv的多种方法
2020/03/05 Python
Html5调用手机摄像头并实现人脸识别的实现
2018/12/21 HTML / CSS
计算机专业自我鉴定
2013/10/15 职场文书
八年级物理教学反思
2014/01/19 职场文书
关于期中考试的反思
2014/02/02 职场文书
检查接待方案
2014/02/27 职场文书
2014物价局群众路线对照检查材料思想汇报
2014/09/21 职场文书
Django+Nginx+uWSGI 定时任务的实现方法
2022/01/22 Python
在容器中使用nginx搭建上传下载服务器
2022/05/11 Servers