预备一个容器
首先在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);