inline styles是否不好？与CSS相比性能差距有多大？

React官方Styling and CSS相关文档中提到「CSS类的性能通常优于内联样式」，在忽略重复CSS声明的传输开销前提下，二者的性能差异主要来自浏览器渲染的各个环节，具体差距和业务场景强相关：

• 样式解析匹配环节：浏览器会提前对外部/内部样式表的CSS规则做哈希索引，同一个CSS类的所有DOM元素可以直接复用匹配好的样式结果，不需要重复解析规则。而内联样式需要浏览器逐元素解析style属性内的每一条样式声明，页面元素量越大，重复解析的额外开销越高。
• 样式更新环节：如果要批量修改一批元素的相同样式，修改公共CSS类的规则时，浏览器可以一次性标记所有应用该类的元素为待更新，单次完成重排重绘计算；如果是逐个修改元素的内联样式，每次修改都可能触发单独的重排重绘计算，在批量更新上百个元素的极端场景下，二者性能差可达10倍以上。
• 内存占用维度：CSS类的样式规则只会在样式表中存储一份，所有应用该类的元素共享这一份样式数据；而内联样式的每个元素都会单独存储一份独立的样式对象，页面元素量级越大，内存占用的差距越明显，在移动端低内存设备上更容易触发卡顿。

日常开发中如果页面元素少于1000个、样式更新频率很低，二者的性能差距几乎感知不到；但在高频样式更新（比如交互动画、滚动动态样式）、大量元素复用相同样式的场景下，CSS类的性能会比内联样式高2~15倍不等。

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