So I've been looking around and am a bit lost on this topic. People have said that there's alternatives to iframes, but I don't see any that fit the bill for what I'm trying to do. I essentially created a small game that uses videos and plays particular ones based on corret button input from the keyboard.
All of that is in a seperate html file, and I want to display it on a different html file to be in an iframe like state on a different webpage. But I can't seem to figure out the best approach to this.
The iframe is just too slow, the game itself runs fine, but when I put it in an iframe it lags like crazy half the time, or stuff doesn't render because it's going so slowly.
Any ideas of where to start?
There is one alternative to <iframe>
and that's the <object>
tag. It can display content from different sources as well. The pro is it being conform to the xhtml-standards and encouraged to use but there's not such a broad / usable support in older browsers (you have to mess with it to get it right in IE). It's used as followed:
<object data="page.html" width="400" height="300" type="text/html">
Alternative Content
</object>
That being the direct answer to you question I don't think it will give you any speed advantage. Already for the reason that the <iframe>
-element is much more used and so more tested and cared for than <object>
.
I for myself never saw an <iframe>
being the cause for a slowdown, but that still might be possible. If that is an option, you should definitely try what ocanal said before in the comments: Let your script work on an wrapper container-div instead of the body-element and so embed it directly on the mainpage.
For the browser it shouldn't be much more than some overhead from handling a second document, so you could guess that it's just that little more to make your pc run slow. So it might be a good idea to optimize the code in general:
Look if you can find the bottleneck causing the slowdown. Possible causes could be
getting attributes from objects. For every additional period you use it means more work for your cpu:
// instead of using this over and over again
house.roof.window.handle.open();
house.roof.window.handle.close();
// save it to a var and use that instead
var handle = house.roof.window.handle;
handle.open();
handle.close();
window.setTimeout()
may also be too fast and waste cpu power unnecessarily (or too slow and won't look fine then, but never really right) - so you can use the new window.requestAnimationFrame
. The vendor-prefixed variants are implemented in the current versions of all important browsers and it's easy to provide a fallback to the old method.If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With