# 移动优化经验

## 网络加载

### 优化请求

- 优化请求包大小

	* 代码压缩
	
	* 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)

- 图片尺寸限制