大厂Data+Agent 秘籍:腾讯/阿里/字节解析如何提升数据分析智能。 了解详情
写点什么

sonic 技术内幕

  • 2019-08-22
  • 本文字数:1884 字

    阅读完需:约 6 分钟

sonic技术内幕

1、历史背景

目前移动端越多越多的网页开始 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 实现细节。

2、实现细节

我们从两个场景来介绍具体实现。


第一种场景是用户首次或者缓存失效时加载页面,与 WebSo 一样,sonic 在初始化 webview 的同时也会并行发起 http 连接,在 webview 初始化好之后会在内核与 http 流之间建立桥接,桥接流在不同机型不同网速情况下可能有三种不同状态:全内存流、内存流+网络流、网络流。在桥接流关闭时,我们会在终端根据模板数据拆分规则对 html 进行内容分割,并记录模板和数据的 tags 信息,利用这些 tags 信息,可以在下次与服务器通信时进行数据校验和更新。具体实现思路如下:



第二种场景是用户二次进入页面,通过手 Q 灰度测试的观察这种场景的占比较高,普遍情况下会在七成以上。这种场景我们会优先加载缓存,并且根据 http(s)返回码的同步状态,进行不同的处理。sonic 首先会根据 cacheoffline 做不同的智能开关处理;然后根据本地的缓存状态做不同的状态转换:如果完全命中缓存,则不作任何处理;如果发生模板变更,处理逻辑会有点复杂,sonic 会根据不同机型和网络环境做智能切换处理,速度较快时会拉取完 html 流交给内核渲染,速度不快时仍然会建立桥接流,并且会对内容进行拆分;如果发生数据变更,sonic 会对数据进行 diff 处理,和页面通过 js 进行通信进行刷新,这样做的好处一方面可以不影响用户的体验,另一方面速度也更快。具体实现思路如下:



为了达到更好的效果,后续我们可能还会加入 dns 的优化,这样做的好处是减少域名劫持,不过目前的方案已经能达到非常不错的效果了。

3、数据对比

下面我们分别针对 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 在绝大部分场景下已经能够达到非常好的体验,后续我们也会继续进行进一步的优化,争取达到更好的体验效果。


作者介绍:


况鹰,腾讯高级工程师,从事过手 Q 传文件、安装包压缩、diy 表情、挂件、聊漫、webview 优化等项目,喜爱研究源代码,不拘一格,对好玩的开源组件很感兴趣~


本文转载自公众号小时光茶舍(ID:gh_7322a0f167b5)。


原文链接:


https://mp.weixin.qq.com/s/YEa1zqjjG7DbAyR19R9xig


2019-08-22 16:433568

评论

发布
暂无评论
发现更多内容

如何训练开发者记忆能力

SEAL安全

开发者 实用技能 记忆

实力领跑 | 旺链科技入选《2022中国区块链技术创新典型企业名录》

旺链科技

区块链 区块链技术 产业区块链

Svelte框架实现表格协同文档

葡萄城技术团队

还在用Excel和SQL?火山引擎VeDI这款产品帮你更快处理数据

字节跳动数据平台

大数据 数据分析 企业 数据看板

如何对小程序进行更高效的管理

Onegun

小程序 微信小程序 小程序管理平台

如何通过C#和VB.NET合并Excel文档

Geek_249eec

C# Excel VB.NET

网易伏羲预训练模型”玉言“登顶CLUE分类榜单,成绩首次超过人类水平

网易伏羲

人工智能

深度 | 新兴软件研发范式崛起,云计算全面走向 Serverless 化

阿里巴巴云原生

阿里云 Serverless 云原生

昆仑万维深耕AIGC领域 昆仑天工助力内容创作者创造无限可能

极客天地

使用 YonBuilder 进行报表分析 - 扩展篇

YonBuilder低代码开发平台

【案例分享】如何利用京东云建设高可用业务架构

京东科技开发者

云计算 架构 高可用架构 后端、 企业号 1 月 PK 榜

揭开华为云CodeArts TestPlan启发式测试设计神秘面纱!

华为云开发者联盟

云计算 后端 华为云 企业号 1 月 PK 榜

2022Q4消费级AR眼镜市场季度分析:雷鸟创新领跑,华为强势入局

易观分析

市场 消费 AR眼镜

SQL 嵌套 N 层太长太难写怎么办?

王磊

标准升级 |《企业数字化成熟度模型IOMM标准》(企业整体视角)发布

信通院IOMM数字化转型团队

数字化转型 IOMM ICT深度观察

免费下载 | 2023 中国技术成熟度评估曲线发布,共看六大发展趋势

博睿数据

可观测性 智能运维 博睿数据 权威报告

21世纪啤酒与尿布的故事

码文

广告 流媒体 啤酒与尿布

KubeVela 再升级:交付管理一体化的云原生应用平台

阿里巴巴云原生

阿里云 开源 云原生 KubeVela

聚焦技术与体验极致提升,阿里云视频云连续5年领跑!

阿里云CloudImagine

阿里云 IDC 视频云

WeOps上新啦 | WeOpsV3.14拓展云平台能力,支持自动发现和监控告警

嘉为蓝鲸

自动化运维 weops 嘉为蓝鲸

叮咚~,这份春节前突击检查应对指南请收好!

嘉为蓝鲸

自动化运维 weops 嘉为蓝鲸

阿里云云边一体容器架构创新论文被云计算顶会 ACM SoCC 录用

阿里巴巴云原生

阿里云 容器 云原生

NFTScan 与 SeeDAO 孵化器达成战略合作,为开发者提供专业的 NFT 数据服务!

NFT Research

NFT

MASA Stack 1.0 发布会圆满收官

MASA技术团队

.net 云原生 PaaS dapr MASA

什么是AutodeskMaya?为什么要学习它?

Finovy Cloud

3DMAX maya

嘉为蓝鲸研运一体化解决方案荣获信通院XOps领域年度明星解决方案

嘉为蓝鲸

自动化运维 嘉为蓝鲸

图像增强及运算:局部直方图均衡化和自动色彩均衡化处理

华为云开发者联盟

Python 人工智能 华为云 企业号 1 月 PK 榜

英特尔CEO帕特·基辛格:五大“超级技术力量”,推动人类社会发展

科技之家

​洞悉获客之道,林肯汽车开展高端社区精准营销俘获消费者芳心

联营汇聚

干货 | 企业监控系统体系化建设思路

嘉为蓝鲸

自动化运维 嘉为蓝鲸 企业监控系统

位运算在数据库中的实际应用

领创集团Advance Intelligence Group

数据库 位计算

sonic技术内幕_移动_况鹰_InfoQ精选文章