怎么理解回流跟重绘?

更新时间:2023-03-14 来源:黑马程序员浏览量:

IT培训班

　　回流和重绘是浏览器渲染网页时的两个关键概念。简单来说，回流是指当网页的布局和几何属性发生变化时，浏览器需要重新计算元素的位置和大小，重新布局页面的过程。而重绘是指当网页的外观属性(例如颜色、背景、阴影等)发生变化时，浏览器需要重新绘制页面的过程。

　　回流和重绘可能会影响网页的性能和用户体验，因此我们需要尽量避免不必要的回流和重绘操作。下面是一些可能触发回流和重绘的场景：

　　1.修改 DOM 元素的位置和大小，例如通过 JavaScript 修改元素的样式属性、添加或删除元素等;

　　2.修改浏览器窗口的大小或滚动页面;

　　3.修改 DOM 树的结构，例如添加或删除元素、修改元素的属性等;

　　4.修改文本内容，例如通过 JavaScript 修改文本节点的内容或字体大小;

　　5.修改 CSS 样式，例如修改元素的背景颜色、字体颜色、边框等;

　　6.浏览器的初始渲染。

　　下面是一个简单的代码演示：

<!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>

　　这个例子中，当鼠标悬停在.box元素上时，它的背景颜色和margin-top值都会发生改变。

　　在这个过程中，.box元素的margin-top值发生变化，这会导致整个页面的重新布局和回流。而背景颜色的变化只会导致.box元素的重绘。

　　在开发网页时，我们需要注意避免频繁的回流和重绘操作，可以采取一些优化策略，例如使用 CSS3 中的 transform 和 opacity 属性、使用绝对定位和固定定位等。同时，我们也可以使用一些工具来检测和优化回流和重绘操作，例如 Chrome 浏览器的开发者工具中的 Performance 标签。

上一篇：TypeScript相比JS有哪些优势？ 下一篇：如何解决浏览器跨域问题？

全国中心

热门课程

怎么理解回流跟重绘?

最新资讯

相关阅读

热门课程推荐