6、什么是重排重绘?

一、重排(reflow)

  1. 定义
    • 重排是指浏览器重新计算元素的几何属性(如位置、尺寸等)的过程。当文档的布局(layout)因为某些操作而发生改变时,浏览器需要重新构建渲染树(render tree)来确定元素在页面中的位置和大小。
    • 例如,当你改变了一个元素的宽度、高度、边距(margin)、填充(padding)、边框(border)等属性,或者添加、删除一个 DOM 节点时,浏览器会触发重排。因为这些操作影响了页面的布局结构,浏览器需要重新计算页面上其他元素的位置和大小,以确保页面的布局是正确的。
  2. 触发重排的常见操作
    • 改变 DOM 结构
      • 当你使用 JavaScript 动态地添加或删除一个<div>元素时,例如:

        复制代码
        // 创建一个新的div元素
        var newDiv = document.createElement('div');
        newDiv.textContent = '这是一个新的div';
        // 将新的div元素添加到body元素中
        document.body.appendChild(newDiv);
      • 这种添加元素的操作会改变 DOM 树的结构,浏览器会重新计算页面的布局,从而触发重排。

    • 改变元素的几何属性
      • 假设你有一个 CSS 样式如下的<div>元素:

        复制代码
        div {
          width: 100px;
          height: 100px;
          background - color: blue;
        }
      • 如果你通过 JavaScript 改变这个<div>的宽度为200px,像这样:

        复制代码
        var divElement = document.querySelector('div');
        divElement.style.width = '200px';
      • 浏览器会重新计算这个<div>元素以及它周围相关元素的位置和大小,因为改变宽度可能会影响到页面的布局,所以会触发重排。

二、重绘(repaint)

  1. 定义
    • 重绘是指当元素的外观(如颜色、背景等)发生改变时,浏览器重新绘制该元素的过程。它不会影响元素的几何属性,也就是不会改变元素在页面中的位置和大小。
    • 例如,当你只改变了一个元素的颜色、背景色、透明度(opacity)等外观属性时,浏览器会进行重绘。
  2. 触发重绘的常见操作
    • 改变元素的颜色相关属性
      • 比如有一个<p>元素,其 CSS 样式如下:

        复制代码
        p {
          color: black;
        }
      • 如果你通过 JavaScript 改变这个<p>元素的颜色为红色,像这样:

        复制代码
        var pElement = document.querySelector('p');
        pElement.style.color = 'red';
      • 浏览器会重新绘制这个<p>元素,因为颜色发生了改变,但元素的位置和大小没有受到影响,所以只会触发重绘。

重排的开销通常比重绘要大,因为重排涉及到重新计算元素的位置和大小等几何属性,可能会导致浏览器重新布局整个页面或者部分页面区域。在网页性能优化中,尽量减少不必要的重排和重绘操作是很重要的。

相关推荐
雪落满地香2 小时前
css:圆角边框渐变色
前端·css
Liudef069 小时前
deepseek v3-0324 Markdown 编辑器 HTML
前端·编辑器·html·deepseek
木木黄木木13 小时前
css炫酷的3D水波纹文字效果实现详解
前端·css·3d
Kx…………16 小时前
Uni-app入门到精通:uni-app的基础组件
前端·css·学习·uni-app·html
wuaro17 小时前
JS的深浅拷贝
前端·javascript·html
阿里巴巴首席技术官18 小时前
CSS 高级用法
前端·css
今晚吃什么呢?19 小时前
前端面试题之CSS中的box属性
前端·css
CodePencil20 小时前
CSS专题之外边距重叠
前端·css
carterwu20 小时前
是否使用原子式tailwindcss 代替css module?
css
Linruoxin21 小时前
为什么给 body 设置背景会直接铺满整个视口?
前端·css