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

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

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

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

方式一：html事件處理

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

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