在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML5  室內(nèi)設(shè)計  HTML/ 使用SVG.js繪制圖表,由于繪制元素過多導(dǎo)致UI阻塞有什么解決方法嗎?

使用SVG.js繪制圖表,由于繪制元素過多導(dǎo)致UI阻塞有什么解決方法嗎?

需求比較特別,是個比較復(fù)雜的網(wǎng)絡(luò)拓?fù)鋱D,要畫得比較整齊。找了很久都沒有找到現(xiàn)成的庫。所以就用SVG.js自己擼了一個,但是在數(shù)據(jù)變多的時候畫圖時間就變得很長,現(xiàn)在的數(shù)據(jù)已經(jīng)接近10s,數(shù)據(jù)還有繼續(xù)增長的可能。

當(dāng)初也是一時腦抽選了SVG,可能選Canvas會比較好,而且也并沒有特別需要SVG的事件處理能力之類的需求,但是現(xiàn)在時間有限,想看看有沒什么辦法可以臨時處理一下。

想在后臺渲染好之后把svg的xml傳到前臺顯示,發(fā)現(xiàn)node.js上由于缺乏DOM相關(guān)的API,使用SVG.js作者推薦的svgdom來做DOM API的polyfill,發(fā)現(xiàn)各種圖形的定位已經(jīng)亂掉了。JSDOM也好像缺乏對SVG的支持。至于PhantomJS或者h(yuǎn)eadless Chrome這種有點復(fù)雜,需要點時間學(xué)習(xí)。

試過把不涉及DOM的抽出來放到WebWorker上運行,繪圖還是需要1~2s。這個圖還是要放在首頁的,總不能讓用戶一進來先卡個幾秒鐘吧。

有沒有大神造過類似的輪子能提供點優(yōu)化的思路,先謝了~~

回答
編輯回答
久舊酒

d3.js?

2018年3月31日 17:56
編輯回答
護她命

不知道你怎么實現(xiàn)的,不過我估計最大的問題是每次畫一個新元件就要渲染一次,以至于渲染引擎被卡住。

我建議你把畫好的 SVG 文件存下來,然后直接丟到瀏覽器里看渲染時間。如果很快就渲染出來,那就是“畫”的過程太浪費時間,優(yōu)化也從此入手。如果也要1~2s才能渲染出來,那可能就要優(yōu)化你畫出來的結(jié)果,看有沒有不必要的元件可以干掉一些,等等。

2017年7月19日 00:51
編輯回答
不舍棄

圖表需求為啥不用圖表庫?就算不用也可以參考源碼呀。

2018年7月3日 14:48