跨端技术学习|青训营笔记

116 阅读3分钟

这是我参与「第五届青训营」伴学笔记创作活动的的第3天 (❤ ω ❤)

在对于跨端技术的学习中,我积累了很多有价值的知识,便将笔记记录下来。

image.png

各种客户端:

PC端(Windows、Mac),移动端(Android、iOS),web端、IoT设备(车载设备、智能手表)等。

单端痛点

1、对于各端需要单独配置研发人员,但功能要求基本一致

2、开发、维护成本高(每个端都要各自配置接口、双端可能出现不对齐情况)

3、移动端的发版周期较长,滞后项目周期

跨端技术由此背景上被提出,带来了如下好处:

1、研发效率高(低学习成本、多端一致性高)

2、用户体验好(到达率稳定、性能与流畅度高)

3、动态化(对于迭代下发等业务需求动态化实现)

主流跨端技术方案

1、hybrid方案:基于WebView传统页面(对CSS的支持最完整,不易出错),通过JS Bridge 把一部分系统能力开放给JS调用(借助JS实现部分原方案内容,实现较为同步的多端页面架构)

2、原生渲染方案:使用JS开发,通过中间层桥接后使用原生组件来渲染UI界面,例如React Native(基于OEM widgets渲染Native组件,尽量避免HTML组件的卡顿)

3、自渲染方案:利用Skia重新实现渲染管线,不依赖原生组件,例如Flutter(创建了全新的渲染绘制方案,不再单独依赖系统平台)

4、小程序方案:使用小程序DSL+JS开发,通过中间层桥接后调用原生能力,使用webview容器来渲染UI界面,加载渲染时本地包缓存优先。例如字节小程序(创建了JS运行的单独环境逻辑层,同时使用多个webview渲染层,两者同时与Native进行对接)

image.png

小程序性能优化意义

1、留住用户(流畅、方便的交互体验能够吸引用户)

2、提升转化率(用户在使用过程中能实现其他业务需求)

3、提升用户体验(舒适的页面能使得用户产生使用依赖)

如何进行优化?

开发监控后台,根据性能指标、错误日志等分析结果进行特异性项目优化。

优化手段

1、小程序启动时的性能体验优化(减少载入时间、提升启动效率、进行代码流异步管理等)

2、小程序运行时的性能体验优化(减少通信频率、合理管理组件、优化事件监听、优化内存使用等)

3、借助本地性能体验评分系统进行评价,实现针对性优化

image.png

技术展望

技术开发的核心目标「write once, run anywhere」

探索永无止境,我们的征途是星辰大海,我们的理想是天下大同!