页面优化

2017-06-06 本文已影响36人 YM雨蒙

为什么要优化?

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

模块化

注释

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