跨端 ｜ 青训营笔记

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

跨端开发

1. 端: window mac iOS 安卓 web iot

2. 痛点:

   • 各端功能几乎一致, 但需要单独配置开发人员
   • 开发维护成本高
   • 安卓iOS发版周期长

3. 跨端目标

   • 研发效率高 -- 学习成本低, 多端一致性
   • 用户体验好-- 稳定性高 性能好
   • 动态化--动态化下发

4. hybrid:基于webview, 把一部分系统能力开放给js调用 性能较差

5. 原生渲染: js开发, 使用原生组件渲染 reactnative 一致性, css能力较差

6. 自渲染:利用skia重新实现渲染管线, 不依赖原生组件 css能力较差, 开发成本高

7. 小程序方案: 小程序dsl+js开发, 中间件桥接调用原生能力, webview来渲染ui界面

8. 小程序开发流程

   • 下载小程序开发工具, 类似于vscode, 添加了devtools和实时演示以及预览和真机调试
   • 开发调试小程序, 可以借助上面的工具进行调试
   • 上传小程序

性能优化

1. 性能优化意义

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

2. 性能指标

   • loading
   • FP 首次绘制
   • FCP 首次最大内容绘制

3. 优化手段 - 启动性能优化

   • 减小包体积
   • 减少同步逻辑
   • 更早展示首屏数据
   • 缓存数据
   • 图片优化
   • 占位

4. 优化手段 - 运行时性能优化

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

5. 可以借助后台管理页面, 根据白屏率, 崩溃率等调整小程序