Methods of reducing number of CSS calculations on webpage

Question

Our application at work uses the ExtJS (Sencha) framework for the UI. The problem I have with the framework is the amount of HTML that is output by the framework.

I have noticed that the areas of the system that are reported as being slow by users have a ton of CSS calculation calls. I measured this in Google's Speedtracer and some pages take 8seconds to load. 80% of the time is dedicated purely to CSS calculations. Before trying to alter the way the framework works, is there anyway to delay CSS calculation of a page, or are these calculations done when the objects are rendered?

I have been searching for ways to do this, and maybe my "google-fu" is terrible, but I haven't found anything concrete on how to achieve something like this.

EDIT: After speaking a colleague, he pointed me in the direction of calling .suspendEvents() on the grid before loading any data and .resumeEvents() afterwards, this alone has saved 300ms of loading time :O This is reducing the number .getStyle calls detected by Firebug. I am yet to test this difference with Google SpeedTracer

Answer 1

It's hard to say what's causing your performance problem without knowing exactly what your app is doing. CSS will have some impact but not much, it's more likely that some JavaScript in your app is causing excessive reflows while the page is rendering.

Summary of stubornella's article (the second link)

Reflow is the process by which elements in a web page get laid out according to the style rules. A reflow is computationally expensive but it is usually possible to draw a static HTML page in a single reflow as long as the rendering of any later elements doesn't effect elements that have already been drawn. Things which are likely to lead to multiple reflows and some work arounds:

1. Dynamically adding CSS classes to elements - change classes as low in the dom tree as possible to limit the impact
2. Adding multiple DOM elements - create an invisible structure and add it in a single operation instead
3. Adding multiple inline styles to visible elements - better to create a class with all the styles, then apply the class
4. Applying animations to relatively positioned elements - better to animate position: fixed or position: absolute elements as they won't impact anything else
5. Fine grained animations - moving an element 3px at a time may be more smooth than moving it 1px at a time because you avoid two reflows
6. Tables are one of the few cases where the rendering of an element later in the DOM can change how an earlier element should be rendered - if you must use tables, use table-layout: fixed