我做了一個網站來播放音樂，當你按下音符或播放歌曲時，它會使用很多影片。我遇到了性能問題，尤其是在移動設備上，所以我想弄清楚是什么原因造成的。我使用谷歌瀏覽器進行了分析，它告訴我發生了很多Recalculate Style事情，并且每次都有 30 多個元素受到影響。我已經嘗試使影片盡可能高性能，我使用變換比例和背景顏色影片，另外我將will-change道具添加到變化最大的元素中，希望能解決問題，但我一直沒能獲得很多。
我在想也許最大的問題可能是影片背景顏色，因為這會導致整個影片重新繪制，但我仍然不明白為什么它會導致Recalculate Style？
uj5u.com熱心網友回復：
看網站，評論里的討論。看起來您的大多數性能問題是由于每次注釋更改時 SVG 合成造成的。如今，瀏覽器中的 SVG 渲染速度非常快，但仍然沒有 PNG 渲染那么快。
想到了兩個選擇，。
使用樣式集創建所有筆記，然后設定可見性。這里唯一的問題是，我不確定瀏覽器是否仍會在 SVG 進入/不可見時重新渲染它。也許一個非常低的不透明度也可以在這里有所幫助。基本上所有音符狀態的絕對位置都在彼此之上，活動狀態將具有完全不透明度，其他狀態則非常低。
為每個狀態動態地將 SVG 創建為 PNG，然后您可以翻轉 PNG，這應該比 SVG 每次重新繪制要快得多。
我個人喜歡選項 1.，但只需要做一些測驗。在瀏覽器中進行不透明度轉換肯定是快速且流暢的，因此您會期望 SVG 不需要重新渲染。我說非常低的不透明度，以防瀏覽器將不透明度視為 0，這相當于隱藏了可見性，并決定松開渲染畫布并在它再次變得可見時進行另一次 SVG 繪制。同樣，這里的一些測驗會證實。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/490049.html
標籤：javascript html css 反应 打字稿