系列文章
[30 天學會 Web 前端效能優化] 1. 前言
首次參加 iT 邦幫忙鐵人賽，希望透過這三十天可以幫助自己更上層樓，也希望這一系列文章對於前端效能優化有興趣的人可以成為很棒的指引。 我對於 Web 的經驗說來...
[30 天學會 Web 前端效能優化] 2. 傳輸層簡述
與 Web 息息相關的 HTTP 協定建構於 TCP 協定之上，而 TCP 屬於傳輸層的協定，往後文章會稍微提一下 TCP 以及 HTTP ，但是在這之前，我們...
[30 天學會 Web 前端效能優化] 3. TCP 的確認機制
上一篇提到傳輸層，這一篇讓我們提一下 TCP 的確認機制。 TCP 有一項特點，也就是發送端在傳送下一個封包前，會先等待接受端的「確認」回應，而不是一直傳送封包...
[30 天學會 Web 前端效能優化] 4. TCP 三向交握
TCP 為連線導向的傳輸協定，因此雙方正式傳輸資料前，必須先經過三向交握（Three Way Handshake）這個階段，達成連線協議。 整個流程如果用圖表示...
[30 天學會 Web 前端效能優化] 5. 淺談 HTTP 協定
有過網站開發經驗的人，對於 HTTP 應該不陌生，若你不太了解也沒關係，這一篇文章會讓你有個粗略的概念。 HTTP 是一個 client 與 server 間溝...
[30 天學會 Web 前端效能優化] 6. Life of an HTTP Request
以下為 Faster Websites: Crash Course on Web Performance 這場 Talk 中其中一段的 Slide ： 在沒有...
[30 天學會 Web 前端效能優化] 7. 瀏覽器做了哪些事？ - High Level View
前面我們講了 TCP 以及 HTTP ，也談到了瀏覽器 Request 一個頁面時會經過的過程。今天讓我們以 High Level 的角度來看 Browser...
[30 天學會 Web 前端效能優化] 8. 瀏覽器是如何建構 DOM 的？
讓我們正式進入瀏覽器內部運作的議題。 前情提要 HTML5 的 Spec 裡面，對於建構 DOM 的過程有非常詳細的指示，HTML5 之前的版本都是由各家瀏覽器...
[30 天學會 Web 前端效能優化] 9. flush early, flush often
上一篇我們提到了 DOM Construction ，這一篇我們來談談一個優化技法。 首先要跟大家提一個觀念，Browser 並不會等到所有 HTML Docu...
[30 天學會 Web 前端效能優化] 10. CSSOM
之前我們提到了 DOM(Document Object Model) 這個東西，那瀏覽器是怎麼處理 CSS 的呢？ 假設 HTML 裡面有外連 CSS ，當瀏覽...