d3的selection.text（）很贵

Question

我关注general update pattern并且我有很多带有动态内容的<text>元素，这意味着每次更新调用selection.text()都会被多次调用，尤其是在Microsoft Internet Explorer和Edge中有很大的不同：

提高绩效的简单方法是什么？

Answer 1

基于我创建的original code for selection.text() selection.cachedText()，一个使用数据属性缓存文本的版本。使用getAttribute / setAttribute访问/分配属性（IE和旧Edge版本中的SVG内容不支持dataset）：

function textRemove() {
  this.textContent = "";
}

function textConstant(value) {
  return function() {
      if (this.getAttribute("data-text") !== value) {
        this.textContent = value;
        this.setAttribute("data-text", value);
      }
  };
}

function textFunction(value) {
  return function() {
    var v = value.apply(this, arguments),;
        text = v == null ? "" : v;
    if (this.getAttribute("data-text") !== text) {
      this.textContent = text;
      this.setAttribute("data-text", text);
    }
  };
}

d3.selection.prototype.cachedText = function(value) {
  return arguments.length
      ? this.each(value == null
          ? textRemove : (typeof value === "function"
          ? textFunction
          : textConstant)(value))
      : this.node().textContent;
};

如https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes#Issues中提到的那样，性能远非最佳：

  

要考虑的主要问题是Internet Explorer支持和性能。 Internet Explorer 11+提供对标准的支持，但是所有早期版本do not support dataset都支持。要支持IE 10，您需要使用getAttribute()来访问数据属性。此外，与将此数据存储在JS数据仓库中相比，performance of reading data-attributes很差。

因此使用JS数据结构而不是DOM的解决方案会更好。