javascript - minimongo 中的查询性能

Question

我构建了一个响应式论坛演示，它在移动设备上呈现了一个主题列表。更新集合时它没有响应。我认为原因是查询缓慢。

我的测试html：

<template name="index">
  <h1 id="myTime"></h1>
  {{#each foo}}
  <h1>{{name}}</h1>
  {{/each}}
  <input id="t" type="text"></input>
  <button id="s">submit</button>
</template>

和js：

Template.index.foo = function () {
  return Foo.find({}).fetch();
};

Template.index.events({
  "click #s": function () {
    Foo.insert({name: $("#t").val()});
  }
});

Meteor.startup(function () {
  Meteor.setInterval(function () {
    $("#myTime").text((new Date()).getTime());
  }, 1);
});

当文档数量非常少时，代码运行速度非常快。当文档数量大于 300 时，渲染将停止大约 3s

有没有可能改进它？:)

Answer 1

您是否在循环的每次迭代中都进行 DOM 插入？更容易创建一个文档片段，将所有内容附加到该片段，然后在循环结束时将片段附加到 DOM 中。逻辑几乎保持不变，但浏览器只需要在最后重新绘制一次页面，而不是每次迭代。