ExtJS：频繁使用 XTemplate = 性能下降？答案

【问题标题】：ExtJS: Frequent XTemplate usage = performance hit?ExtJS：频繁使用 XTemplate = 性能下降？
【发布时间】：2011-05-21 16:28:59
【问题描述】：

我有一个 ExtJS 面板，它显示了几位数据，需要经常更新。例如，显示 DOW、NYSE、NASDAQ 等当前市场价格的面板。

考虑到数据会频繁更新（至少每秒一次），更新数据字段的单个元素与每次都使用 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 分离（实际上是到一个单独的文件中）并有助于提高代码的可读性/可维护性。 但是，有没有人知道每次重新应用模板是否会影响性能？我猜有，但我希望我能从“知情者”那里得到一个权威的答案。

谢谢！

【问题讨论】：

标签： extjs

【解决方案1】：

我同意@timdev 的观点——XTemplate 应该没问题（顺便说一句，速度非常快）。但是，我不会每次都从头开始创建 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);
}

【讨论】：

+1 - 我也打算把它放在我的答案中，然后忘记了。
每次都重新实例化 XTemplate obj 很好；我没有在我的实际代码中做（这个例子是为了超级简单），但指针绝对值得赞赏。

【解决方案2】：

根本不权威，但我认为您可能会过早地进行优化。非 X-template 方法的效率可能会稍低一些，但你有什么理由关心吗？

缺少对某些不良行为的描述，听起来您正在担心一个现在不存在的问题，而且将来很可能永远不会存在。

保持你的代码干净，直到你有一个真实的、现在的、为了性能而让它变得丑陋的理由。

【讨论】：

感谢您的输入——绝对有效的积分。在这种情况下，实际的模板要大得多（几行 HTML，至少有 10 个占位符）；我的简单示例只是为了传达这个想法。假设 XTemplates 通过执行某种搜索和替换操作来工作，我担心在一个非常大的字符串上至少每秒执行一次此操作可能比仅在 DOM 中挑选并替换单个元素的效率要低得多。无论如何，这真的有助于了解你的想法——谢谢。