我很好奇地知道,最好将类名分配给< 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中的标签和所有的图像都使用相同的样式.
解决方法
简单的答案是直接添加一个类,你想要的样式元素确实是最有效的方式来定位和创建该元素.但是,在现实世界的情况下,这是毫无疑问的,所以不要担心.
引用Steve Ouders(CSS优化专家)http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/:
Based on tests I have the following hypothesis: For most web sites,
the possible performance gains from optimizing CSS selectors will be
small,and are not worth the costs.
代码的可维护性在现实世界中更加重要.
由于这里的基础主题是前端性能;用于快速页面呈现的真正的性能增强器可以在以下位置找到:
>减少HTTP请求
>使用CDN
>添加Expires标题
> 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>