CODEWITHSUNDEEP
collectionsmeteor
Dany Y
Dany Y

Reputation: 7031

meteor collection fetching too slow

I have an app that subscribes to 4 collections (the collections are very small 1 to 20 records each). But the amount of time it takes to load these collections is huge. One of them is just 13 records, and it takes several seconds to load its template. Is it normal? (I'm still testing on meteor servers)

this is a sample of the code : 

Meteor.subscribe('trackedUser', function() {
  console.log('finished fetching trackedUser');
  Template.users.rendered = function() {
   /*handlign of the template*/


    console.log('users template rendered');
  }

  });

    /*observe geolocation after it is all fetched*/
  Meteor.subscribe('geolocation', function() {
    console.log('finished fetching location');
    /* Obseve the Collection geolocation and trigger event when item inserted or removed  */
    query = Geolocation.find({});
    query.observeChanges({
      added: function(id) {
        addMarkerToMap(id);
        window.map.fitBounds(group.getBounds());
        return;
      }
    });
  });
});

And this is my template 

<template name="users">
<ul id="item-list">  
   {{#each trackedUser}}
    <li id="{{_id}}"> 
        <input type="checkbox" checked /> 
        <span><select name="colorpicker">
                {{#each color}}
                  <option value="{{mColorCode}}" {{selected ../mColor mColorCode}}>{{mColorName}}</option>
                {{/each}}
              </select>
        </span>
        <img width="40"  src="data:image/png;base64,{{mImage}}" />  
        <span class="name">{{mUsername}}</span>
        <p><span class="description">{{mDescription}}</span></p>  
    </li>  
    {{/each}}
</ul>
</template>

Thanks

Upvotes: 1

Views: 1344

Answers (2)

Christian Fritz
Christian Fritz

Reputation: 21364

I was able to solve this issue by adding a condition to the definition of the template content that is false while loading the page, i.e., doing the initial sync, and only activating that content when it was loaded.

Before (10s page load for 300 records being published by the server):

Template.itemlist.items = function () {
    return Item.find({type: 'car'},
                     {sort: {start: -1},
                      limit: 30});
};

To (2s page load for 3000 records published by the server):

Template.itemlist.items = function () {
    if (Session.get("active")) {    
        return Item.find({type: 'car'},
                         {sort: {start: -1},
                          limit: 30});
    } else {
        return [];
    }
};

To "activate" the session only once the data was loaded, I added:

Deps.autorun(function () {
    Meteor.subscribe("Item", 
                     {
                         onReady: function() {
                             Session.set("active", true);
                         }
                     });
});

Upvotes: 1

jrullmann
jrullmann

Reputation: 2978

I recently had to diagnose a performance issue with a meteor app and found that it wasn't the rendering of the template that was slow, but rather the transferring of data between the server and the browser.

You can use the Chrome developer tools to diagnose the issue.

  1. Open the tool and make sure it's profiling Network traffic
  2. Load your site
  3. Examine the network traffic. Did it take a long time for the data to finish coming to your browser?

If the data is taking a long time to finish coming to your browser then you can dive deeper into the websocket traffic:

  1. Filter for websocket traffic (bottom of the network tab)
  2. Select the websocket request to view the frames
  3. Examine the information in the frames. Is it a lot?

You may find (as I did) that you are transferring a lot of information to the browser that isn't needed to render the templates.

In that case, make sure you've disabled autopublish and then publish just the data you need by using the field specifier.

Upvotes: 0

Related Questions