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（dataset is unsupported for SVG content in IE/Edge）：

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()来访问数据属性。另外，performance of reading data-attributes相比，将这些数据存储在JS数据仓库中效果很差。

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