How to determine what in my script is blocking my HTML rendering?

Question

I have a web application that uses quite a bit of JavaScript.

When the page loads, it's very clear visually that something is blocking the rendering of a particular portion of the web site. This portion is generated by a Tabber Tabify JavaScript library.

How can I determine what's blocking the HTML rendering specifically so that I can modify my code to prevent this blocking?

Can I use Firebug, or some other tool, to walk through my HTML/JavaScript to determine where the HTML rendering is being blocked and if so, how?

UPDATE:

YSlow gives my web-application a score of "A" and Page Speed give a score of 94/100.

UPDATE 2:

The live site is linked below.

http://www.elite.com

What I'm specifically referring too is the actual Tabs themselves being rendering (and NOT the panel content inside the tab panes). It seems strange to me that the Tab headings themselves are taking so long to generate on the first (empty cache) page load.

Answer 1

You absolutely can, and should, use Firebug. Throw a breakpoint in to the first line of Javascript that gets called when the page loads, and step through it. As you're stepping through, keep an eye on the page itself.

The Firebug profiler can show you relevant information without having to step through everything line-by-line by showing you, for each function, the number of calls to that function, time spent inside that function, etc.

Answer 2

A few possibilities:

1. Loading scripts in your page will block rendering (the only fix for this is to put them in the head (blocks initial rendering) or at the end just before the </body> or load them after the page is loaded (e.g. onload)

2. Whatever the Tabber/Tabify tool is, needs time to process content... see if there is a way to optimize it.

Either way, if you post some code we can likely be of more help

Update:

If I load the page with my cache cleared, I see content rendering on the screen, then hiding (as it becomes hidden tab content)

Changing the non-visible content to display:none; when loading, and then only setting it back to display:block; once the Tabify stuff is done might help (a) speed up the rendering and (b) remove any flash of content that later gets hidden.

The RadComboBox'es you have load inline (which means the scripts block rendering)... if you can delay this until the onload event fires it will speed up rendering.

I would move the Unica Page Tag (tracking) to the end of your page too.

You have 8 external script files - if there is any way you can combine them it would be good.

You don't have gzip turned on for most of those script files

All of your static content (images, css, scripts) don't have an expires header which means they won't get cached, which means pages won't load fast after the first page.