舉個小栗子來聊下性能優化

我向來是先實現功能再考慮優化，否則就本末倒置了。

網上有不少關於前端優化的帖子，最出名的應該是雅虎前端優化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，轉載請與做者聯繫。不然將追究法律責任。

---

本文對你有幫助？歡迎掃碼加入前端學習小組微信羣：