Loop Control of HTML5 game development (3 )-

7) Improving the Performance of RequestAnimationFrame is indeed an indispensable tool for animation, but it cannot be used excessively. In particular, animations associated with gradient events. For example, the ChromeWebStore Homepage uses the vertical scroll axis to continuously display the page content. The following is a question ......,. 7) Improve Performance

RequestAnimationFrame is indeed an indispensable tool for animation, but it cannot be used excessively. In particular, animations associated with some gradient events. For example, the Chrome Web Store homepage uses the vertical scroll axis to continuously display the page content. The following is a bad example:

1. function onScroll() {update();}

function update() {// assume domElements has been declared// by this point :)for(var i = 0; i < domElements.length; i++) {// read offset of DOM elements// to determine visibility - a reflow// then apply some CSS classes// to the visible items - a repaint}}

1. Window. addEventListener ('scroll ', onScroll, false );

In the above example, RequestAnimationFrame is called every time a scroll event occurs. Although the browser will execute animation rendering with the best effort, there are two conflicts, which have become the performance bottleneck of animation rendering. First, scroll events are called at a frequency of about 60 frames per second. That is to say, the browser will cache a large number of RequestAnimationFrame events, resulting in a lot of update functions being useless. Secondly, when RequestAnimationFrame is executed, attributes of dom elements are modified, causing many Reflow and Repaint events, obviously, the Reflow and Repaint time is much more than 16 ms.

To solve the first problem, we must first separate the scroll and RequestAnimaitonFrame functions. The modified code is as follows:

var latestKnownScrollY = 0;function onScroll() {latestKnownScrollY = window.scrollY;}function update() {  requestAnimationFrame(update);  var currentScrollY = latestKnownScrollY;  // read offset of DOM elements  // and compare to the currentScrollY value  // then apply some CSS classes  // to the visible items}// kick offrequestAnimationFrame(update);

In the above Code, the scroll event is only responsible for assigning the latest window location to a variable. In this way, you can avoid a large number of RequestAnimationFrame events being cached, so that the RequestAnimationFrame can be animated Based on the browser capabilities.

For the second problem, the only way is to minimize Repaint and Reflow events. Although the principle is simple, the optimization is very difficult, requiring readers to be familiar with every function of Dom rendering. Several articles are listed below for your reference only:

ClassList for great good.

Breakdown of repaint.

Learning from Twitter

(To be continued)

The above is the loop control of HTML5 game development (3). For more information, see PHP Chinese website (www.php1.cn )!