在AngularDart中缓存渲染（重）视图以防止重新生成复杂DOM 背景

我正在构建一个应用程序，它将轮询服务器上的大型数据集，然后使用D3.js可视化库处理响应。然后，用户将能够通过（例如）覆盖其他相关数据集来进一步操作视图

该站点的此区域将位于

/app/dataview

下，要求每个视图都应有一个用于共享/书签的唯一URL。我认为使用queryParameters是实现这一点最方便的方法，因为它不需要使用DB/数据存储将URL映射到相应的配置

/app/dataview?q=<<_queryStr_>>

假设每个数据集

• 需要服务器请求/响应
• 可高达10MB的大小；及
• 使用D3.js进行处理和渲染最多需要15秒（以前的acid测试使用非角度DART方法）

举一个2层的例子，支持页面的数据集大小可能约为20MB，在DOM中完全呈现大约需要30秒

（请注意，目标受众将能够访问快速、可靠的互联网连接，并且该应用程序针对的是现代浏览器。）

我希望AngularDart/浏览器以某种方式缓存此视图，以便在视图A和B之间导航时，返回视图A不会简单地触发用户新的30秒延迟

我考虑过使用LocalStorage，尽管主要问题是我的内容很可能会超过5MB的限制；而且，将生成的HTML片段保存为字符串将是一个缓慢的过程，更不用说在重新插入时会产生大量开销

我也考虑过使用IndexedDB，虽然我主要关心的还是在将文档片段附加/分离到DOM时，但事件的管理可能会很麻烦。另外，我不太关心在用户会话之外保存状态，所以如果可能的话，我想尝试在AngularDart中管理内容。当用户关闭浏览器时，我很高兴视图被垃圾收集

问题: 是否可以使用AngularDart服务（例如，

@Injectable（）class CustomService{…}

）缓存部分DOM/文档片段，或者AngularDart中是否有我不知道的其他功能？我在文档中找到了，但不明白这是否是为这个目的而设计的

---

提前感谢…

AFAIK

ViewFactoryCache

用于编译（解析表达式并从中生成Dart代码）和缓存结果（可以在构建时使用我记忆中的转换器完成）。只是隐藏/显示视图而不是删除/添加视图怎么样。最快，但可能会导致其他问题（例如DOM变得太大）。感谢info@Gunter，我将进一步了解

ViewFactoryCache

和您提到的transformer选项。至于隐藏/显示建议，虽然有效，但很有可能会有多达10个视图以这种方式显示，并且考虑到大数据和复杂的DOM，页面很可能会爬行/崩溃，因此我希望尽可能避免这种情况。是的，我知道其缺点，但是我认为插入DOM是一个更昂贵的部分。除此之外，您可能只有您提到的选项alredy.AFAIK

ViewFactoryCache

用于编译（解析表达式并从中生成Dart代码）和缓存结果（可以在构建时使用我记忆中的转换器完成）。只是隐藏/显示视图而不是删除/添加视图怎么样。最快，但可能会导致其他问题（例如DOM变得太大）。感谢info@Gunter，我将进一步了解

ViewFactoryCache

和您提到的transformer选项。至于隐藏/显示建议，虽然有效，但很有可能会有多达10个视图以这种方式显示，并且考虑到大数据和复杂的DOM，页面很可能会爬行/崩溃，因此我希望尽可能避免这种情况。是的，我知道其缺点，但是我认为插入DOM是一个更昂贵的部分。除此之外，你可能只有你之前提到的那些选择。

{
    "title": "ABC",
    "layers": [
        {
            "q": "SELECT * FROM tblA WHERE name='AAPL' ..."
        },
        {
            "q": "SELECT * FROM tblA WHERE name='MSFT' ..."
        }
    ]
}