重繪與回流

2021-09-12 08:04:37 字數 515 閱讀 8200

dom樹結構變化:新增或者刪除可見的dom元素

元素幾何屬性發生變化

頁面渲染初始化

獲取某些屬性

瀏覽器視窗發生變化,即-resize事件發生

啟用css偽類(:hover)

改變元素顏色

改變元素背景色

將改變樣式的操作集合在一次完成,直接改變classname或csstext

讓要操作的元素進行離線處理,所有的處理完事以後再一起更新

將需要多次重排的元素的position屬性設為absolute或fixed

盡量不要使用**布局

總結:為什麼需要節流,因為有些事情會造成瀏覽器的回流,而回流會使瀏覽器開銷增大,所以我們通過節流來防止這種增大瀏覽器開銷的事情。

回流與重繪

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

重繪與回流

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

重繪與回流

css外部檔案的引入要放到頭部,載入css的時候頁面渲染是被阻塞的,js也是會阻塞頁面渲染的,ui渲染和js引擎執行緒是互斥的,不是並行的,css的效能會讓js變慢,優化效能,layout painting。當render tree中的一部分 或全部 因為元素的規模尺寸,幾何屬性,布局,隱藏等改變而...