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

共计 1569 个字符，预计需要花费 4 分钟才能阅读完成。

准备一个容器
首先在 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) => {
const textElement = document.createElement(‘text’);
textElement.textContent = text;
textsFragment.appendChild(textElement);
return textElement;
});
svgWidthTestContainer.appendChild(textsFragment);
const textElementsWidth = textElements.map(element => 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) => {
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);