JavaScript的妙与乐（一）之 函数优化

JavaScript的妙与乐系列文章主要是展示一些JavaScript上面比较好玩一点的特性和一些有用的技巧，里面很多内容都是我曾经在项目中使用过的一些内容（当然，未必所有技巧的使用频率都很高^_）。

本篇文章主要是探讨一些辅助函数的书写优化。

函数优化

在JavaScript中由于浏览器的兼容性差异，导致了在操纵DOM相关的代码中常常会有所差异，比如最经典的给DOM绑定事件

//dom
var dom = document.getElementById('example');
//event
function clickEvent () {
	console.log('click!');
}

//IE9以上及Chrome、Firefox
dom.addEventListener('click', clickEvent, false);

//IE
dom.attachEvent('onclick', clickEvent);

//全部通用
dom.onclick = clickEvent;

可以看出给DOM绑定事件可以有三种实现方式，而我们会依次采用addEventListener/attachEvent/onclick这样的排序去绑定事件。聪明的我们可能就会立即想到我们应该要用一个通用函数来处理，毕竟谁也不想每次绑定事件都要判断一次浏览器特性。

function BindEvent (dom, event, handle, ex) {
	if ('addEventListener' in dom) {
		dom.addEventListener(event, handle, ex || false);
	} else if ('attachEvent' in dom) {
		dom.attachEvent('on' + event, handle);
	} else {
		dom['on' + event] = handle;
	}
}

这看起来非常棒，使用起来也不错。

var dom = document.getElementById('example');
BindEvent(dom, 'click', function () {
	alert('hey!');
});

现实情况往往会比想象中复杂那么一点点，页面上不可能只有一两个dom，在一些SPA中甚至会成千上万，来让我们尝试一下优化。其实对于浏览器的特性侦测只需要执行一次即可，而没有必要每次绑定事件的时候都去判断，我们不妨将BindEvent改成立即执行函数。

var BindEvent = (function () {
  if ('addEventListener' in document) {
    return function (dom, event, handle, ex) {
      dom.addEventListener(event, handle, ex || false);
    }
  } else if ('attachEvent' in document) {
    return function (dom, event, handle) {
      dom.attachEvent('on' + event, handle);
    }
  } else {
    return function (dom, event, handle) {
      dom['on' + event] = handle;
    }
  }
})();

这样BindEvent就会在加载的时候直接采用了最符合当前浏览器情况的实现方式。最后让我们来写一些测试代码对比一下效率，对于我们页面上最可能出现的情况（有1000个DOM）。这里我们采用Chrome提供的console.profile函数来做性能分析

function GenerateDOM (start, end) {
  for (; start < end; start++) {
    var dom = document.createElement('div');
    dom.id = 'd' + start;
    dom.innerHTML = 'I\'m d' + start + ' !';
    document.body.appendChild(dom);
  }
}

GenerateDOM(0, 1000);

function BindDOMEvent (doms, event, handle, ex) {
  for (var i = 0; i < doms.length; i++) {
    BindEvent(doms[i], event, handle, ex);
  }
}

var doms = document.getElementsByTagName('div');

console.profile();
BindDOMEvent(doms, 'click', function () {
  alert('hey! ' + this.id);
});
console.profileEnd();

当你在页面按F12打开console点击Profiles的tab你可以看到Chrome提供的分析结果。而我们暂时只需要分析BindDOMEvent的耗时即可。如下图：

以下是我分别各执行两种版本10次后得出的综合分析结果，可以看出避免重复判断后，性能平均快了0.7ms，而且优化后基本能够维持在2.1ms（快了约1.27倍）

原始版本

3.3 / 3.4 / 3.3 / 2.3 / 3.5 / 2.3 / 3.4 / 3.3 / 2.2 / 3.3

avg: 3.03 max: 3.5 min: 2.2

优化后版本

2.1 / 2.1 / 2.1 / 3.4 / 2.1 / 2.2 / 2.2 / 3.2 / 2.2 / 2.1

avg: 2.37 max: 3.4 min: 2.1

所以，我们可以直观的判断出，当有类似重复判断的函数，不妨观察分析一下是否能够将该判断只进行一次。这样已经能够给我们的性能带来一定的提升。

优化之路永无止境

对于大多数的项目来说，类似BindEvent这样的函数一般都会封装成一个Library以便共用代码。而这样的公用Library常常是每个页面都会默认加载。

<script src="/public/helper.js"></script>

但是实际上每个页面所用到的功能仅仅是Library里面的一小部分，例如我们刚刚所写的BindEvent。我们回头看一看实现代码。

var BindEvent = (function () {
  if ('addEventListener' in document) {
    return function (dom, event, handle, ex) {
      dom.addEventListener(event, handle, ex || false);
    }
  } else if ('attachEvent' in document) {
    return function (dom, event, handle) {
      dom.attachEvent('on' + event, handle);
    }
  } else {
    return function (dom, event, handle) {
      dom['on' + event] = handle;
    }
  }
})();

这里有什么可以优化的点呢？在于我们不确定这个页面是否会用到这个function的时候，我们都默认帮他初始化好了，这里面会有一定的性能损耗。毕竟一个Library当中这样的方法会有N个，当N个函数都在页面加载的时候进行初始化，对于整个页面加载速度方面的影响不容小瞧。

那怎么去做优化呢？惰性加载，只有当有调用方去触发这个function的时候我们才去做初始化。实现代码如下：

var BindEvent = function (dom, event, handle, ex) {
  if ('addEventListener' in document) {
    BindEvent = function (dom, event, handle, ex) {
      dom.addEventListener(event, handle, ex || false);
    }
  } else if ('attachEvent' in document) {
	BindEvent = function (dom, event, handle) {
      dom.attachEvent('on' + event, handle);
    }
  } else {
    BindEvent = function (dom, event, handle) {
      dom['on' + event] = handle;
    }
  }
  BindEvent(dom, event, handle, ex);
};

这样当BindEvent被调用了一次之后，我们的BindEvent函数就会被替换成符合浏览器特性的实现方式，之后的所有调用均是调用最优结果。最后我们再进行同样地测试看一下对比

3.2 / 2.1 / 2.2 / 3.2 / 3.2 / 2.1 / 3.1 / 2.1 / 3.2 / 3.2

avg: 2.76 max: 3.2 min: 2.1

可以看到平均耗时是2.75而之前是2.37，性能仅仅是略为减慢而已（约是1.16倍），影响并不是非常大，可是对于页面加载的影响呢？

来，让我们用console.time来做一下对比测试，看一下两种实现方式对于页面加载的影响。

console.time('event1');
var BindEvent = (function () {
  if ('addEventListener' in document) {
    return function (dom, event, handle, ex) {
      dom.addEventListener(event, handle, ex || false);
    }
  } else if ('attachEvent' in document) {
    return function (dom, event, handle) {
      dom.attachEvent('on' + event, handle);
    }
  } else {
    return function (dom, event, handle) {
      dom['on' + event] = handle;
    }
  }
})();
console.timeEnd('event1');

console.time('event2');
var BindEvent2 = function (dom, event, handle, ex) {
  if ('addEventListener' in document) {
    BindEvent = function (dom, event, handle, ex) {
      dom.addEventListener(event, handle, ex || false);
    }
  } else if ('attachEvent' in document) {
    BindEvent = function (dom, event, handle) {
      dom.attachEvent('on' + event, handle);
    }
  } else {
    BindEvent = function (dom, event, handle) {
      dom['on' + event] = handle;
    }
  }
  BindEvent(dom, event, handle, ex);
};
console.timeEnd('event2');

测试结果中前面的运行毫秒是BindEvent而后面的则是BindEvent2

0.038 / 0.007

0.041 / 0.006

0.031 / 0.007

0.053 / 0.009

0.041 / 0.007

BindEvent平均耗时： 0.0408 而 BindEvent2平均耗时： 0.00702

前者约是后者的5.81倍

通过整体评测可以看得出来对于一个能够采用惰性加载的函数，通过这样的一个方式，能够大大减少页面加载时间，同时不会对执行时的运行效率产生太大的影响。

结论

• 对于需要重复判断的条件看能否提取出来只判断一次
  • 如果不能，也可以选择保存一个bool值变量来做，而不要进行过于复杂的判断
• 对于不是页面必须的函数，可以采用惰性加载方式来实现

怎么样？你学会了这个技巧了么？

console.profile与console.time的文档 需要自备*- -！

立即执行函数(immediately-invoked function expression IIFE) 的介绍