丹尼斯·布罗茨基 2026年5月3日 更新Linear中的问题只需几毫秒。而一个传统的CRUD应用程序完成同样的事情大约需要300毫秒。他们是如何做到的呢？没有任何神奇的性能秘诀。实际上，这是从根本上构建在正确基础上，并通过无数决策不断改进的。我希望逐步介绍一些让Linear感觉如此快的技术，帮助你实现同样的效果。 我将涵盖的内容： 1. 浏览器中的数据库 2. 让首次加载感觉瞬间完成 3. 同步引擎 4. 为速度而设计 5. 动画 快速免责声明：我从未在Linear工作过，也从未见过他们的代码。我分享的所有内容都来自我的个人经验、对他们应用的研究、阅读他们的博客文章或观看他们的大会演讲。我只是喜欢构建Web应用程序，自从他们的测试版发布以来就一直在使用Linear。此外，文章的主图像来自Meg Wayne的视频，她为Linear的工作非常出色。 浏览器中的数据库：大多数Web应用程序都在同一个循环中运行。用户点击，浏览器发送HTTP请求，服务器查询数据库并返回，浏览器重新绘制。最终结果是在几百毫秒内看到加载指示器、骨架或冻结的用户界面，因为应用程序在等待网络请求。Linear则颠倒了传统关系。用户界面读取的实际数据库在浏览器中，存在于IndexedDB中。变更首先在本地应用，然后异步推送到服务器，服务器通过WebSocket将增量广播回其他客户端。在我看来，这是Linear性能的最关键部分。当构建快速Web应用程序时，你将面临的最大瓶颈是网络。客户端和服务器之间发送的任何数据都需要耗费几百毫秒。最佳的方法是完全消除网络请求的需要：这正是Linear所做的。我会重复强调这一点，但构建出色Web应用程序的秘密在于将所有网络请求隐藏起来。避免加载状态越多越好。 这是一个简单的Linear请求示例： // 一个传统Web应用程序更新服务器 async function updateIssue ({ issue }) { showSpinner(); const response = await fetch(`/api/issues/${issue.id}`, { method: "PATCH", body: JSON.stringify({ title: issue.title }) }); const updated = await response.json(); setIssue(updated); hideSpinner(); } // vs Linear issue.title = "更快的应用启动"; issue.save(); 第一行：issue.title = "更快的应用启动"，更新了一个内存中的数据存储（在Linear的情况下是MobX可观察对象）。第二行：issue.save();，排队一个事务，他们的同步引擎将其批处理并推送到服务器。关键在于用户界面在本地内存更新的基础上同步重新渲染。没有加载指示器，因为没有需要等待的内容，因为数据在后台同步。这就是将浏览器作为每个用户数据库的魔力。Linear的共同创始人Tuomas在2024年的一次会议上说："我编写的代码的第一行就是同步引擎，这在初创公司中是非常不寻常的。" 从第一天起，Linear就知道他们想采取的方向以及所需的权衡。 Linear的创建没有加载指示器或延迟：我知道大多数人不会像Linear那样构建自定义同步引擎来让他们的应用感觉快速，他们也不需要。对于大多数用例，像Tanstack Query和SWR这样的库可以通过乐观更新达到令人惊讶的接近。 大多数Web应用程序感觉慢是因为用户界面在更新状态之前等待每个网络请求的完成。在大多数情况下，网络请求将会成功，因此你应该利用这一点并乐观地更新状态。 // 用SWR的乐观突变 mutate(`/api/issues/${issue.id}`, { ...issue, title: "更快的应用启动" }, false); // vs Linear issue.title = "更快的应用启动"; issue.save(); 关键思想很简单：用户界面的响应性不应依赖于网络延迟。用户根据界面反应的速度感知速度，而不是服务器响应的速度。乐观请求是你可以进行的最高杠杆改进之一：消除不必要的加载指示器，立即更新状态，在后台进行验证，仅在需要时回滚。 Linear的基础正是基于这一原理，使得应用感觉原生且快速。 Linear的技术栈一瞥：Linear构建在你能找到的最简单的技术栈上：React、TypeScript、MobX、Postgres、CDN。没有边缘数据库，没有React Server组件，也没有花哨的框架。前端：React + react-dom（UI运行时），MobX（可观察图，细粒度重新渲染），TypeScript（单一语言端到端），Rolldown-Vite + plugin-react-oxc（2025年中期；之前是Rollup；之前是Parcel），ProseMirror + y-prosemirror（富文本编辑器；Yjs CRDT进行实时协作），Radix UI原件（弹出框、菜单、聚焦等）.