关于js计算非等宽字体宽度的方法

最新推荐文章于 2024-10-15 10:36:44 发布

转载最新推荐文章于 2024-10-15 10:36:44 发布 · 306 阅读

本文介绍了一种高效计算SVG元素宽度的方法，通过批量创建和测量text元素，避免了重复的DOM操作，显著提升了性能。实验对比了单元素重复测量法，结果显示批量测量法性能更优。

准备一个容器

首先在body外插入一个absolute的容器避免重绘：


const svgWidthTestContainer = document.createElement('svg');
svgWidthTestContainer.setAttribute('id', 'svgWidthTest');

svgWidthTestContainer.style.cssText = `
  position: absolute;
  width: 500px;
  height: 500px;
  left: -1000px;
  top: -1000px;
  visibility: 'hidden';
`;
document.body.appendChild(svgWidthTestContainer);

计算方法

总结出了两种方法，这里由于我使用的是svg，其他元素同理。下面先说性能最好的一个方法，先创建所有的text元素，然后统一append到准备好的容器里。
代码如下：


export function getSvgsWidth(texts) {
  // 这里使用div不用fragment主要是不方便删除
  const textsFragment = document.createElement('g');
  const textElements = texts.map((text) =&gt; {
    const textElement = document.createElement('text');
    textElement.textContent = text;
    textsFragment.appendChild(textElement);
    return textElement;
  });
  svgWidthTestContainer.appendChild(textsFragment);
  const textElementsWidth = textElements.map(element =&gt; element.getBoundingClientRect().width);
  svgWidthTestContainer.removeChild(textsFragment);
  return textElementsWidth;
}
// 得到1-1000000数字在屏幕上的宽度
console.log(getSvgsWidth([...Array(100000).keys()]));

还有一个方法（不推荐）就是事先准备好一个text，然后每次替换里面的textContent返回宽度，代码如下：


// 准备好text
const textElementTest = document.createElement('text');

svgWidthTestContainer.appendChild(textElementTest);

export function getSvgsWidthWithOneText(texts) {
  const textElementsWidth = texts.map((text) =&gt; {
    textElementTest.textContent = text;
    return textElementTest.getBoundingClientRect().width;
  });
  return textElementsWidth;
}


// 可以做一个性能测试，我这边算出来他俩一直保持着5倍左右的差距
const dateStart = new Date().getTime();
console.log(getSvgsWidth([...Array(100000).keys()]));
console.log(getSvgsWidthWithOneText([...Array(100000).keys()]));

console.log(new Date().getTime() - dateStart);

来源：https://segmentfault.com/a/1190000017551345