Reflow and redraw of CSS

have been doing the part of the PC page, due to the speed of the web, it seems that CSS does not have any effect on the wording of the CSS, so the requirements have not much attention, Recently in doing some mobile phone-side things, found that really bad, especially with the JS effect When some delay is not acceptable to people. In this fast-food era, it does lead to mobile phone end more market, take the subway time into people to browse the news, play games, or even shopping time, at this time the user application of equipment will be mobile phones, and mobile phones and computers than the biggest difference is the speed, the requirements of developers have improved, How to speed up loading and reduce response time becomes a constant topic for developers. At present, although a lot of predecessors have put forward a lot of solutions to this situation (recently saw a blog http://www.williamlong.info/archives/3457.html), But I think the details determine success or failure.

Good nonsense said more, turn to the topic, how to write a good css to reduce redraw and rearrange this problem troubled me this little rookie for a long time, the previous two days read a blog, a little harvest, take out to share, do not know what they understand is right, welcome to shoot bricks.

First distinguish the concept:

Redrawing is the browser behavior caused by the appearance change of an element;

Rearrangement is the behavior that causes the DOM tree to recalculate;

Then take a look at a snippet of CSS code that you'll often see:

This is a slider of a simple frame, with JS after

Each time the scrolling will cause a rearrangement, improved: slider to the absolute positioning operation, so that he is out of the normal flow of the document, when he rearrangement will not cause other elements to reflow;

Give me another chestnut:

Is this a piece of code that I've written in my work to see the benefits of a cyclic reload? Yes, he just caused a rearrangement!

There are a lot of small details such as:

1. Change styles multiple times into one, using a class to manipulate

2. Multiple operations The value will cause the redraw property to be redrawn when caching variables such as offsettop,offsetleft,offsetwidth,offsetheight,scrolltop,scrollleft,ScrollWidth,scrollheight,ClientTop,ClientLeft,clientwidth,clientheight

3. Elements that need to be re-ranked with absolute or fixed positioning, such as animated elements, pop-up windows, back to the top of the icon

I know that there are many aspects of their own have not noticed, but the deadly problem, welcome to make suggestions!