隨著時間的推進，網頁的呈現已經由過去單純的留言板，聊天室的網頁隨著時間演進，已經進階到各種動畫效果和複雜的使用者功能的網頁。

而為了編譯程式碼成為使用者眼中可見的畫面和功能，各家瀏覽器都在自家瀏覽器做了許多的處理及優化，讓使用者在開啟瀏覽器和，切換頁面，執行許多功能時，皆有流暢的呈現在使用者眼中。

雖然，瀏覽器做了許多處理，但是對於身為前端工程師的我們，仍然需要了解瀏覽器到底做了什麼，並學習如何優化我們的資源，讓瀏覽器呈現時，可以有好的體驗。

以上就是我寫這系列文章的目的，透過 30 天的鐵人賽，讓身為前端工程師的我們，可以更加了解瀏覽器的優化和原理。

以下是我30天的大綱:

1. 認識現在瀏覽器
2. 瀏覽器怎麼在電腦中運作
3. 從使用者輸入到進到網站，瀏覽器發生了什麼事？
4. 瀏覽器的呈現過程- 概觀
5. HTML -> HTML DOM
6. CSS -> CSS DOM
7. 渲染樹
8. 佈局
9. 瀏覽器的呈現
10. 瀏覽器的解析- JavaScript
11. 外部加載JavaScript 與內部JavaScript 的優缺點
12. JavaScript 的非同步處理
13. 從輸入到合成一個網頁
14. 瀏覽器的生命週期- 概觀（RAIL）
15. 瀏覽器的生命週期- 加載（Load）與閒置（Idle）
16. 瀏覽器的生命週期- 響應（Response）
17. 瀏覽器的生命週期- 動畫（Animation）
18. Google Chrome 開發者工具的使用
19. 使用Google lighthouse 找出問題
20. 優化資源加載和內容-概觀
21. 用客戶角度來思考優化內容
22. 減少不必要的加載
23. 最佳化文字和壓縮檔案
24. 圖片優化與格式選擇
25. JavaScript 啟用優化
26. JavaScript Tree Shaking and Code Splitting 優化
27. 使用快取
28. Lazy Load
29. 渲染優化
30. 總結回顧-參賽心得