99偷拍视频精品区一区二,口述久久久久久久久久久久,国产精品夫妇激情啪发布,成人永久免费网站在线观看,国产精品高清免费在线,青青草在线观看视频观看,久久久久久国产一区,天天婷婷久久18禁,日韩动漫av在线播放直播

瀏覽器的渲染知識（一）-創新互聯

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

創新互聯專注于企業全網營銷推廣、網站重做改版、平江網站定制設計、自適應品牌網站建設、H5網站設計、電子商務商城網站建設、集團公司官網建設、外貿網站建設、高端網站制作、響應式網頁設計等建站業務，價格優惠性價比高，為平江等各大城市提供網站開發制作服務。

運行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插入操作，代碼段二每進入一次循環就進行一次DOM操作，頁面每次進行重新渲染。

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

瀏覽器的渲染知識（一）

解析html以構建dom樹 -> 構建render樹 -> 布局render樹 -> 繪制render樹

瀏覽器的渲染知識（一）

這里先看一下幾個概念：

DOM Tree：瀏覽器將HTML解析成樹形的數據結構。

CSS Rule Tree：瀏覽器將CSS解析成樹形的數據結構。

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

layout: 有了Render Tree，瀏覽器已經能知道網頁中有哪些節點、各個節點的CSS定義以及他們的從屬關系，從而去計算出每個節點在屏幕中的位置。

painting: 按照算出來的規則，通過顯卡，把內容畫到屏幕上。

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

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

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

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

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

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

網站標題：瀏覽器的渲染知識（一）-創新互聯
標題網址：http://www.yijiale78.com/article16/docdgg.html

成都網站建設公司_創新互聯，為您提供搜索引擎優化、網站排名、網站收錄、網站設計公司、做網站、外貿建站

廣告

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

成都做網站