利用函数的惰性载入提高javascript代码执行效率

在 javascript 代码中，因为各浏览器之间的行为的差异，我们经常会在函数中包含了大量的 if 语句，以检查浏览器特性，解决不同浏览器的兼容问题。 例如，我们最常见的为 dom 节点添加事件的函数：


代码如下:

function addEvent (type, element, fun) {
if (element.addEventListener) {
element.addEventListener(type, fun, false);
}
else if(element.attachEvent){
element.attachEvent('on' + type, fun);
}
else{
element['on' + type] = fun;
}
}

每次调用 addEvent 函数的时候，它都要对浏览器所支持的能力进行检查，首先检查是否支持addEventListener 方法，如果不支持，再检查是否支持 attachEvent 方法，如果还不支持，就用 dom 0 级的方法添加事件。 这个过程，在 addEvent 函数每次调用的时候都要走一遍，其实，如果浏览器支持其中的一种方法，那么他就会一直支持了，就没有必要再进行其他分支的检测了， 也就是说，if 语句不必每次都执行，代码可以运行的更快一些。

解决的方案就是称之为惰性载入的技巧。

所谓惰性载入，就是说函数的if分支只会执行一次，之后调用函数时，直接进入所支持的分支代码。 有两种实现惰性载入的方式，第一种事函数在第一次调用时，对函数本身进行二次处理，该函数会被覆盖为符合分支条件的函数，这样对原函数的调用就不用再经过执行的分支了， 我们可以用下面的方式使用惰性载入重写 addEvent()。


代码如下:

function addEvent (type, element, fun) {
if (element.addEventListener) {
addEvent = function (type, element, fun) {
element.addEventListener(type, fun, false);
}
}
else if(element.attachEvent){
addEvent = function (type, element, fun) {
element.attachEvent('on' + type, fun);
}
}
else{
addEvent = function (type, element, fun) {
element['on' + type] = fun;
}
}
return addEvent(type, element, fun);
}

在这个惰性载入的 addEvent() 中，if 语句的每个分支都会为 addEvent 变量赋值，有效覆盖了原函数。 最后一步便是调用了新赋函数。下一次调用 addEvent() 的时候，便会直接调用新赋值的函数，这样就不用再执行if 语句了。

第二种实现惰性载入的方式是在声明函数时就指定适当的函数。 这样在第一次调用函数时就不会损失性能了，只在代码加载时会损失一点性能。 一下就是按照这一思路重写的 addEvent()。


代码如下:

var addEvent = (function () {
if (document.addEventListener) {
return function (type, element, fun) {
element.addEventListener(type, fun, false);
}
}
else if (document.attachEvent) {
return function (type, element, fun) {
element.attachEvent('on' + type, fun);
}
}
else {
return function (type, element, fun) {
element['on' + type] = fun;
}
}
})();

这个例子中使用的技巧是创建一个匿名的自执行函数，通过不同的分支以确定应该使用那个函数实现，实际的逻辑都一样， 不一样的地方就是使用了函数表达式（使用了 var 定义函数）和新增了一个匿名函数，另外每个分支都返回一个正确的函数，并立即将其赋值给变量 addEvent。

惰性载入函数的优点只执行一次 if 分支，避免了函数每次执行时候都要执行 if 分支和不必要的代码，因此提升了代码性能，至于那种方式更合适，就要看您的需求而定了。

赞 (0)

相关推荐

  • js正则表达式惰性匹配和贪婪匹配用法分析

    本文实例讲述了js正则表达式惰性匹配和贪婪匹配用法.分享给大家供大家参考,具体如下: 在讲贪婪模式和惰性模式之前,先回顾一下JS正则基础: 写法基础: ①不需要双引号,直接用//包含 => /wehfwue123123/.test(); ②反斜杠\表示转义 =>/\.jpg$/ ③用法基础:.test(str); 语法: ①锚点类 /^a/=>以"a"开头 /\.jpg$/=>以".jpg"结尾 ②字符类 [abc]:a或b或c [0-9]:

  • JavaScript学习笔记之惰性函数示例详解

    前言 本文主要给大家介绍了关于JavaScript惰性函数的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 需求 我们现在需要写一个 foo 函数,这个函数返回首次调用时的 Date 对象,注意是首次. 解决一:普通方法 var t; function foo() { if (t) return t; t = new Date() return t; } 问题有两个,一是污染了全局变量,二是每次调用 foo 的时候都需要进行一次判断. 解决二:闭包 我们很容易想到用闭

  • JavaScript 函数惰性载入的实现及其优点介绍

    最近看JavaScript高级程序设计,大有收获,接下来几天写一下读书笔记.之前写了一篇Ajax初步理解的随笔,里面有个函数用来创建XmlHttpRequest对象,浏览器兼容性原因,写出的代码通过大量if判断或者try,catch语句将函数引导到正确代码处. 复制代码 代码如下: <script type="text/javascript"> function createXHR(){ var xhr = null; try { // Firefox, Opera 8.0

  • JavaScript AJAX之惰性载入函数

    在JS中有些内存只需执行一遍即可,如浏览器类型检测是最常用的一个功能,因为我们使用Ajax的时候需要检测浏览器的内置的XHR.我们可以在第一次检测的时候记录下类型,往后在使用Ajax的时候就不需要再去检测浏览器类型了.在JS中就算只有一个if也总比没有if的语句效率要高. 普通Ajax方法 复制代码 代码如下: /**  * JS惰性函数  */   function ajax(){     if(typeof XMLHttpRequest != "undefined"){      

  • 利用函数的惰性载入提高javascript代码执行效率

    在 javascript 代码中,因为各浏览器之间的行为的差异,我们经常会在函数中包含了大量的 if 语句,以检查浏览器特性,解决不同浏览器的兼容问题. 例如,我们最常见的为 dom 节点添加事件的函数: 复制代码 代码如下: function addEvent (type, element, fun) { if (element.addEventListener) { element.addEventListener(type, fun, false); } else if(element.a

  • 如何利用Promises编写更优雅的JavaScript代码

    你可能已经无意中听说过 Promises,很多人都在讨论它,使用它,但你不知道为什么它们如此特别.难道你不能使用回调么?有什么了特别的?在本文中,我们一起来看看 Promises 是什么以及如何使用它们写出更优雅的 JavaScript 代码. Promises 易于阅读 比如说我们想从 HipsterJesus 的API中抓取一些数据并将这些数据添加到我们的页面中.这些 API 的响应数据形式如下: { "text": "<p>Lorem ipsum...<

  • JavaScript代码执行的先后顺序问题

    一.js--->单线程 严格意义上来说,javascript没有多线程的概念,所有的程序都是单线程依次执行的. 1.什么是单线程? 通俗点说,就是代码在执行过程中,另一段代码想要执行就必须等当前代码执行完成后才可以进行.我们拿一段代码来解释一下吧 for(var i=1;i<=3;i++){ setTimeout(function(){ console.log(i); //输出:4,4,4 },0) } 我们来看一下上面的这段代码,既然延时器时间设置为0,那么应该执行一遍循环就应该立即打印出一

  • 30个提高Web程序执行效率的好经验分享

    尽量避免使用DOM.当需要反复使用DOM时,先把对DOM的引用存到JavaScript本地变量里再使用.使用设置innerHTML的方法来替换document.createElement/appendChild()方 法. eval()有问题,new Fuction()构造函数也是,尽量避免使用它们. 拒绝使用with语句. 它会导致当你引用这个变量时去额外的搜索这样的一个命名空间,with里的代码在编译时期是完全未知的. 使用for()循环替代for-in循 环.因为for-in循环在开始循环

  • 提高ASP页面执行效率的方法分析

    这些大都是与硬件相关.其实在软件上,好的程序设计的方法和正确的参数配置也可以提高程序的性能,有时 在同等情况下只要改变一个参数,程序执行效率就能大大提高.本文就试着在这方面做些探索. 一.影响性能的因素 ASP程序运行的性能主要决定于以下2个大方面: 1.HTML页面的执行效率 2.反应时间,其中反应时间主要受制于下面要素: (1).ASP页面的执行效率 (2).数据库因素 下面我们就来详细讨论一下. 二.详细讨论 1.影响HTML的因素 HTML页面的执行效率是一个纯客户端的问题.影响这个问题

  • 优化innerHTML操作(提高代码执行效率)

    例子:我们要实现的效果是当用户点击鼠标的时候,就在旧数据上追加若干新数据. 如果使用标准DOM的话,完整代码如下: 复制代码 代码如下: <html> <head> <title>test</title> </head> <body> <div> <p>data<p> </div> <script> document.onmousedown = function() { fo

  • 优化javascript的执行效率一些方法总结

    1.在低版本浏览器中(如IE6,IE7等)串联字符串时使用数组的join方法就比使用+号来连接高效很多(如['aaa','bbb','ccc'].join()比'aaa'+'bbb'+'ccc'高效): 2.Array: pop比shift高效,push比unshift高效.这对于设计二叉堆结构比较重要,将最大或者最小的元素放在数组末尾最好. 3.数字取整最好用移位操作: 1.1 >> 0; 4.使用直接量创建Array和Object: var a = []; var o = {}; 5.对象

  • 提高SQL的执行效率的ASP的五种做法

    [b]方法一.尽量使用复杂的SQL来代替简单的一堆SQL[/b] 同样的事务,一个复杂的SQL完成的效率高于一堆简单SQL完成的效率,有多个查询时,要善于使用JOIN. oRs=oConn.Execute("Select * FROM Books")  while not ors.Eof      strSQL = "Select * FROM Authors Where AuthorID="&oRs("AuthorID") ors2=o

  • 有效提高JavaScript执行效率的几点知识

    有效提高JavaScript执行效率的几点知识

    为了提供新鲜.别致的用户体验,很多网站都会使用 JavaScript 来改善设计.验证表单.检查浏览器,以及Ajax请求,cookie操作等等,实现无刷新动态效果 .但是,要将大量内容在浏览器呈现,如果处理不好,网站性能将会急剧下降.所以我们有必要了解下,如何提高JavaScript的执行效率. JavaScript 函数 在JavaScript 中,函数在使用前会预编译.尽管有些时候下可以使用字符串代替函数,但是每次执行这段JavaScript 代码时都会重新解析,影响性能. 1.eval例子

  • 如何改进javascript代码的性能

    本来在那片编写可维护性代码文章后就要总结这篇代码性能文章的,耽搁了几天,本来也是决定每天都要更新一篇文章的,因为以前欠下太多东西没总结,学过的东西没去总结真的很快就忘记了,记录一下在你脑力留下更深的印象,特别是这些可维护性代码,性能什么的,当在你脑子里形成一种习惯了,那你就牛了!这里也要给初学者一个建议:多总结你学过的东西,因为这其实也是在学习新知识! 好,进入我们的主题:如何提高JS代码的性能. 1.优化DOM交互 DOM与我们的页面紧密相关,浏览器渲染页面也就是在渲染解析后的DOM元素,DO

随机推荐