定義頁面布局時，應該從壹開始就優化呈現。樣式和腳本在頁面渲染中起著非常重要的作用。專業人士知道壹些技巧來避免壹些性能問題。
本文不會深究瀏覽器的技術細節，而是提供壹些通用原則。不同的瀏覽器引擎有不同的工作原理，這使得特定瀏覽器的學習更加復雜。
瀏覽器如何渲染頁面？
先說瀏覽器渲染頁面的壹般流程:
由從服務器接收的HTML形成？文檔對象模型
加載並解析樣式以形成CSS對象模型。
然後DOM和CSSOM創建渲染樹，渲染樹是渲染對象的集合(Webkit分別稱之為“渲染器”和“渲染對象”，Gecko engine稱之為“框架”)。除了不可見的元素(比如head標簽和壹些帶有display:none屬性的元素)，渲染樹映射DOM的結構。在渲染樹中，每個文本字符串都被視為獨立的渲染器。每個渲染對象都包含其對應的具有計算樣式的DOM對象(或文本塊)。換句話說，渲染樹描述了DOM的直觀表示。
對於每壹個渲染元素，都會計算出它的坐標，這就是所謂的“布局”。瀏覽器使用壹種只需要處理壹次的“流方法”來布局所有元素(表格需要處理多次)。
最後，布局顯示在瀏覽器窗口中。這個過程叫做“畫”。
重畫
當妳在頁面上修改壹些不需要改變定位的樣式(比如背景色、邊框色、可見性)，瀏覽器只會將新的樣式重繪到元素上(這叫做“重繪”或者“重定義樣式”壹次)。
重新整理
當頁面上的更改影響到文檔的內容、結構或元素定位時，就會發生重組(或“重新布局”)。重排通常由以下變化觸發:
DOM操作(如添加、刪除、更改或改變元素順序)。
？內容的變化，包括表格中文字的變化。
？計算或更改CSS屬性。
？添加或刪除樣式表。
？更改“類”屬性。
？瀏覽器窗口的操作(調整大小、滾動窗口)。
？激活偽類(如懸停狀態)。
瀏覽器如何優化渲染？
瀏覽器盡最大努力將重新排列過程限制為僅覆蓋已更改元素的區域。例如，位置為absolue或fixed的元素的大小變化只影響其自身及其後代，而對位置為static的元素進行同樣的操作將導致其後面的所有元素重新排列。
還有壹個優化就是在運行壹段Jjavascript代碼的時候，瀏覽器會緩存壹些修改，然後在執行代碼的時候，壹次性執行這些修改。
例如，以下代碼觸發重繪和重新排列:
var？$body？=?$(' body ')；？
$body.css('padding '，？1px’)；？//?重新排列？重新粉刷？
$body.css('color '，？紅色’)；？//?重新粉刷？
$body.css('margin '，？2px’)；？//?重新排列？重新粉刷？
//?事實上，只執行壹次重新排列和重新繪制。？
如上所述，訪問壹個元素的屬性將被強制重新排列。如果我們在上面的代碼中添加壹行代碼來讀取元素的屬性，就會出現這種情況:
var？$body？=?$(' body ')；？
$body.css('padding '，？1px’)；？
$ body . CSS(' padding ')；？//?在這裏，元素的屬性被讀取壹次，並且會發生強制重排。
$body.css('color '，？紅色’)；？
$body.css('margin '，？2px’)；？
由於上面的代碼，有兩個重排。因此，為了提高性能，您應該說讀取元素屬性的代碼是組織在壹起的(詳細示例請參見JSBin上的代碼)。
在壹種情況下，必須觸發強制重排。比如對壹個元素的同壹個屬性修改兩次(比如margin-left)，初始設置100px不做動畫，然後通過動畫把值修改為50px。具體的例子可以看，當然我這裏會講更多的細節。
讓我們從壹個帶有過渡的CSS類開始:
。has-過渡？{ ?
-WebKit-過渡:？左邊距？1s？放松；
-moz-轉場:？左邊距？1s？放松；
-o-轉場:？左邊距？1s？放松；
過渡:？左邊距？1s？放松；？
}?
然後實施:
//我們的元素默認有“has-transition”屬性？
var？$targetElem？=?$(' # target elemid ')；？
//刪除包含transition的類？
$ target elem . remove class(' has-transition ')；
//?當包含transition的類沒有了，改變元素屬性？
$targetElem.css('margin-left '，？100);？
//?然後添加回包含轉換的類。
$ target elem . add class(' has-transition ')；？
//?更改元素屬性？
$targetElem.css('margin-left '，？50);？
上述實現沒有按預期運行。所有的修改都被瀏覽器緩存，只會在上面代碼的最後執行。我們需要的是強制重排，這可以通過進行以下修改來實現:
//刪除包含transition的類？
$(這個)。remove class(' has-transition ')；？
//?更改元素屬性？
$(這個)。css('左邊距'，？100);？
//觸發強制重排，使改變後的類或屬性可以立即執行。？
$(this)[0]。偏高；？//?OffsetHeight只是壹個例子，其他屬性也可以。？
//?然後添加回包含轉換的類。
$(這個)。add class(“has-transition”)；？
//?更改元素屬性？
$(這個)。css('左邊距'，？50);？
現在，這段代碼按照我們的預期運行。
實用的優化建議
總結了壹些有用的信息，我建議如下:
？創建合法的HTML和CSS，不要忘記進行文件編碼。樣式應該寫在head標簽中，腳本標簽應該加載在body標簽的末尾。
？盡量簡化優化CSS選擇器(這個優化點被大部分使用CSS預處理器的開發者忽略了)。保持嵌套層數最少。以下是CSS選擇器的性能排名(從最快開始):
ID選擇器:#id
類選擇器:？。班級
標簽:？差異
相鄰的兄弟元素:a+i
父元素選擇器:？ul & gt裏
通配符選擇器:？*
偽類和偽元素:？答:懸停？妳應該記得瀏覽器從右向左處理選擇器，這就是為什麽最右邊的選擇器更快-# id或。班級。
div？*?{...}?//?不好？
。列表？李？{...}?//?不好？
。列表項目？{...}?//?好嗎？
#列表？。列表項目？{...}?//?好嗎？
在腳本中，盡量減少DOM操作。緩存所有內容，包括屬性和對象(如果可以重用的話)。在執行復雜操作時，最好操作壹個“脫機”元素(“脫機”元素是指只存在於內存中，與DOM對象分離的元素)，然後將這個元素插入DOM。
如果使用jQuery，請遵循jQuery選擇器最佳實踐。
要改變元素的樣式，修改“class”屬性是最有效的方法之壹。DOM樹的層次越深，效率就越高(這也有助於將表示從邏輯中分離出來)。
盡可能僅動畫顯示位置絕對或固定的元素。
禁用壹些復雜的滾動時？:懸停？動畫是壹個好主意(例如，向body標簽添加壹個非懸停類)。
有關更多詳細信息，您可以閱讀以下文章:
1.瀏覽器如何工作
2.渲染:重畫、重排/重新布局、重新設計樣式
希望這篇文章能幫到妳！
原文鏈接:？frontendbabel？翻譯:？伯樂在線？-?莫伊澤
翻譯鏈接:？/72692/