cubegao

iOS WKWebView 同层渲染方案：让 4K 视频在网页上流畅播放

2023年6月20日

一、引言 —— 当 4K 视频遇上 Web1.1 业务背景最近我们团队接到一个需求：在公司内部 IM App 里，开发一个快递网点监控轻应用。轻应用类似于微信小程序，本质是 Web 页面，跑在 WKWebView 里。功能上需要实时查看各站点的 4K 监控画面（3840×2160，码率 8- ...

Flutter Engine 架构设计与运行原理

2022年4月12日

一、从鸿蒙适配看 Engine 的分量我们的企业 IM 项目最初只在 iOS 上运行，后来扩展到了鸿蒙平台。在鸿蒙适配过程中，我们接触到了 Flutter 最底层的接口：`FlutterEngine` 的 C API 集合，以及平台 Embedder 的实现细节。这次适配让我深刻认识到：F ...

Flutter 中的 JIT、AOT 与 Dart VM 工作机制

2022年3月7日

一、同一个 Flutter App 的三种面孔如果你分别用过 Flutter 的 Debug 模式、Profile 模式和 Release 模式，大概率注意到一个显著差异： Debug 模式：Hot Reload 秒级生效，但滑动列表掉帧明显，内存占用偏高。 Release 模式：启动快、 ...

Dart Event Loop、Future 与 Isolate 深度解析

2022年2月26日

一、一个隐藏在数据库操作中的 UI 卡顿企业 IM 的会话列表，需要先展示本地数据库中已有的 2000+ 条会话记录，再静默同步服务端增量数据。我们最初的实现是同步读取数据库： `List<Conversation> loadConversations() {...` ...

Flutter 绘制原理与 Layer 树解析

2022年1月19日

一、从聊天列表的 Profile 卡顿说起企业 IM 的聊天页面有一个常见的 Profile 交互：点击头像弹出名片卡片，卡片带有毛玻璃背景和圆角阴影。QA 反馈说这个弹出动画掉帧明显，Timeline 显示 Paint 阶段耗时高达 12ms——单帧预算 16.67ms 被这个动画吃掉了大 ...

Flutter 为什么比 React Native 更流畅？

2022年1月12日

一、前言在跨平台框架的讨论中，有一个看似矛盾的现象： React Native 使用原生 UI 控件，Flutter 完全自绘，不使用原生控件。但大量开发者的实际体验却是——Flutter 更流畅。这听起来有点反直觉。按照常规思维，直接调用系统原生控件应该更快才对。为什么”绕过”原生控件自 ...

Flutter 布局系统深度解析：Constraints 约束模型

2021年12月23日

一、从一个「不可能」的布局需求说起在企业 IM 通讯录模块的设计评审中，产品提了一个需求：员工部门编辑器要同时支持「内部员工列表」和「外部联系人列表」，两部分共享同一块垂直空间，内部员工多时压缩外部联系人的高度，反之亦然——但总高度不能超过屏幕的一半。听起来像经典的 `Flex` 布局。我 ...

Flutter Frame 调度机制与 Vsync 原理

2021年11月8日

一、从消息列表的一个「诡异」现象说起在企业 IM 的聊天页面中，我们曾观察到这样一个现象：短时间内连续收到 5 条消息，每条消息到达时都调用一次 `setState`，理论上应该触发 5 次重建。但用 DevTools 的 Timeline 观察，实际上只执行了 1 次 `build`。更 ...

从 setState 到屏幕刷新：Flutter 渲染流程全解析

2021年10月20日

一、从一段聊天页面的卡顿说起在企业 IM 项目的聊天页面中，我们曾遇到一个奇怪的问题：收到新消息后调用 `setState`，列表滑动会出现明显的掉帧。按理说只有几条新消息，不应该卡成这样。排查后发现问题不在「数据量」，而在「重建路径」——某段代码在 `build` 中做了高成本计算，每帧都 ...

Flutter中的三棵树是什么？

2021年9月29日

一、从一个常见的困惑说起在 Flutter 开发中，你大概率遇到过这样的场景：聊天页面收到一条新消息，`setState` 之后整个消息列表都在 `build`，但明明我只想更新最后一条。或者：在 `ListView` 中给某一行加了 `Key` 和不加 `Key`，性能差异巨大 ...