HTML5 网站上的性能问题

Question

I am building an Webpage that uses SVG, Canvas and, of course, HTML. The idea of this page is to animate the redrawing of some of svg-paths on the canvas. The paths I like to redraw are annotated with an namespace Attribute, all other paths are just displayed as they are. That is all working fine. The performance leak appeared the last two hours while I was adding some content to the page: But at first a little illustration of the page setup:

The SVG and the Canvas are both 4000 * 4000 px wide and lie directly over each other in one container div. Going from one "page" to another means to tween the upper left edge of this container. This was also working fine since the discussion of inserting text turned in the direction of using html div container, instead of the svg itself. So i inserted a third container div in which all the texts are stored and after svg is loaded they are positioned absolutly. With every div I added the "pan-tween" and even the drawing performance decreased to a Point that is just too low. I am searching for way to bring the performance back to a level that is acceptable for the user. One of my ideas is to set text divs to display: none, or visibility: hidden, as long as they are not displayed actually. Another option is to tween only svg and canvas, after this is finished placing the text-div-container in one step. But I am currently not sure which solution is better, or if there isn't something much better. So if anybody has an Idea, please let me know.

Thanks for reading! Greetings Philipp

Answer 1

Try to pan the outer "text div" in intervals(say 10ms or 50ms). I this with a lot with rendering, in HTML usually I use greater values like 100ms or 150ms(I use to do this with canvas). Didn't understand if you pan the outer div or all the "text divs".