關於網頁性能

關於網頁性能

網頁性能管理是一個很大的話題，最近在複習相關的知識，小結一下。

頁面加載順序

網頁生成的過程大體以下：

1. HTML代碼轉化成DOM
2. CSS代碼轉化成CSSOM（CSS Object Model）
3. 結合DOM和CSSOM，生成一棵渲染樹（包含每一個節點的視覺信息）
4. 生成佈局（layout），即將全部渲染樹的全部節點進行平面合成
5. 將佈局繪製（paint）在屏幕上

---

CSS加載、JS加載是否阻塞DOM樹的解析和渲染

由上面的過程咱們能夠看出，在渲染以前，CSSOM 和 DOM 已經生成。

• 實際上，css的加載不會阻塞DOM樹解析，可是會阻塞DOM樹渲染。要在樣式加載好了以後，纔開始渲染頁面。這是合理的。
• 而JS執行會阻塞DOM樹的解析和渲染。當引用了JS的時候，瀏覽器發送1個JS request就會一直等待該request的返回。由於瀏覽器須要1個穩定的DOM樹結構，而JS中頗有可能有代碼直接改變了DOM樹結構，好比使用 document.write 或 appendChild,甚至是直接使用的location.href進行跳轉，瀏覽器爲了防止出現JS修改DOM樹，須要從新構建DOM樹的狀況，因此，JS執行會阻塞DOM樹的解析和渲染。

這兩個規則的實質都是提升頁面的性能，避免發生沒必要要的從新渲染。

---

頁面性能優化

重排和重繪會不斷觸發，這是不可避免的。可是，它們很是耗費資源，是致使網頁性能低下的根本緣由。

如下三種狀況，會致使網頁從新渲染。

1. 修改DOM
2. 修改樣式表
3. 用戶事件（好比鼠標懸停、頁面滾動、輸入框鍵入文字、改變窗口大小等等）

從新渲染，就須要從新生成佈局和從新繪製。前者叫作"重排"（reflow），後者叫作"重繪"（repaint）須要注意的是，"重繪"不必定須要"重排"，好比改變某個網頁元素的顏色，就只會觸發"重繪"，不會觸發"重排"，由於佈局沒有改變。可是，"重排"必然致使"重繪"，好比改變一個網頁元素的位置，就會同時觸發"重排"和"重繪"，由於佈局改變了

---

有一些技巧，能夠下降瀏覽器從新渲染的頻率和成本。

1. DOM 的多個讀操做（或多個寫操做），應該放在一塊兒。不要兩個讀操做之間，加入一個寫操做。
2. 不要一條條地改變樣式，而要經過改變class，或者csstext屬性，一次性地改變樣式。
3. 先將元素設爲display: none（須要1次重排和重繪），而後對這個節點進行100次操做，最後再恢復顯示（須要1次重排和重繪）。這樣一來，你就用兩次從新渲染，取代了可能高達100次的從新渲染。
4. position屬性爲absolute或fixed的元素，重排的開銷會比較小，由於不用考慮它對其餘元素的影響。
5. 只在必要的時候，纔將元素的display屬性爲可見，由於不可見的元素不影響重排和重繪。另外，visibility : hidden的元素只對重繪有影響，不影響重排.
6. 獲取某些屬性瀏覽器引擎可能會針對重排作了優化。好比Opera，它會等到有足夠數量的變化發生，或者等到必定的時間，或者等一個線程結束，再一塊兒處理，這樣就只發生一次重排。但除了渲染樹的直接變化，當獲取一些屬性時，瀏覽器爲取得正確的值也會觸發重排。這樣就使得瀏覽器的優化失效了。這些屬性包括：offsetTop、offsetLeft、offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle() (currentStyle in IE)。因此，在屢次使用這些值時應進行緩存。

---

參看文獻

• 網頁性能管理詳解
• 瀏覽器加載和渲染html的順序
• 重繪(repaints) 重排(reflows)
• css加載會阻塞DOM樹的解析渲染嗎？