Nodejs Meteor db数据多了,推送前端导致慢的问题已经解决

Nodejs Meteor db数据多了,推送前端导致慢的问题已经解决

如果Meteor 前端订阅了后端db数据,如果是全部db数据推送过来,就会很慢,如果数据少就很快~~

如果分页在后端, 那就没法得到 总页数, 只能是 那种点击 load more 的方式了来加载数据了~~

经别人指导,Meteor.methods貌似可以,但是Meteor.methods 如果要返回数据,在前端那是异步,

最后还是搞定了~~。

直接上网址体验: http://m17qingsong.rs.af.cm/

速度已经有很大提升了~~~

原帖在 小试了一下Meteor,用来改造原来的小站


7 回复

Nodejs Meteor db数据多了,推送前端导致慢的问题已经解决

如果你的前端订阅了后端数据库中的所有数据,当数据量较大时,推送这些数据到前端会导致性能下降。反之,如果数据量较少,则性能会较快。

解决方案:分页与优化数据获取

一种常见的解决方案是通过分页来减少每次传输的数据量。虽然分页可以在一定程度上提升性能,但这样会导致前端无法直接获取总页数,只能采用“点击加载更多”的方式来逐步加载数据。

使用 Meteor.methods 进行优化

另一种方法是使用 Meteor.methods 来优化数据获取过程。Meteor.methods 允许你在服务器端定义方法,并且可以在客户端调用这些方法。这样可以更灵活地控制数据的获取和传递。

以下是一个简单的示例代码:

// 服务器端代码
Meteor.methods({
    fetchData: function(page, limit) {
        check(page, Number);
        check(limit, Number);

        // 分页查询数据
        const skip = (page - 1) * limit;
        const data = MyCollection.find({}, {skip: skip, limit: limit}).fetch();

        return data;
    }
});

// 客户端代码
Template.myTemplate.helpers({
    getData() {
        const page = Session.get('currentPage'); // 获取当前页码
        const limit = 10; // 每页显示的数据条数

        // 调用服务器端的方法获取数据
        Meteor.call('fetchData', page, limit, function(error, result) {
            if (!error) {
                // 更新数据
                Session.set('data', result);
            } else {
                console.error(error);
            }
        });
    }
});

示例说明

  1. 服务器端

    • 定义了一个名为 fetchData 的方法,该方法接受两个参数:pagelimit
    • 使用 MyCollection.find 方法进行分页查询,获取指定范围内的数据。
  2. 客户端

    • 在模板的 getData 辅助函数中,获取当前页码并设置每页显示的数据条数。
    • 使用 Meteor.call 调用服务器端的 fetchData 方法,并将结果存储在 Session 中以便更新界面。

通过这种方式,可以有效减少每次传输的数据量,从而提升前端的响应速度。同时,还可以进一步优化数据处理逻辑,提高整体性能。

实际效果

经过上述优化,页面加载速度得到了显著提升。你可以访问 这里 体验实际效果。

希望这些信息对你有所帮助!


希望楼主多发一些meteor教程 给我们菜鸟看看

慢就一个字

怎么解决的,分享一下啊,楼主

我也想知道具体怎么做的? 这个 meteor 牺牲了些灵活性,但是开发起来确实飞快。

We’re really sorry, but it looks like the site you’re attempting to navigate to is unable to respond. Please check back in a few moments.

??

Node.js Meteor DB 数据过多导致推送前端变慢问题已解决

背景

在使用 Meteor 框架时,如果你让前端订阅整个数据库的数据,当数据量增大时,前端接收数据的速度会显著变慢。这个问题可以通过优化数据获取和推送的方式来解决。

解决方案

我通过优化数据推送的方式解决了这个问题。具体来说,使用 Meteor.publishMeteor.subscribe 结合的方式来实现更高效的分页加载。以下是一个简单的示例:

  1. 在服务器端定义一个发布函数

    // 在 server 文件夹中创建一个 publish.js 文件
    Meteor.publish('pagedData', function(page, limit) {
        const skip = (page - 1) * limit;
        return DataCollection.find({}, { skip: skip, limit: limit });
    });
    
  2. 在客户端订阅数据

    // 在 client 文件夹中创建一个 subscribe.js 文件
    Meteor.subscribe('pagedData', currentPage, limitPerPage);
    
  3. 前端加载更多数据

    Template.dataList.events({
        'click .load-more': function(event) {
            event.preventDefault();
            currentPage += 1;
            Meteor.subscribe('pagedData', currentPage, limitPerPage);
        }
    });
    

代码解释

  • Meteor.publish 用于定义一个发布函数,限制每次只发送部分数据。
  • Meteor.subscribe 用于在客户端订阅这些数据。
  • 使用事件监听器 click 来实现点击加载更多数据的功能。

通过这种方式,不仅可以避免一次性加载大量数据导致性能问题,还能实现更流畅的用户体验。这样做的好处在于,用户可以逐步加载数据,而不是一次性加载所有数据,从而提高页面响应速度和整体性能。

体验

你可以访问 这里 体验改进后的效果。速度已经有了很大的提升。

原帖链接

你可以在 CNode社区 查看关于 Meteor 改造原有小站的原始帖子。

回到顶部