Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

I am new to responsive design and now re-making a template to make it more responsive. This involves redefining many fixed width and fonts as context-dependent percentage (% or em) instead of pixels in css.

So I am wondering how does all these new added calculations affect the rendering time of pages, regarding that now most elements values needs to be calculated, and mobile processors which are the target devices are far less powerful than a typical Desktop cpu. Will the effect be sensible on most devices? If yes, how much? I appreciate if you also could refer me to the relevant benchmarks/studies. Thanks

share|improve this question
add comment

2 Answers

You can use Google Chrome developer tools to benchmark the browser rendering (paint and reflows) along with the javascript calls and how they effect them. I'm sure there are other sophisticated tools but this is the most handy and accessible for me.

Great videos/tutorials on this topic:

You can also test your web designs using http://www.webpagetest.org/ and compare the speeds of your various designs. As an added bonus the waterfall chart includes CPU utilization graphs.

share|improve this answer
add comment

I haven't seen a benchmark on this (I'd be curious if there was), but I would imagine the effect is effectively zero.

The browser does all it's calculations when the page loads. So whether you tell the browser font-size: 0.8em; or font-size: 10px; or font-size: 80%; shouldn't make enough of a difference to be noticeable by any user and should load just as fast as a page designed for mobile only vs a responsive one.

I'd imagine the effect is the same when changing orientation (from portrait to landscape), it should only take as long as it would normally take when the page loads.

The biggest effect on the load time is the overall complexity of the document, any plugins, javascript, or images loaded rather than whether a div has a width set as a percentage or a fixed pixel size.

share|improve this answer
    
I would tend to agree, I can't see that using relative-sizes will have much of an effect on processing times. Absolute sizes (px) are not devoid of calculation. Media and context all play a part in calculating the actually size you see. –  w3d Aug 4 '12 at 11:58
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.