QQ会员H5架构优化实践--赖文辉@PHPCON2017
2020-02-27 214浏览
- 1.QQ会员H5架构优化实践 赖文辉
- 2.概要 2009年 1、个人简介 2、业务架构要求 3、架构优化实践 4、QA
- 3.个人简介 2009年 2010年 2012年 2013年
- 4.QQ会员 宇宙第一大包月服务 年轻、个性、酷炫 运营为主
- 5.业务架构要求 迭代快 高效率 体验好 高性能 人民币 高质量
- 6.高性能 高性能 高性能 高效率 高质量
- 7.Hybrid模式 web app native app 1、接口丰富 1、系统接口少 2、性能体验好 2、性能体验差 3、开发成本高 4、迭代周期长 Hybrid 3、开发成本低 4、快速迭代
- 8.Hybrid模式最大的挑战 有多慢？ 慢在哪里？
- 9.缺乏统一的测速体系 没有一套基于Hybrid页面的测速体系
- 10.缺乏统一的测速体系 没有一套基于Hybrid页面的测速体系
- 11.Hybird测速体系建设 客户端 客户端 响应耗时 webview耗时 网络耗时 机型 平台 网络 测速 模型 是否预 加载 是否离 线包 手Q版 本 页面 页面 首屏耗时 可交互耗时
- 12.Hybrid页面耗时(android) 客户端耗时 ( 2030 ms) 网络耗时 （1473 ms） 页面耗时 （1579 ms） 创建webview、 获取登录态等 创建链接，数 据传输 页面资源加 载、渲染等 点击 发起请求 页面开始加载 首屏可见 首屏可交互
- 13.性能优化1.0 Browser WebServer CDN 请求 HTML 前端渲染 拉取css、JS 返回 权限校验 JS逻辑重 返回 获取数据1 返回 CGI请求多 获取数据2 返回 构建页面 CGI
- 14.性能优化2.0 WebServer (PHP) Browser Server 请求 权限校验 返回 服务端渲染 获取数据1 返回 JS代码减少 获取数据2 返回 HTML 数据服务端获取 拉取css 、JS 返回 交互 CDN
- 15.性能优化3.0 WebServer (PHP) Browser Server 请求 权限校验 获取数据1 数据查询并行化 获取数据2 返回 JS localStorage缓存 返回 返回 HTML 公共类库复用&离线 接口并行查询proxy CDN请求JS 缓存拉取JS localStorage&离线包 交互 CDN
- 16.性能优化4.0 WebServer (PHP) Browser Server 请求 权限校验 获取数据1 首屏分离，先加载首屏 获取数据2 返回 首屏去除类库依赖 返回 首屏HTML、 CSS、JS 首屏依赖js\css打入页面 返回 交互 返回非首屏HTML 拉取非首屏CSS、JS 返回 交互 CDN
- 17.图片优化
- 18.图片格式优化--接入成本高
- 19.新图片格式--页面透明接入方案
- 20.更进一步-图片自适应
- 21.图片自适应--页面透明接入方案
- 22.优化效果
- 23.性能优化总结
- 24.性能后效果 客户端耗时 ( 691 ms) 网络耗时 （859 ms） 页面耗时 （392 ms） 创建webview、 获取登录态等 创建链接，数 据传输 页面资源加 载、渲染等 点击 发起请求 页面开始加载 首屏可见 客户端耗时、网络耗时依然大，常规手段已经无法优化 首屏可交互
- 25.还能怎么优化：sonic sonic是一种动态页面缓存方案
- 26.数据模版分离
- 27.前后端交互协议
- 28.sonic首次 webServer APP sonic 点击按钮 webserver 并行请求 启动 webView 是 Etag、Temlate-Tag、HTML 加载页面 是否有离线缓存 否 渲染页面 模版数据分离并缓存 离线首屏 是否sonic首次
- 29.sonic页面无变更 webServer APP Etag、Temlate-Tag sonic 点击按钮 webserver 并行请求 启动 webView 加载页面 是否有离线缓存 是否sonic首次 是 否 渲染离线首屏 离线首屏 无需任何操作 否 httpcode:304是否页面变更
- 30.sonic数据更新 webServer APP Etag、Temlate-Tag sonic 点击按钮 webserver 并行请求 启动 webView 是否sonic首次 加载页面 是否有离线缓存 否 是 是否页面变更 渲染离线首屏 离线首屏 是 异步更新页面数据 异步更新离线缓存 数据更新 Etag Temlate-Tag 数据：{nickName:'飞浪'} 否 是否模版变更
- 31.sonic模版更新 webServer APP Etag、Temlate-Tag 点击按钮 sonic webserver 并行请求 启动 webView 是否sonic首次 加载页面 否 是否有离线缓存 是 渲染离线首屏 是否页面变更 离线首屏 是 刷新页面 更新离线缓存 Etag、Temlate-Tag、HTML 是否模版变更 是
- 32.sonic优化效果 页面变更频率越低，优化越明显
- 33.sonic各状态优化效果
- 34.提升sonic缓存率，减少刷新场景 1、模版清除功能 2、sonic预加载 3、合理拆分模版和数据，尽量减少模版变更
- 35.sonic优化后效果 在有cache的情况下，实现和native接近的秒开体验
- 36.高效率 高性能 高效率 降低开发成本，提升系统可维护性 高效率 高质量
- 37.单页面应用 前端 CGI层 htm l JS 页面1 CGI 后台服务 CGI1 htm l JS 页面2 CGI 后台服务 CGI2 htm l JS 页面3 CGI 后台服务 CGI3 页面独立 开发周期长 用户 维护困难 各页面独立，自成体系 CGI站点多(20+ ) CGI接口多(300+ )
- 38.框架规范开发 路由 负责公共业务逻辑的 封装，实现接口100% 复用，同时负责对后 逻辑层 拉取配置信息 模块1 端接口报错和性能进 行监控 KISS原则 模块化解耦 PHP端直出页面 （kfram ework） 控制器 用户 模版渲染 逻辑层 服务访问层 后台服务 模块2 逻辑层 服务访问层 后台服务 模块3 统一开发规范， 模块化管理，共 逻辑层 享类库 逻辑分层 统一前端架构 首屏页面渲染 公共JS类库 JS加载执行 seajs模块管理 1.合并加载优化 2.本地缓存优化 业务模块A 业务模块B 加载完成 异步 调用 CGI
- 39.多站点应用 PHP端直出页面 路由 多站点复用 工程化 （kfram ework） 用户 PC官网 触屏官网 手Q H5 控制器 控制器 控制器 模版渲染 拉取配置信 逻辑层 模版渲染 模块1 后端 息 逻辑层 服务访问层 逻辑层 服务访问层 模版渲染 模块2 并行proxy 模块3 后端server1 业务层 为减少类库依 赖，首屏JS采用 原生写法 首屏页面渲染 （首屏资源内联） 统一前端架构 公共JS类库 非首屏页面渲染 浏览器缓存 JS加载执行 localstorage缓存 CDN 加载完成 webpack模块化 管理 后端server1 业务模块A 业务模块B
- 40.活动开发自动化
- 41.活动开发自动化 设计师 运营人员 设计稿 画布 组件实例 开发人员 用户 开发 拖拽生成 组件 访问 执行引擎 单页面 发布平台 H5页面
- 42.活动开发自动化效果
- 43.高可用 高性能 高质量 高效率 高质量
- 44.持续集成 项目周期 发布后 (20分钟体检) 测试环境 测速监控 JS错误监控 安全扫描 ATT CGI回归 开发环境 机器负载监控 页面功能自动回归 页面功能自动回归 安全扫描 分钟 页面功能自动回归 H5专项 小时 天 监控粒度
- 45.完善的监控体系 流量监控 开通渠道监控 js错误监控 功能自动化监控 测速监控 CGI返回码监控 用户反馈监控 白屏率监控 资源加载监控 客户端监控
- 46.完善的监控体系 PHP错误 机器负载监控 coredump监控 业务日志监控 服务调用 成功率监控 服务进程监控 L5监控 接口拨测监控 服务端监控 接口调用量 监控 日志监控
- 47.
