html – 将一个类名分配给标签,而不是在css文件中写入它？

发布时间：2020-12-14 19:31:00 所属栏目：资源来源：网络整理

导读：我很好奇地知道,最好将类名分配给 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 her

我很好奇地知道,最好将类名分配给< 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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!