Solution to a severe performance problems with jQuery/ListNav and Blueprint

[hutch]

Hi,

I've encountered, and worked around, a rendering performance problem
in WebKit based browsers.

I'm working on a webapp and a particular uncontrived page is rendered
by FireFox in about 0.5s while Safari takes about 12s.

The problem is caused by the Blueprint screen.css style sheet being
applied before the jQuery ListNav plugin is initialised. I certainly
don't know whose 'fault' it is, but I do know it can be avoided by
applying the style sheet after ListNav has finished doing it's thing
on the page.

Thought you might be interested. At least it's a 'head's up'

I've written in more detail about this on my weblog:

<http://recursive.ca/hutch/2008/12/30/how-to-destroy-page-rendering-
performance-using-just-javascript-and-css/>

Cheers,
Bob

[Josh Clayton]

Bob,

Could you upload the offending HTML to your website and post the
link? I've never heard of CSS slowing down the actual rendering of a
page so it'd be very interesting to try and recreate.

I know it sounds cliché, but have you validated both your html as well
as the html output generated once the JS has run? Just another
thought.

Cheers,
Josh

[Bob Hutchison]

Hi Josh,

On 30-Dec-08, at 3:49 PM, Josh Clayton wrote:

>
> Bob,
>
> Could you upload the offending HTML to your website and post the
> link? I've never heard of CSS slowing down the actual rendering of a
> page so it'd be very interesting to try and recreate.

Here's a link:

<http://www.raconteur.info/stuff/strange-css-js-problem/fast-for-webkit.html
>

There is a link on that page to the slow version, so you can flip back
and forth.

I'm seeing a flash on safari like I reported on FF from that URL. Even
more interesting, occasionally (rarely) the Safari doesn't show the
problem.

If you download all the files:

<http://www.raconteur.info/stuff/strange-css-js-problem/strange-css-js-problem.tgz
>

and play with it locally (e.g. a file: URL) you'll not see the flash
in Safari after the cache is full.

Something to do with latency affecting the timing?? Maybe the css is
being delayed just enough?

>
>
> I know it sounds cliché, but have you validated both your html

with tidy. The demonstration stuff is missing a title, the real stuff
isn't.

> as well
> as the html output generated once the JS has run?

There are no console errors in either Safari or FF. How do you check
this?

> Just another
> thought.

Sure, thanks!

Cheers,
Bob

>
>
> Cheers,
> Josh
>
> On Dec 30, 3:39 pm, hutch <hutch-li...@recursive.ca> wrote:
>> Hi,
>>
>> I've encountered, and worked around, a rendering performance problem
>> in WebKit based browsers.
>>
>> I'm working on a webapp and a particular uncontrived page is rendered
>> by FireFox in about 0.5s while Safari takes about 12s.
>>
>> The problem is caused by the Blueprint screen.css style sheet being
>> applied before the jQuery ListNav plugin is initialised. I certainly
>> don't know whose 'fault' it is, but I do know it can be avoided by
>> applying the style sheet after ListNav has finished doing it's thing
>> on the page.
>>
>> Thought you might be interested. At least it's a 'head's up'
>>
>> I've written in more detail about this on my weblog:
>>
>> <http://recursive.ca/hutch/2008/12/30/how-to-destroy-page-rendering-
>> performance-using-just-javascript-and-css/>
>>
>> Cheers,
>> Bob
> >

----
Bob Hutchison
Recursive Design Inc.
http://www.recursive.ca/
weblog: http://www.recursive.ca/hutch