Web網站優化基礎

來自專欄 Front-End Web Developer

一、瀏覽器解析頁面

瀏覽器在收到 HTML 文檔之後會對文檔進行解析開始構建 DOM (Document Object Model) 樹，進而在文檔中發現樣式表，開始解析 CSS 來構建 CSSOM（CSS Object Model）樹，這兩者都構建完成後，開始構建渲染樹。整個過程如下：

二、性能優化

1. 減少DOM的操作

DOM查找，插入等操作都是比較消耗性能的，所以性能優化的一個方法就是減少DOM相關的操作。

2. 避免強制性同步布局

在 JavaScript 中讀取到的布局信息都是上一幀的信息，如果在 JavaScript 中修改了頁面的布局，比如給某個元素添加了一個類，然後再讀取布局信息。這個時候為了獲得真實的布局信息，瀏覽器需要強制性對頁面進行布局。因此應該避免這樣做。

3.優化渲染性能

瀏覽器通常每秒更新頁面 60 次，每一幀的時間就是 16.6ms，為了能讓瀏覽器保持 60幀 的幀率，為了讓動畫看起來流暢，需要保證幀率達到 60fps，因此每一幀的邏輯需要在 16.6ms 內完成。

每一幀實際上都包含下列步驟：

● JavaScript：改變元素樣式，添加元素到 DOM 中等等

● Style：元素的類或者style改變了，這個時候需要重新計算元素的樣式

● Layout：需要重新計算元素的具體尺寸

● Paint：將元素的繪製的圖層上

● Composite：合併多個圖層

示例 比如：修改了元素的width還height，或top。瀏覽器會重新計算布局，並對整個頁面進行重排。

比如：修改lbackground-color，僅僅修改了頁面重繪的屬性，不會影響頁面布局，瀏覽器會跳過計算布局(layout)過程，只進行重繪。(Paint) 舉例：

更多內容可以參考CSS trigggers

4. 使用 transform 和 opacity 來完成動畫

在以往開發過程中，前端開發習慣使用操作DOM+CSS來製作動畫。而如今期望開發者都是用transform和opacity來製作簡單的動畫效果，對這兩個屬性的修改不需要經歷 layout 和 paint 過程。

三、注意事項

1. CSS阻塞渲染

通常情況下 CSS 被認為是阻塞渲染的資源，在CSSOM 構建完成之前，頁面不會被渲染，放在頂部讓樣式表能夠儘早開始載入。但如果把引入樣式表的 link 放在文檔底部，頁面雖然能立刻呈現出來，但是頁面載入出來的時候會是沒有樣式的，是混亂的。當後來樣式表載入進來後，頁面會立即進行重繪，這也就是通常所說的閃爍了。

2 JavaScript 阻塞文檔解析

當在 HTML 文檔中遇到 script 標籤後控制權將交給 JavaScript，在 JavaScript 下載並執行完成之前，都不會解析 HTML。因此如果將 JavaScript 放在文檔頂部，恰好這個時候 JavaScript 腳本載入的特別慢，用戶將會等待很長一段時間，這段個時候 HTML 文檔還沒有解析到 body 部分，頁面會是空白的。

小結

默認情況下，CSS樣式放在head標籤內部，JavaScript文件放在body標籤閉合前面

參考鏈接

1. Chrome開發者工具
2. 前端性能優化的三個維度
3. 關於前端性能優化的 23 條建議

推薦閱讀：