在特定解析度下video.js會不斷觸發捲軸

這篇是 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 好像也可以

Add a Comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *