Do you ever wonder about the performance of using CSS-reset? Well, until today I didn’t either.
I’m currently in the middle of implementing a new webapp based on AngularJS. We’re implementing extremely complicated swipe-functionality in this webapp, and this presents us with huge performance difficulties – especially on older tablets and smartphones. My old iPad 1 is having a very hard time trying to keep up with the demands.
That’s why I was investigating and debugging performance bottlenecks today.
The picture displays the result of a profiling being made of a single swipe. The consequence is that each time a user swipes, the tablet has to do all this rendering over and over again – which makes the screen flicker and gives the end-user a very poor experience. In fact, a single swipe would result in the desktop browser spending as much as 79 ms to render.
The solution to this – of course – is to make the reset more specific. Instead of matching the * selector – match tags. The result of this was that I went from a render time of 79 ms to 20 ms. I know that this is not much – but these measurements were done on my desktop PC with all its processing power. The effect was noticeable when I loaded the site on my iPad 1 – and the end-user will appreciate this simple fix.