一句话总结

Linear 的性能秘诀:把网络请求从用户眼前藏起来。数据库跑在浏览器(IndexedDB),变更先写本地再异步同步,首次加载极致代码分割+预加载+SW 缓存,MobX 粒度精确到单 cell 重渲染。

核心架构决策

1. Local-First:浏览器就是数据库

  • UI 读的真实数据库在浏览器 IndexedDB
  • 变更先本地执行,再异步推到服务端
  • 没有 loading spinner——没有可等的

2. 技术栈极简

React + TypeScript + MobX + Postgres + CDN。坚持 CSR。无边缘数据库、无 RSC。

3. 首次加载优化

  • 21MB JS 拆成几百个路由级 chunk
  • <link rel="modulepreload"> 并行加载所有关键 chunk
  • Service Worker 预缓存 ~1,200 资源,后续导航零网络
  • 每个 npm 包独立 chunk,升级不失效缓存
  • 可变字体 Inter Variable 一份 woff2 覆盖全字重

4. Sync Engine 三大支柱

  • 数据已在那里:从 IndexedDB 水合,不等待网络
  • 变更不等待:MobX observable 更新 → UI 立即反映
  • 一个 delta 一个 cell:50 issue 更新 = 50 cell 重渲染

关键引用

“构建优秀 Web 应用的秘诀,就是把所有网络请求从用户眼前藏起来。”

“我写的第一行代码就是同步引擎——这和你通常创业初期做的事很不一样。” —— Tuomas Artman

来源

How Is Linear So Fast — performance.dev

Agent 总结

CSR 没有死。性能优化本质是消除等待。粒度决定天花板——21MB 拆几百 chunk、50 issue 只 re-render 50 cell。细节是魔鬼——crossorigin 配错重复请求、transition:all 触发全布局重算——Linear 全做对了。