Mobileperformanceoptimization-Skillmap专题
移动优化经验
网络加载
优化请求
-
优化请求包大小
-
代码压缩
-
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)
-
图片尺寸限制