CSS 函数 calc() 会引起重排重绘吗

最新推荐文章于 2024-09-02 22:33:59 发布

winty~~

最新推荐文章于 2024-09-02 22:33:59 发布

阅读量8

点赞数

文章标签： css 前端

原文链接：https://mp.weixin.qq.com/s?__biz=MzI0MzIyMDM5Ng==&mid=2649862846&idx=2&sn=2581a53312f0685393418d170ea85425&chksm=f092618621223af6f4a9773da5eef747ff2f5b76c06a9675c5f8e1503a20be1005edc33fb6f9&scene=126&sessionid=0

版权

点击上方前端Q，关注公众号

回复加群，加入前端Q技术交流群

本文转载于稀土掘金技术社区，作者——窗边的anini
原文链接：https://juejin.cn/post/7374716539679359003
calc() 用法介绍

CSS 中的 calc() 函数可以执行元素属性的计算。

首先简单介绍一下 CSS 中的 calc() 函数的用法。

语法：

property: calc(expression);

这里的 expression 可以包含加号 (+)、减号 (-)、乘号 (*)、除号 (/)，以及可以进行数学运算的数字和长度单位。

使用示例：

组合长度单位：

.element {
  width: calc(100vh - 20px);
}

嵌套使用：

.element {
  margin: calc(60px + calc(10% * 2));
}

初步分析 calc() 是否引起重排重绘

首先介绍一下重排重绘：

重排（Reflow）

重排是指浏览器重新计算页面元素的尺寸和布局的过程。当页面的布局属性发生变化时，浏览器需要重新计算并重新排列元素，这个过程称为重排。重排可能会引起页面的重新渲染，因为它影响元素的几何属性。

引起重排的操作 ：

改变元素的宽度、高度、边距、填充、字体大小等。
改变元素的显示属性（如从 display: block 改为 display: inline）。
内容变化，如文本更改或图片加载完成。
浏览器窗口大小改变（响应式设计中的媒体查询）。

重绘（Repaint）

重绘是指浏览器重新绘制页面元素的外观过程，而不影响其布局。当元素的外观属性改变，但不会影响其尺寸或位置时，会发生重绘。

引起重绘的操作：

改变元素的颜色、背景色、边框颜色等。
改变元素的可见性（如 visibility 属性）。
改变元素的文本装饰（如 text-decoration）。

以上描述中注意引发重排重绘的关键动词---改变。从这个角度来分析，猜想 calc() 本身并不会引起重排，而是布局属性发生变化会引起重排。

calc() 什么情况会导致重排呢？

当表达式中有可变的量（当前状态可能是静态的值），当变量发生改变时引起计算结果发生改变，并且这些改变导致元素尺寸或布局的变化；
JS 动态改变使用 calc() 计算的属性值，并且这些改变导致元素尺寸或布局的变化。

举一个例子，这个例子会在可视区宽度发生变化后（比如手动调整浏览器的视口高度），会引起元素高度发生改变，从而引起重排。

/* property: calc(expression); */
.element {
  width: calc(100vh - 20px);
}

用 performance 验证 calc() 是否引起重排重绘

下面用一组对照示例验证 calc() 是否引起重排重绘

示例1：header 和 footer 高度固定，中间内容区域滚动
示例2：在示例1的基础上，通过 setTimeout 让元素高度发生改变

示例 1：header 和 footer 高度固定，中间内容区域滚动

一个简单的例子，header 和 footer 高度固定，中间内容区域滚动

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      * {
        margin: 0px;
      }

      .container {
        width: 100vw;
        height: 100vh;
      }

      header,
      footer {
        height: 60px;
        background-color: antiquewhite;
      }

      .content-wrapper {
        height: calc(100vh - 120px);
        overflow: auto;
      }

      .content {
        height: 900px;
        background-color: skyblue;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <header>header</header>
      <div class="content-wrapper">
        <ul id="content" class="content">
          <li>test</li>
          <li>test</li>
          <li>test</li>
          <li>test</li>
          <li>test</li>
          <li>test</li>
          <li>test</li>
          <li>test</li>
          <li>test</li>
          <li>test</li>
          <li>test</li>
          <li>test</li>
          <li>test</li>
          <li>test</li>
          <li>test</li>
          <li>test</li>
          <li>test</li>
          <li>test</li>
          <li>test</li>
          <li>test</li>
        </ul>
      </div>
      <footer>footer</footer>
    </div>
  </body>

</html>

重要说明： 在 Performance 记录中，重排可能不会直接显示为一个单独的事件，而是作为影响性能帧率（FPS）的一个因素。由于重排一定会导致重绘，并且这个示例中我们知道改变了元素的尺寸，所以一定会有重排。所以这里借用观察 Paint 来判断是否重绘，推断出重排。

用 performance 分析一下

放大看一下

从火焰图中可以看到，只有一次 Paint，所以没有发生重排。

示例 2：通过 setTimeout 让元素高度发生改变

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
        }

        .container {
            width: 100vw;
            height: 100vh;
        }

        header,
        footer {
            height: 60px;
            background-color: antiquewhite;
        }

        .content-wrapper {
            height: calc(100vh - 120px);
            overflow: auto;
        }

        .content {
            height: 900px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="container">
        <header>header</header>
        <div class="content-wrapper">
            <ul id="content" class="content">
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
            </ul>
        </div>
        <footer>footer</footer>

        <script>
            setTimeout(() => {
                document.getElementById('content').style.height = '500px';
            }, 10)
        </script>
    </div>
</body>

</html>

分别放大看一下

可以看到，通过改变元素高度，发生了第二次 Paint，这个例子中发生了重排。

对照示例分析

通过一组对照示例的火焰图，可以分析得到：

示例1：header 和 footer 高度固定，中间内容区域滚动
- 只是通过 calc() 计算元素的属性值，并不会引起重排
示例2：在示例1的基础上，通过 setTimeout 让元素高度发生改变
- 改变元素高度，引发了重排

结论

calc() 本身并不会引起重排，当元素布局属性值发生变化会引起重排。

往期推荐

如何检查前端项目和node项目中未被使用的依赖包

京东又开源一款新作，中后台开发效率高出10倍！

写给懒人的Vue3快速查阅宝典

最后

欢迎加我微信，拉你进技术群，长期交流学习...
欢迎关注「前端Q」,认真学前端，做个专业的技术人...

点个在看支持我吧

winty~~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 函数 calc() 会引起重排重绘吗

点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群本文转载于稀土掘金技术社区，作者——窗边的anini原文链接：https://juejin.cn/post/7374716539679359003calc() 用法介绍CSS 中的 calc() 函数可以执行元素属性的计算。首先简单介绍一下 CSS 中的 calc() 函数的用法。语法：property:calc(expression);...
复制链接

扫一扫