I got a question today on where you should put the replacement code for sIFR. Here’s that e-mail, with reply:
cheekygeek wrote:
Mark, I’ve asked this on a couple blogs, but forgot which ones so don’t know if I got an answer.
The replacement code for sIFR can go at the bottom of the page OR in the sifr.js file. Is there a rendering-speed improvement to putting it one place or the other? I wonder if you could list the most important factors in getting the sIFR headlines to render the fastest (small/few font.swfs being used, etc.)
Also, does it matter how you call the sifr.js file (speedwise?)
Thanks!
Hey,
The explanation was covered in an earlier version I believe, but it
works like this: if you put the replacement code in the JavaScript file,
it’ll be executed on onload or when you call sIFR(). If you put
the replacement code in the body, it’ll be executed immediately.
Effectively, this means that you could put the replacement code in the
JavaScript and call sIFR() in the body. It won’t make any difference.
The reason there are two methods to replace elements in sIFR is that the onload event is only fired when the page has fully loaded — including all images and other external files. This can take much longer than the actual rendering of the page, so replacing inside the body will make sIFR look faster.
There is a downside to this, however. Elements which haven’t been rendered correctly (imagine an image without width and height attributes) can affect the layout, and in effect (no pun intended!) this can affect the rendering of replaced elements (as these are based on the dimensions of the original elements).
Also, in Safari and in Gecko browsers in XML mode the page isn’t rendered at the moment you would normally replace the elements in the body. For these browsers the replacement is postponed until onload.
Take care,
- Mark