天涯论坛

 找回密码
 立即注册
搜索
查看: 71|回复: 3

百度开源小程序框架的架构演进和性能优化实践

[复制链接]

3080

主题

148

回帖

9911万

积分

论坛元老

Rank: 8Rank: 8

积分
99118876
发表于 2024-7-9 15:03:08 | 显示全部楼层 |阅读模式

作者 | 百度智能小程序开发

本文转载自公众号百度架构师本文共包括两部分,第1部分是百度智能小程序整体的框架及演进,重点讲百度小程序研发全流程概况、百度智能小程序框架,以及百度小程序多宿主运行保证;第二部分是百度小程序框架的性能优化,重点全部小程序的起步过程,以及从研发方向,有那些要紧的优化点。百度智能程序整体框架及演进

全部移动互联网始终是在 NA 和 H5 之间寻找权衡,NA 的性能好、能力强;H5 灵活性更高。我认为渲染分为两派,一派便是 NA 渲染派,一派叫做 H5 渲染派。NA 渲染派,比较有表率性的如 RN 、 Flutter ;Web 渲染派,例如百度的轻应用,以及之后做的小程序。

1. 研发全流程概览

百度曾经做过的 Web 渲染派的三个表率制品,分别是轻应用、直达号和小程序。

轻应用,是 H5 + 端能力。它是一个标准的 H5,增多有些 NA 的 API,例如定位等。

直达号,在技术层面跟轻应用是同样的。

小程序,本质上是一个受限的 H5 + 海量丰富的 API + UI 组件。此刻咱们给小程序供给的 API 有 300 多个,组件有 30 多个,组件是有界面的。例如,视频、地图 。

为何小程序要受限,重点有两个原由

保持体验的一致性。H5 太过灵活,JS 随时能够去改变界面。

安全思虑由于咱们供给海量 API 和组件,且这些都是很底层的有些能力,例如tel号码、账号,肯定不可轻易开放给大众

怎么受限,重点有两点:

编写语言,再也不是直接写 HTML ,而是用自定义语言 swan 来编写 。

runtime 层有两个栈,一个是渲染栈,一个是 JS 执行栈,这两个栈从理学上隔离,以保证安全性。

2. 智能小程序框架 (1)研发运行全流程

先简单介绍一下全部百度智能小程序的研发流程。

首要研发者用 swan 写布局;

接着经过研发工具打包,上传到咱们的小程序 B 端服务器;

而后是小程序的审核流程,有机审、人审;

最后是用户点击小程序时,客户端请求小程序 C 端服务器,C 端服务器再从 B 端服务器获取小程序包。全部过程都是加密传输,能够保准代码的安全。

(2)百度智能小程序框架 -SWAN

上图是一个百度智能小程序的框架,咱们内部命名为 SWAN。

分层结构如下:

最上层是研发基本库,命名为 swan-js ,研发者直接和这层打交道。swan-js 负责两件事情:即 swan 代码转为 HTML,变成 WebView 可运行程序;客户端端能力的封装暴露。

再下一层是 swan-native。这儿面最核心的是 API 和组件的 NA 实现。其中双栈管理在这一层,另一标红的 Extension 用于研发者宿主自己能力扩展运用例如,贴吧宿主期望增多个发帖能力,就能够经过此机制。

再下面这层叫 Porting Layer。这层是百度小程序为了实现开源,增多的一层与宿主的接口层。最下面这一层是宿主基本能力层。倘若宿主这些能力,能够参考百度开源的参考实现,可直接集成到宿主运用

3. 核心结构 (1)前端方向

咱们从前端的视角来瞧瞧双栈结构。一个宿主客户端能够运行多个小程序,并且在一段时间内保持存活状态,每一个小程序都有一个 master 执行框架 JS 和小程序研发者的 JS,一个 master 对应多个 slave(slave 表率一个用户可见的界面)。

 (2)客户端方向

从客户端方向来看双栈结构,如上图所示,master 负责执行 JS,能够有两种实现方式,WebView 或 JS 引擎(V8/jscore),JS 引擎的效率更高;slave 的展现有 WebView,为了加快 WebView 的创建速度,设置 cache;master 和 slave 的通信经过信息总线。

master 不支持 BOM、DOM 和 WEB-API,小程序只能调用对外开放的能力。

 (3)小程序 NA 组件与界面关系

从体验上看,小程序的体验要好于 H5,其中有一点便是小程序会把有些 NA 的能力和 UI 融合到小程序里面去。小程序的主体渲染还是基于 H5 技术,接下来咱们讲一下 NA 元素怎样融入 UI 界面。

NA 元素与 H5 的关系有两种,贴片关系、同层关系。

贴片关系:NA 元素在 H5 不在同一层,NA 浮在 H5 之上,H5 所有元素都不能够放到 NA 元素之上。由于不在一层,就必须处理滚动联动,当检测到 WebView 滚动 n 个像素, NA 元素必须滚动 n 个像素。

同层关系:NA 元素在 H5 这一层,H5 的原生能够压在 NA 元素之上。

贴片、同层的界面层级树如上。

咱们举一个视频组件同层的例子。视频组件比较繁杂,有 4 层。第 1 层是视频层,即原始视频的图像,第 2 层是弹幕层,第 3 层是用于视频掌控的控件层(例如起始、暂停按键),第 4 层 Slot 层,视频上面漂的 H5 元素将被放到这层。

同层处理机制,先在 H5(研发者写的 swan 会被转为 H5) 上打一个特殊的标记先占位,属性 inline;浏览内核把这个区域的 surface 拿出来给到 NA 层;而后,小程序框架会把这个区域 surface 塞给播放器,让播放器直接在 surface 上面绘制,达到同层。上面的弹幕、控件、 Slot ,都是 swanjs 层 H5 实现 ,Slot 层能够认为是一个容器,例如写一个 video,其所有的子元素都会放在 Slot。

NA 的组件同层的技术方法还不太同样,安卓和 iOS 是有些区别的。像在 iOS 上,倘若有些组件设置 over-flow ,它会天然支持这一套东西,然则安卓就必须浏览器内核来支持。

4. 小程序多宿主运行保证

百度智能小程序是开放系统,能够运行在多宿主之上,那怎样在多宿主上保准小程序运行体验的一致性呢?

各个宿主集成为了咱们的小程序框架后,首要要跑 CTS 测试,经过之后才能够拿到小程序列表进行分发。

针对可选能力部分,各个宿主不是所有的能力都必须实现。例如有些 AI 能力、push 能力。

倘若一个小程序用到了可选能力怎么办?

两个办法,一是小程序和宿主之间的双向选取机制,小程序能够选取我要分发到那些平台,宿主有权利选取要分发到那些宿主。二是,小程序做兼容。

 Estension 机制

上图所示,标红的是 Extension 机制,当宿主有有些定制化的需求时,能够运用此机制。做为宿主,必须做两件事情,一是在 JS 层必须写一套接口;二是在 Porting Layer 接口实现层实现一套能力。倘若宿主觉得这个能力是通用的,能够反馈提案,审核经过后,百度小程序团队会将提案合并到开源框架里。

5. 章节小结

百度智能小程序框架性能优化实践

首要从用户视角瞧瞧一个小程序的加载过程。

1. 百度智能小程序加载分周期过程

博客举例,如上图所示。

首要小程序被起步后,先是一个 Loading 的过程,上面的 title 和下面的 tab(框架 NA 实现)表示出来。

第二张照片咱们定义为 FP(First Paint )周期

第三张图下面有搜索框了,这其实是小程序包里面的内容。它是经过 initdate 接口初始化渲染出来的,此周期咱们定义为 FCP( First Contentfull Paint )周期

第四张图,是小程序从网上拉到了实时的内容,而后更新到界面,咱们将其定义为 FMP(First Meaningful Paint) 周期

最后一张图,所有的元素都已然拉下来并展示了,用户能够操作任何一个位置,咱们将其定义为 TTI (Time to Interative) 周期

2. 百度智能小程序 (1)性能基线

百度小程序在 2019 年底创立了 FMP 指标,它在研发者平台展示的名字为“上屏时间”。

咱们统计了线上的一个 80 分位点,耗时是 1.9s。什么是 80 分位点?例如,有 100 个请求过来了,而后咱们把请求的耗时排序,第 80 个请求的耗时,咱们就认为是 80 分位点。

 (2)性能历史曲线

如上图所示, 2019 年百度小程序性能优化的历史曲线。FP 框架层从接近 3s 始终优化了此刻的 1.1s 上下。百度小程序的目的是让小程序线接近 NA 体验。

3. 起步流程

接下来,咱们研发方向看,还能优化什么?

咱们先看一下起步流程,所有的起步规律简单串行陈列实质是有有些步奏是并行的)。

4. 性能优化

研发者能够做的性能优化重点有两部分。一是小程序包的体积,二是业务数据。

接下来,我用三点来讲研发能够做什么。

 (1)包体积优化

意见包体积保持在 1M 以内,为何呢?

由于咱们统计了一下,倘若打开当次必须下载包,则这次的起步时长会占到咱们全部时长的 60%。1M 的包,80 分位速度必须 1s+ 才能下载完成。因此掌控自己的包的体积。况且咱们此刻还只是看 80 分位,当咱们拉到 90 分位,99 分位,这个是一个非常陡的曲线,恶化很严重。

包体优化机制

有两个技术:一是分包技术和独立分包技术,二是资源压缩。

分包技术 & 独立分包技术分包技术

一个小程序有非常多页面,但不是所有的页面都是高 PV 页面。非常多页面是用户很少点到的,能够把这些页面放到咱们的分包去,主包放咱们高 PV 的页面。

分包不可够独立运行,例如,从搜索 feed 分发过去,它运行时必须咱们主包下载下来,然则由于它的概率低,不会影响绝大都数状况。简而言之,便是用分包技术把非重要的页面剥离出去。

用分包技术把非重要的页面剥离出去之后小程序包的体积还是大的话怎么办?

独立分包技术

所说独立,便是说下载完这个包之后就能够运行,需下载主包。此时的主包和独立分包的区别便是,小程序总要有一个入口,这个入口的独立分包,咱们就命名为主包。

经过这两项技术来减小咱们的包体体积,将其保持在在 1M 以内。

资源压缩

咱们分析过有些小程序,发掘有的包体里包括 PC 照片,这增多了包的体积。意见如下:

照片放到服务器,不要放在包里面。

压缩照片体积,例如,把 png 改为 jpeg 格式这般体积能够减少 90%(不思虑透明度状况)。

剔除用资源。

App-js 必须经过分包来处理最后咱们要达到什么目的

单个包掌控在 1M 以内。

文件数掌控在 200 个以内。

 (2) 数据拉取

数据拉取的目的是快速让界面有内容,减少用户的白屏时间。即运用户是断网的,给他离线缓存有些数据。

如上图所示,这儿说到了业务骨架屏和框架骨架屏。此刻非常多小程序都会参考 H5 的实现,把 H5 的渐进式加载骨架屏用到咱们的小程序里面,用了这种技术之后,反而会让真实的内容展示的速度变慢,咱们统计大概有 300ms 延迟。

认识决骨架屏引起的内容展示延迟,咱们做了一套框架层的骨架屏机制。根据咱们这个机制来实现骨架屏,对性能的影响就会大大减少。策略上便是在 master 做 appjs 执行时,就让 slave 加载框架骨架屏,并行执行。

自己写的业务骨架屏,它什么时候才展示?

如上图所示,当你把 App 、page、waitNotify 通告到渲染线程,到了 Ready firstRender 的时候才会渲染自己做的业务骨架屏,这个过程当然很慢。虽然你用了骨架屏,然则骨架屏和用户点击的这段时间还有海量的白屏时间。用框架骨架屏,白屏时间问题就会处理。用框架骨架屏,或多或少都会耗一点时间,虽然是并行的,然则依然在抢占手机的资源。

因此整体来看,站在客户端站在框架的方向咱们是不意见用,然则不反对用。倘若要用就用框架骨架屏,影响最小。

request 的优化,我总结重点是两点,第1要早,第二要少。

“早”又能够分两部分来讲,一是提早发,二是不阻塞。

第1是提早发,请求得太晚,展示当然比较慢了。意见把网络请求放在 onlaunch 里面,这是咱们给小程序开放的第1个事件,非常多小程序会放到 page unload 里面,这个就比较慢了。这两个时间在线上 80 分位,大概差 200ms~300ms。第二个是不阻塞,经常看到有些小程序,一块来以后,它要等用户的授权、定位。一般定位触及 XY 坐标,然则定位一旦触及高度,就必须打开 GPS,这般性能又会慢 2s~3s。倘若必须高度就不要去设置,否则非常慢。还有的小程序在运用的时候会让用户授权,倘若不授权下面什么不展示,阻塞了。倘若能够的话,意见必须授权的时候再提示用户,这般用户不反感,能加快起步的速度。

“少”,主要分为两点,一是非重要请求延后,二是只拉取一屏数据。

一个小程序运行后,可能有几十乃至上百个网络请求,小程序除了自己的业务还要打点,这会很大程度上影响咱们的网络速度。由于通常的宿主在底层的网络库都会设置线程池,请求多了就要排队。小程序框架基本晓得某个请求是核心请求还是非核心请求,只能排队。要是一上来全是有些打点的,业务就阻塞了。总之,全部页面必须表示的数据先请求,非重要请求延后。二是只拉一屏数据,分段加载。

 (3)渲染

setData 操作是较为昂贵的,尽可能少许据量和次数。

如上图所示,setData 是一个非常核心的 API, 当网络数据回来,仅有经过 setData 驱动渲染,内容才可表示到界面上。

上图是一个优化前和优化后的对比。咱们能够看到,即使是 1K 的数据,必须 20ms 上下的时间。倘若 js 是用 WebView 来执行,首要一个 JS string,到了浏览器有 Renderer 线程、Browser 线程,变为 C 层的 string,而后再到咱们 NA ,经过 Java interface,变成一个 Java string。而后到了 slave 以后还要再反过来,因此快不了。虽然咱们做了有些优化,经过内核让它变成一个内存指针优化切换,然则还是很昂贵。

发掘有些小程序在运用的过程中, setData 运用非常多欠妥之处,以下是运用 setdata 要重视的几点 。

减少调用 setData 次数。goodcase:将多次 setData 合并成一次 setData 调用。

减少 setData 数据量。badcase:新一页数据添加上之前页面数据后再调用 setData。

变量变化只更新变量不更新对象。

5. 性能自查

性能自查重点有三个周期,即研发周期、测试周期和上线后。

研发周期这部分,咱们有三个手段去性能自查,分别是工详细验评分、性能面板(在客户端上性能面板能够提示全部性能起步的耗时)以及打点系统。

在测试周期咱们有两个手段,一是录屏,二是高速摄像头,这两个手段能够真实地反应用户的体验。

上线之后,有研发者平台。怎样获取技术的官方支持途径?意见研发者文档和社群去获取技术支持。

6. 章节小节

研发者可从包体积、数据请求、渲染三方面去优化性能。

包体:1M 内。分包技术、压缩照片用资源剔除。

骨架屏:倘若运用意见采用框架骨架屏。

setData:减少频度、减少许据量。

整体回顾如下图。

 活动举荐

《Vue 研发实战》视频课里,讲师唐金州会教你基于 Vue 研发一个完整的大型开源项目 Ant Design Pro,从研发、测试、打包构建到最后的上线,并奋斗将它打导致一个万星项目,让你具备独立负责 Vue 前端项目的能力!

现拼团 + 口令【happy2021就可尽享折上折,立省¥40 元!仅限前 50 名!

扫码试读





上一篇:付嘉兴:百度小程序框架性能优化实践
下一篇:百度 APP 首屏优化实践
回复

使用道具 举报

2953

主题

3万

回帖

9997万

积分

论坛元老

Rank: 8Rank: 8

积分
99979403
发表于 2024-10-2 04:12:49 | 显示全部楼层
可以发布外链的网站 http://www.fok120.com/
回复

使用道具 举报

3130

主题

3万

回帖

9910万

积分

论坛元老

Rank: 8Rank: 8

积分
99108601
发表于 2024-10-10 18:07:58 | 显示全部楼层
你的见解独到,让我受益匪浅,非常感谢。
回复

使用道具 举报

3057

主题

3万

回帖

9910万

积分

论坛元老

Rank: 8Rank: 8

积分
99109008
发表于 2024-10-22 02:14:13 | 显示全部楼层
可以发布外链的网站 http://www.fok120.com/
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

站点统计|Archiver|手机版|小黑屋|天涯论坛 ( 非经营性网站 )|网站地图

GMT+8, 2024-11-25 00:51 , Processed in 0.239771 second(s), 22 queries .

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.