在 Meteor 应用程序中加载大型集合

Question

在 Meteor 应用程序中，将包含 1000 条记录的大型集合发布到客户端。然而，加载{{loginButtons} 的用户将经历 3-5 秒的延迟，因为它仅在所有大型集合加载后才完全呈现。

{{ loginButtons }} 渲染的 div #login-buttons 似乎在页面加载时立即渲染，但 div #login-dropdown-list 需要一些时间才能开始渲染。 #login-dropodown-list template p>

该站点正在使用带有 Iron Router 的 Meteor 0.7.0.1。

---

更新

这是accounts-ui-bootstrap-3 下拉菜单的模板代码，在页面的其余部分呈现后需要几秒钟才能加载。它只是 Meteor 包中的基本模板，没什么特别的。

<ul class="nav navbar-nav navbar-right">
    {{ loginButtons }} 
</ul>

我曾经认为问题是由于这个下拉菜单使用了Meteor.users 集合，所以这是我的快速渲染路线。

FastRender.onAllRoutes(function(urlPath) {
  this.subscribe(Meteor.users);
  this.subscribe(users);
})

这似乎无助于解决问题。我还发现当下拉菜单仍未呈现时，Meteor.userId() 已经定义。下拉菜单仅在红色箭头所指的时间点出现/呈现，这是所有集合已加载的点。

此外，{{ loginButtons }} 渲染的 div #login-buttons 会在页面加载时立即渲染，但 div #login-dropdown-list 需要一些时间才能开始渲染。

也许这就是accounts-ui-bootstrap-3 处理渲染的方式？

Answer 1

我看到了另外两个可以帮助你的包：

分页订阅： https://atmosphere.meteor.com/package/paginated-subscription 这里的想法是为初始加载设置一个小限制，当加载其余部分时，更改限制以加载其余部分

懒惰订阅： https://atmosphere.meteor.com/package/lazy-subscription 这里的想法不是第一次订阅你的大型收藏；只能这样初始化：

Post = new Meteor.Lazy('post', function() { Meteor.subscribe('posts'); });

（它不订阅任何东西）

然后当准备好时： Template.some_template.get_posts = function() { 返回 Post().find({}); //注意 Post 现在是一个函数。 }; => 它确实订阅了

第二种解决方案可能看起来更直接，但您可以使用第一种更好地管理它。

Answer 2

您可以在特定路线上使用 Iron-router 的 waiton 和 loadingTemplate 属性，以便在订阅准备好时向用户显示进度指示器。如https://github.com/EventedMind/iron-router#waiting-on-subscriptions-waiton

所示

Router.configure({
  layoutTemplate: 'layout',
  notFoundTemplate: 'notFound',
  loadingTemplate: 'loading'
});

Router.map(function () {
  this.route('postShow', {
    path: '/posts/:_id',

    waitOn: function () {
      return Meteor.subscribe('posts');
    }
  });
});

另外，https://atmosphere.meteor.com/package/fast-render 是一个第三方包，它集成到 Iron-router 中，并与模板一起发送初始数据，从而使页面看起来立即加载了数据。

http://meteorhacks.com/integrating-iron-router-based-apps-with-fast-render.html有一个很好的教程