平台及酒旅事业群李李罡 李李罡前端⼯工程师，平台前端基础架构 曾经从事桌⾯面软件开发⽬目前负责前端发布系统、混合应⽤用框架产品/sartrey 现状 迭代速度快业务数量量多业务周期短 约束 App发版周期包⼤大⼩小 ⽅方案 基于WebView基于Native动态化 Hybrid应⽤用 设备能⼒力力基础功能业务功能 设备 提供底层⽀支持 桥
 连接设备与容器器 WebViewWebViewWebView 容器器 承载⻚页⾯面 我们的产品与服务 容器器 •接⼊入多个App，Crash率极低•⽀支持离线化、⻓长连接通道 桥 •提供基础API，⽀支持扩展业务API•推进多个历史框架收敛下线•⽀支持微信、⽀支付宝等第三⽅方App 100个业务桥需要100次发版吗？如何屏蔽复杂⽹网络环境的体验差异？怎样收集数据更更有利利于发掘数据内涵？ 桥鉴权 简化改善效率 ⽹网络优化 分段各个击破 数据收集 克制避免⻛风险 案例例⼀一·桥鉴权 桥的加载与调⽤用 加载统⼀一桥 解析UA 加载桥实现 加载 调⽤用统⼀一桥 桥鉴权 鉴权成功 未通过桥鉴权 调⽤用失败 设置回调 调⽤用 调⽤用NativeNative回调 清除回调 业界⽅方案OAuth2 优点与缺点 •完整、安全、标准•复杂、缓慢、⻛风险传递 典型应⽤用 •微信第三⽅方应⽤用登录•美团桥鉴权（旧） ⻚页⾯面
1.发JSONP请求到业务鉴权服务器器
3.返回token数据 业务鉴权服务器器
7.鉴权完成
4.调⽤用init(token)⽅方法
2.获取token
5.客户端和中央鉴权服务器器校对 客户端
6.返回鉴权结果 中央鉴权服务器器 ⽤用户侧鉴权 业务实际情况 •⻚页⾯面偶尔出现功能失效•弱⽹网、鉴权服务宕机 •99%的⻚页⾯面是公司，1%的⻚页⾯面是第三⽅方 改进⽅方案 •本地验证内部业务•⽹网络验证第三⽅方业务•验证只做⽩白名单匹配 ⻚页⾯面 客户端 99% 业务鉴权服务器器 中央鉴权服务器器 1% 开发者鉴权 业务实际情况 •申请业务桥需要等待容器器组件发版•发版节奏不不⼀一致、升级引⼊入新⻛风险 •平均每周都有业务桥申请 改进⽅方案 •使⽤用数字签名验证替代⽩白名单•授权⽅方掌握私钥提供签名•容器器携带公钥和验证逻辑
5.代码中写⼊入签名 业务
4.分发签名
1.申请
3.⽣生成签名 容器器团队
2.调取 业务代码
6.校验签名 容器器内置：公钥 数字签名 安全存储：私钥 简化桥鉴权 发起桥调⽤用 否 是否已鉴权 是 使⽤用缓存结果 JSSDK 全局配置下发 私钥⽣生成桥签名 命中⽩白名单 检查调⽤用源 公钥验证桥签名 未命中⽩白名单 调⽤用失败 Native 调⽤用成功 ⽅方法匹配 桥⽅方法匹配 ⽅方法不不匹配 调⽤用失败 案例例⼆二
·⽹网络优化 ⻚页⾯面的加载渲染 移动端⻚页⾯面⾸首屏时间消耗=资源加载+⾸首屏渲染+脚本执⾏行行 *受限于设备性能，⻚页⾯面渲染和脚本执⾏行行时间需要重视*参考 WebView初始化建⽴立连接 加载主⽂文档 加载脚本 执⾏行行脚本 加载样式 ⻚页⾯面渲染 ⻚页⾯面运⾏行行 ⽆无反馈 ⽩白屏 展现 渐进式⽹网络优化 主⽂文档静态资源数据请求 请求前 前端业务⽇日趋复杂资源体积膨胀、请求数量量增加 请求中 ⽤用户⽹网络环境复杂劫持篡改频现、弱⽹网情况常⻅见 HTTP缓存离线化 HTTPDNS、HTTPS、HTTP2专⽤用链路路 离线化/所谓PWA PWA •渐进式Web应⽤用•ServiceWorkers、AppManifest、Push •承载业务⽆无关逻辑 LocalStorage缓存 •定制Loader强耦合发版流程•重度侵扰业务开发、容量量和能⼒力力受限•兼容性良好 ServiceWorkers •本质是⽹网络代理理+独⽴立JS进程•Android5.0+，⽀支持占⽐比约84%•iOS11.3已⽀支持 统⼀一容器器离线化 •类似ServiceWorkers•基于请求拦截实现•iOS部分⽀支持/WKWebView暂不不⽀支持 离线化/不不是银弹 不不要迷信离线化 •我们不不可能⽐比浏览器器内核更更懂缓存•较HTTP缓存的⽹网络收益甚微 •弱⽹网成功率提升、⾸首次性能提升 主⽂文档配合 •避免完全SSR•AppShell+客户端渲染 •动态⽣生成主⽂文档何苦离线化 installactivate fetch 预加载资源/⽆无法覆盖⾸首次访问初始化与清理理/伴随install 使⽤用缓存或发起请求/确保能过期 离线化/主逻辑 ⻚页⾯面加载 代理理 请求拦截 访问 线上服务 读/写 注册离线化 桥调⽤用 离线缓存 下发 离线打包 类似ServiceWorkers ⻚页⾯面 通⽤用的缓存拦截 容器器 可选开启离线打包 服务 离线化/离线包预下发 线上资源
1.选择或爬取 打包服务
2.⽣生成ZIP 计算全量量包 增量量服务 3.bsdiff 计算增量量包 CDN
4.发布到CDN 分发服务 3.5.策略略计算 计算分发策略略 链路路优化/⻓长连接 基本假设 •⾮非HTTP请求不不会被劫持•传输数据短⼩小⾼高频 业务相性 •AJAX请求最适合•主⽂文档需要权衡•静态资源最不不适合 保持⻓长连 ⻓长连接集群 专线打通 客户端 103.37.152.41 DNSServer WWW 业务服务 链路路优化/容器器对接⻓长连接的踩坑过程 第⼀一坑/桥性能有瓶颈 •evaluateJavascript固有消耗 •执⾏行行速度正相关响应体积 •⽤用拦截器器替代桥 •桥性能瓶颈⽆无从优化 第⼆二坑/拦截处理理POST 第三坑/POST跨域协商 •shouldInterceptRequest缺陷 •安卓不不⽀支持拦截POST •⽤用⾃自定义header模拟body •⻚页⾯面请求添加header承载body•拦截后header换成POSTbody •⾃自动发起OPTIONS •浏览器器⾃自动进⾏行行跨域协商•⾃自定义header参与协商内容 •篡改OPTIONS协商内容 •移除⾃自定义header•避免服务端感知到这⼀一层 链路路优化/WKWebView对接⻓长连接 XHRJSONP UIWebView::NSURLProtocol 完美拦截所有请求 WKWebView::WKURLSchemeHandler 所有信息封装在URL负载有限 iOS11.0+ 案例例三·数据收集 容器器与桥的关键指标 流量量 ⽤用量量 访问成功率 桥成功率 性能 桥性能 ⻚页⾯面性能 请求上报请求URL+状态+来源URL 桥上报桥名称+状态+来源URL 计算设施 算⼒力力成本 •维度展开的乘法规模 •采样丢弃+减少维度 •重CPU计算任务 •调度算法 猎豹通道 Lighter Falcon报警性能平台 上游数据队列列 Stream 下游数据队列列ElasticSearch 优化数据上报 总量量控制 •基于设备ID采样•⽩白名单强制上报•容器器关闭时⼀一定上报 数据压缩 •⼀一次请求聚合更更多记录•移除query/cookie•Gzip 误差 10% 采样率0.01采样率0.5 1%1e4 量量级 1e7 优化前优化后 请求数减少80%，流量量减少75% 优化数据构成 上报那么多数据，你真的看过吗 •每天100WURL×100WURL的⽇日志•每天上报全中国所有的地理理坐标 简单的策略略减省⼤大量量的冗余 •URL泛化•优化后每个维度减少99%冗余数据 •地理理⽹网格•从⽆无穷多的坐标到有限的地理理⽹网格 /trip/123/456/trip/abc/def /trip/*/* 116.487353,40.008305 数据规模e17 116.5,40.0 数据规模e6 容器器与桥的原则 性能良好功能丰富体验⼀一致运⾏行行稳定 最次要最优先 改善加载渲染 + 补充设备功能 + 统⼀一容器器与桥 + 业务流程安全 Q&
A 桥的通信原理理 JavaScript •JsPrompt/Android•加载代理理/iOS•⽅方法映射/Android+iOS •loadURL•evaluateJavascript•callback的调起与清理理 Native 容器器的内核选型/Android WebView •基于系统WebView增强•独⽴立于系统升级 •从Android4.4开始 桥通信 •JsPrompt •Cordova •JavascriptInterface •存在安全问题/4.2+注解显式启⽤用 PostCSS 容器器的内核选型/iOS WebView •基于UIWebView增强•⽀支持WKWebView •进程隔离/不不⽀支持任意拦截 桥通信 •shouldStartLoadWithRequest •构造iframe发起请求•Cordova •WKScriptMessageHandler UIWebViewWKWebView 内存⽤用量量 UIWebViewWKWebView 渲染时间 30+5×n2×n+x WebView/Native动态化 WebView •基于Web技术•跨平台、多App复⽤用•性能⼀一般/功能依赖桥 Native动态化 •基于⾃自定义DSL•⽤用户体验好•缺乏规范/维护成本⾼高 功能 WebView RN/Weex Native动态化 性能