CSS:内联样式是否更慢？

Question

哪个呈现得更快？

// 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>

Answer 1

在实际显示内容方面,两段代码之间的速度差异可以忽略不计.不同的浏览器很可能有不同的实现来呈现网页,因此使用一个浏览器获得的分钟速度提升不一定会反映在另一个浏览器中.

现在就加载时间而言,这是一个不同的故事.是的,内联样式在技术上比外部样式表更快,因为您在页面顶部减少了一个请求,但使用外部样式表更适合代码可维护性.只有当您加载多个样式表时,性能才开始成为问题,因为每次引用新样式表时,浏览器都必须提交另一个请求.解决方案？只需将样式表连接成一个.