准备容器先在body外插入一个绝对容器，避免重绘：constsvgWidthTestContainer=document.createElement('svg');svgWidthTestContainer.setAttribute('id','svgWidthTest');svgWidthTestContainer.style.cssText=`position:absolute;宽度：500px；高度：500px；左：-1000px；顶部：-1000px；visibility:'hidden';`;document.body.appendChild(svgWidth);TestContainer计算方法总结了两种方法。这里，由于我使用的是svg，所以其他元素都是一样的。先说性能最好的方法，先创建所有的文本元素，然后统一追加到准备好的容器中。代码如下：exportfunctiongetSvgsWidth(texts){//这里用div代替fragment不方便删除consttextsFragment=document.createElement('g');consttextElements=texts.map((text)=>{consttextElement=document.createElement('text');textElement.textContent=text;textsFragment.appendChild(textElement);returntextElement;});svgWidthTestContainer.appendChild(textsFragment);consttextElementsWidth=textElements.map(element=>element.getBounding()ClientRect.width);svgWidthTestContainer.removeChild(textsFragment);returntextElementsWidth;}//获取屏幕上1-1000000个数字的宽度console.log(getSvgsWidth([...Array(100000).keys()]));还有一种方法（不推荐）是提前准备一个文本，然后每次替换里面的textContent返回宽度，代码如下：//PreparetextconsttextElementTest=document.createElement('text');svgWidthTestContainer.appendChild(textElementTest);导出函数getSvgsWidthWithOneText(texts){consttextElementsWidth=texts.map((text)=>{textElementTest.textContent=text;返回textElementTest.getBoundingClientRect().width;});returntextElementsWidth;}//你可以做个性能测试，我算过他们保持了5倍左右的差距。constdateStart=newDate().getTime();console.log(getSvgsWidth([...Array(100000).keys()]));console.log(getSvgsWidthWithOneText([...Array(100000).keys()]));console.log(新日期().getTime()-日期开始）；
