回流與重繪

元素的大小或位置發生了變化（頁面幾何資訊發生變化的時候），觸發了重新布局，導致渲染樹重新計算布局和渲染

元素樣式發生改變（但寬高大小位置等不變）

值得注意的地方：

瀏覽器內部有自己的優化機制，每次讀取到需要改變樣式時，會緩一緩再進行重繪與回流，如果這時連續的**都是對樣式的操作，會放到一塊執行，就避免了連續重繪回流

"box"
>
<
/div>
<
/html>
let box = document.
getelementbyid
("box"
)box.style.width =
"200px"
box.style.height =
"200px"
box.style.border =
"1px solid red"
//這三行對樣式的改變將放到同一次重繪回流中進行
<
/script>

box.style.width =
"200px"
;console.
log(
"1")
;box.style.height =
"200px"
;console.
log(
"2")
;box.style.border =
"1px solid red"
;//這將引發多次重繪回流
<
/script>

box.style.width = box.clientwidth +10+
"px"
;box.style.height= box.clientheight +10+
"px"
;//將引發多次重繪回
let a = box.clientwidth;
let b = box.clientheight;
box.style.width = a +10+
"px"
;box.style.height= b +10+
"px"
;//只引發一次重繪回流

// 一、
for(
let i =
0;i <
5; i++
)//這將會引發5次回流重繪
// 二、
let frg=document.
createdocumentfragment()
;//建立乙個文件上碎片的零時容器
for(
let i =
0;i <
5; i++) 
box.
(frg)
;//一次性插入 引發一次重繪回流
frg =
null
;//好的程式設計習慣 釋放不再使用的變數
// 三、
let str=``;
for(
let i =
0;i <
5; i++)`
}box.
(str)
<
/script>

box.style.left =
"200px"
;//這會引發重繪回流
box.style.transform =
"translatex(200px)"
;//規避重繪回流
<
/script>

回流與重繪

首先是html渲染過程 解析html並構建dom樹和cssom樹，瀏覽器對html標記轉換成文件物件模型，css標記則轉換成css物件模型 cssom dom 樹包含了所有的 html 標籤，包括不展示的 head 節點和 display none 的節點，而 cssom 樹則會去掉瀏覽器不能識別的...

重繪與回流

很多面試都會問到的問題，那麼說起這兩個概念，首先先了解一下，瀏覽器對乙個頁面對渲染過程。1.使用者輸入url位址，瀏覽器根據網域名稱查詢ip位址 2.瀏覽器向伺服器傳送http請求 3.伺服器接受請求，根據請求返回相應的html 返回給瀏覽器 4.瀏覽器接受到伺服器的相應結果，對頁面做解析渲染 1 ...

重繪與回流

dom樹結構變化 新增或者刪除可見的dom元素 元素幾何屬性發生變化 頁面渲染初始化 獲取某些屬性 瀏覽器視窗發生變化，即 resize事件發生 啟用css偽類 hover 改變元素顏色 改變元素背景色 將改變樣式的操作集合在一次完成，直接改變classname或csstext 讓要操作的元素進行離...