12

我很想知道，<img>在html文件中为标签分配一个类名而不是直接写到css文件中是不是更好？

<div class="column">
   <img class="custom-style" alt="" />
   <img class="custom-style" alt="" />
   <img class="custom-style" alt="" />
</div>

代替

.column img{/*styling for image here*/}

我需要知道这些在网络性能方面有什么区别吗？

更新：

对不起，假设问题是<img>内部有多个标签，.column div并且所有图像都使用相同的样式。

4

5 回答 5

17

简短的回答是直接向要设置样式的元素添加类确实是定位和设置该元素样式的最有效方法。但是，在现实世界的场景中，它是如此微不足道，以至于根本不需要担心。

引用 Steve Ouders（CSS 优化专家）http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/：

基于测试，我有以下假设：对于大多数网站，优化 CSS 选择器可能带来的性能提升很小，而且不值得付出代价。

代码的可维护性在现实世界的场景中更为重要。由于这里的基本主题是前端性能；快速页面渲染的真正性能提升器位于：

  • 减少 HTTP 请求
  • 使用 CDN
  • 添加过期标头
  • Gzip 组件
  • 将样式表放在顶部
  • 将脚本放在底部
  • 避免 CSS 表达式
  • 使 JS 和 CSS 外部化
  • 减少 DNS 查找
  • 缩小 JS
  • 避免重定向
  • 删除重复的脚本
  • 配置 ETag
  • 使 AJAX 可缓存

资料来源：http ://stevesouders.com/docs/web20expo-20090402.ppt

所以只是为了确认，答案是肯定的，下面的例子确实更快，但要注意更大的图景：

<div class="column">
   <img class="custom-style" alt="appropriate alt text" />
</div>
于 2013-04-26T05:16:08.683 回答
2

如果您给它一个类名，它会更加通用，因为您指定的样式仅适用于该类名。但是，如果您完全了解 每一个 .column img并希望以相同的方式对其进行样式设置，那么您没有理由不能使用该选择器。

这些天来，性能差异（如果有的话）可以忽略不计。

于 2013-04-26T04:48:06.153 回答
1

分配类名和应用 CSS 样式是两件不同的事情。

如果你的意思是<img class="someclass">，并且

.someclass {
  [cssrule]
}

, 那么将 css 应用到类或应用到类之间没有真正的性能差异.column img

于 2013-04-26T04:38:15.067 回答
0

我认为当您在站点的不同结构中使用相同的样式时，img 标签上的类会更好。您必须决定何时编写更少的 CSS 代码和 HTML 更具可读性。

于 2013-04-26T06:06:01.637 回答
0

它的依赖。如果您有两个以上的图像，.column但您只需要一些图像来应用 css，那么最好直接将类添加到图像而不是这样做.column img{/*styling for image here*/}

在性能方面，我将类应用于图像更好，因为这样做 css 不会寻找可能的子图像。

于 2013-04-26T04:38:29.193 回答