加快文件加载时间,一页一页地进行
Neither alternative would allow us to materially improve user experience in the short-term, while being a sustainable long-term solution. Delayed editing and backfill would be simpler technically, but it wouldn’t reduce client-side memory. While the data model overhaul would avoid the need for write dependencies, it would be a longer-term undertaking. As a result, we moved forward with write dependency computation, which strikes a balance between performance, feasibility, and user experience. With this loading approach, Figma downloads the first page and all of its read and write dependencies on initial load. As the user navigates to other pages, Figma downloads those pages (and their read and write dependencies) on demand.
无论哪种选择都无法在短期内实质性改善用户体验,同时也无法成为可持续的长期解决方案。延迟编辑和回填在技术上更简单,但无法减少客户端内存。而数据模型的全面改进则可以避免写入依赖的需求,但这需要更长期的工作。因此,我们选择了写入依赖计算,它在性能、可行性和用户体验之间取得了平衡。通过这种加载方式,Figma在初始加载时下载第一页及其所有的读取和写入依赖。当用户导航到其他页面时,Figma会按需下载这些页面(及其读取和写入依赖)。
Implicitly and explicitly encoding dependencies
隐式和显式编码依赖关系
Previously, QueryGraph only encoded read dependency edges since viewers and prototypes don’t need to consider write dependencies. To extend this framework to editors, we replaced the underlying data structure with a bidirectional graph. When loading a file dynamically, it was important that we could quickly determine both sets of dependencies for a given node.
以前,QueryGraph只编码读取依赖关系边,因为查看者和原型不需要考虑写入依赖关系。为了将这个框架扩展到编辑器,我们用一个双向图替换了底层数据结构。在动态加载文件时,快速确定给定节点的两组依赖关系非常重要。
The auto layout write dependency we introduced is an example of an implicit write dependency between nodes that don’t otherwise refer to one another directly. We encoded these dependencies as a new type of edge in our graph.
我们引入的自动布局写入依赖是节点之间没有直接相互引用的隐式写入依赖的一个例子。我们在我们的图中将这些依赖关系编码为一种新类型的边缘。
In addition, all of the existing read dependencies were foreign key dependencies, meaning that the dependency was explicitly encoded on the node data structure. For example, instance nodes have a componentID
field, which provides the foreign key to look up the component node that...