欢迎您光临站群宝,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!

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

百度智能小程序整体的框架及演进,主要讲百度小程序开发全流程概况、百度智能小程序框架,以及百度小程序多宿主运行保障;第二部分是百度小程序框架的性能优化,主要讲整个小程序的启动过程,以及从开发者角度,有哪些重要的优化点。小程序的开发流程。SWAN。API 和组件的 NA 实现。其中双栈管理也在这一层,另外标红的 Extension 用于开发者宿主自身能力扩展使用,比如,贴吧宿主期望增加个发帖能力,就可以通过此机制。前端的视角来看看双栈结构。一个宿主客户端可以运行多个小程序,并且在一段时间内保持存活状态,每个小程序都有一个 master 执行框架 JS 和小程序开发者的 JS,一个 master 对应多个 slave(slave 代表一个用户可见的界面)。master 负责执行 JS,可以有两种实现方式,WebView 或 JS 引擎(V8/jscore),JS 引擎的效率更高;slave 的展现有 WebView,为了加快 WebView 的创建速度,设置 cache;master 和 slave 的通信通过消息总线。小程序会把一些 NA 的能力和 UI 融合到小程序里面去。小程序的主体渲染还是基于 H5 技术,接下来我们讲一下 NA 元素如何融入 UI 界面。贴片关系:NA 元素在 H5 不在同一层,NA 浮在 H5 之上,H5 所有元素都不可以放到 NA 元素之上。因为不在一层,就需要处理滚动联动,当检测到 WebView 滚动 n 个像素, NA 元素也需要滚动 n 个像素。同层关系:NA 元素在 H5 这一层,H5 的原生可以压在 NA 元素之上。小程序和宿主之间的双向选择机制,小程序可以选择我要分发到哪些平台,宿主也有权利选择要分发到哪些宿主。二是,小程序做兼容。Extension 机制,当宿主有一些定制化的要求时,可以使用此机制。作为宿主,需要做两件事情,一是在 JS 层需要写一套接口;二是在 Porting Layer 接口实现层实现一套能力。如果宿主觉得这个能力是通用的,可以反馈提案,审核通过后,百度小程序团队会将提案合并到开源框架里。让小程序无线接近 NA 体验。建议包体积保持在 1M 以内,为什么呢?包体优化机制分包技术和独立分包技术,二是资源压缩。分包技术 & 独立分包技术用分包技术把非关键的页面剥离出去。无需下载主包。此时的主包和独立分包的区别就是,小程序总要有一个入口,这个入口的独立分包,我们就命名为主包。资源压缩减少用户的白屏时间。即使用户是断网的,也给他离线缓存一些数据。业务骨架屏和框架骨架屏。现在很多小程序都会参考 H5 的实现,把 H5 的渐进式加载骨架屏用到我们的小程序里面,用了这种技术之后,反而会让真实的内容展示的速度变慢,我们统计大概有 300ms 延迟。策略上就是在 master 做 appjs 执行时,就让 slave 加载框架骨架屏,并行执行。尽量减少数据量和次数。整体回顾如下图。