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

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

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

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

方式一：html事件處理

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

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