前端效能優化是怎麼回事？

摘要： 前端效能優化 話說回來，使用HTML、CSS、JS開發網站，誰會把我們寫好的程式碼拿去執行呢？是瀏覽器呀。 那麼效能優化是怎麼回事呢？ 優化誰的效能？如果我們沒有開發網站，那麼什麼也不需要優化，但開發了，就要優化了。現在不考慮後端，只考慮前端效能優化。 難道壓縮圖片資源、壓縮程...

前端效能優化

話說回來，使用HTML、CSS、JS開發網站，誰會把我們寫好的程式碼拿去執行呢？是瀏覽器呀。

那麼效能優化是怎麼回事呢？

優化誰的效能？如果我們沒有開發網站，那麼什麼也不需要優化，但開發了，就要優化了。現在不考慮後端，只考慮前端效能優化。

難道壓縮圖片資源、壓縮程式碼量，好讓使用者快速訪問。寫的HTML需要優化？寫的CSS程式碼需要優化？寫的JavaScript程式碼需要優化？

如果在瀏覽器內的效能優化，我想到的就是我們所寫的程式碼。瀏覽器解析HTML，變成DOM物件。瀏覽器解析CSS,變成CSSOM。瀏覽器解析JavaScript，執行我們寫過的程式碼，然後去操作DOM更改標籤呢的資料，然後去操作DOM對應的樣式，去更改每個DOM節點對應的樣式。

瀏覽器是如何渲染網頁的？

當瀏覽器接受到一個網頁時，它會如何解析呢？如何去識別誰是<script>標籤、誰是<style>標籤識別這些標籤，各自做了什麼事？

瀏覽器渲染一個網頁，大概有五個步驟。

第一步：HTML轉成DOM結構

第二步：CSS轉成CSSOM結構

第三步：DOM和CSSOM結合，生成一顆渲染樹（包含每個節點的視覺資訊）

第四步：生成佈局（layout），即將所有渲染樹的所有節點進行平面整合

第五步：講佈局繪製在螢幕上