在 Meteor 应用程序中加载大型集合 [英] Loading a Large Collection in a Meteor App

问题描述

在 Meteor 应用中，包含 1000 条记录的大型集合被发布到客户端.但是，加载 {{loginButtons} 的用户将遇到 3-5 秒的延迟，因为它仅在所有大型集合加载后才能完全呈现.

看起来 {{ loginButtons }} 呈现的 div #login-buttons 在页面加载时立即呈现，但是 div #login-dropdown-list 是开始渲染需要一些时间. 这里的想法是为初始加载设置一个小的限制，当加载其余部分时，更改限制以加载其余部分

懒惰订阅: https://atmosphere.meteor.com/包/延迟订阅这里的想法是根本不要在第一时间订阅您的大量收藏；只像这样初始化它:

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

(它不订阅任何东西)

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

第二个解决方案可能看起来更直接，但您可以通过第一个解决方案更好地管理它.

In a Meteor app, a large collection containing 1000 records is published to the client. However users loading the {{loginButtons} will experience a 3-5 second lag as it fully renders only after all the large collection loads.

It appears that the div #login-buttons rendered by {{ loginButtons }} is rendered instantly on page load, but the div #login-dropdown-list is what's taking some time to start rendering. #login-dropodown-list template

The site is using Meteor 0.7.0.1 with Iron Router.

---

Update

Here's the template code for the accounts-ui-bootstrap-3 dropdown menu that take a few seconds to load after the rest of the page renders. It's just the basic template from the Meteor package, nothing special.

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

I used to think the problem is due to that this dropdown menu using the Meteor.users collection, so here's my Fast Render route.

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

This does not seem to help with the problem. I also found out that Meteor.userId() is already defined when the dropdown menu is still not rendered. The dropdown menu only appears/renders at the point in time pointed to by the red arrow, which is the point where all the collections have loaded.

Furthermore, the div #login-buttons rendered by {{ loginButtons }} is rendered instantly on page load, but the div #login-dropdown-list is what's taking some time to start rendering.

Maybe it's how accounts-ui-bootstrap-3 handles the rendering?

解决方案

I see two other packages that could help you :

Paginated subscription : https://atmosphere.meteor.com/package/paginated-subscription The idea here would be to set a small limit for the initial load, and when the rest is loaded, change the limit to load the rest

Lazy subscription : https://atmosphere.meteor.com/package/lazy-subscription The idea here is not to subscribe at all to your large collection in the first time ; only init it like that :

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

(it does not subscribe to anything)

And then when ready : Template.some_template.get_posts = function() { return Post().find({}); //Note that Post is now a function. }; => it doe subscribe

The second solution may seem more straight forward, but you can manage it way better with the first one.

这篇关于在 Meteor 应用程序中加载大型集合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！