GMTC2018－《跨容器高性能的离线化方案在美团的实践和探索》 于秋

2020-02-27 162浏览

  • 1.跨容器器⾼高性能的离线化⽅方 案在美团的实践和探索 于秋 美团前端技术专家&智能⽀支付部⻔门前端负责⼈人
  • 2.
  • 3.
  • 4.于秋 美团 — 前端技术专家 现在负责智能⽀支付部⻔门前端 之前在阿⾥里里闲⻥鱼
  • 5.• 项⽬目背景 • 离线化思考&破局思路路 • 策略略⽅方案&优化⽅方案 • 延伸 — Diff服务（Golang） • 容错⽅方案&成果总结
  • 6.业务场景 二维码支付是一种聚合支付产品，美团 线下收单产品之一，为商户提供聚合支 付的收银解决方案。 并且支持多种支付方式，目前支持用户 使用微信、支付宝、美团、点评扫码 进行付款操作。
  • 7.特点 快速收银 通道多样 竞争激烈烈 覆盖⾯面⼴广 挑战 加载速度 可控性低 不不能丢单 弱⽹网环境 ⽅方案 性能优化 紧靠标准 兜底降级 缓存利利⽤用
  • 8.⽪皮⼀一下很开⼼心
  • 9.离线化⽅方案
  • 10.移动流⾏行行曲⽬目 • ⽹网络拦截 • 离线包 鸿沟 容器器多样
  • 11.Web常规思路路 • Cookie • LocalStorage • Application Cache • IndexedDB 缺陷 不不够完美
  • 12.
  • 13.PWA核⼼心能⼒力力 • Web App Manifest • Service Worker • Notification API & Push API • App Skeleton
  • 14.Service Worker • 独⽴立进程（很厉害） • 拦截请求（很熟悉） • 缓存⽂文件（更更熟悉） • 更更新缓存（很开⼼心） • 异步处理理（超级爽）
  • 15.前端服务 ⽤用户界⾯面 前端服务 ⽤用户界⾯面 Service Worker 拦截请求 资源&数据 Cache Storage 服务&CDN 资源&数据 第三⽅方服务 资源&数据
  • 16.注册 初始化 激活 拦截 通信等 const SUPPORT_SERVICE_WORKER = Boolean(isBrowser && ('serviceWorker' in navigator) && ('onmessage' in navigator.serviceWorker) && (IS_LOCALHOST IS_SSL) ) if (SUPPORT_SERVICE_WORKER) { navigator.serviceWorker.register(path, {scope:scope }) } self.addEventListener('install', event => { // 初始化安装 }) self.addEventListener('activate', event => { // 激活⽣生效 }) self.addEventListener('fetch', event => { // 拦截、缓存、策略略 }) self.addEventListener('message', event => { // 通信、数据收集、缓存管理理 })
  • 17.拦截
  • 18.
  • 19.SW中GlobalScope 的 Navigator 的 UserAgent 和 封装过的Browser 的UA是不不⼀一致的 通过 SW缓存的资源不不能是 http 下的资源，在 https 下加载 http 资源会引发 Mixed Content , 导致 资源不不能被正常加载。如果有不不能避免的 http 内容引⼊入，尝试在 excludes 中加⼊入 '^http:\\/\\/'。
  • 20.
  • 21.
  • 22.cacheFirst cacheOnly cache&Refresh Revalidate networkFirst Stark Diff
  • 23.总是要再发版的
  • 24.
  • 25.Diff服务
  • 26.数据上报 离线化 增量量更更新 请求 更更新决策 数据采集 客户端（Thunder.js） CDN API 增量量更更新 读取 分布式存储 写⼊入 数据统计 上传记录 资源管理理 身份认证 增量量更更新服务 管理理平台
  • 27.如何⾯面对海海量量突发流量量 CDN CDN API 计算 回源 API服务 • 在增量量更更新服务的最外层有CDN进⾏行行保护 • 正常情况下，即使有突发流量量，也会抵挡绝⼤大部分请求
  • 28.如何⾯面对海海量量突发流量量 回源请求 查询补丁⽂文件 单机缓存 分布式存储 API服务 查询不不到 请求计算 CDN API 计算 计算服务 • 将对外的API拆解成单独的服务 • API服务保持只读，化解流量量压⼒力力， 使得计算服务可以专⼼心做计算
  • 29.如何⾯面对海海量量突发流量量 CDN API 计算 diff计算 读取新⽂文件 • 以压测结果对单机QPS进⾏行行限制 • 对于超额流量量，直接返回新⽂文件 • ⽆无论哪种结果，最终会缓存在CDN
  • 30.如何⾯面对海海量量突发流量量 上线前 线下预热⼯工具 上线后 线上API 预热集群 计算c服务 线上集群 • 上线前对增量量进⾏行行预热 • 预热服务与主服务隔离 • 只共⽤用存储
  • 31.如何容灾 • 线路路故障 • 每⼀一层都有单机内存Cache，减少⽹网络故障影响 • 存储故障 • 利利⽤用公司稳定存储平台⽽而不不是⾃自建存储，避免磁盘坏道等尴尬场⾯面 • 使⽤用两个不不同的分布式存储平台，互为替代 • CDN故障 • 双CDN，隔离来⾃自CDN故障的⻛风险 • 系统故障 • CDN会缓存服务的返回，⽆无论是否异常，避免击穿 • 设计服务降级预案，增量量系统瘫痪后请求全量量⽂文件，不不影响⽤用户使⽤用 MSS 互替 Tair
  • 32.
  • 33.命中解不不开的劫 11.3
  • 34.降级 LocalStorage
  • 35.• Diff结果拉取异常时候 • CDN异常时候 • Diff还原异常 • 项⽬目隔离 容错
  • 36.回顾总结
  • 37.Node Node-Utils Webpack-Plugin Client JS-SDK SW 技术⽅方案源码 Rollup
  • 38.初始化代码 JS-Loader（2KB） Thunder-State Thunder-Plugin 业务源码 嵌⼊入到 HTML 执⾏行行阶段
  • 39.⽅方案收益 收益叠加起来才可怕 流量量节省 单⻚页⾯面上百K ⽤用户会节省流量量，请求少。 服务会减少⼀一点开⽀支，蚊⼦子 腿细也是⾁肉 覆盖率 100% LS降低存在覆盖100% SW占⽐比40% 主要看⾃自⼰己业务的⼿手机情况 SW会上升，IOS，Android 越来越好 性能提升 加载速度快 但LS记载提升15% SW相对LS⼜又提升22% 如果本来就没有做基础优化， 这个提升会更更多
  • 40.每个⼈人⼼心中都有⼀一个哈姆雷雷特 PWA—意义 我⼼心中 progressive是⽅方式 ⽤用户体验是核⼼心 业务收益是根本
  • 41.
  • 42.
  • 43.
  • 44.