频繁修改浮动元素的宽高，会引发重排吗？

发布日期： 2024-11-04 阅读量： 作者： 网络

频繁修改浮动元素的宽高，会引发重排吗？

浮动元素宽高改变是否会引发重排?

众所周知，设置浮动属性的图片元素会使相邻文本内容环绕它排列。那么，如果反复修改浮动图片元素的宽高，是否会触发大规模的重排呢？

答案：会触发

从浏览器渲染流程来看，“重排”是一个涉及修改布局结构的过程，而“重绘”则只涉及更新像素值。修改浮动元素的宽高会影响其在布局中的位置，因此会触发重排。

测试代码：

<style>
.float{float: left;width: 80px;height: 100px;}
.float[data-width="1"]{width: 180px;}
.float[data-width="2"]{width: 280px;}
.float[data-width="3"]{width: 380px;}
.float[data-height="1"]{height: 180px;}
.float[data-height="2"]{height: 280px;}
.float[data-height="3"]{height: 380px;}
</style>

<script>
setInterval(() => {
  img.dataset.height = (Number(img.dataset.height || 0) + 1) % 3 
}, 1000 * 3)
</script>

<div class="box">
  @@##@@
</div>

# css # 排列 # 重绘

上一篇: 机器学习中的 C++：逃离 Python 和 GIL

下一篇: linux中raid是什么意思

频繁修改浮动元素的宽高，会引发重排吗？

随便看看