专栏名称: 前端大全
分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯
目录
相关文章推荐
前端大全  ·  放弃 React,微软 Edge 团队改用 ... ·  4 天前  
前端大全  ·  28K ... ·  6 天前  
前端早读课  ·  【第3412期】CSS 终于在 2024 ... ·  4 天前  
麦家陪你读书  ·  麦家:童年受过的伤害,身体会一直记得 ·  5 天前  
廉洁广州  ·  清风·传承丨立冬:清风劲吹 逐绿前行 ·  5 天前  
廉洁广州  ·  清风·传承丨立冬:清风劲吹 逐绿前行 ·  5 天前  
51好读  ›  专栏  ›  前端大全

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

前端大全  · 公众号  · 前端  · 2024-11-08 11:50

正文

作者:——窗边的anini

https://juejin.cn/post/7374716539679359003

calc() 用法介绍

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

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

语法:

propertycalc(expression);

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

使用示例:

  1. 组合长度单位
.element {
  widthcalc(100vh - 20px);
}
  1. 嵌套使用
.element {
  margincalc(60px + calc(10% * 2));
}

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

首先介绍一下重排重绘:

重排(Reflow)

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

引起重排的操作

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

重绘(Repaint)

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

引起重绘的操作:

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

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

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

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

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

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

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

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

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

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

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

html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
      * {
        margin0px;
      }

      .container {
        width100vw;
        height100vh;
      }

      header,
      footer {
        height60px;
        background-color: antiquewhite;
      }

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

      .content {
        height900px;
        background-color: skyblue;
      }
    
style>
  head>

  <body>
    <div class="container">
      <header>headerheader>
      <div class="content-wrapper">
        <ul id="content" class="content">
          <li>testli>
          <li>testli>
          <li>testli>
          <li>testli>
          <li>testli>
          <li>testli>
          <li>testli>
          <li>testli>
          <li>testli>
          <li>testli>
          <li>testli>
          <li>testli>
          <li>testli>
          <li>testli>
          <li>testli>
          <li>testli>
          <li>testli>
          <li>testli>
          <li>testli>
          <li>testli>
        ul>
      div>
      <footer>footerfooter>
    div>
  body>

html>

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

用 performance 分析一下


放大看一下

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

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

html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        * {
            margin0px;
        }

        .container {
            width100vw;
            height100vh;
        }

        header,
        footer {
            height60px;
            background-color: antiquewhite;
        }

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

        .content {
            height900px;
            background-color: skyblue;
        }
    
style>
head>

<body>
    <div class="container">
        <header>headerheader>
        <div class="content-wrapper">
            <ul id="content" class="content">
                <li>testli>
                <li>testli>
                <li>testli>
                <li>testli>
                <li>testli>
                <li>testli>
                <li>testli>
                <li>testli>
                <li>testli>
                <li>testli>
                <li>testli>
                <li>testli>
                <li>testli>
                <li>testli>
                <li>testli>
                <li>testli>
                <li>testli>
                <li>testli>
                <li>testli>
                <li>testli>
            ul>
        div>
        <footer>footerfooter>

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

html>

分别放大看一下


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

对照示例分析

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

  • 示例1:header 和 footer 高度固定,中间内容区域滚动

    • 只是通过 calc() 计算元素的属性值,并不会引起重排
  • 示例2:在示例1的基础上,通过 setTimeout 让元素高度发生改变

    • 改变元素高度,引发了重排

结论

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

推荐阅读  点击标题可跳转

1、解决PC端和移动端的CSS简单适配问题

2、2024 年 CSS 终于增加了垂直居中特性,效率翻倍!

3、分享10 个功能强大的单行 CSS 布局技巧