HTML5網站上的性能問題

Question

我正在構建一個使用SVG，Canvas和當然HTML的網頁。這個頁面的想法是動畫重繪畫布上的一些svg路徑。我喜歡重繪的路徑使用名稱空間Attribute進行註釋，所有其他路徑只是按原樣顯示。這一切都工作正常！性能泄漏出現在最近兩個小時，而我正在向頁面添加一些內容。 但在頁面設置的第一一點插圖：

的SVG和畫布均爲4000 * 4000像素寬，並且在一個容器的div直接位於彼此之上。從一個「頁面」移動到另一個頁面意味着在該容器的左上邊緣補間。自從討論插入文本轉向使用html div容器的方向而不是svg本身以來，這也工作得很好。 因此我插入了第三個容器div，其中存儲了所有文本，並且在加載svg之後，它們被絕對定位。 隨着每隔div添加「pan-tween」，甚至繪圖性能下降到一個太低的點。 我正在尋找讓性能回到用戶可以接受的水平的方式。我的想法之一是設置文本div顯示：無，或可見性：隱藏，只要它們沒有實際顯示。另一個選擇是僅補間svg和canvas，在完成將text-div容器放入一步之後。但我目前不確定哪種解決方案更好，或者沒有更好的解決方案。所以如果有人有一個想法，請讓我知道。

感謝您的閱讀！ 問候菲利普

Answer 1

嘗試平移外部「文本div」間隔（比如10ms或50ms）。我在渲染方面做了很多工作，在HTML中我通常使用更大的值，例如100ms或150ms（我使用canvas來做到這一點）。 不明白，如果你平移外部股利或所有的「文本股利」。