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

前端性能優化

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

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

優化誰的性能？若是咱們沒有開發網站，那麼什麼也不須要優化，但開發了，就要優化了。如今不考慮後端，只考慮前端性能優化。

難道壓縮圖片資源、壓縮代碼量，好讓用戶快速訪問。寫的HTML須要優化？寫的CSS代碼須要優化？寫的JavaScript代碼須要優化？

若是在瀏覽器內的性能優化，我想到的就是咱們所寫的代碼。瀏覽器解析HTML，變成DOM對象。瀏覽器解析CSS,變成CSSOM。瀏覽器解析JavaScript，執行咱們寫過的代碼，而後去操做DOM更改標籤呢的數據，而後去操做DOM對應的樣式，去更改每一個DOM節點對應的樣式。

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

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

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

第一步：HTML轉成DOM結構
第二步：CSS轉成CSSOM結構
第三步：DOM和CSSOM結合，生成一顆渲染樹（包含每一個節點的視覺信息）
第四步：生成佈局（layout），即將全部渲染樹的全部節點進行平面整合
第五步：講佈局繪製在屏幕上