當前位置:律師網大全 - 專利申請 - 為什麽每個前端開發者都要懂網頁渲染?

為什麽每個前端開發者都要懂網頁渲染?

今天我將重點討論網頁渲染及其重要性。雖然很多文章都提到了這個話題,但是大部分信息都是零碎的。為了思考這件事,我需要研究許多信息來源。所以我覺得我應該寫這篇文章。我相信這篇文章對初學者會很有用,對想刷新鞏固已有知識的專家也適用。

定義頁面布局時,應該從壹開始就優化呈現。樣式和腳本在頁面渲染中起著非常重要的作用。專業人士知道壹些技巧來避免壹些性能問題。

本文不會深究瀏覽器的技術細節,而是提供壹些通用原則。不同的瀏覽器引擎有不同的工作原理,這使得特定瀏覽器的學習更加復雜。

瀏覽器如何渲染頁面?

先說瀏覽器渲染頁面的壹般流程:

由從服務器接收的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/

  • 上一篇:天然氣工業是怎麽發展的?
  • 下一篇:無形資產評估之非專利技術價值評估需要搜集哪些資料
  • copyright 2024律師網大全