gpt4 book ai didi

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

转载 作者:IT老高 更新时间:2023-10-28 13:12:00 26 4
gpt4 key购买 nike

我有大量数据,我想将它们拆分为通过 Meteor 中的无限滚动加载的部分,以防止一次加载大型数据集;相反,我会在需要时加载数据集的 block 。如何在保留 infinite scroll 加载的每个部分的实时页面更新的同时执行此操作?

最佳答案

这是我用于电影数据库 Playground 的代码。我尝试了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()

还有html:

<body>
{{> app}}
</body>
<template name="app">
{{#each movies}}
<p>{{title}}</p>
{{/each}}
</template>

我做了一些快速的性能测试,结果发现对于每条记录的几行文本,向客户端发送数据的最快方式是限制在 100 左右。我还尝试使用 10-20kb 嵌入的缩略图在文件中。当使用更大的 Assets 时,当限制大于 30 条记录时,Chrome 变得非常无响应。以下是在 localhost 上完成的一些统计数据(每个运行 3 次):

limit   seconds till last record rendered.
0 79s
010 121s
020 64s
030 45s
050 34s
100 16s
200 16s

有趣的是, meteor 服务器一次发送整个页面大约需要 79 秒(limit=0)。我不确定这怎么可能,因为连续流应该是最快的。所以我的统计数据可能有些有趣。有任何想法吗?

关于javascript - 在 Meteor 中进行无限滚动和实时更新的理想方式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14167394/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com