chrome devtools中确认频繁重排：打开rendering面板勾选paint flashing和layout shift regions，若大面积高频闪烁，或performance面板中layout长条密集出现，即表明频繁重排；易触发重排的css属性包括width、height、padding、margin、top、left、display、font-size及offsettop等布局读取api。
怎么确认页面正在频繁重排
打开 Chrome DevTools → 切换到 Rendering 面板 → 勾选 Paint flashing 和 Layout Shift Regions，再滚动或交互。如果大面积区域高频闪烁（绿色/红色块），说明重排/重绘正在发生；若页面卡顿伴随 Layout 在 Performance 面板中频繁出现长条，基本坐实是重排瓶颈。
哪些 CSS 属性最容易触发重排
只要改了影响几何尺寸或位置的属性，浏览器就得重新计算布局。以下这些写法几乎每次都会触发重排：
-
width、height、padding、margin、border -
top、left、right、bottom（尤其配合position: absolute或relative） -
display、font-size、line-height、overflow - 读取
offsetTop、clientWidth、getBoundingClientRect()等 API 时，如果之前有未 flush 的样式变更，会立刻强制同步 layout
为什么用 transform 和 opacity 能避开重排
这两个属性被浏览器单独优化过：它们不改变文档流，不影响其他元素布局，且通常能落到独立合成层（compositor layer），由 GPU 处理，跳过了主线程的 layout 计算流程。
错误写法：.box { left: 10px; top: 20px; } → 触发重排
正确写法：.box { transform: translate(10px, 20px); } → 只触发合成（compositing）
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
注意：transform: translateZ(0) 或 translate3d(0,0,0) 虽可强制提升图层，但仅在必要时用（比如修复 z-index 异常或闪烁），滥用会增加内存开销和图层管理负担。
怎样避免 JS 中的重排陷阱
常见误区是在循环里反复“读-写”DOM，比如：
for (let i = 0; i <p>正确做法是把读操作集中到写操作之前或之后：</p>
- 先批量读取所有需要的值（如
offsetWidth），存入变量 - 再批量设置样式（如
style.transform） - 动画优先用
requestAnimationFrame批量更新，而非定时器 - 对频繁动画元素可加
will-change: transform，但动画结束后建议用 JS 清除：el.style.willChange = ''
重排不是单个元素的事——它会波及父级和子级，所以哪怕只动一个 p 的 font-size，整个 div 容器甚至 body 都可能被牵连重排。这点容易被忽略，但恰恰是性能崩盘的起点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
