举个小栗子来聊下性能优化

我向来是先实现功能再考虑优化，否则就本末倒置了。

网上有不少关于前端优化的帖子，最出名的应该是雅虎前端优化35条军规了，但其实不少朋友看完就忘了，确实要记住这么多条优化建议有困难。但你吸取这些优化建议后，你的潜意识就会慢慢养成优化的习惯，看到不完美的代码你就会不自觉的想到怎样去优化它们。

今天就举一个小栗子,咱们来聊聊怎样作前端优化。

产品经理进门：“小周，此次的项目要兼容到IE8。”

我：“好的，没问题...”(除了这个我还能说什么？)

好了，假设不能使用第三方库，咱们要用原生JS实现DOM元素事件绑定，咱们就要考虑到兼容性问题(这时候脑子里面不用想优化的问题，先想一想怎么实现功能吧)。

我最初可能会这么写:

var addEvent = function(elem, type, handler) {
  if(window.addEventListener) {
    return elem.addEventListener(type, handler, false);
  }
  if(window.attachEvent) {
    return elem.attachEvent('on' + type, handler);
  }
};复制代码

上面的代码没有问题，完美兼容到了IE8，功能算是实现了，这时候咱们就要开始考虑性能优化的问题了。

先来看看这个函数有什么缺点，每次执行函数时都会进入if条件分支，虽然对于现代浏览器来讲，执行这些分支开销很小，但就是这些细节，区分了优秀与平庸。

咱们能够再想一个方案来让这个功能实现的更完美，咱们把嗅探浏览器的操做提早到代码加载时执行，在代码加载时就进行判断，让addEvent返回一个包裹了一个正确逻辑的函数，这里能够用自执行函数来作。

var addEvent = (function() {
  if(window.addEventListener) {
    return function(elem, type, handler) {
      elem.addEventListener(type, handler, false);
    }
  }
  if (window.attachEvent) {
    return function(elem, type, handler) {
      elem.attachEvent('on' + type, handler);
    }
  }
})();复制代码

这样写仍然有个缺点，或许从头至尾咱们都没有用过addEvent函数，那自执行函数中的浏览器嗅探彻底是多余的，并且会延长页面ready的时间。

想一想看还有什么方法能够优化首屏加载。

咱们仍然把addEvent声明为一个普通函数，在函数中仍然有判断分支。但在第一次进入分支后，函数内部重写addEvent函数，从而获得咱们所指望的addEvent函数，下次调用addEvent函数时，内部将再也不进行分支判断:

var addEvent = function(elem, type, handler) {
  if(window.addEventListener) {
    addEvent = function(elem, type, handler) {  //重写addEvent函数
      elem.addEventListener(type, handler, false);
    }
  }else if(window.attachEvent) {
    addEvent = function(elem, type, handler) {
      elem.attachEvent('on' + type, handler);
    }
  }
  addEvent(elem, type, handler);
}复制代码

回过头再对比最初的函数，发现其实优化也不是那么困难，最重要的时咱们要养成优化代码的习惯，看到一段代码，就要开始思考有哪些能够改进的地方，若是你想要成为一名优秀的程序员，这一点是必不可少的，量变引起质变这个道理你们都懂。

若是你尚未养成这种习惯，那试着带着这种思惟习惯去review本身的代码，你会发现，呵呵...

喜欢本文的朋友能够关注个人微信公众号，不按期推送一些好文。

本文出自Rockjins Blog，转载请与做者联系。不然将追究法律责任。

---

本文对你有帮助？欢迎扫码加入前端学习小组微信群：