通过增量帧加载提高性能

When we first built our prototyping features, we had one goal: Allow users to create interactive flows in Figma. From a technical perspective, we built a simple loading strategy to match. We’d load the entire document containing the prototype into memory before displaying the starting screen.

当我们首次构建我们的原型功能时，我们有一个目标：允许用户在Figma中创建交互流程。从技术角度来看，我们构建了一个简单的加载策略来匹配。在显示起始屏幕之前，我们会将包含原型的整个文档加载到内存中。

Mobile devices (especially iPhones) tend to have less memory than desktop devices, and the operating system would often kill our process instead of expanding our application’s memory budget.

移动设备（尤其是iPhone）的内存往往比桌面设备少，操作系统通常会杀死我们的进程，而不是扩展我们应用程序的内存预算。

This was reasonable at the time. But as Figma became more advanced, documents became larger and larger, featuring many pages and design systems with exponentially growing numbers of component variants. Prototypes multiplied in size and scale, while load times and stability lagged. Similarly, prototypes often crashed on mobile, exceeding mobile memory limits.

这在当时是合理的。但随着 Figma 变得越来越先进，文档变得越来越大，包含许多页面和设计系统，组件变体的数量呈指数级增长。原型的大小和规模不断增加，而加载时间和稳定性却滞后。类似地，原型在移动设备上经常崩溃，超过了移动设备的内存限制。

Incremental loading is a concept used to describe loading only a new or updated piece of data, rather than loading the entire file. By syncing just the update, processes move more efficiently. Incremental “frame” loading is a term the team coined to describe how we apply those processes to prototypes at Figma.

增量加载是一个概念，用于描述仅加载新的或更新的数据片段，而不是加载整个文件。通过仅同步更新，进程可以更高效地运行。 增量“帧”加载是团队创造的一个术语，用于描述我们如何将这些过程应用于Figma的原型。

It was immediately clear that the sheer amount of data was the culprit. Instead of loading the entire prototype in memory, what if we could just load the content needed to display what was currently on the screen? With this incremental frame loading strategy, we could kill two birds with one stone, fixing both load times and memory usage by downloading and storing in-memory only what was needed.

很快就明确了数据量是罪魁祸首。与其将整个原型加载到内存中，不如只加载当前屏幕上需要显示的内容。通过这种增量帧加载策略，我们可以一举两得，通过仅下载和存储所需内容来修复加载时间和内存使用。

Maintaining a smoot...