你有没有遇到过这样的情况：刚给新电脑装好系统，打开一个网页，鼠标一动、滚动一下，页面就卡顿几毫秒？不是CPU不行，也不是内存不够，问题可能藏在HTML代码里——特别是那些不经意间触发的重绘（Repaint）和重排（Reflow）。
重排比重绘更“费劲”
简单说：重排是浏览器重新计算元素几何属性（比如宽高、位置、边距），然后重新构建布局树；重排之后，几乎一定会跟着重绘。而重绘只是重新画颜色、背景、边框这类不改变位置的样式变化。举个生活化的例子：重排就像你搬家——要量房间、挪家具、重新规划动线；重绘呢，只是给沙发换个罩子，不用挪地方。
哪些操作容易偷偷触发重排？
以下这些写法，在装机后调试网页性能时特别常见：
<div id="box">内容</div>如果 JS 里这样写：
const box = document.getElementById('box');
console.log(box.offsetWidth); // 触发同步重排！
box.style.width = '300px';
console.log(box.offsetHeight); // 又一次重排！每次读取 offsetWidth/offsetHeight/clientTop 等布局信息，浏览器都得立刻计算当前样式和位置，强制刷新布局——哪怕你刚改完 width 还没重绘完，它也得停下等你问完再继续。
装机教程里常被忽略的“性能坑”
很多新手装机后直接套用网上现成的HTML模板，比如轮播图代码里循环读取 getBoundingClientRect()，或者CSS里滥用 position: absolute 配合频繁 top/left 动画，又没加 will-change: transform。这些在老机器或集成显卡上，页面一动就掉帧。
再比如这段常见写法：
.nav-item {
display: inline-block;
margin-right: 10px;
}如果导航项是JS动态插入的，每插一个就触发一次重排——10个导航项，就是10次重排。换成 display: flex + 一次性插入整个 ul，性能立马顺滑不少。
几个立竿见影的小调整
• 把多次 DOM 样式修改合并成一次，比如用 class 切换代替逐个改 style；
• 动画优先用 transform 和 opacity，它们走合成层，不触发重排；
• 避免用 table 布局做响应式，它的重排成本极高；
• Chrome DevTools 的 Rendering 面板里打开“Paint flashing”，滚动时看到大片绿色，说明重绘太勤快了。
装机不只是换硬件，更是调教整套软硬协同的体验。HTML 渲染这一步卡住，再好的i7+32G也救不回那0.3秒的迟滞感。