在什么场景下，使用 transform 的 translate 来移动元素会比修改 top/left 等定位属性更合适？

回答思路

1. 【回答框架 1】改变 top/left 会触发布局和绘制，涉及主线程的重排和重绘；translate 只触发合成，在合成器线程上处理，不触发布局，性能更优。
2. 【回答框架 2】translate 适合动画或频繁位移的场景，如拖拽、过渡效果；定位属性适合静态布局调整或依赖文档流的场景。
3. 【回答框架 3】现代浏览器对包含动画的元素会创建合成层，translate 能利用 GPU 加速；而 top/left 动画可能导致层提升和重绘。
4. 【回答框架 4】使用 translate 时，元素在文档流中的占位保持不变，适合保留原始空间；定位属性会改变元素自身的位置，可能影响周围布局。
5. 【关键点 1】translate 不触发重排，top/left 会触发重排和重绘。
6. 【关键点 2】translate 在合成器线程处理，走 GPU 加速。
7. 【关键点 3】translate 保留布局空间，适合动画；定位用于静态布局。
8. 【易错点 1】过度使用 transform 可能导致大量合成层，占用内存。
9. 【易错点 2】对小元素或简单动画，性能差异可能不明显，不应机械地认为 translate 永远更快。
10. 【易错点 3】定位与 translate 的叠加使用需注意 transform 会创建新的层叠上下文。