溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

瀏覽器的渲染知識(shí)（一）

發(fā)布時(shí)間：2020-07-11 06:54:26 來(lái)源：網(wǎng)絡(luò) 閱讀：462 作者：sky星辰01 欄目：web開發(fā)

先從兩段代碼說(shuō)起：
（1）<!DOCTYPE html>
<html>
<head>?
<meta?charset="utf-8">?
<title>test</title>?
</head>
<body>
<ul id="container"></ul>
<script>
window.onload= function () {
console.time('testForEach');
nodeI = document.createElement("li");
nodeI.innerHTML = '';
html=''
for(var i = 0; i<10000 ; i++){
html+='<li>'+ i +'</li>'
}
var con = document.getElementById("container");
nodeI.innerHTML = html;
con.appendChild(nodeI);
console.timeEnd('testForEach');
}
</script>
</body>
</html>

運(yùn)行3次時(shí)間分別為：testForEach: 17.479ms，testForEach: 16.947ms， testForEach: 18.097ms。

（2）<!DOCTYPE html>
<html>
<head>?
<meta?charset="utf-8">?
<title>test</title>?
</head>
<body>
<ul id="container"></ul>
<script>
window.onload= function (){
console.time('testForEach');
var nodeI,m;
for(var i = 0; i<10000 ; i++){
nodeI = document.createElement("li");
nodeI.innerHTML = i;
var con = document.getElementById("container");
con.appendChild(nodeI);
}
console.timeEnd('testForEach');
}
</script>
</body>
</html>
運(yùn)行3次時(shí)間分別為：testForEach: 35.862ms，testForEach: 48.012ms，testForEach: 41.013ms。

從兩段程序的運(yùn)行時(shí)間來(lái)看，第一段程序性能要明顯由于第二段程序。因?yàn)榇a段一只進(jìn)行了一次DOM插入操作，代碼段二每進(jìn)入一次循環(huán)就進(jìn)行一次DOM操作，頁(yè)面每次進(jìn)行重新渲染。

這里需要理解瀏覽器的渲染原理，過(guò)程如圖所示：

瀏覽器的渲染知識(shí)（一）

解析html以構(gòu)建dom樹 -> 構(gòu)建render樹 -> 布局render樹 -> 繪制render樹

瀏覽器的渲染知識(shí)（一）

　　這里先看一下幾個(gè)概念：

　　DOM Tree：瀏覽器將HTML解析成樹形的數(shù)據(jù)結(jié)構(gòu)。

　　CSS Rule Tree：瀏覽器將CSS解析成樹形的數(shù)據(jù)結(jié)構(gòu)。

　　Render Tree: DOM和CSSOM合并后生成Render Tree。

　　layout: 有了Render Tree，瀏覽器已經(jīng)能知道網(wǎng)頁(yè)中有哪些節(jié)點(diǎn)、各個(gè)節(jié)點(diǎn)的CSS定義以及他們的從屬關(guān)系，從而去計(jì)算出每個(gè)節(jié)點(diǎn)在屏幕中的位置。

　　painting: 按照算出來(lái)的規(guī)則，通過(guò)顯卡，把內(nèi)容畫到屏幕上。

　　reflow（回流）：當(dāng)瀏覽器發(fā)現(xiàn)某個(gè)部分發(fā)生了點(diǎn)變化影響了布局，需要倒回去重新渲染，內(nèi)行稱這個(gè)回退的過(guò)程叫 reflow。reflow 會(huì)從 <html> 這個(gè) root frame 開始遞歸往下，依次計(jì)算所有的結(jié)點(diǎn)幾何尺寸和位置。reflow 幾乎是無(wú)法避免的?，F(xiàn)在界面上流行的一些效果，比如樹狀目錄的折疊、展開（實(shí)質(zhì)上是元素的顯 示與隱藏）等，都將引起瀏覽器的 reflow。鼠標(biāo)滑過(guò)、點(diǎn)擊……只要這些行為引起了頁(yè)面上某些元素的占位面積、定位方式、邊距等屬性的變化，都會(huì)引起它內(nèi)部、周圍甚至整個(gè)頁(yè)面的重新渲 染。通常我們都無(wú)法預(yù)估瀏覽器到底會(huì) reflow 哪一部分的代碼，它們都彼此相互影響著。

　　repaint（重繪）：改變某個(gè)元素的背景色、文字顏色、邊框顏色等等不影響它周圍或內(nèi)部布局的屬性時(shí)，屏幕的一部分要重畫，但是元素的幾何尺寸沒(méi)有變。

注意：(1)display:none 的節(jié)點(diǎn)不會(huì)被加入Render Tree，而visibility: hidden 則會(huì)，所以，如果某個(gè)節(jié)點(diǎn)最開始是不顯示的，設(shè)為display:none是更優(yōu)的。

　　 (2)display:none 會(huì)觸發(fā) reflow，而 visibility:hidden 只會(huì)觸發(fā) repaint，因?yàn)闆](méi)有發(fā)現(xiàn)位置變化。

　　　(3)有些情況下，比如修改了元素的樣式，瀏覽器并不會(huì)立刻reflow 或 repaint 一次，而是會(huì)把這樣的操作積攢一批，然后做一次 reflow，這又叫異步 reflow 或增量異步 reflow。但是在有些情況下，比如resize 窗口，改變了頁(yè)面默認(rèn)的字體等。對(duì)于這些操作，瀏覽器會(huì)馬上進(jìn)行 reflow。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手