Hi, the name's Steffen and I'm writing about the Web, programming
and all those things coming to my mind. Enjoy your stay.Draw it faster, dude!
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.
May 16th, 2006 at 2:30
Hi, great script, i love it!
But… it doesnt work for me under IE6.0 SP2.
Ive also tested under FF1.5, Opera and Netscape and works fine, but all my Div’s which ive given shadows/borders just lose their background/border colours alltogether on IE6.
BTW, i tried to post this under the RuzeeBorders article, but when it asked my to “add 0 and 9″ it said i failed math when i entered 9 as the answer!
May 16th, 2006 at 2:52
Dark Angel - I had the same problem with the 7x version of the script, and found that I had an end bracket missing from one of my classes in my css file. Firefox rendered the corners just fine with the error in place, but IE would not.
May 16th, 2006 at 5:32
I just validated my CSS, and besides a few “you specified a bg color but no color” warnings its all valid. Thx for the tip tho, got me thinking..
I also just noticed that regular borders and shadows work like i said above, but glow borders work, kind of - theres the glowing border around the element, then theres a second glowing border about 10px further out than the first!
Untill i look into this further Ive just added this to the start of the draw function:
this.draw=function(e,edges){
if( this.isIE ) return;//disable IE support for now
Leave a Reply