關於網頁效能

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

html**轉化成domcss**轉化成cssom（css object model）

結合dom和cssom，生成一棵渲染樹（包含每個節點的視覺資訊）

生成布局（layout），即將所有渲染樹的所有節點進行平面合成

將布局繪製（paint）在螢幕上

由上面的過程我們可以看出，在渲染之前，cssom和dom已經生成。

重排和重繪會不斷觸發，這是不可避免的。但是，它們非常耗費資源，是導致網頁效能低下的根本原因。

修改dom

修改樣式表

使用者事件（比如滑鼠懸停、頁面滾動、輸入框鍵入文字、改變視窗大小等等）

重新渲染，就需要重新生成布局和重新繪製。前者叫做"重排"（reflow），後者叫做"重繪"（repaint）需要注意的是，"重繪"不一定需要"重排"，比如改變某個網頁元素的顏色，就只會觸發"重繪"，不會觸發"重排"，因為布局沒有改變。但是，"重排"必然導致"重繪"，比如改變乙個網頁元素的位置，就會同時觸發"重排"和"重繪"，因為布局改變了

dom的多個讀操作（或多個寫操作），應該放在一起。不要兩個讀操作之間，加入乙個寫操作。

不要一條條地改變樣式，而要通過改變class，或者csstext屬性，一次性地改變樣式。

先將元素設為display: none（需要1次重排和重繪），然後對這個節點進行100次操作，最後再恢復顯示（需要1次重排和重繪）。這樣一來，你就用兩次重新渲染，取代了可能高達100次的重新渲染。

position屬性為absolute或fixed的元素，重排的開銷會比較小，因為不用考慮它對其他元素的影響。

只在必要的時候，才將元素的display屬性為可見，因為不可見的元素不影響重排和重繪。另外，visibility : hidden的元素只對重繪有影響，不影響重排.

獲取某些屬性瀏覽器引擎可能會針對重排做了優化。比如opera，它會等到有足夠數量的變化發生，或者等到一定的時間，或者等乙個執行緒結束，再一起處理，這樣就只發生一次重排。但除了渲染樹的直接變化，當獲取一些屬性時，瀏覽器為取得正確的值也會觸發重排。這樣就使得瀏覽器的優化失效了。這些屬性包括：offsettop、offsetleft、offsetwidth、offsetheight、scrolltop、scrollleft、scrollwidth、scrollheight、clienttop、clientleft、clientwidth、clientheight、getcomputedstyle()(currentstyle in ie)。所以，在多次使用這些值時應進行快取。

參看文獻

優化網頁效能

預設情況下css會被當作阻塞渲染的資源來處理，可以使用 型別和 查詢來標識css的某些部分為非阻塞渲染的 第一句 這個樣式只有在列印頁面時才會生效。它在頁面首次載入時不會阻塞渲染 第二句 這個樣式只有在寬度大於等於768px時才會生效 借助ps中的 儲存為網頁格式 功能，可以對生成的任意一張，輸出各...

網頁效能優化

這些事廢話大家隨意ha 之前一直不太注意這方面的需求，而且專案 量也不是很多看起來好像沒什麼前端效能方面的問題，加之公司專案方面也沒太要求，所以我就似偷懶了嘛，氮素最近面試還是總結下吧hhhhh 首先造成前端效能方面的東西從最基本的頁面渲染方面那就是重排和重繪 例如 一般來說，樣式的寫操作會造成頁面...

網頁效能優化

網頁的生成過程，大致可以分成五步。1.html 轉化成dom 2.css 轉化成cssom css object model 3.結合dom和cssom，生成一棵渲染樹 包含每個節點的視覺資訊 4.生成布局 layout 即將所有渲染樹的所有節點進行平面合成 5.將布局繪製 paint 在螢幕上 這...