为什么要优化?
1. 提升网页加载速度
2. 对搜索引擎,屏幕阅读器友好
3. 提高可读性,可维护性
如何优化?
1. 减少请求
2. 减少文件大小
3. 页面性能
4. 可读性,可维护性 (一些规范)
一 减少请求
① 图片合并
对于小图标,或者类型差不多的图标,尽量放在一起,运用CSS Sprites
② 减少CSS文件请求
多个css文件合并为一个;少量css样式内联;避免使用important方式引入css文件.
二 减少文件大小
① 减少图片大小
选择合适的图片格式;对图片进行压缩
② css值缩写
例:margin padding border border-radius font background等
③ 省略值为0的单位
图片来自简书
④ 颜色值最短表示
⑤ css选择器合并
图片来自简书
⑥ 文件压缩
我们可以使用工具对我们的文件压缩,例如:cssmin YUI compressor等
三 页面性能
① 加载顺序
建议css文件放在<head>中,解析的更好;js脚本放在<body>的底部,因为js的加载和执行会阻塞其他资源的加载和页面的渲染
② 减少标签数量
③ 选择器长度(简洁的选择器更好)
④ 避免耗性能属性
例:exprission filter border-radius box-shadow gradients
⑤ 图片设置宽高
图片来自简书
⑥ 所有表现用css实现
能用css实现的尽量少用js
四 可读性 可维护性
规范
语义化
尽量避免Hack
模块化
注释
我们最好每人都能把代码写的漂漂亮亮的,让别人看着舒服,增加可维护性,一起构造出一个好的代码.加油吧,少年,初学,请多多帮忙啊
网友评论