前端開發(fā)者必備知識(shí)-網(wǎng)頁是如何渲染的-創(chuàng)新互聯(lián)

本篇文章主要探討前端開發(fā)者必備知識(shí)-網(wǎng)頁是如何渲染的。有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)大家有所幫助。

創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、外貿(mào)網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的豐寧網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

網(wǎng)頁渲染必須在很早的階段進(jìn)行，可以早到頁面布局剛剛定型。因?yàn)闃邮胶湍_本都會(huì)對(duì)網(wǎng)頁渲染產(chǎn)生關(guān)鍵性的影響。所以專業(yè)開發(fā)者必須了解一些技巧，從而避免在實(shí)踐的過程中遇到性能問題。

這篇文章不會(huì)研究瀏覽器內(nèi)部的詳細(xì)機(jī)制，而是提出一些通用的規(guī)則。畢竟，不同瀏覽器引擎的工作機(jī)制各不相同，這無疑會(huì)讓開發(fā)者對(duì)瀏覽器特性的研究變得更加復(fù)雜。

瀏覽器是如何完成網(wǎng)頁渲染？

首先，我們回顧一下網(wǎng)頁渲染時(shí)，瀏覽器的動(dòng)作：

根據(jù)來自服務(wù)器端的HTML代碼形成文檔對(duì)象模型（DOM）

加載并解析樣式，形成CSS對(duì)象模型。

在文檔對(duì)象模型和CSS對(duì)象模型之上，創(chuàng)建一棵由一組待生成渲染的對(duì)象組成的渲染樹（在Webkit中這些對(duì)象被稱為渲染器或渲染對(duì)象，而在Gecko中稱之為“frame”。）渲染樹反映了文檔對(duì)象模型的結(jié)構(gòu)，但是不包含諸如標(biāo)簽或含有display:none屬性的不可見元素。在渲染樹中，每一段文本字符串都表現(xiàn)為獨(dú)立的渲染器。每一個(gè)渲染對(duì)象都包含與之對(duì)應(yīng)的DOM對(duì)象，或者文本塊，還加上計(jì)算過的樣式。換言之，渲染樹是一個(gè)文檔對(duì)象模型的直觀展示。

對(duì)渲染樹上的每個(gè)元素，計(jì)算它的坐標(biāo)，稱之為布局。瀏覽器采用一種流方法，布局一個(gè)元素只需通過一次，但是表格元素需要通過多次。

最后，渲染樹上的元素最終展示在瀏覽器里，這一過程稱為“painting”。

當(dāng)用戶與網(wǎng)頁交互，或者腳本程序改動(dòng)修改網(wǎng)頁時(shí)，前文提到的一些操作將會(huì)重復(fù)執(zhí)行，因?yàn)榫W(wǎng)頁的內(nèi)在結(jié)構(gòu)已經(jīng)發(fā)生了改變。

重繪

當(dāng)改變那些不會(huì)影響元素在網(wǎng)頁中的位置的元素樣式時(shí)，譬如background-color(背景色)， border-color(邊框色)， visibility(可見性)，瀏覽器只會(huì)用新的樣式將元素重繪一次(這就是重繪，或者說重新構(gòu)造樣式)。

重排

當(dāng)改變影響到文本內(nèi)容或結(jié)構(gòu)，或者元素位置時(shí)，重排或者說重新布局就會(huì)發(fā)生。這些改變通常由以下事件觸發(fā)：

DOM操作（元素添加，刪除，修改，或者元素順序的改變）;

內(nèi)容變化，包括表單域內(nèi)的文本改變;

CSS屬性的計(jì)算或改變;

添加或刪除樣式表;

更改“類”的屬性;

瀏覽器窗口的操作（縮放，滾動(dòng)）;

偽類激活（：懸停）。

瀏覽器如何優(yōu)化渲染？

瀏覽器盡可能將重繪/重構(gòu) 限制在被改變?cè)氐膮^(qū)域內(nèi)。比如，對(duì)于位置固定或絕對(duì)的元素，其大小改變只影響元素本身及其子元素，然而，靜態(tài)定位元素的大小改變會(huì)觸發(fā)后續(xù)所有元素的重流。

另一種優(yōu)化技巧是，在運(yùn)行幾段JavaScript代碼時(shí)，瀏覽器會(huì)緩存這些改變，在代碼運(yùn)行完畢后再將這些改變經(jīng)一次通過加以應(yīng)用。舉個(gè)例子，下面這段代碼只會(huì)觸發(fā)一個(gè)重構(gòu)和重繪：

var $body = $('body');
$body.css('padding', '1px'); // reflow, repaint
$body.css('color', 'red'); // repaint
$body.css('margin', '2px'); // reflow, repaint
// only 1 reflow and repaint will actually happen

var $body = $('body'); $body.css('padding', '1px'); $body.css('padding'); // reading a property, a forced reflow $body.css('color', 'red'); $body.css('margin', '2px');

其結(jié)果就是，重排發(fā)生了兩次。因此，你應(yīng)該把訪問元素屬性的操作都組織在一起，從而優(yōu)化網(wǎng)頁性能。（你可以在JSBin查到更為詳細(xì)的例子）

有時(shí)，你必須觸發(fā)一個(gè)強(qiáng)制性重排。比如，我們必須將同樣的屬性(比如左邊距)兩次賦值給同一個(gè)元素。起初，它應(yīng)該設(shè)置為100px，且不帶動(dòng)效。接著，它必須通過過渡(transition)動(dòng)效改變?yōu)?0px。你現(xiàn)在可以在JSbin上學(xué)習(xí)這個(gè)例子，不過我會(huì)在這兒更詳細(xì)地介紹它。

首先，我們創(chuàng)建一個(gè)帶過渡效果的CSS類：.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; }

然后繼續(xù)執(zhí)行：// our element that has a "has-transition" class by default var $targetElem = $('#targetElemId');

// remove the transition class
$targetElem.removeClass('has-transition');
// change the property expecting the transition to be   off, as the class is not there
// anymore
$targetElem.css('margin-left', 100);
// put the transition class back
$targetElem.addClass('has-transition');
// change the property
$targetElem.css('margin-left', 50);

然而，這個(gè)執(zhí)行無法奏效。所有改變都被緩存，只在代碼塊末尾加以執(zhí)行。我們需要的是強(qiáng)制性的重排，我們可以通過以下更改加以實(shí)現(xiàn)：

// remove the transition class $(this).removeClass('has-transition');

// change the property
$(this).css('margin-left', 100);
// trigger a forced reflow, so that changes in a    class/property get applied immediately
$(this)[0].offsetHeight; // an example, other   properties would work, too
// put the transition class back
$(this).addClass('has-transition');
// change the property
$(this).css('margin-left', 50);

現(xiàn)在代碼如預(yù)期那樣執(zhí)行了。

有關(guān)性能優(yōu)化的實(shí)際建議

總結(jié)現(xiàn)有的資料，我提出以下建議：

創(chuàng)建有效的HTML和CSS文件，不要忘記指明文檔的編碼方式。樣式應(yīng)該包含在標(biāo)簽內(nèi)，腳本代碼則應(yīng)該加在標(biāo)簽?zāi)┒恕?/p>

盡量簡(jiǎn)化和優(yōu)化CSS選擇器（這種優(yōu)化方式幾乎被使用CSS預(yù)處理器的開發(fā)者統(tǒng)一忽視了）將嵌套程度保持在最低水平。以下是CSS選擇器的性能排名（從最快者開始）

1. 識(shí)別器:#id
2. 類:.class
3. 標(biāo)簽：div
4. 相鄰兄弟選擇器：a + i
5. 父類選擇器：ul> li
6. 通用選擇器：*
7. 屬性選擇：input[type="text"]
8. 偽類和偽元素：a:hover

你應(yīng)該記住，瀏覽器在處理選擇器時(shí)依照從右到左的原則，因此最右端的選擇器應(yīng)該是最快的：#id或則.class：div * {...} // bad .list li {...} // bad .list-item {...} // good #list .list-item {...} // good * 1.在你的腳本代碼中，盡可能減少DOM操作。緩存所有東西，包括元素屬性以及對(duì)象（如果它們被重用的話）。當(dāng)進(jìn)行復(fù)雜的操作時(shí)，使用“孤立”元素會(huì)更好，之后可以將其加到DOM中（所謂“孤立”元素是與DOM脫離，僅保存在內(nèi)存中的元素）。

2.如果你使用jQuery來選擇元素，請(qǐng)遵從jQuery選擇器最佳實(shí)踐方案。

3.為了改變?cè)氐臉邮?，修改“類”的屬性是奏效的方法之一。?zhí)行這一改變時(shí)，處在DOM渲染樹的位置越深越好（這還有助于將邏輯與表象脫離）。

4.盡量只給位置絕對(duì)或者固定的元素添加動(dòng)畫效果。

5.在使用滾動(dòng)時(shí)禁用復(fù)雜的懸停動(dòng)效（比如，在中添加一個(gè)額外的不懸停類）。讀者可以閱讀關(guān)于這個(gè)問題的一篇文章。

想了解更多的細(xì)節(jié)問題，大家也可以看看這兩篇文章：

1,How browsers work？

2,Rendering: repaint, reflow/relayout, restyle

關(guān)于網(wǎng)頁渲染的方法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的參考價(jià)值，可以學(xué)以致用。如果喜歡本篇文章，不妨把它分享出去讓更多的人看到。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

當(dāng)前文章：前端開發(fā)者必備知識(shí)-網(wǎng)頁是如何渲染的-創(chuàng)新互聯(lián)
分享路徑：http://bm7419.com/article14/ddhsde.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計(jì)公司、品牌網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站、關(guān)鍵詞優(yōu)化、企業(yè)建站、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)