使用HTML属性/标签与inline styles相比是否存在性能差异？

结论先行：第二种基于HTML属性的实现方案不会带来更优的性能，反而存在兼容性和可维护性问题。 #

• 首先你给出的两个示例功能并不完全对等：第一段代码是直接固定字体大小为10pt、文本居中；第二段用的<small>标签是调用浏览器默认的小号字体样式（具体字号取决于浏览器内置样式表，不等于固定的10pt），且align属性已经在HTML5标准中被正式废弃，目前浏览器对它的支持只是为了兼容老旧页面，属于向后兼容的兜底逻辑，完全不推荐在新代码里使用。
• 性能优化工具建议避免行内样式，核心原因从来不是渲染性能差，而是行内样式无法复用、优先级过高难被其他样式覆盖、无法被浏览器缓存单独加载，拉低了整体的可维护性和多页场景下的加载效率。单论单页的渲染速度，行内样式和废弃的HTML展示属性的解析开销几乎没有差异：浏览器处理这两类内容时，最终都会把它们转换为统一的CSS规则参与样式计算，走的是同一套渲染流程，不会出现量级上的性能差距。
• 甚至极端场景下，使用废弃的HTML属性性能会更差：浏览器需要先把这些早已移出标准的属性，映射成对应的CSS规则再处理，多了一层兼容转换的开销，当然这点差异非常小，普通业务页面基本感知不到。
• 如果真的要做性能+可维护性优化，最优方案是把样式抽离为独立的CSS类，放到外部样式表中，既可以在多元素/多页面间复用，也能被浏览器缓存，长期来看的收益远高于纠结行内样式和废弃属性的选择。

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