html - 与使用类相比，我如何衡量内联 css 的效率

Question

我有一个包含 20 个元素的页面，例如:

<div style="border:1px solid #000; cursor:pointer; font-size:20px; line-height:30px;">Hello</div>

这样做有什么好处:

<style>
.custom_style{border:1px solid #000; cursor:pointer; font-size:20px; line-height:30px;}
</style>
<div class="custom_style">Hello</div>
<div class="custom_style">Hello</div>
<div class="custom_style">Hello</div>
...

视觉上是一样的，因为我没有加载任何带有 custom_style 类的外部 CSS 文件，我想知道这两个代码是如何执行的。

如果它是一个 JS 代码，我会有很多替代方法来检查代码的效率，但由于这是纯 HTML/CSS，我该如何检查呢？如果我有 200 个而不是 20 个元素呢？

编辑我感谢大家的帮助，但也许我对我的问题不清楚。我不想知道内联样式的优点/缺点。我想衡量性能，渲染性能。哪个会渲染得更快？多少？对不起，如果我让你浪费了时间。尽管如此，到目前为止所有答案都非常明确，考虑使用内联/类样式的人应该考虑。

Answer 1

DRY(不要重复自己)代码

比如说，如果你想改变一个值，font-size: 24px，你可能会在 CSS 中做 n 次而不是一次。此外，代码的大小也更小。

级联/覆盖

我不会谈论将 CSS 放在一个单独的文件中，但绝对不赞成内联样式，因为除了使用 !important 外，不能覆盖内联样式。

呈现/内容分离

你真的应该把两者分开。