我有一個(gè)H5的頁(yè)面(經(jīng)常在微信瀏覽器中使用)調(diào)用了 HighCharts 來(lái)顯示一個(gè)K圖(其實(shí)是HighStock),由于金融方面的數(shù)據(jù)是經(jīng)常、快速變化的,在以前采用了每秒鐘更新圖表、變化數(shù)據(jù)的方式,后來(lái)更換了價(jià)格接口,想要做到每秒鐘N次變化數(shù)據(jù)。按照舊有的邏輯其實(shí)已經(jīng)實(shí)現(xiàn)了,但是現(xiàn)在發(fā)現(xiàn)一個(gè)嚴(yán)重的問(wèn)題,在每秒鐘多次變化數(shù)據(jù)時(shí),造成DOM阻塞,尤其在微信瀏覽器中非常嚴(yán)重。我用 console.time 測(cè)試了很久,確定是 HighStock 在更新圖表時(shí)造成的卡頓。參閱大量資料之后,初步認(rèn)定卡頓原因?yàn)?HighStock 采用 svg 渲染圖表。那么問(wèn)題來(lái)了:1、HighStock 在每秒鐘多次更新的時(shí)候造成的卡頓,是否的確是因?yàn)?SVG ?2、如果使用 Canvas 模式的圖表,是否會(huì)減輕由 DOM 阻塞帶來(lái)的嚴(yán)重卡頓?3、如果上面的答案均為是,那么是否有某個(gè)參數(shù)或者配置,要求 HighStock 使用 Canvas 模式?4、如果 HighStock 不能使用 Canvas,有沒(méi)有其他優(yōu)秀的 Canvas 圖表框架推薦?(只用K圖)謝謝
Highcharts DOM阻塞、卡頓
楊__羊羊
2018-09-07 13:13:10