为什么要优化?
优化的好处
1.提升网页响应速度
2.有利于搜索引擎搜索
3.对后期维护比较方便
怎么优化?
1.减少请求
2.减少文件的大小
3.页面性能
4.可读性、维护性
1.图片合并
2.css文件合并 (多个css文件合并为一个、少量的行内样式、避免import的方式引入文件)
3.减少图片的大小(选择合适的图片格式)
4.css值缩写
5.0px 中px省略 0% 0 0.5可以写成.5
6.选择器合并
7.link标签引入样式放到head标签中
8.js脚本建议放在底部,等页面加载完之后再处理js
9.把不需要的标签去掉
10.选择器的长度 #nav ul li a{} 影响查找的性能
11.避免耗性能的属性 比如说css3中的渐变
12.img设置宽高的时候应该和实际的宽高一致
13.可读性的规范
14.尽量用语义化的标签来编写,有利于seo
15.类型和id名,以内容语义来命名
16.避免hack
17.模块化(一系列相关的结构做成一个模块来处理)
18.必要的时候添加注释,可读性比较好
比如说代码优化,大家试着说一下怎么优化?
.g-bd{
border-top: 1px solid #000;
border-right: 1px solid #f00;
border-bottom: 1px solid #f00;
border-left: 1px solid #000;
}
.m-side{
width: 200px;
background-image: url(bg.png);
background-repeat: repeat-y;
background-color: #ccc;
}