30 天學會Web 前端效能優化 - iT 邦幫忙 | 前端優化
首次參加iT邦幫忙鐵人賽,希望透過這三十天可以幫助自己更上層樓,也希望這一系列文章對於前端效能優化有興趣的人可以成為很棒的指引。我對於Web的經驗說來也不算多,真的正式學習這個領域的知識是從去年暑假開始。那時我選擇RubyonRails這個WebFramework作為學習對象,透過這個框架帶領自己進入Web的世界。首先想跟各位談談,了解原理的重要性,這得從我學習Rails的經驗說起。起初學習Rails時並沒有想太多,當時我僅抱持著一個理想:我要把Rails練得很厲害。從一開始只有模糊概念到現在能夠輕鬆地用Rails造出一個網站,過程歷經重重...
首次參加 iT 邦幫忙鐵人賽,希望透過這三十天可以幫助自己更上層樓,也希望這一系列文章對於前端效能優化有興趣的人可以成為很棒的指引。
我對於 Web 的經驗說來也不算多,真的正式學習這個領域的知識是從去年暑假開始。那時我選擇 Ruby on Rails 這個 Web Framework 作為學習對象,透過這個框架帶領自己進入 Web 的世界。
首先想跟各位談談,了解原理的重要性,這得從我學習 Rails 的經驗說起。起初學習 Rails 時並沒有想太多,當時我僅抱持著一個理想:我要把 Rails 練得很厲害。從一開始只有模糊概念到現在能夠輕鬆地用 Rails 造出一個網站,過程歷經重重關卡,然而這一切都是值得的。不過當我練習寫出越來越多個網站之後有了一個體悟:「雖然我能夠使用 Rails 開發網站,但我對於框架的原理卻一知半解。」於是從那時起,我開始閱讀 Rails 的 Source Code ,最近也開始學習 Golang 並且試著自己寫出一個框架。
當越了解計算機、網路、框架以及我們所使用的程式語言背後的原理後發現,若是真的想成為厲害的開發者就不能只會開發,必須要了解背後的原理,否則網站開發得再快、再好也只是會皮毛而已。
這一系列的文章將會談到各種關於前端效能優化的知識,而在談到一切的技法、 Tips 之前,我們會先談到瀏覽器的原理以及 HTTP 協定。如同前面所說的一般,了解原理或許對某些人來說有些枯燥乏味,但這卻會幫助自己可以以更全面的角度看待這個議題,使自己可以更清楚地了解自己該怎麼做以及「為什麼」要這麼做,而不是只是「背」了一堆效能優化手法,卻不知為何要做出這樣的選擇。
為何講前端效能優化?
你或許會有疑問,為什麼要講前端而不是後端的效能優化?
根據 High Performance Web Sites 這本書指出,大部分網站花費在取得 HTML Document 的時間不會大於 20% ,而其餘的 80%~90% 都花費在取得頁面所需的其他 components 上。由此可知,優化前端的效能,可以榨出的時間是最多的。