LV. 27
GP 3k

【攻略】分析動畫瘋Lag的原因(釋出優化腳本)

樓主 深海異音 hbl917070
386 -
這篇只針對網頁前端作說明


電腦網頁版的動畫瘋的彈幕系統,在彈幕大量的情況下會消耗大量記憶體,甚至有些電腦等級不是很好的使用者瀏覽器直接閃退

其實原因很簡單
  • 動畫瘋的做法:一則彈幕就是用一個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腳本就行了

提升動畫瘋的執行效率&過濾彈幕


386
-
未登入的勇者,要加入討論嗎?
板務人員:

7556 筆精華,昨天 更新
一個月內新增 17
歡迎加入共同維護。


face基於日前微軟官方表示 Internet Explorer 不再支援新的網路標準,可能無法使用新的應用程式來呈現網站內容,在瀏覽器支援度及網站安全性的雙重考量下,為了讓巴友們有更好的使用體驗,巴哈姆特即將於 2019年9月2日 停止支援 Internet Explorer 瀏覽器的頁面呈現和功能。
屆時建議您使用下述瀏覽器來瀏覽巴哈姆特:
。Google Chrome(推薦)
。Mozilla Firefox
。Microsoft Edge(Windows10以上的作業系統版本才可使用)

face我們了解您不想看到廣告的心情⋯ 若您願意支持巴哈姆特永續經營,請將 gamer.com.tw 加入廣告阻擋工具的白名單中,謝謝 !【教學】