摘要:準(zhǔn)備一個(gè)容器首先在外插入一個(gè)的容器避免重繪計(jì)算方法總結(jié)出了兩種方法,這里由于我使用的是,其他元素同理。下面先說性能最好的一個(gè)方法,先創(chuàng)建所有的元素,然后統(tǒng)一到準(zhǔn)備好的容器里。
準(zhǔn)備一個(gè)容器
首先在body外插入一個(gè)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);計(jì)算方法
總結(jié)出了兩種方法,這里由于我使用的是svg,其他元素同理。下面先說性能最好的一個(gè)方法,先創(chuàng)建所有的text元素,然后統(tǒng)一append到準(zhǔn)備好的容器里。
代碼如下:
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數(shù)字在屏幕上的寬度 console.log(getSvgsWidth([...Array(100000).keys()]));
還有一個(gè)方法(不推薦)就是事先準(zhǔn)備好一個(gè)text,然后每次替換里面的textContent返回寬度,代碼如下:
// 準(zhǔn)備好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; }
// 可以做一個(gè)性能測(cè)試,我這邊算出來他倆一直保持著5倍左右的差距 const dateStart = new Date().getTime(); console.log(getSvgsWidth([...Array(100000).keys()])); console.log(getSvgsWidthWithOneText([...Array(100000).keys()])); console.log(new Date().getTime() - dateStart);
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/53481.html
摘要:準(zhǔn)備一個(gè)容器首先在外插入一個(gè)的容器避免重繪計(jì)算方法總結(jié)出了兩種方法,這里由于我使用的是,其他元素同理。下面先說性能最好的一個(gè)方法,先創(chuàng)建所有的元素,然后統(tǒng)一到準(zhǔn)備好的容器里。 準(zhǔn)備一個(gè)容器 首先在body外插入一個(gè)absolute的容器避免重繪: const svgWidthTestContainer = document.createElement(svg); svgWidthTes...
摘要:準(zhǔn)備一個(gè)容器首先在外插入一個(gè)的容器避免重繪計(jì)算方法總結(jié)出了兩種方法,這里由于我使用的是,其他元素同理。下面先說性能最好的一個(gè)方法,先創(chuàng)建所有的元素,然后統(tǒng)一到準(zhǔn)備好的容器里。 準(zhǔn)備一個(gè)容器 首先在body外插入一個(gè)absolute的容器避免重繪: const svgWidthTestContainer = document.createElement(svg); svgWidthTes...
摘要:它能給予一個(gè)關(guān)于你使用何種設(shè)備的正式結(jié)論,并且能通過獲得。寬度兩倍,高度兩倍,總體四倍。視口的作用是限制元素,元素是所有網(wǎng)頁塊元素中最高一級(jí)的元素。視口并非一個(gè)結(jié)構(gòu),其不受控制。重點(diǎn)是上訴結(jié)論是在縮放的條件下成立的。 原文地址:http://quirksmode.org/mobile/... 這篇小短文中,我將會(huì)介紹關(guān)于viewport與諸如html元素,window 對(duì)象,scree...
Image byWilli HeidelbachfromPixabay在UI設(shè)計(jì)中,文本是常用的元素之一,他是傳遞信息的主要工具。或許是因?yàn)樗^基礎(chǔ),很多時(shí)候我們會(huì)忽視它的存在,導(dǎo)致頁面最終效果不夠理想。對(duì)于注重用戶體驗(yàn)的產(chǎn)品來說,每一個(gè)細(xì)節(jié)的偏差都可能成為致命傷。藝術(shù)是無依據(jù)可循的,但是文字排版卻是有依據(jù)可循的。正文的大小、字階的比例,字與字之間的距離、文本的顏色和對(duì)比度等,都是影響可讀性和易...
閱讀 2092·2023-04-25 20:52
閱讀 2473·2021-09-22 15:22
閱讀 2122·2021-08-09 13:44
閱讀 1766·2019-08-30 13:55
閱讀 2804·2019-08-23 15:42
閱讀 2278·2019-08-23 14:14
閱讀 2871·2019-08-23 13:58
閱讀 3002·2019-08-23 11:49