Since the anticipated release of the stable build of Theia draws closer (July 12th), I thought I'd finally get a move on working on some of the performance improvements I had in mind.

 

One such improvement has just been added (which you will be able to see here, if you view any page's source). With the latest version of Theia, each module now has its own CSS and JavaScript file(s) when applicable. This has also meant that on many page loads, anywhere between 10-15 CSS files are included, and a few less than that of JavaScript files. To counter the multiple requests that a client/browser would have to make for each different CSS or JavaScript file, a mechanism has now been added (for CSS only at the moment) which takes all the code from included files, throws it into one large file and caches it for future use (whenever a page is loaded again that included the same set of CSS files, that is).

 

It looks to be working smoothly now, but there was a slight hitch. I hadn't taken into consideration that the cached file would be saved to Theia's cache directory and NOT to the themes' directory, and since all relative background image URLs in CSS code are relative to the location of the CSS file itself, this meant all styled background images would die! >_< Of course it would have worked just to save the cached CSS file to the themes' directory itself instead of a different (cache) directory, but I don't want theme directories to be more cluttered than they have to be - and frankly, I see that as a bit of a cop-out. The solution I came up with was this something like this:

 

 

... yup, a regular expression. :D I like regular expressions quite a bit actually, because you can almost always use a regular expression to parse data in complex ways built-in functions don't provide. Plus, I feel that they are probably the defining aspect of any coding language that shows how much someone knows. Now, I don't claim to be the best at regular expressions in the world, but I do know quite a lot that helps me always get what I need done with one.

 

So there you have it - CSS module files will now be dumped into large cache files, named with a hash based on what module-CSS files were included, and instead of 15 or so requests, one request is made, and still ONLY the relevant modules are loaded into the cache file. In other words, not every CSS file will be dumped into the cache files, just CSS files relevant to the page you are viewing.

 

I will give JavaScript includes this same sort of treatment tomorrow! :)