QQ Hybrid的演进

QQHybrid的演进大纲第一部分sonic第二部分reshape第三部分持续集成业务形态传统页面的动静分离DataServercgicgiDataServerCDNlocalStroagePageRefreshDOM可交互传统页面展示流程clicklaunchWebviewjson.htmljson传统模式的几个问题Webview创建时网络空等HTML中并不包含待展示的内容数据动态构造DOM的时间开销静态直出+离线预推CDNclickPage可交互WebviewofflineCacheofflineServerlaunch.htmlrequest静态直出+离线预推DataServerCDN可交互clickRefreshDOMPageWebviewofflineCacheofflineServerlaunch.htmljsonrequest静态直出+离线预推DataServerCDN可交互clickRefreshDOMPageWebviewofflineServerlaunch.htmlofflineCachejsonrequestdata_v3data_v2data_v1data_v0自动构建管理端数据代码文件／资源node.jsCDNDataServerjsonofflineServervnues离线包推送.html.js.jpg.css=200200.pkg.v9200.pkg.v8200.pkg.v7………200.pkg.v1QQ200.pkg.v7offline计算200.pkg.v9.diff_v8200.pkg.v9.diff_v7200.pkg.v9.diff_v6………200.pkg.v2.diff_v1offlineServeroffline流控200.pkg.v9.diff_v7网络耗时页面耗时总耗时传统页面离线包8707351605非离线包150911762685静态直出离线包8652391104非离线包11692091378静态直出+离线预推Adnroid统计数据动态推荐动态直出可交互WebviewPageDataServerNode.jsclicklaunchrequest.htmljson动态缓存可交互WebviewPageNode.jsclicklaunchrequest.htmlsonicBridgehtmlCache.htmlreload动态缓存页面刷新体验很差减少传输数据//sonic.jsfunctionrefresh(data){varresult=JSON.parse(data.result);for(varkeyinresult){varhtml=result[key];varid=key.match(/\{(\w+)\}/).pop();vartarget=document.getElementById(id);if(target){target.innerHTML=html}}}Node.jsdatasonicBridgedatarefreshDOM首次加载HTTP/1.1200OKDate:Tue,08Nov201608:16:34GMTContent-Type:text/html;charset=UTF-8Content-Length:67039!DOCTYPEhtmlhtml.....divclass=page-wrapper!--banner轮播图--divclass=ui-sliderid=banner!--sonicdiff-banner--Connection:Keep-AliveX-Powered-By:TSW/Node.jsCache-Control:no-cacheCache-Offline:truespanstyle=.../spanEtag:58e5385be3d28c4c8bd6891e73324b98c498c06d/litemplate-tag:2af38060390507927dd3944211cc0f85b7e42b75/ultemplate-change:true!--sonicdiff-banner-end--/div/div…../htmlResponseHeaderContentdata:{{title}:title个性装扮/title,{banner}:ulclass=ui-slider-contentlidata-url=…,{nav}:div...div{hot}:div...div{colorType}:div...div{albums}:div...div}ResponseHeaderContent二次加载HTTP/1.1200OKDate:Tue,08Nov201608:17:37GMTContent-Type:text/html;charset=UTF-8Content-Length:37757Connection:Keep-AliveX-Powered-By:TSW/Node.jsCache-Control:no-cacheCache-Offline:trueEtag:f1312c2e3b4fb563e26cb18600c6d083b7142199template-tag:2af38060390507927dd3944211cc0f85b7e42b75template-change:falsesonicCache减少提交页面数据title:title…/titlebanner:banner…/bannernav:nav…/navhot:hotYYY/hotalbums:albums…/albums本次data(37KB)htmltemplatedataCache完整页面缓存，下载加载时使用分离出来的模版，与下次data合并为新html减少提交页面数据title:title…/titlebanner:banner…/bannernav:nav…/navhot:hotYYY/hotalbums:albums…/albums本次data(37KB)hot:hotYYY/hot提交页面data(9KB)title:title…/titlebanner:banner…/bannernav:nav…/navhot:hotXXX/hotalbums:albums…/albums上次cache数据-=sonicCachesonic模式可交互clickWebviewNode.jsPagesonicBridgehtmllaunchrequest.htmldata.htmldata-diffrefreshDOMtemplatedataCache.html-datadata.htmldata占比全网2G3G4GWI-FIsonic首次加载33%18832566103815342014sonic数据刷新43%99699410387651110sonic模版更新24%22683136283719762373sonic模式Adnroid统计数据是否利用持久连接HttpProxyQQ.htmlWebviewNode.jssso是否利用持久连接HttpProxyQQ.htmlhttpstreamencryptdecryptsocketpackageWebviewNode.jssso可交互clickQQHybridvnuesPagerefreshDOMsonicBridgelaunchWebviewrequest.htmldata-diffofflineServerofflineCachesonicCachejs,imgcss.htmldataCDNnode.jsWebScopeNativeServerreshape集成\运营httpjsbridge名片商城字体商城主题商城image/jpeg280K316K272Kimage/png3K16K3Kjava_script97K71K60Ktext/html15K27K66Ktext/css11K0K0K页面流量Adnroid统计数据春节红包流量25%19%56%现网图片离线包预推图片其他图片格式5243200120100806040文件大小jpgwebPsharpP解码速度6.520667345015336701020304080706050三星note5oppofind7小米2jpgwebPsharpP应用成本sharpP图片业务页面sharpP兼容逻辑普通图片sharpP图片图片存储图片转换逻辑普通图片H5CDN流量浪费750px750px*200px640px480px屏幕适应640px*170px750px480px*128px750px*200px640px480px750px*200px图片解码缓存然后返回生成对应图片返回根据终端能力请求对应图片格式带上终端能力发起请求sharpPSDK透明接入，无需改造提供图片解码及终端当前能力根据终端能力请求对应图片格式并缓存根据请求计算生成对应图片reshape业务页面WebviewCDN节点CDN源站reshapeUser-Agent:AndroidQQNetType/WIFIPixel/750Accept:image/sharpP,image/webp,image/*,*/*;q=0.8reshapebanner.jpg.750banner.jpg.640banner.jpg.480banner.jpg.webP.750banner.jpg.webP.640banner.jpg.webP.480banner.jpg.sharpP.750banner.jpg.sharpP.640banner.jpg.sharpP.480banner.jpg.750banner.jpg.640banner.jpg.480banner.jpg.webP.750banner.jpg.webP.640banner.jpg.webP.480banner.jpg.sharpP.750banner.jpg.sharpP.640banner.jpg.sharpP.480WebviewCDN源站CDN节点banner.jpgUser-AgentAceept回源发布reshapeAccept:image/sharpPUser-Agent:Pixel/750Size:100px*100pxType:image/sharpPAccept:image/sharpPUser-Agent:Pixel/640Size:85px*85pxType:image/sharpPCDNbanner.jpg100x100reshape规则×运营商Serverbanner.jpg(sharpP格式)用户A请求sharpP缓存并返回sharpP请求sharpP返回sharpPQQCDN用户B请求jpg从缓存返回sharpPbanner.jpg(jpg格式)QQ缓存后对所有请求均返回sharpP图片，导致不支持sharpP的终端显示异常CDN中间缓存问题运营商Server中间缓存问题,User-Agent:AndroidQQNetType/WIFIPixel/750Accept:image/sharpPimage/webp,image/*,*/*;q=0.8Vary:Accept，User-Agentreshape100%49%原图sharpPAdnroid统计数据H5快速运营时的稳定性已有业务功能的稳定可用持续发布中保证页面性能不被劣化QTA(QuickTestAutomation)WPT(WebPerformanceTest)前端布署流程QTAWPT测试环境正式环境告警系统综合评分监控Daily部署前测速监控客户端耗