页面优化

为什么需要页面优化?
1. 提升网页的响应速度;
2. 对搜索引擎,屏幕阅读器良好;
3. 提高可读性和可维护性(方便开发人员)。
如何优化?
1. 减少请求
(1)图片合并(多个图片合并);
(2)css文件合并(多个css文件合并为一个,如果样式较少可少量css样式内联,避免使用import的方式导入css文件,因为每个import为同步请求);
2.减少文件大小
(1)选择合适的图片格式
半透明小图标需要用png格式;色彩比较鲜明,尺寸比较大用jpg格式;直接对图片进行压缩,无损和有损压缩(ImageOptim,ImageAlpha,JPEGmini)。
(2)css值缩写
多个方向的设置合并如margin;省略值为0的单位(如0px,0%,0.5);颜色值最短表示(#ccc);css选择器合并(多个用到sprite图的选择器);文件压缩(如上线时用到的工具清除空格)。
3.页面性能
css样式表文件放在head中,js脚本放在body的底部;减少标签数量(删除无用嵌套的div);选择器长度(尽短的选择所要选择的元素);减少号性能属性(如expression,filter,border-radius,box-shadow,gradients);图片设置宽高;样式表现尽量用css实现
4.可读性和可维护性
(1)规范
(2)语义化
(3)尽量避免hack
(4)模块化
(5)注释

你可能感兴趣的:(页面架构,页面优化)