這篇只針對網頁前端作說明
電腦網頁版的動畫瘋的彈幕系統,在彈幕大量的情況下會消耗大量記憶體,甚至有些電腦等級不是很好的使用者瀏覽器直接閃退
其實原因很簡單
不過光這樣說沒什麼說服力,所以我寫了一個簡單的測試網站,裡面有上述2種繪製彈幕的方式供測試
測試網址
https://hbl917070.github.io/html/彈幕測試/
原始碼
https://github.com/hbl917070/html/blob/master/彈幕測試/index.html
說明:
評估彈幕系統應該使用【canvas繪製】或直接【一則彈幕用一個DIV物件】。
啟動後觀察CPU的使用量與記憶體的消耗(google chrome開啟【工作管理員】的快速鍵為【shift + esc】)
使用canvas繪製
使用DIV繪製(chrome記憶體使用量會隨著時間上升,這大概跑了5分鐘)
那其他人又是怎麼做的呢?
巴哈:一則彈幕一個DIV物件
niconico:統一使用canvas處理
bilibili:統一使用canvas處理
解決方法很簡單,我用canvas重新繪製動畫瘋的彈幕,只要裝個js腳本就行了
提升動畫瘋的執行效率&過濾彈幕
電腦網頁版的動畫瘋的彈幕系統,在彈幕大量的情況下會消耗大量記憶體,甚至有些電腦等級不是很好的使用者瀏覽器直接閃退
其實原因很簡單
- 動畫瘋的做法:一則彈幕就是用一個DIV物件,如果有2000則彈幕,就產生2000個網頁物件
- 比較好的做法:就使用1個canvas來統一處理所有彈幕,就算有100萬則彈幕,一樣就只有一個網頁物件
不過光這樣說沒什麼說服力,所以我寫了一個簡單的測試網站,裡面有上述2種繪製彈幕的方式供測試
測試網址
https://hbl917070.github.io/html/彈幕測試/
原始碼
https://github.com/hbl917070/html/blob/master/彈幕測試/index.html
說明:
評估彈幕系統應該使用【canvas繪製】或直接【一則彈幕用一個DIV物件】。
啟動後觀察CPU的使用量與記憶體的消耗(google chrome開啟【工作管理員】的快速鍵為【shift + esc】)
使用canvas繪製
使用DIV繪製(chrome記憶體使用量會隨著時間上升,這大概跑了5分鐘)
那其他人又是怎麼做的呢?
巴哈:一則彈幕一個DIV物件
niconico:統一使用canvas處理
bilibili:統一使用canvas處理
解決方法很簡單,我用canvas重新繪製動畫瘋的彈幕,只要裝個js腳本就行了
提升動畫瘋的執行效率&過濾彈幕