這篇是 troubleshoot 的紀錄desu
最近在寫公司直播系統的前端,遇到有 user 回應他的畫面會一直「跳動」,
後來 PM 也遇到有傳錄影來,發現是 scroll 不斷出現、消失,像是下面這樣:
後來發現其實就是 scroll 會不斷出現、消失,代表有東西不斷影響網頁長度
不過到底是什麼呢?
還請了設計師來幫忙看
發現是 video.js 產生的 DOM 有兩處不斷被更新:
(vjs-progress-holder、vjs-text-track-display)
接著打開 Performance tab 錄製在跳動期間執行的動作
大致上可以看到是有頻率的在執行程式,後來仔細看大致上有兩個很常發生的操作:
- 計算影片剩餘時間、並更新到 DOM 中
- removeChild() 然後再 appendChild()
尤其後者看起來就效能不友善阿😂
後來是找方法關掉 progress bar、text track display 才暫時緩解這問題
不過加上 .vjs-liveui 這個 class 好像也可以
搶先發佈留言