为什么移动端应该尽量使用CSS transform代替定位？
移动端应优先使用 transform 代替 top/left 定位，因为前者仅触发 gpu 加速的合成层（composite），而后者会强制浏览器重新计算布局（layout）和绘制（paint）。通过设置 will-change: transform 或开启硬件加速，可以显著减少页面重排开销，确保动画达到 60fps 的流畅度。
CSS Transform 与 Top/Left 在渲染管线中的具体差异是什么？
transform 修改的是元素的几何变换矩阵，属于合成阶段操作；而 top/left 改变的是元素在文档流中的物理坐标，必须触发重排。这种差异决定了前者在复杂页面中性能更稳定，不会因父级滚动或子元素尺寸变化引发连锁反应。
/* 高性能方案：Transform */
.element {
will-change: transform;
transform: translateX(100px);
}
/* 低性能方案：Top/Left */
.element {
top: 100px; /* 触发 Layout */
}基于程序中某个输入、条件或结果的具体问题
当页面包含大量动态元素时，若继续使用 top/left 进行位移，会导致主线程阻塞。实测表明，在相同帧率下，transform 能保持稳定的 60fps，而 top/left 常跌至 30fps 以下。因此，对于高频更新的 UI 组件，必须严格限制使用 transform。
立即学习“前端免费学习笔记（深入）”；
