與內聯樣式相比，使用 HTML 屬性/標簽是否存在性能差異？

Question

考慮以下兩個標記片段：

<p style="text-align: center; font-size: 10pt">
    Blah blah blah
</p>

與此相反：

<p align="center">
    <small>
        Blah blah blah
    </small>
</p>

現在，性能優化工具通常建議應避免使用內聯樣式，那么在這種情況下，第二個基於屬性的選項會更好嗎？

Answer 1

我認為兩種情況都不好。 您應該避免使用內聯樣式。 也許外部文件中使用的css是正確的，使用類更改標簽樣式。

<p class="paragraph">
    Blah blah blah
</p>

在 css 中

.paragraph {
 text-align: center;
 font-size: 10pt;
}

Answer 2

當然有區別，當您使用單獨的單獨 CSS 文件時，需要另一個請求然后解析才能實際繪制模板。 但是如果您直接設置 html 樣式，它將直接解析而無需額外請求。 這里最大的問題是代碼必須易於閱讀，並且其中實現的所有樣式的 html 看起來都一團糟。 畢竟需要樣式化的屬性列表可能會很長，更不用說偽元素和它們的樣式了。 CSS 文件提供的是組織，它將兩種不同類型的代碼分開，使其更具可讀性和可理解性。 在您發布的那個特定情況下，它不會產生任何區別，因為您無法注意到它，但總的來說，我強烈建議將 CSS 代碼分開。