如何使响应式网页渲染速度更快？

Question

Right now, every time I try to render a page, I will calculate the $(window).width() first and then add a corresponding class for the root html element, which will final determine the block width of some main responsive elements in the page. But this approach goes with a problem. It will first render the page with a initial default width, and then after the class is added, it will adjust the element width, which will create a non-smooth visual effect.

To overcome this, I then make all the responsive elements display: none in the first place and make them visible after the width calculation is done. But for a user, it takes more time to see the page in this way.

So I was wondering if there is a way to achieve this responsive page in a more efficient and faster way?

Answer 1

If you are using javascript to create a responsive site, there are much easier ways.

For example, there are TONS of free CSS based frameworks you can utilize to make responsive pages that the CSS controls, which doesn't eat up nearly as many resources as a javascript solution. Lots of DOM manipulation with javascript can get pretty hairy pretty quickly.

My suggestion would be to look into some of the following:

• Foundation: http://foundation.zurb.com/index.html
• Skeleton: http://www.getskeleton.com/

I personally use foundation for my development, as its easy to read/understand and it produces rapid development.

Example: http://www.sinsysonline.com/secondhomehostel

If you are ABSOLUTELY dead set on having Javascript handle your DOM rendering, it's going to be much slower than a CSS responsive site.

If so, try out:

• Response JS: http://responsejs.com/

If you would like further clarification for a specific problem, could you please provide your code and I'm more than happy to provide some feedback on that.

Answer 2

CSS media queries allow you to apply CSS based on screen size. The advantages of this over your approach are:

1) The CSS will read the window size immediately
2) The page will automatically adjust if the user resizes the window (or rotates their tablet)

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Answer 3

You need to use css3 media queries which is very useful to create responsive website. You need to write css according to viewport width. Please refer the link from which you will get all the idea about responsive website.

I hope this will help yo to work on the responsive websites.