Separate scenes vs single document

How does the performance vary between having many different hype documents (div’s) on a page, compared to having only one document that has everything in it.

Unfortunately there’s a lot of different factors that can affect performance, and for any performance work I always recommend an approach to go with the simplest to build solution first, and then if there’s issues measure and work off measurements.

There’s two major factors that probably affect performance:

  • Texture sizes. By default, Hype will put as many divs onto the GPU for the fastest graphics performance possible. However if your page and items on the page are very large (in pixel dimensions) then it can actually incur a substantial penalty if these image textures need to be moved off and back onto the graphics card. To get around this for large documents, you can uncheck ‘Use WebKit graphics acceleration’ in the Document Inspector
  • JavaScript Runtime Overhead. Hype’s JavaScript runtime has lots of data structures and code on timers that is run. An additional Hype document on a page will double many things that wouldn’t otherwise need to be doubled. If your documents are small and there’s not a lot of animation, it is less of an issue.