2

哪个渲染更快？

// Just HTML
<div id="holder">
    <div style="float:left;">test1</div>
    <div style="float:left;">test2</div>
    <div style="float:left;">test3</div>
</div>

或者

// CSS
#holder div{
    float:left;
}

// HTML
<div id="holder">
    <div>test1</div>
    <div>test2</div>
    <div>test3</div>
</div>
4

4 回答 4

6

In terms of actually displaying content, the speed differences between the two sections of code is negligible. Different browsers most likely have different implementations for rendering a webpage so the minute speed boost you get with one browser won't necessarily be reflected in another.

Now in terms of load times, it's a different story. Yes, inline styles are technically faster than an external stylesheet because you are making one less request on top of the page but using an external stylesheet is much preferred for code maintainability. It's only when you're loading multiple stylesheets that performance starts to become an issue since each time you refer to an new stylesheet the browser must submit another request. The solution? Simply concatenate stylesheets together into one.

于 2011-03-07T19:20:34.467 回答
1

我想（由于涉及到 HTTP-Request）外部 CSS 会更慢，但内联样式对于可维护性来说是可怕的，并且否定了 CSS 的全部意义，即集中颜色和布局的值，因此您不必遍历每一个元素都会改变一种风格。

也看到这个

于 2011-03-07T18:52:32.313 回答
1

即使您假设您不想使用外部样式表，在 <head> 中使用带有元素类的样式标记也可以在以后使用服务器端编程语言轻松自动包含，而不是使用几十个内联样式。除非您的样式数量很少，否则您的总字节数也会更低。

查看 Google 的新 404 页面：他们甚至在样式标签中包含图像：

http://www.google.com/123412312

于 2011-03-07T19:06:13.160 回答
0

在浏览方面应该没有任何区别，您可以使用浏览器的开发工具进行测试。除了其他答案中已经提到的代码可维护性外，还存在内联规则的特异性问题。由于它们具有最高的特异性（1,0,0,0），它们将覆盖所有其他级联。因此，您应该仔细检查您的用例，而不是根据性能标准做出决定

于 2019-06-02T20:59:01.263 回答