CSS text-shadow can kill performanceThu, Aug 11, 2011
So, I’m trying to add a little polish to my snakes game. I was working on displaying the current score and wanted to make it stand out a little bit…
Inspired (just a little) by a friends rainglow I thought I could use a subtle text-shadow to make the score pop a little, maybe even change the shadow color when you surpass the current high score, but boy was I surprised when this tiny piece of css:
text-shadow: 0px 0px 1em red;
Dropped my frame rate down from a rock-solid 60fps, to a staggering, stuttering 1-2 fps.
trust me, its hard to see in this screenshot, but thats a good looking glow!
A brief bit of digging shows that if the
text-shadow is applied to some static HTML
element then there is no real problem once that element has been rendered, but because I
am frequently updating the
innerHTML of the score element the browser needs to re-render
it and the text-shadow can cause that to take up-to a whole second! dropping the
frame rate through the floor.
I suspect its a worse hit for this case because the browser is applying the
to a custom CSS web font, but some brief experimenting shows a similar (though milder) hit
even when rendering standard fonts.
So, lesson of the day, don’t use css
text-shadow on content that changes frequently (or at all!)…
… and back to the drawing board for deciding how to make my score stand out.
Can’t win ’em all.
P.S. This was a brief experiment using the chrome browser, other browsers might be better (or worse), some magic incantations to enable hardware acceleration might make it better (or worse) - YMMV.
P.P.S. rainglows are evil.