ExtJS:频繁使用XTemplate =性能命中？

Question

我有一个ExtJS面板，它显示几个数据位，需要频繁更新。例如，显示道琼斯、纽约证交所、纳斯达克等的当前市场价格的面板。

考虑到数据将频繁更新(至少每秒钟更新一次)，是否可以更有效地更新数据字段的单个元素，而不是每次使用XTemplate重新生成所有的HTML？？

例如，如果我不重新应用XTemplate，它可能如下所示：

update: function(marketData) {
   Ext.get('nasdaq-market-price-div-id').update(marketData.nasdaqPrice);
   Ext.get('nyse-market-price-div-id').update(marketData.nysePrice);
   //Repeat for all fields...
}

与每次使用XTemplate相比，如下所示：

update: function(marketData) {
   var tpl = new XTemplate('<div>{nasdaqPrice}</div><div>{nysePrice}</div>');
   var html = tpl.applyTemplate(marketData);
   Ext.get('market-data-div-id').update(html);
}

我喜欢使用XTemplate，因为它允许我将HTML (实际上是一个单独的文件)分开，并帮助提高代码的可读性/可维护性。然而，，是否有人知道每次重新应用模板是否会有令人望而却步的性能问题呢？，我猜是有的，但我希望我能从“知道的人”那里得到一个权威的答案。

谢谢!

Answer 1

一点也不权威，但我认为你可能会过早地进行优化。非X模板方法可能有些效率较低，但您有理由关心吗？

如果没有对一些不良行为的描述，听起来就像是在担心一个现在不存在的问题，而且很可能在将来永远也不会存在。

保持代码的整洁，直到您有了真正的、现在的、有理由使它变得丑陋，以提高性能为止。

Answer 2

我同意@timdev - XTemplate应该很好(而且非常快的BTW)。但是，我不会每次都从头开始创建XTemplate。我会做更像这样的事情：

update: function(marketData) {
   // assuming that this is a class or some appropriate scope
   if(!this.PriceTpl){
       this.PriceTpl = new XTemplate('<div>{nasdaqPrice}</div><div>{nysePrice}</div>');
       this.PriceTpl.compile();
   }
   this.PriceTpl.overwrite('market-data-div-id', marketData);
}