When Html5 and css3 have gradually become mainstream, I am very accustomed to using js to make some simple animations. Because on desktop browsers, not all support css3. Users are also very strange. Not every user can be cultivated. There are always many people who think that win7.win8 is not as useful as xp. But the mobile phone is very different, and the mobile browser supports html5 and css3 very well. However, the hardware processing capability of mobile phones is very limited. Today, when quad-core and octa-core mobile phones are rampant, there are still people who use dual-core or single-core mobile phones like me. Although js is good, I don’t have much contact with you, so I can’t adjust that feeling well. A simple page swipe runs very smoothly on the i7 PC, but it is stuck, stuttered, stuttered, stuttered, and stuttered on my dual-core phone. It's very depressing. For this reason, I have also searched for a long time and read a lot. Finally, before I settled, I found a relatively simple method: use css3 to execute animations.
In the past, in addition to Jquery's animation functions such as animation, setTimeout and setInterval were used to loop to change the margin, width, top and other properties of an element. It is precisely this that makes me confused.
First of all, setTimeout, setInterval cannot be executed all the time just by setting 0ms. I once accidentally discovered this secret while debugging in an iscroll. It turns out that Timer delay calculation relies on the browser's built-in clock, and the accuracy of the clock depends on the frequency of clock updates. The update interval between IE8 and its previous IE versions was 15.6 milliseconds. It's over, I think it performs 1px displacement in 10ms, and it can't do this on time.
And what's going on with the card? Card, because the code is not well written. After all, js is single-threaded, and once there are time-consuming actions, the UI may not respond. Although we used setTimeout, it is precisely because setTimeout that makes us look like the interface is not dead, but the action is not smooth. Because after the setTimeout execution this time, before the next execution, another time-consuming action may be encountered in the middle interval, so the execution of setTimeout will be unlimited. Then what? Card! However, there is another reason why the card can accidentally trigger the browser layout (ie: relayout) when changing the original attribute. This question is time-consuming, but it is time-consuming. It is time-consuming, but it can often be ignored. But many times it cannot be ignored.
In addition to the above two paragraphs, there is another problem, that is, on many mobile phones, it always feels like it is frame by frame, and it may also be frame by frame long and short. This is a rhythm that can ruin everyone. Why is this happening? It still has something to do with the delay of settimeout. Discard frames. This problem involves the refresh frequency of the monitor. It's really too complicated.
Finally, CSS3 was selected, js dynamically changed the attributes of the element, and transition was used to control the animation execution time. For example:
The code copy is as follows:
<div id="test" style="transition:all 1s ease; width:100px;" >/div>
js:
The code copy is as follows:
$("#test").width(200);
In this way, after 1 second, the width of this div will become 200px. It’s not like Sun Wukong becomes bigger in an instant, and he slowly rushes his feet without getting stuck or stopping. And there is an advantage to using css animation, it is not affected by time-consuming js. Although UI threads and js threads are mutually exclusive in browsers, this is not valid for CSS animations, and many browsers can also enable hardware acceleration (such as Chrome). Although browser re-layout is not very obvious in ordinary situations, large-scale re-layout should be avoided. so add -webkit-transform: translateZ(0); or -webkit-transform: translate3d(0,0,0); so that the browser will render this layer independently. Even if re-layout is inevitable, the area is smaller. It is indeed a very wise decision to use translate to replace margin.
Finally, some common changes will trigger relayout properties:
The code copy is as follows:
width
height
padding
margin
display
border-width
border
min-height
The above is all the content described in this article. I hope it will be helpful to everyone to learn JavaScript and CSS3. At the same time, please add some shortcomings and understand.