Backbone.js 主干渲染此.el.html（this.template（data））的速度较慢。怎么办？

我有一个收藏要展示

1. for each model in collection, create a View
2. append view.render().el

更具体地说，我发现view.render（）需要很长时间

this.$el.html（this.template（数据））

part

我需要加快速度，发现“DOM操作”很慢。
因此，我寻找了批处理渲染的方法，但没有找到多少

• 问题1.
  我想知道是否有一种方法可以批处理并将最终的html附加到DOM，而无需将每一行附加到DOM？ （我怀疑，$el.html（）执行DOM操作。如果是这样，我是否可以不执行

  this.$el.html（）

  调用in view.render（），然后分配视图的el以减少DOM交互？）

• 问题2.
  在客户端重新定义视图时，是否存在其他陷阱或性能障碍

编辑

  addAll: function() {

    this.$('#thread-loop').html('');

    var fragment = document.createDocumentFragment();
    for (var i = 0; i < this.threads.length; i++) {
      console.log('adding one');
      var thread = this.threads.at(i);
      var View = this.threadTypeToViewMap[thread.get('thread_type')];

      var view = new View( {model: thread, forumSelector: this.forumSelector} );

      fragment.appendChild(view.render().el);
    }
    this.$el.find('#thread-loop')[0].appendChild(fragment);

    // this.threads.each(this.addOne, this);

  },

addAll:function（）{
this.$（'#线程循环'）.html（''；
var fragment=document.createDocumentFragment（）；
对于（var i=0；i

事实上，我意识到我在使用碎片技术

我进一步解决了这个问题，当javascript对象有很长的属性（用户创建的数据）时，handlebar需要很长时间才能在template（）调用中找到该属性（或者我怀疑是这样的）。

对于Q1-> 如果$el不在dom中，可以将所有$el附加到文档片段中，然后立即将文档片段注入页面。JQuery的John Resig写了一篇关于文档片段如何工作的好文章：

看看

它们扩展主干以提供针对集合进行优化的视图（因此您可以在循环中创建DOM节点，并且只在完成后将它们添加到文档中）。这将真正帮助您提高性能

至于问题2，会让你陷入陷阱的是：

• 广泛的DOM操作
• 在客户端而不是服务器上编译模板（即在加载页面后对每个模板进行单独请求）
• 一般JavaScript性能瓶颈（例如，使用polyfill foreach循环，使用jQuery或下划线代替原生JS等）

---

除了使用doc片段，您还可以尝试以下几项：

1-如果要使用for循环，请在循环之前缓存长度。var threadLength=this.threads.length

2-也就是说，我会选择使用0.each而不是for循环

3-如果执行2，则线程模型应易于访问。我不知道使用get（）是否成功，但您可以直接访问model.attributes.thread_类型

3-模板是否缓存

---

4-为什么要两次更改#线程循环的html？需要吗？如果您需要访问它两次，那么也缓存该选择器。

主干模板渲染速度很慢，因为默认情况下，它们使用JavaScript的

和

结构来正确定义变量名的范围，正如您所期望的那样。主干模板的一个鲜为人知的特性允许您通过分配一个变量来放入所有数据（通常仅为“数据”）来跳过这一相当大的性能损失：

var t=..template（''，null，{variable:'data'}）；
模板（{x:42}）；

与正常情况不同的是：

_.template('<%= x %>');
template({x: 42});

\模板（“”）；
模板（{x:42}）；

这样做，您将看到巨大的性能提升。这可能会立即解决您的性能问题

---

基准测试：

如果我的$el（用于集合视图）已连接到dom，该怎么办？在这种情况下，我将覆盖该视图的渲染器，将所有子节点渲染到断开连接的节点，然后将它们添加到dom。我可以使用片段并在集合视图中构建所有内容。。但我需要将DOM中的每个项链接到主干视图（它是el），以便以后可以与之交互。所以问题是。。我正在编辑这个问题。。。

_.template('<%= x %>');
template({x: 42});