前言

由于最近的工作使用了大量的div布局，熟能生巧的情况下还是积累了不少的对性能优化、代码可阅读性、可维护性和SEO等方面的经验的，在这里总结一些，希望给大家带来一些参考价值。

1、减少标签的使用

先举个例子：

先看下上面这个搜索框的HTML结构如何，

<div class="header-search">
    <form action="search.html" method="post" class="header_form">
        <input type="text" class="search_input" placeholder="Please enter part number">
        <button type="submit" class="search_btn">
            <div class="icon-search"></div>
        </button>
    </form>
</div>

有个很明显的地方，button中间放了一个div标签，而这个div标签的作用仅仅只是为了承载icon的使用，那么直接将icon放到button不也是一样的效果吗，除非button身上需要实现别的样式并且已经占据了它的before伪元素的情况下，可以考虑使用这样的空标签放置icon，否则一律不建议使用多余的空标签！！！

<form action="search.html" method="post" class="header_form">
    <input type="text" class="search_input" placeholder="Please enter part number">
    <button type="submit" class="icon-search"></button>
</form>

以上是优化之后的代码，细心的你甚至发现了少了外层的div标签包裹，这是因为form标签同样也是一个块标签，外层div想要实现的效果直接写到form标签身上同样能实现，那何必还要这个div呢？

总结一下，尽量减少标签的嵌套和空标签的使用！

2、减少图片的使用

基于网页的性能优化（网页加载速度、带宽消耗、seo等等）考虑，肯定是图片数量越少越好的，那么如何减少图片的使用呢？

使用字体图标来减少图片使用,常见图标库有阿里图标库、fontello;

先上错误示范：

<div class="row">
    <div>
        <img class="icon-img" src="../image/product/icon-list2.png" alt="">Streamline
    </div>
    <div>
        <img class="icon-img" src="../image/product/icon-list1.png" alt="">Traditional
    </div>
</div>

使用字体图标替代:

<div class="row">
    <div class="icon-stream">
        Streamline
    </div>
    <div class="icon-list">
        Traditional
    </div>
</div>

使用伪元素代替图片的使用 (例如经典的三角形小图标，甚至这样的图标也能替代字体图标）；

这里原先使用一张图片来实现这个横线加箭头的效果的，但是我们使用两个伪元素也能实现同样的效果：

xxx::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    border-bottom: 3px solid #8E93A9;
    width: 100%;
    height: 1px;
}
xxx::after {
    border: 9px solid transparent;
    border-top: 9px solid #8E93A9;
    content: '';
    position: absolute;
    top: 30px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 9px;
}

拼合图片,也就是常说的精灵图或者雪碧图；

3、减少js的使用

相信大家都知道能用html实现效果就不用css，能用css实现就不用js的原则，其实这个没什么好说的，毕竟什么情况下使用css实现动效，什么情况下使用js实现交互还是很容易区分的，但是在我不长的职业生涯当中还真见过使用js去实现hover效果的情况（ps：不是写内联样式）！！！duck不必好吧。
还有种情况可能还有些人不曾注意到的，举个例子：

上面结构其实就是左侧的选择目录和右侧内容，那么现在 如果要实现左侧目录不存在时，右侧内容宽度自动100% 你会如何实现呢？
相信还是会有人使用js的方式判断左侧元素是否存在，如果不存在则使用js改变右侧内容的宽度。
其实善用css选择器就可以很容易实现了：

.left{width: 30%;}
.left + .right{width: 70%;} // 左侧元素存在的情况下右侧元素占宽度70%，左侧元素不存在则该css不生效
.right{width: 100%;}

4、避免无意义的类名

这个是基于代码阅读性和维护性考虑的，给大家看一份外包写的html相信你就能明白我为什么这么建议了。。。

觉得以上代码写的怎么样就见仁见智了。。。

5、减小图片的体积

还是基于性能考虑，所以尽量减小图片的体积，各种压缩方式我就不去说了，总之图片压缩就是必须的。
由于我编写网页时的图片都是我从psd格式的设计稿上抠下来的（ps：是的，ps切图仔就是我），所以有一些经验可以分享给同样使用ps进行切图的小伙伴们：

用多大的图就切多大尺寸的图, 因为ui在布局设计的时候会使用各种图层去覆盖形成目标效果，所以有时你看到的图片大小被其他图层覆盖之后的，并不是它的真实尺寸；
能使用jpg格式的情况下就不要使用png 这是基于它们的特性所考虑的，一般来说jpg文件会更小，但是透明底的png图片转为jpg之后就会变成白底，所以需要考虑使用场景；
图片必须压缩,冷知识，谷歌等搜索引擎是会去判断图片是否有经过压缩的，这是因为图片的大小和质量直接影响网页的加载速度和用户满意度，而搜索引擎通常希望为用户提供加载速度快、高质量的网页。

6、避免不必要的id标签

在 div 布局中，减少对 id 标签的使用是一个好的实践。尽管 id 标签在某些情况下是有用的，但过多地使用它们可能导致一些问题：

特定性问题：id 具有高特定性，这意味着使用 id 来选择元素的样式可能会覆盖其他样式，导致样式冲突。这可能会使代码更难以维护和扩展。
复用性问题：id 标签通常用于唯一标识一个元素，因此不能多次使用相同的 id。这可能会限制您在页面上重用相似的元素或组件。
命名冲突：如果不小心在页面上重复使用相同的 id，可能会导致命名冲突和 JavaScript 功能故障。

相反，推荐使用类名（class）来选择和样式化元素，因为类名具有较低的特定性，并且可以在多个元素上重复使用。这使得样式更易于管理和重用。类名也更适合用于 JavaScript 交互，因为它们可以用于选择多个元素并将它们作为一个组来处理。

在使用 div 布局时，你可以按照以下原则使用 id 和类名：

使用 id 标签来标识页面上唯一的元素，如页眉、页脚、主要内容容器等。
使用类名来选择和样式化多个相似的元素，如导航菜单、按钮、卡片等。
避免不必要的 id 标签，特别是在没有明确需要的情况下。如果元素没有被 JavaScript 或样式需要唯一标识，那么使用类名通常更合适。

总之，合理使用 id 和类名是创建可维护和可扩展的 div 布局的关键，应根据具体的需求和最佳实践来选择标识元素的方式。

7、酌情考虑使用background-image代替img标签

减少 <img> 标签的使用，而使用 CSS 的 background-image 属性来显示图像是一种常见的优化技巧，但需要谨慎使用，具体取决于你的设计和性能需求。以下是一些关于何时使用 background-image 的考虑因素：

适合使用 background-image 的情况：

背景图像：background-image 主要用于背景图像，例如页面的背景、元素的背景等。这对于装饰性图像或平铺图像很有用。
CSS 图标：将小图标（如社交媒体图标、箭头等）作为背景图像是常见的做法，因为它们可以轻松地通过 CSS 控制颜色、大小和样式，而无需多个图像文件。
性能优化：在某些情况下，将多个小图像合并到一个图像文件中，然后使用 CSS background-image 来显示不同部分的图像，可以减少 HTTP 请求，提高性能。

不适合使用 background-image 的情况：

内容图像：如果图像是页面的主要内容，例如文章中的图片、产品图像等，通常更适合使用 <img> 标签。这有助于确保图像能够被搜索引擎索引，并提供无障碍性。
替代文本：<img> 标签允许您提供替代文本（alt 文本），这对于可访问性和 SEO 非常重要。背景图像不具备这个功能。
响应式设计：在某些情况下，使用 <img> 标签可以更容易地实现响应式设计，因为您可以使用不同大小的图像文件来适应不同的屏幕尺寸。

总之，使用 background-image 代替 <img> 标签是一种性能和设计上的优化，但应根据具体情况来决定何时使用。通常，对于页面内容中的主要图像和需要提供替代文本的情况，最好使用 <img> 标签。对于装饰性图像、图标和性能优化需求，可以考虑使用 background-image。

8、多用各种列表标签替代div

灵活使用各种列表标签（ul dl ol）替代单纯的div嵌套，代码不仅更加优雅，阅读和维护起来也更加方便。
举个工作中遇到的例子：

像以上内容你会如何编写布局呢？先看下别人是怎么写的吧：

可以看到，底下横排的四个块都是使用div标签来实现的，如果是我的话则会使用ul li来实现同样的效果:

细心的你会发现，我不仅对下面的内容进行了优化，同时也对上面文字部分也做了修改，因为根据标签越少越好的原则，我们完全没有必要使用标签包括文本的方式来让文本进行换行和扩大间距，直接使用br标签的属性就可以实现同样的效果了，还有就是标题类型的内容建议使用h1~h6，这样不仅可以达到语义化的要求，还方便你对标题写特定的样式。

针对列表标签我再举个例子：

直接上代码：

直接使用dl标签进行布局，dt标签放置标题，dd标签做内容列表即可以最简洁的方式完成以上效果。

结束

以上就是我五月份工作到现在以来所积累的一些优化div布局的经验，如果有误希望jym能够指出我再加以改正，如果有补充的话评论区欢迎您~~~

div布局当中的一些小细节，以最简洁的代码最小的体积完成你的页面布局

前言