欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

瀏覽器的渲染知識（一）-創(chuàng)新互聯(lián)

先從兩段代碼說起：
（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>

創(chuàng)新互聯(lián)專注于企業(yè)全網(wǎng)營銷推廣、網(wǎng)站重做改版、平江網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、H5網(wǎng)站設(shè)計、電子商務(wù)商城網(wǎng)站建設(shè)、集團公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為平江等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

運行3次時間分別為：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>
運行3次時間分別為：testForEach: 35.862ms，testForEach: 48.012ms，testForEach: 41.013ms。

從兩段程序的運行時間來看，第一段程序性能要明顯由于第二段程序。因為代碼段一只進行了一次DOM插入操作，代碼段二每進入一次循環(huán)就進行一次DOM操作，頁面每次進行重新渲染。

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

瀏覽器的渲染知識（一）

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

瀏覽器的渲染知識（一）

這里先看一下幾個概念：

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)頁中有哪些節(jié)點、各個節(jié)點的CSS定義以及他們的從屬關(guān)系，從而去計算出每個節(jié)點在屏幕中的位置。

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

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

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

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

(2)display:none 會觸發(fā) reflow，而 visibility:hidden 只會觸發(fā) repaint，因為沒有發(fā)現(xiàn)位置變化。

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

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

網(wǎng)站標(biāo)題：瀏覽器的渲染知識（一）-創(chuàng)新互聯(lián)
標(biāo)題網(wǎng)址：http://www.chinadenli.net/article16/docdgg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、網(wǎng)站排名、網(wǎng)站收錄、網(wǎng)站設(shè)計公司、做網(wǎng)站、外貿(mào)建站

廣告

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

成都做網(wǎng)站