当前位置:首页 > 日记 > 正文

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

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

本文实例讲述了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程序设计有所帮助。

相关文章

详解AngularJS中$filter过滤器使用

详解AngularJS中$filter过滤器使用

过滤器,自定义,详解,电脑软件,filter,1.内置过滤器* $filter 过滤器,是angularJs中用来处理数据以更好的方式展示给我用户。比如格式化日期,转换大小写等等。* 过滤器即有内置过滤器也支持自定义过滤器。内置过滤器很多,可以百度。关键是如何…

cdr绘制逼真的巧克力牛奶包装盒教

cdr绘制逼真的巧克力牛奶包装盒教

绘制,教程,牛奶,逼真,包装盒,效果图:主要过程:1、矩形工具绘制一个矩形,52MMX142MM的矩形,填充渐变,双击上下倾斜,如图2、同样用矩形工具绘制一个长30MM高度一样的矩形填充渐变,倾斜,如图3、用矩形绘制一个小条矩形放到拼接的位置,填充颜色,如图4、绘…

JS实现页面内跳转的简单代码

JS实现页面内跳转的简单代码

跳转,代码,简单,页面内,电脑软件,使用js($.ajax中)实现页面内跳转(即:描点平滑跳转)的方法(aa为跳转目的标签的id):在网络上有很多资料所说的:animate方法我试了并不好使,不知道是啥原因,欢迎大家指正,附上网络方法:var oneTop = $("#aa").offset()…

HTTP协议简介_动力节点Java学院整

HTTP协议简介_动力节点Java学院整

节点,学院,协议,动力,简介,TCP协议对应于传输层,而HTTP协议对应于应用层,从本质上来说,二者没有可比性。Http协议是建立在TCP协议基础之上的,当浏览器需要从服务器获取网页数据的时候,会发出一次Http请求。Http会通过TCP建立起一个到服务器的连…

ASP.NET中画图形验证码的实现代码

ASP.NET中画图形验证码的实现代码

验证码,画图形,代码,电脑软件,ASP,本文给大家分享一段asp.net代码实现画图形验证码功能,代码简单易懂,具体代码如下所示:context.Response.ContentType = "image/jpeg"; //生成随机的中文验证码 string yzm = "人口手大小多少上中下男…

Vue 滚动行为的具体使用方法

Vue 滚动行为的具体使用方法

使用方法,电脑软件,Vue,滚动行为使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。 vue-router 能做到,而且更好,它让你可以自定义路由切换时页面如何滚动。注意: 这个功能只在 HTML5 history 模…

AngularJS实现页面定时刷新

AngularJS实现页面定时刷新

定时刷新,页面,电脑软件,AngularJS,有时我们在前端可能会有这样的需求:1、每隔一段时间刷新一下页面中的数据2、根据需要可以暂停和启用刷新接下来我们就来看下AngularJS的实现方法: 首先我们了解到AngularJS中$interval可以用来处理间歇性处…

Excel表格字符的LEFT函数如何应用

Excel表格字符的LEFT函数如何应用

字符,函数,函数应用,表格,电脑软件,  在Excel中使用比较长的字符串时,可能会遇到需要提取其中某一部分字符串的情况,这时我们就要用到截取字符串函数了。以下是小编为您带来的关于Excel表格字符的LEFT函数应用,希望对您有所帮助。Excel表格…

excel自动计算总分的方法excel怎么

excel自动计算总分的方法excel怎么

计算,方法,总分,电脑软件,excel,  Excel中经常需要使用到自动计算总分的 功能,自动计算具体该如何操作呢?下面是由小编分享的excel自动计算总分的方法,以供大家阅读和学习。excel自动计算总分的方法自动计算总分步骤1:选中要计算的数据,不同…

bash 中用于grep的正则表达式

bash 中用于grep的正则表达式

正则表达式,用于,电脑软件,bash,grep,正则表达式是一类用于匹配文本的表达方式,常用于grep命令中表达检索条件。其实就是相当于你在用百度搜索时规定一些高级要求,例如你想找百度一个叫做詹姆斯的人的照片,你会发现出来一大堆骑士队的詹姆斯,这…

photoshop复制粘贴文字的方法步骤

photoshop复制粘贴文字的方法步骤

方法,文字,复制粘贴,指定位置,步骤,  复制粘贴图片的方法其实就和外面复制粘贴文字差不多,但是很多同学还不太清楚。为此小编整理的一些关于photoshop复制粘贴文字的方法,供您参阅。photoshop复制粘贴文字的方法如图,看怎么用快捷键复制图层…

powerpoint如何设页码数

powerpoint如何设页码数

方法,设置,页码,电脑软件,powerpoint,  在制作幻灯片的时候,怎么在其中设置页码呢?一份好的PPT不仅可以吸引观众的眼球同时还可以反映自己的制作能力,下面小编就为你介绍powerpoint如何设置页码的方法啦,不懂的朋友会请多多学习哦。powerpoi…