在Meteor中进行无限滚动和实时更新的理想方式

HGa*_*dhi 12 javascript mongodb meteor

我有一大堆数据,我希望将其拆分为通过Meteor中的无限滚动加载的部分,以防止必须同时加载大型数据集; 相反,我会在需要时加载数据集的块.如何在通过无限滚动加载的每个部分保留实时页面更新时这样做?

小智 8

这是我用于电影数据库游乐场的代码.我尝试了jQuery事件,但最终决定如果数据连续传输就足够了.我的测试集合是680条记录,有20个字段和一个缩略图字段,每个封面在10-20kb之间.这里是Coffeescript代码:

Movies = new Meteor.Collection("movies")
if Meteor.isClient
  # starting with 10 items that the user sees a page fast
  Session.set("queryLimit", 10)

  # getting the item count from the server collection
  Meteor.call 'getMoviesCount', (err, result) =>
    Session.set('itemsInQuery',result)
  # subscribe to a subset of the collection, and change the Session var on completion
  # automatically changing the limit of the publishing function with autorun
  Meteor.autorun ->
    Meteor.subscribe "MoviesList", Session.get("queryLimit"),  onComplete = ->
      if Session.get("queryLimit") < Session.get('itemsInQuery')
        queryLimit = Session.get("queryLimit") + 30 #change iterator depending on result size 
        Session.set("queryLimit", queryLimit )

  # Client helper to add more items to handlebars template
  Template.app.helpers movies: ->
    Movies.find({})

if Meteor.isServer
  Meteor.publish "MoviesList", (limit) ->
    # show whole collections once limit is reached, by setting limit to 0
    limit = 0 if limit > Movies.find().count() 
    console.log new Date(), limit
    Movies.find({}, { limit: limit, fields: {title:1 } } ) #use fields to test different result sizes  

  Meteor.methods
    getMoviesCount: (query) ->
      return Movies.find().count()
Run Code Online (Sandbox Code Playgroud)

和HTML:

<body>
  {{> app}}
</body>
<template name="app">
    {{#each movies}}
      <p>{{title}}</p>
    {{/each}}
</template>
Run Code Online (Sandbox Code Playgroud)

我做了一些快速的性能测试,事实证明,对于每条记录的几行文本,将数据发送到客户端的最快方式是大约100的限制.我也尝试了10-20kb的缩略图,它们嵌入在文件中.当使用更大的资产时,当限制超过30条记录时,Chrome变得非常反应迟钝.这里有一些关于localhost的统计数据(每次运行3次):

limit   seconds till last record rendered.
  0     79s 
  010   121s
  020   64s  
  030   45s
  050   34s
  100   16s
  200   16s
Run Code Online (Sandbox Code Playgroud)

值得注意的是,当流星服务器一次性发送整个页面(限制= 0)时花了大约79秒.我不确定,这怎么可能,因为连续的流应该是最快的.所以我的统计数据可能有些有趣.有任何想法吗?