在特定解析度下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 好像也可以

使用更安全的Ed25519做SSH Key

前幾天看到社團在討論一些大公司開始支援 Ed25519 加密金鑰
想說這什麼酷東西趕快來跟風

根據 http://ed25519.cr.yp.to/ 的介紹,優點有這些:

  • 安全性等同 RSA 3000 bit
  • 免疫 Hash 碰撞
  • 免疫 cache-timing attacks
  • 免疫 side-channel attacks
  • 簽章很短(64 bytes)
  • 金鑰很短(32 bytes)

選擇 SSH key 的加密演算法在舊系統相容性不好的缺點

然後 SSH Key: Ed25519 vs RSA 這篇文章說,其實在 RSA 3000 bit 以上都沒有高效的破解方式
破解要花很久=降低破解動力=難度很高

圖像化的演算法可以看這裡,可惜我數學不好看不懂 Orz


產生 Key 的指令(摘自 使用 SSH 金鑰與 GitHub 連線):

ssh-keygen -t ed25519