鐵人檔案
Web 前端效能攸關使用者是否願意再次來訪，重要度不容忽視。希望藉由這三十天的分享幫助自己整理所學，也讓有興趣的人可以有個指南。
CSS 規則的撰寫是會影響到效能的，不過實際上瀏覽器花在 CSS 上面的時間並不會太多，以我的部落格為例： 只花了 1.830 ms 而已。雖然如此，了解一下...
DOM 包含頁面上的所有 content ，而 CSSOM 則包含所有的樣式設定，兩者為個別獨立的 object。瀏覽器最後要做的事就是將結果呈現到螢幕上，而在...
瀏覽器建構完 Render-tree 之後，是否便可以直接將結果 Paint 到螢幕上了呢？很明顯是不行的，我們還沒計算該擺放的位置以及其大小，這就是 Layo...
Layout 結束後，便會正式將畫面 Paint 到螢幕上，聽起來很容易，但事實上並沒有這麼簡單。 首先讓我們進行一個測試，假設有兩個 div ，CSS 分別為...
接續前篇文章。 (以下兩張圖皆為 Critical rendering path - Crash course on web performance (Flue...
如果你打開 Chrome 的開發人員工具 -> Timeline -> Record 的話，應該會看到「Composite Layers」這個東西。...
前面我們已經學習 Browser 是如何運作的了，從這一篇開始，我們會繼續針對一些前面沒講到的特性繼續作說明。 假設今天瀏覽器取得以下頁面 ： <li...
上一篇提到越快取得 CSS ，頁面的 Rendering 可以進行得越快， 我們繼續拿上一篇文章的例子說明，不過今天多新增了一行 external js：...
前面提到 Javascript 會阻擋 DOM 的建構，很神奇的是，CSS 會阻擋 Javascript 的執行。讓我們繼續以前例說明（不過增加了一段 jQue...
各位還記得前面我們有提到 HTML Parser 遇到 Javascript 就會停下來先等待把 Javascript 抓下來並且執行過後，在繼續進行 DOM...
