反复修改浮动元素的宽高，是否会触发浏览器重排？

是的，反复修改浮动元素的宽度和高度会触发浏览器的重排（reflow）。重排是指浏览器需要重新计算元素在页面中的布局和位置，这通常是一个比较耗费性能的操作。

为什么修改宽高会触发重排？

1. 布局变化：当你修改一个浮动元素的宽度或高度时，浏览器需要重新计算该元素及其周围元素的位置和布局。因为浮动元素会影响其他元素的排列方式（例如，其他元素可能会围绕浮动元素排列），所以修改浮动元素的尺寸会直接影响页面的布局。

2. 重绘：除了重排，修改元素的宽高还会触发重绘（repaint），因为元素的视觉外观发生了变化。

如何减少重排的影响？

1. 批量修改：尽量避免频繁地单独修改元素的样式属性。可以通过一次性修改多个样式属性，或者使用requestAnimationFrame来优化性能。

2. 使用CSS类：通过添加或移除CSS类来一次性修改多个样式属性，而不是逐个修改。

3. 脱离文档流：在某些情况下，可以将元素从文档流中暂时移除（例如，设置display: none），进行多次修改后再将其重新插入文档流。这样可以减少重排的次数。

4. 使用transform和opacity：这些属性通常不会触发重排，因为它们不会影响布局。如果可能，可以考虑使用这些属性来实现视觉效果。

示例代码

// 不推荐：频繁修改宽高
element.style.width = '100px';
element.style.height = '100px';
element.style.width = '200px';
element.style.height = '200px';

// 推荐：批量修改
element.style.cssText = 'width: 200px; height: 200px;';

// 或者使用CSS类
element.classList.add('new-size');

总结

反复修改浮动元素的宽高会触发浏览器的重排和重绘，影响页面性能。为了优化性能，建议尽量减少对元素样式的频繁修改，或者通过批量修改、使用CSS类等方式来减少重排的次数。