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>元素,因为颜色发生了改变,但元素的位置和大小没有受到影响,所以只会触发重绘。

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

相关推荐
卷Java5 小时前
CSS模板语法修复总结
java·前端·css·数据库·微信小程序·uni-app·springboot
proud12125 小时前
开源的 CSS 动画库
前端·css·开源
折翼的恶魔6 小时前
HTML媒体标签
前端·html
Filotimo_7 小时前
2.CSS3.(1).html
前端·css
华仔啊10 小时前
Vue+CSS 做出的LED时钟太酷了!还能倒计时,代码全开源
前端·css·vue.js
吃饺子不吃馅12 小时前
AntV X6 核心插件帮你飞速创建画布
前端·css·svg
通往曙光的路上12 小时前
时隔一天第二阶段他来了 html!!!!!!!!!!!
前端·html
爱吃甜品的糯米团子13 小时前
CSS图片背景属性
前端·css
Aoda13 小时前
浏览器字体设置引发的Bug:从一次调查到前端字体策略的深度思考
前端·css
带娃的IT创业者13 小时前
从零构建智能HTML转Markdown转换器:Python GUI开发实战
android·python·html