修改浮动元素宽高之后是否会触发重排?

周所周知,设置浮动属性的图片元素会使相邻文本内容对其环绕。

那么对一个已经设置了浮动属性的图片元素,进行反复修改宽高的操作,是否会触发大规模的重排?

阅读 2.5k
3 个回答

影响布局,我赌一手会重排。接下来就是验证了。


从分层来看,是在同一层
image.png


从 rendering 来看,paint 应该就是常说的重绘,layout 就是常说的重排
image.png


补充上述测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        .box{}
        .box .float{float: left;width: 80px;height: 100px;}
        .box .float[data-width="1"]{width: 180px;}
        .box .float[data-width="2"]{width: 280px;}
        .box .float[data-width="3"]{width: 380px;}
        .box .float[data-height="1"]{height: 180px;}
        .box .float[data-height="2"]{height: 280px;}
        .box .float[data-height="3"]{height: 380px;}
    </style>
    <script>
        setInterval(()=>{
            img.dataset.height = (Number(img.dataset.height || 0) + 1) % 3 
        }, 1000 * 3)
    </script>
    <div>
        https://www.lilnong.top/cors/linong
    </div>
    <div>
        https://segmentfault.com/u/linong
    </div>
    
    <hr>
    <div class="box">
        <img id="img" src="https://cdns.jsrun.net/css/img/logo@2x.png" alt="" class="float">
        我是一个粉刷匠,粉刷本领强。
    念奴娇·宜雨亭咏千叶海棠原文及赏析
    
      念奴娇·宜雨亭咏千叶海棠
    
      作者:张鎡
    
      朝代:宋朝
    
      绿云影里,把明霞织就,千重文绣。紫腻红娇扶不起,好是未开时候。半怯春寒,半便晴色,养得胭脂透。小亭人静,嫩莺啼破清昼。
    
      犹记携手芳阴,一枝斜戴,娇艳波双秀。小语轻怜花总见,争得似花长久。醉浅休归,夜深同睡,明日还相守。免教春去,断肠空叹诗瘦。
        
    </div>
    <div>
        https://www.lilnong.top/cors/linong
    </div>
    <div>
        https://segmentfault.com/u/linong
    </div>
</body>
</html>

.box{position: absolute;} 之后可以看到 layout 没了。

image.png


更新时间:2023年2月24日09

我又来了,我记得有个网站可以查询是否影响重绘。属性名称、触发重排(Layout)、触发重绘(Paint)和触发复合层(Composite)

但是查找了一番没有合适的结果,最后通过 chatgpt 找了一个网站 https://csstriggers.com/
image.png

不得不说,搜索引擎危险了。
image.png

当然,还找到了一些类似的网站,我看了,挺多资源都失效了。所以图片我就隐藏了 ![image.png](/img/bVc6xNV)


浮动元素脱离了文档流,对其进行修改宽高,应该不会引起大规模重排吧。
我参考的这个文档https://juejin.cn/post/715915...
感觉可以自己写个demo,用定时器添加class,在f12里性能看看,不过要睡觉了,明天看看。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏