點這裡，歡迎關注
[外鏈轉存失敗,源站可能有防盜煉機制,建議將儲存下來直接上傳(img-oa3fsg6i-1601978311602)(
在生成dom樹和cssom樹之後，會遍歷dom樹的每乙個可見的節點，對於每個可見的節點，找到cssom樹中對應的規則，然後組合在一起，最終生成一棵渲染樹。（注意：渲染樹只包含可見的節點）
這裡可見的節點不包括：
依據渲染樹，根據視口(viewport)的大小來計算元素的幾何資訊（位置，大小）的，這個計算的階段就是回流（layout），也稱為重排。
從渲染樹身上，可以得到節點的樣式；
在回流的結果中，得到了節點的位置和大小。
借助這兩個東西就可以將渲染樹的每個節點都轉換為螢幕上的實際畫素，這一過程就叫重繪（painting）
什麼情況會觸發整個頁面的重排：滾動條出現的時候或者修改了根節點。
回流一定會觸發重繪，但重繪不一定會回流。
不觸發重排，但會觸發重繪的情況：改變元素的外觀屬性，比如color,background-color。
為了減少重排的計算消耗，瀏覽器會將修改操作放入到乙個佇列裡，直到過了一段時間或者操作達到了乙個閾值，才清空佇列，觸發重排。
注意：當我們獲取offset,cilent,scroll系列屬性時，獲取的是最新的布局資訊，因此此時瀏覽器必須清空佇列觸發回流和重繪來獲取最新的屬性值。所以，在修改樣式的時候，最好避免使用這些屬性，或者是將這些值快取起來。
//每次設定style屬性都會觸發一次重排
const el = document.
getelementbyid
('test');
el.style.padding =
'5px'
;el.style.borderleft =
'1px'
;el.style.borderright =
'2px'
;//優化方案1：使用csstext
const el = document.
getelementbyid
('test');
el.style.csstext +=
'border-left: 1px; border-right: 2px; padding: 5px;'
;//優化方案2：修改css的class類
const el = document.
getelementbyid
('test');
el.classname +=
' active'
;
使元素脫離文件流
對其進行多次修改
將元素帶回到文件中。
該過程的第一步和第三步可能會引起回流，但是經過第一步之後，對dom的所有修改都不會引起回流，因為它已經不在渲染樹了。
具體的實現有下面三種方式：
>
"ul"
>
ul>
body
>
>
let data =[,
,,,,
];//原方法會觸發多次重排
for(
var i =
0; i < data.length; i++
)//核心就是不能直接在dom樹上進行所有操作
//方式1：隱藏元素，修改元素，顯示元素
ul.style.display =
"none"
;for
(var i =
0; i < data.length; i++
) ul.style.display =
"block"
;//方式2：通過createdocumentfragment api建立乙個文件片段（該文件片段不屬於dom樹），然後修改文件片段，最後將其附加到dom樹中
const fragment = document.
createdocumentfragment()
; data.
foreach
((item)
=>);
ul.(fragment)
;//方式3：通過element.clonenode()轉殖乙個節點，轉殖出的節點不屬於dom樹的一部分，在該結點修改後將原節點替換掉。
let clone = ul.
clonenode
(true);
//true表示深度拷貝
data.
foreach
((item)
=>);
ul.parentnode.
replacechild
(clone, ul)
;script
>
for
(var i =
0; i <
50000
; i++
)//瀏覽器會等佇列到達一定的閾值才觸發重排
var height=box2.offsetheight;
for(
var i =
0; i <
50000
; i++
)
常見的觸發硬體加速的css屬性：
如果你為太多元素使用css3硬體加速，會導致記憶體占用較大，會有效能問題
table**中某個元素觸發重排時，會導致所有元素都觸發重排，嚴重影響效率。
前端面試之瀏覽器渲染
瀏覽器渲染的整個流程 瀏覽器的整個流程如上圖所示。1 首先當使用者輸入乙個url的時候，瀏覽器就會傳送乙個請求，請求url對應的資源。2 然後瀏覽器的html解析器會將這個檔案解析，並且構建成一棵dom樹。3 在構建dom樹的時候，遇到js和css元素，html解析器就換將控制權轉讓給js解析器或者...
瀏覽器渲染機制面試 前端面試準備 10 渲染機制
瀏覽器怎麼渲染頁面的？瀏覽器渲染過程.png 1.什麼是doctype及作用 dtd document type definition,文件型別定義 是一系列的語法規則，用來定義xml或 x html的檔案型別。瀏覽器會使用它來判斷文件型別，決定使用何種協議來解析，以及切換瀏覽器模式。dtd就是告訴...
2020前端面試（二） 瀏覽器快取機制篇
點這裡，歡迎關注 3.2協商快取 4.瀏覽器的快取機制 5.實際場景中的快取策略應用 瀏覽器的快取機制即是http的快取機制，因為其完全是由http來控制的。service worker 單獨的乙個執行緒，用來實現快取功能 memory cache 記憶體中的快取 容量小，儲存時間短 disk ca...