element.setAttribute与element.style设置样式的性能对比：哪种更快？

结论：代码示例2的执行速度更快

原因分析 #

• 示例1使用element.setAttribute('style', ...)时，浏览器需要把传入的完整字符串重新解析成CSS样式规则，相当于完全重建元素的style对象，这个解析过程会产生额外的性能开销。如果元素原本已有其他内联样式，这种方式还会直接覆盖原有样式，同时触发更多重排、重绘相关的计算。
• 示例2直接通过element.style.backgroundImage赋值，是直接操作DOM元素的CSSStyleDeclaration对象的单个属性，不需要解析整个样式字符串，仅修改目标样式属性，操作更轻量化，性能更优。

代码示例对比 #

示例1：使用setAttribute修改style属性

element.setAttribute('style','background-image:url("icons/'+imageName+'")');

示例2：直接操作style对象属性

element.style.backgroundImage = 'url("icons/'+imageName+'")';

额外补充：除了性能差异，示例1还存在副作用——会覆盖元素原有的内联样式，而示例2只会修改指定的背景图片属性，保留其他内联样式，这也是实际开发中更推荐示例2的原因之一。

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