前端ABC优化主要分为：
1、图片优化
2、css代码优化
3、减少HTTP请求
4、HTML标签语义化
图片优化：
1、图片压缩
①存储为web所用格式
②使用压缩工具进行压缩（ps\）
2、选择正确的图片格式
3、加上高度和宽度
4、ALT-代替属性
CSS代码优化：
一、CSS代码优化作用与意义：
1、减少占用网页字节。在同等条件下缩短浏览器下载CSS代码时间，相当于加快网页打开速度
2、便于维护。简化和标准化CSS代码让CSS代码减少，便于日后维护
3、让自己写的CSS代码更加专业。
（整理和优化代码不仅是为了减小css文件，还包括了维护性和可读性以及提升css渲染速度。）
二、CSS代码优化方法：
1）缩减代码
1、代码简写。
2、提取共用 css选择器：可在最后整合。
3、排列代码，不要每个属性都独占一行，少用回车和空格。
4、减少注释内容。注释中不使用汉字。
2）增强维护性和可读性。
1、命名规范。：功能命名
2、合适注释（不能出现汉字）
3、条理化代码：css代码整理归类。如头部内容与中间内容隔开，方便以后维护。上中下，代码排列按顺序。
4、Css属性的顺序：以字母顺序写属性。
3）提高渲染速度
1、不要使用低效率的选择器：*{}#zishu*{} 或者指定标签
2、不要使用滤镜
3 、少用绝对定位
4、平铺的背景图片尽可能大一些
5、让属性尽量多的去继承
6、不要放置空的或者没有的class在html中
减少HTTP请求
1、一个网站中，每个页面对应一个css文件？
对于大站，为了规范和方便后期维护可以将一些常用属性设置放置在一个css文件，将页面结构内容放在一个css文件中，如（main.css、style.css）但是对于中小型网站来说，一个css文件足矣。
2、Css sprite（ css精灵或称css雪碧）
通过将网页中用到的所有背景图片（或所有不需要做链接的图片）置于一张图片之上。通过css的背景中background-position属性来定位。注意平铺的背景图片与不平铺的要分别集合到不同的图片上。
Html结构语义化标签的使用
1、避免使用不合理的html元素。
类似<font>标签或者无意义的元素比如<br />或者使用 实现留白等来冒充一个貌似合理但实际上不能使用的结构
“根据元素的含义使用元素，而不是因为它们看起来像什么。”结构元素应该只用于传达结构，而不要强制用于表现。
2、避免标记中的常见错误
classitis：代码标记的麻疹 (即每个标签中都引用class)
divtis:当使用div来替换那些完好的（或者更适当的）元素的时候，divtis就出现了。
其他
在链接后面使用斜线。
当浏览器打开一个像“http://www.qdabc.cn/js”这样的链接时，它需要计算这个地址包含哪些文档或者网页，浪费时间。如果在链接后面使用斜线，变成“http://www.qdabc.cn/js/”，浏览器就会识别出这个地址是指向一个文件夹的，减少加载时间。
对网站的文件和资源进行优化
文件合并
文件最小化/文件压缩
使用CDN托管
缓存的使用
欢迎分享本文，转载请保留出处：前端ABC » css优化 网页优化