Skip to content

Latest commit

 

History

History
381 lines (190 loc) · 5.3 KB

map-MobilePerformanceOptimization.md

File metadata and controls

381 lines (190 loc) · 5.3 KB
Raw

移动优化经验

网络加载

优化请求

  • 优化请求包大小

    • 代码压缩

    • 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)

  • 图片尺寸限制