跨容器高性能的離線化方案在美團的實踐和探索.pdf

《跨容器高性能的離線化方案在美團的實踐和探索.pdf》由會員分享，可在線閱讀，更多相關《跨容器高性能的離線化方案在美團的實踐和探索.pdf（39頁珍藏版）》請在三個皮匠報告上搜索。

1、跨容器高性能的離線化方案在美團的實踐和探索于秋美團 前端技術專家現在負責智能支付部門前端之前在阿里閑魚項目背景離線化思考&破局思路策略方案&優化方案延伸 Diff服務（Golang）容錯方案&成果總結業務場景二維碼支付是一種聚合支付產品，美團 線下收單產品之一，為商戶提供聚合支 付的收銀解決方案。并且支持多種支付方式，目前支持用戶 使用微信、支付寶、美團、點評掃碼 進行付款操作。特點挑戰方案覆蓋面廣弱網環境緩存利用通道多樣可控性低緊靠標準競爭激烈不能丟單兜底降級快速收銀加載速度性能優化皮一下很開心離線化方案移動流行曲目網絡攔截離線包鴻溝容器多樣Web常規思路CookieLocalStorage

2、Application CacheIndexedDB缺陷不夠完美PWA核心能力Web App ManifestService WorkerNotification API&Push APIApp SkeletonService Worker獨立進程（很厲害）攔截請求（很熟悉）緩存文件（更熟悉）更新緩存（很開心）異步處理（超級爽）用戶界面前端服務服務&CDN資源&數據用戶界面資源&數據前端服務Service Worker第三方服務Cache Storage攔截請求資源&數據 const SUPPORT_SERVICE_WORKER=Boolean(isBrowser&(serviceWorker

3、 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.addEventLi

4、stener(message,event=/通信、數據收集、緩存管理 )注冊初始化激活攔截通信等攔截通過 SW緩存的資源不能是 http 下的資源，在 https 下加載 http 資源會引發 Mixed Content,導致資源不能被正常加載。如果有不能避免的 http 內容引入，嘗試在 excludes 中加入 http:/。SW中GlobalScope 的 Navigator 的 UserAgent 和 封裝過的Browser 的UA是不一致的cacheFirstcacheOnlycache&RefreshnetworkFirstStark DiffRevalidate總是要再發版的Di

5、ff服務增量更新CDNAPI增量更新服務請求增量更新離線化數據采集客戶端（Thunder.js）更新決策數據上報分布式存儲數據統計管理平臺資源管理身份認證上傳記錄讀取寫入在增量更新服務的最外層有CDN進行保護 正常情況下，即使有突發流量，也會抵擋絕大部分請求API服務回源CDN如何面對海量突發流量CDNAPI計算將對外的API拆解成單獨的服務 API服務保持只讀，化解流量壓力，使得計算服務可以專心做計算單機緩存分布式存儲查詢補丁文件計算服務回源請求API服務查詢不到 請求計算如何面對海量突發流量CDNAPI計算以壓測結果對單機QPS進行限制 對于超額流量，直接返回新文件 無論哪種結果，最終會緩

6、存在CDNdiff計算讀取新文件如何面對海量突發流量CDNAPI計算上線前對增量進行預熱 預熱服務與主服務隔離 只共用存儲線下預熱工具c線上API上線前上線后預熱集群線上集群計算服務如何面對海量突發流量線路故障 每一層都有單機內存Cache，減少網絡故障影響存儲故障 利用公司穩定存儲平臺而不是自建存儲，避免磁盤壞道等尷尬場面使用兩個不同的分布式存儲平臺，互為替代CDN故障 雙CDN，隔離來自CDN故障的風險系統故障 CDN會緩存服務的返回，無論是否異常，避免擊穿設計服務降級預案，增量系統癱瘓后請求全量文件，不影響用戶使用如何容災TairMSS互替命中解不開的劫11.3降級LocalStorag

7、e容錯Diff結果拉取異常時候CDN異常時候Diff還原異常項目隔離回顧總結技術方案源碼Webpack-PluginNode-UtilsNodeRollupJS-SDKSWClient業務源碼Thunder-Plugin嵌入到HTML執行階段Thunder-StateJS-Loader（2KB）初始化代碼方案收益單頁面上百K流量節省用戶會節省流量，請求少。服務會減少一點開支，蚊子腿細也是肉100%覆蓋率LS降低存在覆蓋100%SW占比40%主要看自己業務的手機情況SW會上升，IOS，Android越來越好加載速度快性能提升但LS記載提升15%SW相對LS又提升22%如果本來就沒有做基礎優化，這個提升會更多收益疊加起來才可怕每個人心中都有一個哈姆雷特PWA意義我心中progressive是方式用戶體驗是核心業務收益是根本