跨端技术概述|青训营笔记

70 阅读2分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第8天

跨端是什么

在业务的发展过程中,会不断地产生出更多的业务场景,比如PC端,移动端、Web端、LoT设备的等。而每种业务场景又分别对应着不同的开发技术和方案。但是对于同一业务需求,各端的功能基本都是一样的,但却因为技术的具体实现不同,需要配置单独的研发人员,造成开发、维护成本高的问题。为了解决这些问题,跨端技术应运而生。 跨端技术的目标

提高研发效率 学习成本低 多端一致性高 用户体验好 稳定性搞 性能体验好 动态化 支持动态化下发、满足日益增长的业务需求

跨端技术方案 1.Hybrid

基于WebView渲染,通过JS Bridge把一部分系统能力开放给JS调用

2.原生渲染方案 - React Native

使用JS开发,通过中间层桥接后使用原生组件来渲染UI界面

3.自渲染方案 - Flutter

利用Skia重新实现渲染管道,不依赖原生组件

4.小程序方案

使用小程序DSL + JS开发,通过中间层桥接后调用原生能力,使用webview来渲染UI界面

性能优化 1.性能优化目的

留住用户 提升转化率 提升用户体验

2.小程序的性能指标

Loading View 首次绘制 最大内容绘制 加载完成

3.优化手段

(1)较少包体积

合理使用分包 使用分包加载是优化小程序启动耗时效果最明显的手段。 移除无用文件 控制包内静态资源 (2)减少同步逻辑 优先使用异步API 在小程序初始化代码和启动相关的几个生命周期中,应避免执行复杂的计算逻辑 (3)更早的展示首屏数据 尽早调用关键API和请求 首屏绘制可能会依赖API数据和网络请求,尽早的调用相关网络请求,能提前数据准备时间 接入数据预读取 避免非必要的reLaunch (4)合理缓存数据 网络数据缓存 API数据缓存 (5)图片优化 选择合适的图片格式 进行合理的压缩 使用CDN并开启缓存 (6)其他优化手段 骨架框 占位组件

4.运行时性能体验

合理使用setData 合理使用自定义组件 合理监听处理事件 内存优化 导航栏适配 X分屏适配

总结

本节课主要对跨端技术和小程序开发相关知识进行了相应的介绍