页面优化

为什么要优化?

    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文件放在中,解析的更好;js脚本放在的底部,因为js的加载和执行会阻塞其他资源的加载和页面的渲染

②   减少标签数量

③   选择器长度(简洁的选择器更好)

④    避免耗性能属性

例:exprission    filter   border-radius    box-shadow    gradients

⑤    图片设置宽高

图片来自

⑥    所有表现用css实现

能用css实现的尽量少用js

---

四    可读性 可维护性

    规范

    语义化

    尽量避免Hack

    模块化

    注释

---

       我们最好每人都能把代码写的漂漂亮亮的,让别人看着舒服,增加可维护性,一起构造出一个好的代码.加油吧,少年,初学,请多多帮忙啊