前端性能优化之实战

一、图片优化方法

1、使用css效果及动画替代图片

2、合理选择图片类型

• jpg-适用于颜色丰富的图片，压缩率较高
• png-可做透明和半透明，体积较大
• gif-用于较通用的动画，只支持全透明，不支持半透明
• svg-矢量图，放大不失真

3、图片的加载方式-由图片本身的压缩算法决定

• 先模糊后清晰-小波算法
• 清晰但逐行加载-离散余弦变换

4、使用雪碧图

5、响应式动态图片加载

• 把带有屏幕分辨率、屏幕尺寸、网速等相关信息带给服务器
• 服务器返回最优的图片

二、视频优化方法

1、播放器形式

• video标签
  • 优点：不需要下载额外资源
  • 缺点：每个浏览器的外观不统一
• flash播放器
  • 优点：兼容性好
  • 缺点：需要下载.swf辅助插件，浏览器必须有flash player插件
• 最优实现方案
  • 两种形式组合，浏览器支持video时使用video标签，不支持时使用flash

2、自定义播放器样式

• 隐藏默认样式
• 自己布局需要的UI
• 将自己布局的UI与浏览器事件绑定

3、让视频第一时间加载出来

• 把初始化播放器的代码执行顺序提前
• 把视频资源提前（以样式表而不是多媒体的方式引入）

三、缓存

1、SessionStorage

• 优点：临时存储，关闭页面标签自动回收，刷新页面不回收，不可跨页面交互
• 缺点：不能存储持久化内容

2、userData

• 缺点：存储限制太小

3、Cookie

• 优点：兼容性好，几乎所有浏览器都支持
• 缺点：大小有限制，每次发送请求，请求头里都会带着cookie一起（用于登录）

4、openDatabase

• 优点：是个完整的数据库
• 缺点：对前端成本高，需要维护

5、localstorage（推荐）

• 优点：兼容性中等，操作简单，可跨页面（不可跨域），关闭浏览器后依然存在
• 缺点：大小有限制，IE10及以下不支持