怎么理解回流跟重繪?

更新時(shí)間:2023-03-14 來(lái)源:黑馬程序員瀏覽量:

IT培訓(xùn)班

　　回流和重繪是瀏覽器渲染網(wǎng)頁(yè)時(shí)的兩個(gè)關(guān)鍵概念。簡(jiǎn)單來(lái)說(shuō)，回流是指當(dāng)網(wǎng)頁(yè)的布局和幾何屬性發(fā)生變化時(shí)，瀏覽器需要重新計(jì)算元素的位置和大小，重新布局頁(yè)面的過(guò)程。而重繪是指當(dāng)網(wǎng)頁(yè)的外觀屬性(例如顏色、背景、陰影等)發(fā)生變化時(shí)，瀏覽器需要重新繪制頁(yè)面的過(guò)程。

　　回流和重繪可能會(huì)影響網(wǎng)頁(yè)的性能和用戶體驗(yàn)，因此我們需要盡量避免不必要的回流和重繪操作。下面是一些可能觸發(fā)回流和重繪的場(chǎng)景：

　　1.修改 DOM 元素的位置和大小，例如通過(guò) JavaScript 修改元素的樣式屬性、添加或刪除元素等;

　　2.修改瀏覽器窗口的大小或滾動(dòng)頁(yè)面;

　　3.修改 DOM 樹(shù)的結(jié)構(gòu)，例如添加或刪除元素、修改元素的屬性等;

　　4.修改文本內(nèi)容，例如通過(guò) JavaScript 修改文本節(jié)點(diǎn)的內(nèi)容或字體大小;

　　5.修改 CSS 樣式，例如修改元素的背景顏色、字體顏色、邊框等;

　　6.瀏覽器的初始渲染。

　　下面是一個(gè)簡(jiǎn)單的代碼演示：

<!DOCTYPE html>
<html>
<head>
  <title>回流和重繪</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      margin-top: 50px;
    }

    .box:hover {
      background-color: blue;
      margin-top: 100px;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

　　這個(gè)例子中，當(dāng)鼠標(biāo)懸停在.box元素上時(shí)，它的背景顏色和margin-top值都會(huì)發(fā)生改變。

　　在這個(gè)過(guò)程中，.box元素的margin-top值發(fā)生變化，這會(huì)導(dǎo)致整個(gè)頁(yè)面的重新布局和回流。而背景顏色的變化只會(huì)導(dǎo)致.box元素的重繪。

　　在開(kāi)發(fā)網(wǎng)頁(yè)時(shí)，我們需要注意避免頻繁的回流和重繪操作，可以采取一些優(yōu)化策略，例如使用 CSS3 中的 transform 和 opacity 屬性、使用絕對(duì)定位和固定定位等。同時(shí)，我們也可以使用一些工具來(lái)檢測(cè)和優(yōu)化回流和重繪操作，例如 Chrome 瀏覽器的開(kāi)發(fā)者工具中的 Performance 標(biāo)簽。

上一篇：TypeScript相比JS有哪些優(yōu)勢(shì)？ 下一篇：如何解決瀏覽器跨域問(wèn)題？