RuzeeBorders are much faster now with version 0.8 – The Performance Release.
The kick gave Simon with his hint about using caching strategies to improve speed by drawing a corner only once and reuse that on other DIVs with the same border settings. The new version of RuzeeBorders now exactly does that.
Btw.: Simon’s currently doing a RuzeeBorders based design at/for eurojobs.com. I think it looks pretty cool! Here’s a screen shot:
But back to business: Another speed-up comes from getElementsByClass that now also caches its results. The old version became slower and slower the more borders had been drawn (whenever you used the ‘.className’ selector of the draw() method). I’ve actually made an own JavaScript file for that functionality and plan to release that seperately as a “spin-off” of RuzeeBorders ;-).
Now, what exactly are the results? Most of the browsers that I’ve tested render the main page of my blog twice as fast as before now. There’s one browser with a minor improvement: Firefox is only 1.3 times faster… I found a trick to even speed this one up, but that’ll let your page flicker, breaks #comment URLs, and I don’t recommend it (see the RuzeeBorders page for more info). Here are the measurements I did (note that the Safari results are not comparable since I was running the tests remote – the speed boost may be pretty realistic, though):
| Browser | 0.7.3 [ms] | 0.8 [ms] | speed boost |
| IE 6 | 2,500 | 1,350 | 1.85 |
| Firefox 1.5 | 2,000 | 1,500 (trick: 450) | 1.3 (4.4) |
| Safari 2 (remote) | 7,450 | 3,800 | 1.96 |
| Opera 8.5 | 575 | 270 | 2.13 |
| Konqueror 3.5 | 800 | 410 | 2.13 |
Opera mainly rules, Konqueror is fast as well, Safari should be at least as fast as Konqueror (feedback’s appreciated!) and Firefox and IE are simply – slow… But then again fast enough for a site experience that is fairly acceptable (feedback’s appreciated again ;-)). And as I said, much faster than before – still: expect more to come.
[tags]css, javascript, round corners, shadowed corners, ruzeeborders, optimizations[/tags]