CSS--重绘重排有什么区别

前端小云儿

于 2024-03-20 10:46:04 发布

阅读量97

点赞数

CC 4.0 BY-SA版权

分类专栏：前端静态页面以及逻辑文章标签： css

本文链接：https://blog.csdn.net/jieweiwujie/article/details/136868939

前端静态页面以及逻辑专栏收录该内容

150 篇文章 ¥9.90 ¥199.90

订阅专栏

超级会员免费看

本文探讨了CSS中的重绘和重排概念，详细解释了两者在浏览器渲染机制中的不同作用，帮助理解它们如何影响页面性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

浏览器渲染机制

<script setup></script>

<template>
  <div class="box">
    <h3>CSS-重绘重排有什么区别</h3>
    <h4>
      重绘：计算盒模型的位置和其他属性之后，浏览器根据每个盒模型的特性进行绘制--颜色，背景，阴影修改
    </h4>
    <h4>
      重排（回流）：布局引擎会根据所有样式计算出盒模型在页面的位置和大小--使用js修改元素大小，内容改变
    </h4>
    <h4>css树和dom树渲染出来以后组成渲染树render树（回流）--重绘-display展示</h4>
    <h4>页面第一次渲染一定会触发回流字体颜色</h4>
    <h4>dom背景颜色，颜色修改，直接触发了重绘</h4>
    <h4>dom位置和大小修改了，需要重新计算几何属性 直接就需要重排</h4>
    <h4>如果原色的宽高固定以后，就不会触发重排，这是减少重排重绘的策论</h4>
  </div>
</template>
<styl