今天這篇文章我們繼續講解Web前端性能優化方法。
減少DOM元素的數量
網頁在渲染的過程中， 會根據HTML元素去生成DOM樹， 然後綁定上特定的CSS樣式， 這就意味著頁面上的DOM元素越多， 就會消耗越多的渲染時間， 因此應該盡可能的減少DOM元素的數量。
但是一個頁面的DOM元素多少為多， 還不好判定。 通過以下代碼可以查看一個頁面中所有元素的數量
獲取頁面所有元素
查看了以下Google的主頁面， 頁面看起來很簡潔， 不過裡面也有300多個元素
Google主頁面元素個數
根據功能變數名稱劃分內容
需要注意的是同一個網頁下請求的不同功能變數名稱不應該太多， 因為這會造成DNS查詢的問題。
一般網站的設計會選擇將靜態資源放在static.example.com功能變數名稱下， 動態內容放在www.example.com功能變數名稱下。 我們來看下Google主頁面的設計
Google主頁面資源劃分
減少iframe的數量
使用iframe既有利也有弊
優勢
1.最常見的就是頁面載入廣告， 使用iframe可以和頁面並行載入， 不會阻塞主頁面
2.流覽器會對iframe進行安全沙箱保護， 保證內容安全性
弊端
1.iframe的載入會阻塞主頁面的onload事件
可以通過以下的方法去解決阻塞主頁面的onload事件的問題
解決阻塞主頁面onload問題
雖然使用iframe也有好處，
避免404頁面
在網路上， 每一個HTTP請求對於性能的消耗都是昂貴的， 如果發送了一個HTTP請求返回的是404， 對於資源來說是一個極大的浪費。
避免404主要是針對網站開發人員來說， 網站開發人員應該在上線之前進行測試， 避免所有可能出現404的情況。
404錯誤頁面
總結
今天我們又總結出了幾個Web性能優化的措施， 你瞭解了嗎？
以下是之前總結的文章， 感興趣的可以看一下
經典面試題-Web前端性能優化方法（1）
經典面試題-Web前端性能優化方法之延遲載入