JavaScript修改DOM元素位置如何避免字符串拼接操作？

关于定位赋值的性能开销疑问解答 #

你担心的这类字符串拼接的性能开销几乎可以忽略，完全不需要刻意针对这一点做优化：

• 首先，x_pos+'px'这类基础字符串拼接属于JS层面极轻量的操作，哪怕每秒执行上千次，产生的性能消耗都远低于DOM操作本身的开销——修改style属性触发的浏览器重排/重绘的成本，是这种基础字符串操作的成千上万倍，这点拼接消耗完全可以忽略不计。
• 关于你提到的浏览器后续反向提取整数值的问题，确实浏览器的渲染引擎内部会把left/top的属性值解析为数值存储，但这个转换是浏览器标准化的属性解析流程的一部分，不管你用什么方式给样式传值，只要是合法的CSS长度值，浏览器都会做对应的解析转换，不存在额外的多余开销。

如果你确实想要省去手动拼接px的步骤，现在浏览器也支持更简洁的写法：你可以直接用CSS.px()方法包装数值，比如d.style.left = CSS.px(x_pos)，不过本质上这个方法内部还是做了字符串拼接的逻辑，性能上和手动拼接没有区别，只是语法上更简洁而已。

如果是高频修改元素位置的场景（比如动画），更值得优化的点其实是避免频繁触发重排，收益会远高于纠结字符串拼接的开销：

• 优先用transform: translate(x_pos, y_pos)来修改位置，不会触发普通流的重排
• 给动画元素开启will-change: transform或者transform: translateZ(0)触发GPU加速，能大幅提升动画流畅度

两种常用写法参考：

传统拼接写法

let x_pos=42, y_pos=43;
const d = document.getElementById('yourDivId');
d.style.position = "absolute";
d.style.left = x_pos + 'px';
d.style.top = y_pos + 'px';

性能更优的transform写法

let x_pos=42, y_pos=43;
const d = document.getElementById('yourDivId');
// 不需要修改position属性，实现同样的位移效果
d.style.transform = `translate(${x_pos}px, ${y_pos}px)`;

内容的提问来源于stack exchange，提问作者neoexpert