系列文章
[30 天學會 Web 前端效能優化] 11. CSS 選擇器與效能間的關係
CSS 規則的撰寫是會影響到效能的，不過實際上瀏覽器花在 CSS 上面的時間並不會太多，以我的部落格為例： 只花了 1.830 ms 而已。雖然如此，了解一下...
[30 天學會 Web 前端效能優化] 12. Render-tree
DOM 包含頁面上的所有 content ，而 CSSOM 則包含所有的樣式設定，兩者為個別獨立的 object。瀏覽器最後要做的事就是將結果呈現到螢幕上，而在...
[30 天學會 Web 前端效能優化] 13. Layout
瀏覽器建構完 Render-tree 之後，是否便可以直接將結果 Paint 到螢幕上了呢？很明顯是不行的，我們還沒計算該擺放的位置以及其大小，這就是 Layo...
[30 天學會 Web 前端效能優化] 14. Paint
Layout 結束後，便會正式將畫面 Paint 到螢幕上，聽起來很容易，但事實上並沒有這麼簡單。 首先讓我們進行一個測試，假設有兩個 div ，CSS 分別為...
[30 天學會 Web 前端效能優化] 15. 產生一個 frame 所需經過的過程
接續前篇文章。 (以下兩張圖皆為 Critical rendering path - Crash course on web performance (Flue...
[30 天學會 Web 前端效能優化] 16. Composite
如果你打開 Chrome 的開發人員工具 -> Timeline -> Record 的話，應該會看到「Composite Layers」這個東西。...
[30 天學會 Web 前端效能優化] 17. CSS 會阻擋頁面的 Rendering
前面我們已經學習 Browser 是如何運作的了，從這一篇開始，我們會繼續針對一些前面沒講到的特性繼續作說明。 假設今天瀏覽器取得以下頁面 ： <li...
[30 天學會 Web 前端效能優化] 18. Javascript 會阻擋 DOM Construction 的進行
上一篇提到越快取得 CSS ，頁面的 Rendering 可以進行得越快， 我們繼續拿上一篇文章的例子說明，不過今天多新增了一行 external js：...
[30 天學會 Web 前端效能優化] 19. CSS 會阻擋 Javascript 的執行
前面提到 Javascript 會阻擋 DOM 的建構，很神奇的是，CSS 會阻擋 Javascript 的執行。讓我們繼續以前例說明（不過增加了一段 jQue...
[30 天學會 Web 前端效能優化] 20. 瀏覽器 Pre-loader 的功用
各位還記得前面我們有提到 HTML Parser 遇到 Javascript 就會停下來先等待把 Javascript 抓下來並且執行過後，在繼續進行 DOM...