4.页面优化
为什么优化：提升网页响应速度；对搜索引擎、屏幕阅读器友好；提升代码可读性，可维护性
页面优化的方法：
减少请求（图片合并，CSS 文件合并）
减少文件大小（减小图片大小，精简CSS，压缩CSS）
提升页面性能（调整文件加载顺序，精简选择器，避免消耗性能的属性，图片设置宽高，尽量用CSS实现）
提升代码可读性，可维护性（制定规范，语义化书写，避免Hack，模块化代码，注释）
减少请求
页面上每个资源（CSS，JS，图片）都需要通过向服务器请求来获取
从两方面减少请求：
图片合并（图标合并）
减少CSS文件请求：合并CSS文件；少量CSS样式内联；避免使用import引入（每个import语句都会产生一个请求，而且请求是同步的，第一个请求完成后才能发送第二个请求）
减小文件大小
减小图片大小
选择合适的图片格式（PNG，JPG）
压缩图片（ImageOptim，ImageAlpha，JPEGmini）
减小CSS文件大小
CSS值缩写；省略值为零的单位；颜色值最短表示；CSS选择器合并（样式相同）；文件压缩
提升页面性能
调整文件加载顺序：CSS 文件放在 head 中；JS 放在 body 底部
减少标签数量
选择器长度尽量短
避免使用耗性能属性（expression,filter,border-radius,box-shadow,gradients）
图片设置宽高（不缩放）
所有表现用 CSS 实现
可读性，可维护性
规范
语义化（标签，类名，id 名）
避免 Hack
模块化
注释
5.规范与模块化
规范
一个团队应该形成自己的一套团队规范
规范：文件规范 注释规范 命名规范 书写规范 其他规范
文件规范
文件分类：CSS文件分为通用类和业务类（文件的归档）
文件引入：外联引入，少量内联引入
文件本身：文件名由小写字母、数字和中划线组成，编码方式为 UTF-8
注释规范
块状注释：统一缩进，在被注释对象之上
单行注释：文字两端需要加空格，在被注释对象之上（避免汉字编码引起注释失败）
行内注释：文字两端需要空格，在分号之后注释
命名规范
分类命名：对于布局类样式以g-开头，内容类样式（模块）以m-开头
命名格式：小写，权衡长度与可读性
语义化命名：以内容语义化命名，如 .nav
书写规范
单行与多行：二选一
空格与分号：缩进（必须有）空格4个（或2个），属性与值之间空格（属性与属性之间空格）；保留最后一个属性值的分号
属性顺序：显示属性，自身属性，文本属性和其他修饰
Hack方式：IE6属性以下划线开头，IE6/7以星号开头，不滥用Hack
值格式：color值统一为16进制；url()值统一为不加引号
其他规范
HTML规范：
文档声明：且首行顶格；
闭合：闭合标签需要闭合，自闭和标签加/；
属性：属性值用单引号引起来，表单元素属性可以省略的属性值省略；
层级：缩进4个空格体现层级，标签正确嵌套，不宜太深；
注释：布局前后加注释
大小写：标签，属性均小写
图片规范：
文件名称：语义，长度权衡
保留源文件
图片合并：尽可能使用sprite技术，sprite图片可按模块、业务、页面划分
模块化
一系列相关联的结构组成的整体；带有一定语义，而非表现
如何模块化
为模块分类命名（如m-,md-）
以一个主选择器开头（模块根节点，一个模块一个根节点，不能有兄弟节点）
使用以主选择器开头的后代选择器（模块选择器开头均为根节点的类名）
模块扩展
类似结构可以在模块根节点原有类名基础上，加一个带序号的原类名，作为扩展结构的根节点类名
原样式依然有效，新的变化在带序号的类名上重设
模块化好处
利于多人协同开发，相当于规范，防止样式污染
便于扩展和重用，提高效率
可读性，可维护性好
网友评论