渲染應該從最開始當頁面佈局被定義時就進行優化,樣式和指令碼在頁面渲染中扮演著非常重要的角色。專業人員知道一些技巧以避免一些效能問題。
這篇文章不會深入研究瀏覽器的技術細節,而是提供一些通用的原則。不同瀏覽器引擎工作原理不同,這就使特定瀏覽器的學習更加複雜。
瀏覽器是怎樣渲染一個頁面的?
我們從瀏覽器渲染頁面的大概過程開始說起:
- 由從伺服器接收到的 HTML 形成 DOM(文件物件模型)。
- 樣式被載入和解析,形成 CSSOM(CSS 物件模型)。
- 緊接著 DOM 和 CSSOM 建立了一個渲染樹,這個渲染樹是一些被渲染物件的集合( Webkit 分別叫它們”renderer”和”render object”,而在Gecko 引擎中叫”frame”)。除了不可見的元素(比如 head 標籤和一些有 display:none 屬性的元素),渲染樹對映了 DOM 的結構。在渲染樹中,每一個文字字串都被當做一個獨立的 renderer。每個渲染物件都包含了與之對應的計算過樣式的DOM 物件(或者一個文字塊)。換句話說,渲染樹描述了 DOM 的直觀的表現形式。
- 對每個渲染元素來說,它的座標是經過計算的,這被叫做“佈局(layout)”。瀏覽器使用一種只需要一次處理的“流方法”來佈局所有元素(tables需要多次處理)。
- 最後,將佈局顯示在瀏覽器視窗中,這個過程叫做“繪製(painting)”。
當在頁面上修改了一些不需要改變定位的樣式的時候(比如background-color,border-color,visibility),瀏覽器只會將新的樣式重新繪製給元素(這就叫一次“重繪”或者“重新定義樣式”)。
重排
當頁面上的改變影響了文件內容、結構或者元素定位時,就會發生重排(或稱“重新佈局”)。重排通常由以下改變觸發:
- DOM 操作(如元素增、刪、改或者改變元素順序)。
- 內容的改變,包括 Form 表單中文字的變化。
- 計算或改變 CSS 屬性。
- 增加或刪除一個樣式表。
- 改變”class”屬性。
- 瀏覽器視窗的操作(改變大小、滾動視窗)。
- 啟用偽類(如:hover狀態)。
瀏覽器盡最大努力限制重排的過程僅覆蓋已更改的元素的區域。舉個例子,一個 position 為 absolue 或 fixed 的元素的大小變化隻影響它自身和子孫元素,而對一個 position 為 static 的元素做同樣的操作就會引起所有它後面元素的重排。
另一個優化就是當執行一段Jjavascript 程式碼的時候,瀏覽器會將一些修改快取起來,然後當程式碼執行的時候,一次性的將這些修改執行。舉例來說,這段程式碼會觸發一次重繪和一次重排:
var $body = $('body'); $body.css('padding', '1px'); // 重排, 重繪 $body.css('color', 'red'); // 重繪 $body.css('margin', '2px'); // 重排, 重繪 // 實際上只有一次重排和重繪被執行。如上面所說,訪問一個元素的屬性會進行一次強制重排。如果我們給上面的程式碼加上一行讀取元素屬性的程式碼,這個情況就會出現:
var $body = $('body'); $body.css('padding', '1px'); $body.css('padding'); // 這裡讀取了一次元素的屬性,一次強制重排就會發生。 $body.css('color', 'red'); $body.css('margin', '2px');上面這段程式碼的結果就是,進行了兩次重排。因此,為了提高效能,你應該講讀取元素屬性的程式碼組織在一起(細節的例子可以看JSBin上的程式碼)。
有一種情況是必須觸發一次強制重排的。例如:給元素改變同一個屬性兩次(比如margin-left),一開始設定100px,沒有動畫,然後通過動畫的形式將值改為50px。具體可以看例子,當然,我在這裡會講更多的細節。
我們從一個有transition的CSS class開始:
.has-transition { -webkit-transition: margin-left 1s ease-out; -moz-transition: margin-left 1s ease-out; -o-transition: margin-left 1s ease-out; transition: margin-left 1s ease-out; }然後進行實現:
//我們的元素預設有"has-transition"屬性 var $targetElem = $('#targetElemId'); //刪除包含transition的class $targetElem.removeClass('has-transition'); // 當包含transition的class已經沒了的時候,改變元素屬性 $targetElem.css('margin-left', 100); // 再將包含transition的class新增回來 $targetElem.addClass('has-transition'); // 改變元素屬性 $targetElem.css('margin-left', 50);上面的實現沒有按照期望的執行。所有的修改都被瀏覽器快取了,只在上面這段程式碼的最後才會執行。我們需要的是一次強制重排,我們可以通過進行以下修改來實現:
//刪除包含transition的class $(this).removeClass('has-transition'); // 改變元素屬性 $(this).css('margin-left', 100); //觸發一次強制重排,從而使變化了的class或屬效能夠立即執行。 $(this)[0].offsetHeight; // offsetHeight僅僅是個例子,其他的屬性也可以奏效。 // 再將包含transition的class新增回來 $(this).addClass('has-transition'); // 改變元素屬性 $(this).css('margin-left', 50);現在這段程式碼如我們所期望的執行了。
實際的優化建議
彙總了一些有用的資訊,我建議以下幾點:
- 建立合法的 HTML 和 CSS ,別忘了制定檔案編碼,Style 應該寫在 head 標籤中,script 標籤應該載入 body 標籤結束的位置。
- 試著簡化和優化 CSS 選擇器(這個優化點被大多數使用 CSS 前處理器的開發者忽略了)。將巢狀層數控制在最小。以下是 CSS 選擇器的效能排行(從最快的開始):
- ID選擇器:#id
- class選擇器: .class
- 標籤: div
- 相鄰的兄弟元素:a + i
- 父元素選擇器: ul > li
- 萬用字元選擇器: *
- 偽類和偽元素: a:hover ,你應該記住瀏覽器處理選擇器是從右向左的,這也就是為什麼最右面的選擇器會更快——#id或.class。
div * {...} // bad .list li {...} // bad .list-item {...} // good #list .list-item {...} // good
- 在你的指令碼中,儘可能的減少 DOM 的操作。把所有東西都快取起來,包括屬性和物件(如果它可被重複使用)。進行復雜的操作的時候,最好操作一個“離線”的元素(“離線”元素的意思是與 DOM 物件分開、僅存在記憶體中的元素),然後將這個元素插入到 DOM 中。
- 如果你使用 jQuery,遵循jQuery 選擇器最佳實踐
- 要改變元素的樣式,修改“class”屬性是最高效的方式之一。你要改變 DOM 樹的層次越深,這一條就越高效(這也有助於將表現和邏輯分開)。
- 儘可能的只對 position 為 absolute 或 fix 的元素做動畫。
- 當滾動時禁用一些複雜的 :hover 動畫是一個很好的主意(例如,給 body 標籤加一個 no-hover 的 class)關於這個主題的文章。
希望這篇文章能夠對你有所幫助!
本文轉載自: http://blog.jobbole.com/72692/
相關閱讀
評論(0)