# 移动优化经验
## 网络加载
### 优化请求
- 优化请求包大小
* 代码压缩
* Gzip压缩
* 不同网络（2G/3G/4G/wifi）图片尺寸
* 合理减少Header字段/cookie
* MTU策略(1500字节)
* 首屏加载时间控制
+ 3s完成（5s为用户最大容忍度）
+ 网络平均速度(2.71Mb/s = 0.33875MBps(1Mbps=8MBps) = 346.88KBps)
+ 不超过1041KB，经验值200K（考虑打开响应、网络连接至少600ms）
- 减少请求次数（仅针对HTTP）
* 合并js、css文件、雪碧图
+ 移动端雪碧图(构建)
+ combo
* 避免重定向(一次重定向至少600ms)
* 避免重复资源请求
* 同时并行请求数量（android：4个，ios 5以后可支持6个）
- 解耦请求依赖
* 文件并行加载/依赖执行(构建+模块化)
* 首屏CGI提前(组件)
* inline首页必备js/css
* 异步加载非首屏
- 连接优化
* 支持keep-alive
* 网络时间
+ DNS(2G：3.85785；3G：1.60643；WIFI：0.986921；unknown：1.67838)
+ TCP(2G：2.33482；3G：0.743109；WIFI：0.550208；unknown：1.20898)
+ RTT(2G：2.57478；3G：0.608047；WIFI：0.444332；unknown：1.30601)
+ Tran(2G：14.0374；3G：60.1967；WIFI：70.8728；unknown：36.3655)
* DNS Prefetch
* HTTP2/SPDY
* TCP握手/TLS密钥协商
### 缓存策略
- Cache
* Browser Cache(一年)
* AppCache(选择)
* 离线包(native下必须)
- Web Storage
* localStorage
* sessionStorage
* nativeStorage（native，>=4.6，大数据）
- Cookie
- Web DB
* indexedDB(推荐)
* Web SQL
- 合理缓存CGI数据(local/ajax)
### 加载策略
- 首屏加载
* Server Render(React-Node)
- 按需加载(组件化)
- lazyload(图片、组件)
* 延迟加载图片
* 滚动加载图片
- Media Query
## 监控上报
### H5监控体系
- 成功/失败率
* 图片
* CDN文件
* CGI
* 直播/录播播放
+ 加载
+ 断流
- 测速(2G/3G/4G/wifi、组件)
* 首屏展示速度(首屏渲染)
* CGI测速
* CDN文件测速
* 图片测速
* 直播/录播播放
+ 加载
+ 断流
- 版本覆盖
* 离线包更新率
+ tdw：版本号、用户、环境等
* 离线包覆盖率
+ monitor
- 错误日志
* badjs
* tryjs
- performance
* timing(ios 8不支持)
* resouce timing(缓存/非缓存，手机暂不支持)
### 视频监控体系
- 直播播放
* 视频加载流程监控(playing/paulse/timeupdate)
+ 平均延时
+ 失败率
* 卡顿缓冲监控(timeupdate)
+ 卡顿缓冲时长
+ 卡顿缓冲次数（短流率）
* 视频异常监控(onerror)
+ 源文件不存在
+ 取回过程被用户中止
+ 下载时错误
+ 解码时错误
+ 不支持的音视频
+ 其他cgi请求异常引起的错误等
- 录播
* 视频加载流程监控(playing/paulse/timeupdate)
+ 平均延时
+ 失败率
* 卡顿缓冲监控(timeupdate)
+ 卡顿缓冲时长
+ 卡顿缓冲次数（短流率）
* 视频异常监控(onerror)
+ 源文件不存在
+ 取回过程被用户中止
+ 下载时错误
+ 解码时错误
+ 不支持的音视频
+ 其他cgi请求异常引起的错误等
* 单位录播时长等待监控
+ 录播播放时长
+ 下载等待时长
## SEO
- keywords/description
- 合理减少pages数量
- 减少图片/flash/弹窗
- 外链权重不高
- canonical/alternate
- 提交sitemap
## 渲染优化
### HTML
- HTML meta viewport(可以加速页面渲染)
- 优化DOM tree
* 减少html标签，避免不必要的嵌套
* 避免table
* 减少DOM深度
- 减少DOM渲染
* VirtualDOM(React)
* React-Native
### 动画
- 合理使用requestAnimationFrame
- 尽量使用css3
- 合理使用Canvas代替多DOM tree(5个) css3
- 高频事件(touchmove、scroll) lazy化(debounce.js)
- GUP渲染
* 大量的渲染(Canvas、WebGL、Video)
* 3D Transformed(transitions、3D transforms)
* Animated css属性（filters, masks, blend modes, reflections, opacity）
* position: fixed
* content overlapping existing GPU-rendered bitmaps
### repaint/reflow
- 避免重新设置图片大小
- 避免频繁的触发repaint/reflow
## 文件优化
### css样式
- 避免style标签
- 去掉expression
* 移除空的（多余的）选择器
- 合理使用Float
- 合理使用iconfont
- 值为0的属性不带单位（兼容性、压缩自动处理）
- 标准化浏览器前缀(构建)
- 减少font-size的申明（增加浏览器渲染计算）
- 异步css文件换成js文件(构建)
### js脚本
- 框架组件选择(zepto/react/vue/angular)
- 使用documentFragment(zepto已解决)
- 事件优化
* 事件代理
* 频繁事件优化
* touchsatrt、touchend(tap)代替click
- 使用mqqapi(http://mqq.oa.com/)
- id选择器
- 合理缓存对象（DOM、js对象、length）
- 慎用with
- 避免eval、Function
- 使用Join
### 图片文件
- 图片大小
* 压缩工具
+ 优图（tu.oa.com）
+ 智图（zhitu.tencent.com）
+ grunt插件
* 图片格式
+ webP
+ sharpP
- 减少图片使用
* css画图
* svg画图
* 合理iconfont代替图片(最后的选择)
* 避免使用bmp图片
- srcset + sizes(兼容性）
- 图片格式(webp > jpg > png(png8 > png24) > gif)
- 图片大小限制(10K，不超过30K)
- 图片尺寸限制
