CSS transition all与特定属性transition的性能对比探讨

绝对是的，针对特定属性设置transition不仅能有效提升性能，还是前端性能优化中非常推荐的实践方向，原因主要有这几点：

• 减少浏览器的计算负担：当你使用transition: all时，浏览器需要监听元素所有可过渡的CSS属性（比如尺寸、颜色、位置、透明度等）的变化，哪怕你只修改了其中一个属性，浏览器也要逐一检查所有属性是否发生改变，这会额外消耗计算资源。而指定特定属性（比如border、width）后，浏览器只需要关注目标属性的变化，计算量会大幅降低，尤其是在复杂页面或者频繁触发过渡的元素上，这个性能差异会更明显。

• 避免意外的过渡行为：使用transition: all很容易出现意料之外的过渡效果——比如你可能只是想修改元素的边框，但不小心调整了字体大小或者内边距，这些属性也会跟着产生过渡动画，破坏原本的设计预期。而针对性的transition类可以完全避免这类问题。

举个实际对比的例子：
原来的全属性过渡类：

.easeMe { 
  transition: all .7s ease-in-out; 
  -webkit-transition: all .7s ease-in-out; 
  -moz-transition: all .7s ease-in-out; 
}

优化后的特定属性过渡类：

.easeBorders { 
  transition: border .7s ease-in-out; 
  -webkit-transition: border .7s ease-in-out; 
  -moz-transition: border .7s ease-in-out; 
}

当你给元素添加.easeBorders并修改边框样式时，浏览器只会处理border属性的过渡，不会去检查其他无关属性，性能自然更优。

另外还要提个额外的优化点：如果想追求极致性能，优先选择浏览器能高效处理的过渡属性，比如opacity和transform——这些属性的过渡不会触发页面的重排和重绘，只需要合成层操作，性能比border、width这类会触发重排的属性要好很多。

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