LV. 27
GP 3k

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

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


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

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

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


389
-
LV. 26
GP 40
2 樓 Louis - 瀧本君 p50504321
1 -
讚哦,分析的好

CSS苦手阿><
1
-
LV. 19
GP 3k
3 樓 喵福ฅ(๑•̀ω•́๑) cies96035
1 -
好,巴哈加油
1
-
LV. 22
GP 309
4 樓 東東之本氣模式 dong194
4 -
手機版沒有這個問題

只是解析360跟720有時分不出來
4
-
LV. 16
GP 937
5 樓 夜翔 good2111
25 -

25
-
LV. 18
GP 373
6 樓 玥楓(兔兔我的) q956345
0 -
推個
0
-
LV. 35
GP 1k
7 樓 可是我 star860927
13 -

作者標示-非商業性

本授權條款允許使用者重製、散布、傳輸以及修改著作,但不得為商業目的之使用。使用時必須按照著作人指定的方式表彰其姓名。

所以去看刀劍神域某集會卡到死嘍?
13
-
LV. 34
GP 3k
9 樓 火鍋 jaywyana
1 -

作者標示-非商業性

本授權條款允許使用者重製、散布、傳輸以及修改著作,但不得為商業目的之使用。使用時必須按照著作人指定的方式表彰其姓名。

講這些也沒啥用,巴哈很明顯就沒在重視動畫瘋...
1
-
LV. 15
GP 151
10 樓 莫輕舞 scarlet5243
0 -
沒卡過
0
-
LV. 13
GP 29
11 樓 大雞腿 dagtui
1 -
有辦法分析 CDN的問題嗎?

每跑一小段就會重新接受加密的m3u 不知道是不是這樣說

不過還是很猛

還是卡位
1
-
LV. 25
GP 179
12 樓 bluemoon bluemoon1234
2 -
也就是巴哈網頁寫的很爛?

不知為啥會做出這種2流的東西

公司裡面沒人材了嗎
2
-
LV. 40
GP 2k
13 樓 gyesk wl02510238
0 -

作者標示-非商業性

本授權條款允許使用者重製、散布、傳輸以及修改著作,但不得為商業目的之使用。使用時必須按照著作人指定的方式表彰其姓名。

之前都用最高畫質看   超LAG   網頁三不五時還會當掉

現在改720P畫質   就蠻順的了
0
-
LV. 18
GP 387
14 樓 N N15675378
2 -
場外都是人才....
720p沒卡過
2
-
LV. 10
GP 49
15 樓 夜響 iwtpag666
1 -
巴哈不會改的啦~
1
-
LV. 6
GP 12
16 樓 杯子布丁 ANDERSON131A
0 -
巴哈已經很努力了
0
-
LV. 15
GP 134
17 樓 神奈神威 康娜 zxc6872003
0 -
昨天看動朋一直再LAG,看到完全看不下去……
0
-
LV. 27
GP 3k
18 樓 茵芙C-Shadow信徒 jy94562313
0 -
1080沒卡過
0
-
LV. 22
GP 325
19 樓 暗月 kirby123
1 -
我覺得div彈幕為什麼不用css動畫..
1
-
LV. 9
GP 32
20 樓 天生木柴 jst30441
0 -
喔喔喔 場外人才濟濟
0
-
未登入的勇者,要加入 62 樓的討論嗎?
板務人員:

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


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

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