我向來是先實現功能再考慮優化，不然就本末倒置了。
網上有很多關於前端優化的帖子，最出名的應該是雅虎前端優化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，轉載請與作者聯絡。否則將追究法律責任。
本文對你有幫助？歡迎掃碼加入前端學習小組微信群：
