AI实践哪家强?来 AICon, 解锁技术前沿,探寻产业新机! 了解详情
写点什么

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:433552

评论

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

Golang领域模型-实体

奔奔奔跑

架构 微服务 领域驱动设计 DDD Go 语言

【高并发】面试官:讲讲什么是缓存穿透?击穿?雪崩?如何解决?

冰河

缓存 穿透 击穿 雪崩 签约计划第二季

一文带你了解微服务架构和设计(多图)

Phoenix

架构 分布式 微服务

oeasy教您玩转 linux 010212 管道 pipe

o

Go: 理解 Sync.Pool 的设计

陈思敏捷

sync sync.pool pool Go 语言

区块链激励层——区块链生态建设的驱动力量

CECBC

区块链技术 驱动力量

从一段 Dubbo 源码到 CPU 分支预测的一次探险之旅

yes

dubbo cpu

week11--作业

Geek_165f3d

LeetCode 169. Majority Element

liu_liu

算法 LeetCo

Spring Security 主要类解释

哈库拉玛塔塔

springsecurity

浮点数的秘密

C语言与CPP编程

c c++ 编程语言 浮点数

CString 类的线程不安全问题

C语言与CPP编程

c c++ 编程语言

我们该怎么保护手机屏幕前的父母?

徐说科技

手机 短视频

HashMap将cpu打满始末

hashmap 线程安全 cpu 100% cpu飙满

记录问题 INSERT INTO table ... SELECT ... FROM dual WHERE not exists (...)问题

转山转水

sql SQL语法 sql查询

重新学习了一遍ThreadLocal

熊斌

学习

不使用Raft算法,就能简单做集群leader选举

架构师修行之路

分布式 架构师

企业中台化落地:从战略分析到战术实践及架构演进过程

Barry的异想世界

架构设计 策略模式 模板方法模式 中台架构 领域驱动设计DDD

金沙账号审核不通过维护不给提现风控怎么回事?怎么办

过山太阳

内容审核 提现不了

SpringCloud轻松集成Dubbo实现RPC调用

Barry的异想世界

微服务 dubbo nacos RPC spring cloud alibaba

区块链应用层——生态体系的上层建筑

CECBC

区块链技术 生态体系

认证、授权、鉴权和权限控制

哈库拉玛塔塔

spring security 用户权限 鉴权 权限

华为与第四范式,正在酝酿一个帮企业跳出AI悖论的“秘密计划”

脑极体

以大数据为依托提升基层治理效能

CECBC

大数据 信息化管理

布式系统消息异常该何去何从

架构师修行之路

分布式 异步

计算机的时钟(三):向量时钟

ElvinYang

第五周作业

Vincent

极客时间 极客大学

Java四种引用类型:强引用、软引用、弱引用、虚引用

简爱W

我理解的面向对象(ObjectiveSql 实践)

Braisdom

Java ORM框架 ORM

为什么每个微服务要有自己独立的数据库?

码猿外

数据库 架构 微服务

spark总结

纯纯

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