javascript - 为什么在 javascript 中使用辅助函数构建字符串？

Question

在 https://developers.google.com/speed/articles/optimizing-javascript 上看到了这个

有人可以解释一下这是如何更有效的吗，即为什么这样可以避免临时字符串结果？

Build up long strings by passing string builders (either an array or a helper class) into functions, to avoid temporary result strings.

For example, assuming buildMenuItemHtml_ needs to build up a string from literals and variables and would use a string builder internally, instead of using:

var strBuilder = [];
for (var i = 0, length = menuItems.length; i < length; i++) {
  strBuilder.push(this.buildMenuItemHtml_(menuItems[i]));
}
var menuHtml = strBuilder.join();

Use:

var strBuilder = [];
for (var i = 0, length = menuItems.length; i < length; i++) {
  this.buildMenuItem_(menuItems[i], strBuilder);
}
var menuHtml = strBuilder.join();

我假设在第一种情况下 buildMenuItemHtml_ 返回了一个 string 并且在第二种情况下 buildMenuItemHtml_ 推送了一个 string到 strBuilder 上。

Answer 1

重要的细节是它说 buildMenuItemHtml_ 的地方从一堆不同的元素构建一个字符串。在这两个示例中，这种情况以两种不同的方式发生:

示例1(直接构建字符串):

function buildMenuItemHtml_(data) {
  return ["<li>",data.x,"</li>"].join();
}

或示例 2(使用提供的字符串生成器):

function buildMenuItemHtml_(data, strBuilder) {
  strBuilder.push("<li>");
  strBuilder.push(data.x);
  strBuilder.push("</li>");
}

字符串构建相对昂贵且浪费，因为它需要大量分配和副本，其中一些是临时的并且可能会被丢弃。插入数组相对便宜，并且 join()即使是一个大数组 ONCE 也比 join() 好多次检查一大堆小数组。

因此，与其让循环的每次迭代都构建一个临时字符串(昂贵)，然后再用这些字符串构建另一个字符串(昂贵)，指南建议将您的主字符串构建器直接传递到 buildMenuItemHtml_功能。通过这样做，您无需进行任何昂贵的字符串构建，直到您的整个元素集合准备就绪——即一次。