Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I'm working on a really big project in the same area which has a lot of style definitions and different JS-Scripts for different tasks in the project. The site had the same problems => too many requests. Basically, we've implemented a fix as follows:</p> <ul> <li>The render component of the application remembers each necessary js include file and puts them together, minified at the end of the rendering process. the resulting output is being cached by the clients via caching headers and the <a href="http://de.wikipedia.org/wiki/HTTP_ETag" rel="nofollow">HTTP ETag</a>!</li> <li>the style sheets of the given application rely on each other. There is a huge basic style-sheet that cares about basic formatting and page objects (size, floats etc.) which is being extended by a basic color scheme, which may be extended by a custom overriding style sheet for different customers to enable custom colors, layout, icons etc.... All these stylesheets put together can exceed for example 300k in size because there are a lot of icons as background images... each icon has two definitions - one as a GIF for IE6 and a PNG image for all other Browsers.</li> </ul> <p>And here we came to <strong>Problems</strong>.. at first the Stylesheets worked with <em>@import</em> rules. We wrote a wrapper script, which parsed all the styles and combined them into a single file. The result was, that all IE versions broke the layout when a style sheet exceedes about 250-270k in size. the formatting just looked like crap. So we changed this back, so that our wrapper only puts together two style sheets and writes all other sheets as <em>@import</em> rules at the top. Also, the wrapper uses caching headers and the ETag.</p> <p>This solved the loading issues for us.</p> <p>Regards</p> <p>(Please, don't rant at me because we have a 300k stylesheet. Trust me, it just has to be for various reasons. :D)</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload