IE video 標籤記憶體問題

最近遇到一個 IE 會 crash 的問題,找很久才發現是記憶體問題,然後因為那頁有用到大量的<video>標籤,所以就直接鎖定目標,結果發現果然 video 就是問題元兇,測試到 IE 11 還是同樣行為。

目前發現的問題有兩層,第一層問題是如果 IE 在遇到 video 沒有設定 poster 時,會自動初始化整個 video 元件,去把影片抓下來,只為了產生 poster 圖片,第二層問題,就是這個初始化 video 元件的動作,會吃掉很多的記憶體,即使我的影片只有五百多kb,IE 還是一個 video 就吃掉數十 mb 的記憶體,即使這些 video 都沒有播放,甚至還用 CSS 藏起來了,然後因為一個頁面上有很多的影片輪流播放,所以把記憶體吃光後就當掉了。

要解決這個問題,一開始是想說設定正確的 poster 圖片就好了,確實解決了第一層的問題,但是因為影片還是會輪撥,遲早會把記憶體吃光,所以試了幾個方法想要避免這種情形,像是把 dom node detach 甚至砍掉之類的,不過都沒有效果,吃掉的記憶體不會還回來,最後只好讓 IE 不做輪撥了。

這個問題我看 stackoverflow 好像也沒有,看來在單一頁面上放很多 video 的使用情形真是很少見啊。