频繁修改浮动元素的宽高，会引发重排吗？-html教程-PHP中文网

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

霞舞

发布： 2024-11-04 14:37:20

原创

394人浏览过

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

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

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

答案：会触发

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

测试代码：

<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">
  <img id="img" src="image.png" alt="" class="float">
</div>

登录后复制

分析：