如何能做出高效率的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事件處理。例如下面程式碼: