如何能做出高效的web前端程序是我每次做前端開發都會不自覺去考慮的問題。幾年前雅虎里牛逼的前端工程師們出了一本關于提升web前端性能的書籍，轟動了整個web開發技術界，讓神秘的web前端優化問題成為了大街的白菜，web前端優化變成了菜鳥和大牛都能回答的簡單問題，當整個業界都知道了驚天秘密的答案，那么現有的優化技術已經不能對你開發的網站產生的質的飛越，為了讓我們開發的網站性能比別人的網站更加優秀，我們需要更加深入的獨立思考，儲備更加優秀的技能。

Javascript里的事件系統是我想到的第一個突破點。為什么會是javascript的事件系統呢？我們都知道web前端包含三個技術：html、css和javascript，html和css如何結合真是一目了然：style、class、id以及html標簽，這個沒啥好講的，但是javascript是如何切入到html和css中間，讓三者融合呢？最后我發現這個切入點就是javascript的事件系統，不管我們寫多長多復雜的javascript代碼，最終都是通過事件系統體現在html和css上，因此我就在想既然事件系統是三者融合的切入點，那么一個頁面里，特別是當今越來越復雜的網頁里必然會有大量事件操作，沒有這些事件我們精心編寫的javascript代碼只有刀槍入庫，英雄無用武之地了。既然頁面會存在大量事件函數，那么我們按習慣寫事件函數，會存在影響效率的問題嗎？我研究下來的答案是真有效率問題，而且還是嚴重的效率問題。

為了說清楚我的答案，我要先詳細講解下javascript的事件系統。

事件系統是javascript和html以及css融合的切入點，這個切入點好比java里的main函數，一切神奇都是由這里開始，那么瀏覽器是如何完成這種切入呢？我研究下來一共有3種方式，它們分別是：

方式一：html事件處理

html事件處理就是將事件函數直接寫在html標簽里，因為這種寫法和html標簽緊耦合，所以稱為html事件處理。例如下面代碼：

<input type="button" id="btn" name="btn" onclick="alert('Click Me!')"/>