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

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

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

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

試過(guò)把不涉及DOM的抽出來(lái)放到WebWorker上運(yùn)行，繪圖還是需要1~2s。這個(gè)圖還是要放在首頁(yè)的，總不能讓用戶(hù)一進(jìn)來(lái)先卡個(gè)幾秒鐘吧。

有沒(méi)有大神造過(guò)類(lèi)似的輪子能提供點(diǎn)優(yōu)化的思路，先謝了~~

回答

編輯回答

久舊酒

d3.js?

2018年3月31日 17:56

編輯回答

護(hù)她命

不知道你怎么實(shí)現(xiàn)的，不過(guò)我估計(jì)最大的問(wèn)題是每次畫(huà)一個(gè)新元件就要渲染一次，以至于渲染引擎被卡住。

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

2017年7月19日 00:51

編輯回答