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

KIKI37
79 阅读3分钟

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

一、本堂课重点内容：

f897313743b985b08e536070f084a92.png

二、详细知识点介绍：

  • 跨端是什么

    • 跨端背景

      业务场景以及技术发展以及服务要求 产生各种端

      eg. PC端，移动端，web端，IOT设备等

      痛点： 各端功能一致但需要单独配置研发人员 开发维护成本高 移动端发版周期长

    • 什么是跨端

      跨端指的是跨终端，例如:跨PC端，跨Web，跨移动端，跨手表设备等

    • 跨端技术方案目标

      研发效率高

      学习成本低

多端一致性强（兼容性高，提升开发效率）

      用户体验好

      稳定性高

性能体验好（白屏时间加载时间等）

      动态化

      支持动态化下发

满足日益增长的业务需求（针对发版周期长）

  • 跨端技术方案

    • hybrid方案

      基于WebView（浏览器传统页面）渲染，通过JS Bridge把一部分系统能力开放给JS调用

    • 原生渲染

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

      与hybrid区别：原生组件 / webview

      样式会有一些缺失

      例子：Facebook

    • 自渲染

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

      例子：Flutter

      在最上层基于Widgets研发

    • 小程序

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

      例子：字节小程序

  • 小程序实践

    • 优化

      • 为什么优化

        性能帮助产品留住更多用户，使用不愉快，进而相应转化（例如完成交易闭环），操作流畅可以提升满意度，提升用户体验

      • 如何优化之性能指标

        加载

        FP

        LCP

        最大内容绘制

用户真正使用的状态，时间节点尽可能提前

        白屏率

        具体数据具体优化

      • 如何优化之优化步骤

        一、启动时

        1、下包——下包过程更快，减少包体积

        分包，移除无用文件，控制包内静态变量

        2、运行加载逻辑——减少同步逻辑

        优先使用异步，避免启动时运行过多同步代码

        3、LCP——拿数据

        尽早拿到数据，数据预取，提前调用API和请求（根据业务需求）

        4、缓存——缓存机制

        省去调用以及请求时长

        5、图片优化

        压缩率更高的图片，根据业务特点选择不同尺寸，结合CDN

        6、更多

        占位组件，框架骨架屏

        主要提升下包速度，减少JS阻塞

        二、运行时

        1、setData

        频率上——减少发送频率

数据大小上——数据天然会有一些成本，合并数据，提升通讯速度

场景下——动画不建议用setdata

        2、合理使用自定义组件

        减少开销与更新，只注册当前使用的组件

        3、合理监听处理事件——scroll事件不断触发

        合理监听scroll事件，且监听时一定节流

        4、内存优化

        及时清理定时器与监听

        5、导航栏适配——一般默认导航栏

        适当开启自定义导航栏（避免与其他栏内容冲突，进行适配）

        6、X分屏适配——特殊场景下不一定全屏展示

        可能会出现页面未随着屏幕大小进行更新，需要监听

        主要setData优化以及内存优化

        三、性能评分工具

        audits

  • 总结与展望

    随着端越来越多,跨端的需求会越来越强烈，跨端技术方案也会不断迭代，核心目标仍然是「write once, run anywhere」未来自渲染可能会出现更多机会。

avatar
文章
阅读
粉丝