第七屆 優選

student
30 天學會 Web 前端效能優化
kevin3372000

系列文章

DAY 11

[30 天學會 Web 前端效能優化] 11. CSS 選擇器與效能間的關係

CSS 規則的撰寫是會影響到效能的,不過實際上瀏覽器花在 CSS 上面的時間並不會太多,以我的部落格為例: 只花了 1.830 ms 而已。雖然如此,了解一下...

DAY 12

[30 天學會 Web 前端效能優化] 12. Render-tree

DOM 包含頁面上的所有 content ,而 CSSOM 則包含所有的樣式設定,兩者為個別獨立的 object。瀏覽器最後要做的事就是將結果呈現到螢幕上,而在...

DAY 13

[30 天學會 Web 前端效能優化] 13. Layout

瀏覽器建構完 Render-tree 之後,是否便可以直接將結果 Paint 到螢幕上了呢?很明顯是不行的,我們還沒計算該擺放的位置以及其大小,這就是 Layo...

DAY 14

[30 天學會 Web 前端效能優化] 14. Paint

Layout 結束後,便會正式將畫面 Paint 到螢幕上,聽起來很容易,但事實上並沒有這麼簡單。 首先讓我們進行一個測試,假設有兩個 div ,CSS 分別為...

DAY 15

[30 天學會 Web 前端效能優化] 15. 產生一個 frame 所需經過的過程

接續前篇文章。 (以下兩張圖皆為 Critical rendering path - Crash course on web performance (Flue...

DAY 16

[30 天學會 Web 前端效能優化] 16. Composite

如果你打開 Chrome 的開發人員工具 -> Timeline -> Record 的話,應該會看到「Composite Layers」這個東西。...

DAY 17

[30 天學會 Web 前端效能優化] 17. CSS 會阻擋頁面的 Rendering

前面我們已經學習 Browser 是如何運作的了,從這一篇開始,我們會繼續針對一些前面沒講到的特性繼續作說明。 假設今天瀏覽器取得以下頁面 : <li...

DAY 18

[30 天學會 Web 前端效能優化] 18. Javascript 會阻擋 DOM Construction 的進行

上一篇提到越快取得 CSS ,頁面的 Rendering 可以進行得越快, 我們繼續拿上一篇文章的例子說明,不過今天多新增了一行 external js:...

DAY 19

[30 天學會 Web 前端效能優化] 19. CSS 會阻擋 Javascript 的執行

前面提到 Javascript 會阻擋 DOM 的建構,很神奇的是,CSS 會阻擋 Javascript 的執行。讓我們繼續以前例說明(不過增加了一段 jQue...

DAY 20

[30 天學會 Web 前端效能優化] 20. 瀏覽器 Pre-loader 的功用

各位還記得前面我們有提到 HTML Parser 遇到 Javascript 就會停下來先等待把 Javascript 抓下來並且執行過後,在繼續進行 DOM...