Javascript parsing: bootleneck?
August 17th, 2007
While hacking on performance and a soon to be released customer site, it occurred to me that parsing the JavaScript we use is a pretty huge bottleneck. For CSS and JavaScript we use minification and compression and we even use domain aliases to parallel image/resource downloads.
We currently haven’t the templates connected to the CMS yet, but the raw time is currently between 700 and 900ms. Maybe it can be justified because the layout isn’t Web 1.0 style (i.e. many round corners, shadows, etc.).
What puzzled me was the “loading time of JavaScript was around 300ms”, see this picture:

That’s quite a long time. It may is not that good visible from the chart, but nearly everything following the JavaScript is hold until it is read, which delays the complete loading of the rest of the page.
Since behind the scenes the actual request is in reality using Minify, it’s not just plain serving (but for this scenario the JavaScript has already been cached).
So I took a look just at the JavaScript loading, see this:

What’s that? Roughly 30ms vs 300ms?
The only realistic guess I’ve at the moment is: parsing the JavaScript.
This single request loads the following libraries:
- behaviour
- prototype
- scriptaculous (+effects)
- yui: yahoo-dom-event
- yui: container_core
- yui: menu.js
- our own small JavaScript parts
Maybe I’m too optimistic but it hit me a bit that JavaScript parsing still does take so long. Given that the JavaScript is cached (ideally) things such a huge problem, but still. It was frustrating that I could trim down the >1s request to ~700ms but not further and for most of the part just because it takes as long as it needs it.
Entry Filed under: JS
1 Comment Add your own
1. Thomas Kowalski | July 30th, 2009 at 8:23
In case the stop of the processing the files following the JS is bothering you, take a look at steve souders work (cuzillion). It’s possible to create a script tag using js to start downloading an script without blocking.
Leave a Comment
Some HTML allowed:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
Trackback this post | Subscribe to the comments via RSS Feed