手机QQ会员H5加速方案——sonic技术内幕
版权声明:本文由况鹰原创文章,转载请注明出处:
文章原文链接:https://www.qcloud.com/community/article/141
来源:腾云阁 https://www.qcloud.com/community
目前移动端越多越多的网页开始H5化,一方面可以减少安装包体积,另一方面也方便运营。但是相对于原生界面而言,H5的慢速问题一定被大家所诟病,针对这个问题,目前手Q存在几种方案,最常见的便是离线包方案,但离线包存在几个问题:
- 滞后性,内容显示不及时;
- 覆盖率,很难达到100%;
- 校验耗时,由于离线包的素材较多,加载时安全性校验非常多;
除了上面的缺陷外,对于一些UGC架构的业务,离线包的支持也不是特别好。针对这些问题,业界存在一种基于TCP长连接的新方案(WebSo),专注于提高首屏的加载速度。WebSo的思路来源主要是由于android端在初始化webview和http拉取资源串行执行时都很耗时,如下图:
WebSo基于这一前提,把串行变并行,并利用tcp长连接替换掉http,另外一个突破是针对html内容的动态性,增加了模板和数据分离,变化频率较多的数据定义为data,变化频率较少的定义为template,基本实现流程如下图:
手机QQ针对个别页面最开始采用的也是WebSo这种方案,不过在灰度过程中发现数据不理想,尤其是首次加载及模板变更时数据非常糟糕,仔细分析发现主要的原因包括下面几点:
- tcp长连接信令拉取资源时要经历跨进程、服务器中转、信令排队、加解密,导致时间过长;
- tcp长连接信令需要下载完整个html才能塞给内核渲染,不能利用内核的边下载变渲染;
- 数据、模板变更时会引起整个页面重刷,导致体验很差。
- 异常时url不会智能切换
针对这几点问题,为了让用户的体验达到更好,增值产品部提出了sonic方案,第二部分我们来介绍一下具体的sonic实现细节。
一.实现细节
我们从两个场景来介绍具体实现。
第一种场景是用户首次或者缓存失效时加载页面,与WebSo一样,sonic在初始化webview的同时也会并行发起http连接,在webview初始化好之后会在内核与http流之间建立桥接,桥接流在不同机型不同网速情况下可能有三种不同状态:全内存流、内存流+网络流、网络流。在桥接流关闭时,我们会在终端根据模板数据拆分规则对html进行内容分割,并记录模板和数据的tags信息,利用这些tags信息,可以在下次与服务器通信时进行数据校验和更新。具体实现思路如下:
第二种场景是用户二次进入页面,通过手Q灰度测试的观察这种场景的占比较高,普遍情况下会在七成以上。这种场景我们会优先加载缓存,并且根据http(s)返回码的同步状态,进行不同的处理。sonic首先会根据cacheoffline做不同的智能开关处理;然后根据本地的缓存状态做不同的状态转换:如果完全命中缓存,则不作任何处理;如果发生模板变更,处理逻辑会有点复杂,sonic会根据不同机型和网络环境做智能切换处理,速度较快时会拉取完html流交给内核渲染,速度不快时仍然会建立桥接流,并且会对内容进行拆分;如果发生数据变更,sonic会对数据进行diff处理,和页面通过js进行通信进行刷新,这样做的好处一方面可以不影响用户的体验,另一方面速度也更快。具体实现思路如下:
为了达到更好的效果,后续我们可能还会加入dns的优化,这样做的好处是减少域名劫持,不过目前的方案已经能达到非常不错的效果了。
二.数据对比
下面我们分别针对vip中心首页在四个场景的实验数据来进行对比(android端外网灰度数据基本一致,ios速度很快暂时没有采用此方案),图中每行的意义如下:
- webviewStart-clickStart:点击url到activity的oncreate首行时间;
- loadUrl-clickStart:点击url到loadurl的时间;
- head-clickStart:点击url到页面首行的执行时间;
- domready-clickStart:点击url到dom准备好的时间;
- active-clickStart:点击url到页面交互的时间。
其中active-clickStart一般用来衡量页面加载时的总时间。
第一种场景是首次启动web进程、无缓存时的数据,可以发现首次启动sonic比WebSo加载耗时减少53%:
第二种场景是非首次启动web进程、模板更新时的数据,可以发现sonic比WebSo减少22%:
第三种场景是非首次启动web进程、模板不变数据更新的数据,sonic比WebSo减少60%:
第四种场景是非首次启动web进程、完全命中缓存的数据,sonic和WebSo的数据差不太多:
从实验和手Q灰度的情况看,整体而言,sonic在绝大部分场景下已经能够达到非常好的体验,后续我们也会继续进行进一步的优化,争取达到更好的体验效果。
手机QQ会员H5加速方案——sonic技术内幕的更多相关文章
- 腾讯QQ会员技术团队:以手机QQ会员H5加速为例,为你揭开sonic技术内幕
目前移动端越多越多的网页开始H5化,一方面可以减少安装包体积,另一方面也方便运营.但是相对于原生界面而言,H5的慢速问题一定被大家所诟病,针对这个问题,目前手Q存在几种方案,最常见的便是离线包方案,但 ...
- 腾讯技术分享:GIF动图技术详解及手机QQ动态表情压缩技术实践
本文来自腾讯前端开发工程师“ wendygogogo”的技术分享,作者自评:“在Web前端摸爬滚打的码农一枚,对技术充满热情的菜鸟,致力为手Q的建设添砖加瓦.” 1.GIF格式的历史 GIF ( Gr ...
- 腾讯QQ会员技术团队:人人都可以做深度学习应用:入门篇(下)
四.经典入门demo:识别手写数字(MNIST) 常规的编程入门有"Hello world"程序,而深度学习的入门程序则是MNIST,一个识别28*28像素的图片中的手写数字的程序 ...
- 腾讯技术分享:Android版手机QQ的缓存监控与优化实践
本文内容整理自公众号腾讯Bugly,感谢原作者的分享. 1.问题背景 对于Android应用来说,内存向来是比较重要的性能指标.内存占用过高,会影响应用的流畅度,甚至引发OOM,非常影响用户体验.因此 ...
- 移动端本地 H5 秒开方案探索与实现
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 企业微信移动端项目中有需求要展示数据趋势的可视化图表,经过调研,最终决定以单页面 H5 来完成,对 APP 里的一些使用 H5 实现的功能模 ...
- QQ会员AMS平台PHP7升级实践
作者:徐汉彬链接:https://zhuanlan.zhihu.com/p/21493018来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. QQ会员活动运营平台(AMS ...
- QUIC协议的分析,性能测试以及在QQ会员实践
WeTest 导读 你听过HTTPS.HTTP2.0.SPDY,但是这些应用层协议都是基于可靠的传输层协议TCP来实现的.那么,基于高效的UDP协议有没有一种相对可靠的应用层协议呢? Why QUIC ...
- 日请求亿级的 QQ 会员 AMS 平台 PHP7 升级实践
QQ会员活动运营平台(AMS),是QQ会员增值运营业务的重要载体之一,承担海量活动运营的Web系统.AMS是一个主要采用PHP语言实现的活动运营平台, CGI日请求3亿左右,高峰期达到8亿.然而,在之 ...
- 日请求亿级的QQ会员AMS平台PHP7升级实践
版权声明:本文由PHP7升级项目组原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/74 来源:腾云阁 https://www ...
随机推荐
- SpringMVC HandlerMethodArgumentResolver自定义参数转换器 针对HashMap失效的问题
自定义Spring MVC3的参数映射和返回值映射 + fastjson 自定义Spring MVC3的参数映射和返回值映射 + fastjson首先说一下场景:在一些富客户端Web应用程序中我们会有 ...
- hdu3065 病毒侵袭持续中 AC自动机入门题 N(N <= 1000)个长度不大于50的模式串(保证所有的模式串都不相同), 一个长度不大于2000000的待匹配串,求模式串在待匹配串中的出现次数。
/** 题目:hdu3065 病毒侵袭持续中 链接:http://acm.hdu.edu.cn/showproblem.php?pid=3065 题意:N(N <= 1000)个长度不大于50的 ...
- NYOJ-451-光棍节的快乐
光棍节的快乐 时间限制:1000 ms | 内存限制:65535 KB 难度: 描写叙述 光棍们,今天是光棍节.聪明的NS想到了一个活动来丰富这个光棍节. 规则例如以下: 每一个光棍在一个纸条上写 ...
- No supported encrypter found. The cipher and / or key length are invalid.
终端使用如下命令: php artisan key:generate 将生成的key复制到config/app.php替换82行的APP_KEY键值.
- 跑在Docker下的RHEL7编译Java8源码包
1.运行Docker时需要加参数--cap-add=SYS_PTRACE,比如: docker run --cap-add=SYS_PTRACE --name buildjava8 -v /opt/r ...
- pip -i 和 -U 参数
例子: pip install -i https://pypi.tuna.tsinghua.edu.cn/simple -U funcat -i: 指定库的安装源 -U:升级 原来已经安装的包,不带U ...
- linux -- Ubuntuserver图形界面下安装、配置lampp、phpmyadmin
PHP开发和服务器运行环境首选LAMP组合,即Linux+Apache+Mysql+Php/Perl/Python,能最优化服务器性能.如何在本地电脑Ubuntu 中安装和配置LAMP环境搭建?Ubu ...
- hdu 1281 棋盘游戏 (二分匹配)
//是象棋里的车 符合二分匹配 # include<stdio.h> # include<algorithm> # include<string.h> using ...
- RSQLite 操作sqlite数据库
RSQLite 可以在R中方便的创建sqlite数据库,并进行检索, 这个R包依赖于DBI包 github 上的地址:https://github.com/rstats-db/RSQLite gith ...
- 在Delphi中编写res文件
delphiimagedosinterfaceborland脚本先用记事本编写一个rc的文件. 如内容为: _Comms RCData Comms.jpg Comms.jpg为图片名称, 然后在这个r ...