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秒.我不确定,这怎么可能,因为连续的流应该是最快的.所以我的统计数据可能有些有趣.有任何想法吗?
归档时间: |
|
查看次数: |
5201 次 |
最近记录: |