CSS：内联样式比较慢？ [英] CSS: Is inline styling slower?

问题描述

  //只需HTML 
< div id =holder> 
< div style =float：left;> test1< / div> 
< div style =float：left;> test2< / div> 
< div style =float：left;> test3< / div> 
< / div> 
  

OR

  // CSS 
 #holder div {
 float：left; 
} 
 
 // HTML 
< div id =持有人> 
< div> test1< / div> 
< div> test2< / div> 
< div> test3< / div> 
< / div> 
  

解决方案

在实际显示内容方面，这两段代码是可以忽略的。不同的浏览器最有可能有不同的渲染网页的实现，所以用一个浏览器获得的微小提升速度不一定会反映在另一个浏览器中。

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

Which renders faster?

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

OR

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

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

解决方案

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.

这篇关于CSS：内联样式比较慢？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！