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

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

相关推荐
ZhZhXuan1 小时前
点击按钮没反应?其实是样式bug
前端·css
yede1 小时前
使用Gird布局实现瀑布流效果
前端·javascript·css
几度泥的菜花1 小时前
优雅实现网页弹窗提示功能:JavaScript与CSS完美结合
开发语言·javascript·css
程序员Bears2 小时前
深入理解CSS3:Flex/Grid布局、动画与媒体查询实战指南
前端·css3·媒体·visual studio code
工呈士2 小时前
CSS in JS:机遇与挑战的思考
javascript·css
小桥风满袖2 小时前
Three.js-硬要自学系列19 (曲线颜色渐变、渐变插值、查看设置gltf顶点、山脉高度可视化)
前端·css·three.js
yzhSWJ4 小时前
CSS Position 属性完全指南
前端·css
xcLeigh4 小时前
HTML5好看的水果蔬菜在线商城网站源码系列模板7
前端·html·html5
非凡网站4 小时前
企业网站html源代码 企业网站管理源码模板
前端·html
一个天蝎座 白勺 程序猿5 小时前
Python爬虫(3)HTML核心技巧:从零掌握class与id选择器,精准定位网页元素
前端·爬虫·html