1) powerful animation rendering tool: RequestAnimationFrameRequestAnimationFrame. I believe that HTML5 students have heard of this function. Repeat its advantages: when the game page is not displayed, RequestAnimationFrame suspends the execution ...,.
1) powerful animation rendering tool: RequestAnimationFrame
RequestAnimationFrame is definitely famous. I believe that HTML5 students have heard of this function. Repeat its advantages:
When the game page is not displayed, RequestAnimationFrame is paused and does not occupy CPU time.
RequestAnimaitonFrame places the JavaScript and CSS animations in the same Repait and Reflow loop.
For the second point, it is rarely mentioned, but it is very important. If RequestAnimationFrame is not used, and setTimeout is used, it is very likely that the animations produced by JS and CSS are produced at each draw, it does not happen at the same time. I believe this is definitely not the result you want. For the second point, it is a bit obscure and not easy to understand. Let's further explain that this should begin with the rendering process of the browser. In general, there are four steps to render the browser:
Update the Dom structure: every time you execute JS to change the Dom structure or modify CSS-related attributes, the Dom structure will be changed. Now in HTML5, the Canvas element is added. Performing an operation on the Canvas object, such as drawing a line, also changes the Dom structure. However, Canvas has a special operation. For example, if you perform the getImageData operation on the Canvas object, the browser is forced to jump to Step 4 immediately, and the rendered browser window is drawn to the screen.
Render each element: After all JS and CSS operations are completed, the browser starts rendering each element as required.
- Render all elements to the window: according to the size of the window, draw all elements to a plane.
- Use the operating system Window Manager to output the rendered window to the screen.
Generally, the fourth step is called a frame. Currently, most of the displays are controlled at 60 frames per second. the browser is optimized and the display frequency does not exceed 60 frames.
Here, we can make it clear that if you do not use RequestAnimationFrame but use the traditional SetTimeout, it is difficult for the browser to put the Dom or CSS operations executed in the same SetTimeout into the same frame, a js operation animation cannot be synchronized with a CSS or Canvas animation. Because of random behaviors and inconsistent behavior, I believe this is a situation that all developers are unwilling to encounter. No developer is afraid of bugs, but the fear is that bugs cannot be reproduced.
2) Calculate the frame rate (FPS) of the game)
The frame rate (FPS) is an important indicator to measure the game performance. Because browser implementations are different, Some browsers do not strictly follow the four steps described in the first part for optimization purposes. Sometimes, when a frame is not completed, it starts to execute the next frame. Therefore, theoretically, it is difficult to strictly record the frame rate displayed by the browser. If you have a high-speed camera that can be shot on the screen, you can strictly record the frame rate displayed on the screen. However, it is difficult to use this method on a large scale.
There are also some third-party class libraries that can help you measure the Frame Rate of the game, such as the famous example. However, the number and time when the seTimeout function is executed does not have a strict correspondence with RequestAnimationFrame and can only be used as a reference. Or, to put it simply, the setTimetout function may be executed once or twice or more times during the rendering of each frame.
Theoretically, to monitor the Frame Rate of RequestAnimationFrame, the developer needs to hook the RequestAnimaitonFrame function. When the function is executed, the Canvas getImageData operation is executed to force the browser to render all operations of this RequestAnimationFrame, calculate the time difference between the two rendering operations to get the frame rate.
Fortunately, the Firefox browser has developed an interface for getting the frame rate, which can save a lot of twists and turns. For example, the window. Adjust paintcount interface can directly tell developers The Frame Rate of browser rendering.
(To be continued)
Link:
HTML5 game development resource loading (2)
Resource loading for HTML5 game development (1)
