Page animation rendering method and device

Abstract

An embodiment of the present invention provides a page animation rendering method and a device, comprising: determining an update frequency of each animation element in a front-end page when the front-end page canvas is rendered; grouping the animation elements with the same update frequency in the same layer based on each update frequency of each animation element, and synthesizing the layered content of each layered animation element in the off-screen canvas; and drawing the canvas content in the synthesized off-screen canvas to the canvas of the front-end page to complete the animation rendering of the front-end page. According to the page animation rendering method and the device, on the basis of using the canvas to perform all autonomous drawing and animation processing, improving theperformance of the animation rendering, and realizeing that selectively redraws the canvas which needs to be rendered according to the requirement, further greatly improving the page animation rendering performance, thereby the animation technology of the web page is improved in complexity while the smoothness of the page is guaranteed.

Description

technical field [0001] The invention relates to the technical field of computer networks, in particular to a method and device for rendering page animation. Background technique [0002] There are various elements in a webpage, and webpage animation is one of the indispensable elements in a webpage at present. Improving the animation rendering performance of webpages is a problem that must be faced in webpage development. In the prior art, the following methods are usually used to improve the performance of page animation rendering: [0003] Solution 1. Use Animations (a shorthand attribute of CSS, used to set six animation properties) and Transitions (a shorthand property of CSS, used to set four transition properties) in CSS (Cascading Style Sheets, cascading style sheets) ) method to optimize animation performance [0004] Modern browsers usually have two important execution threads that cooperate to render pages: the main thread and the typesetting thread; usually, the...

AI Technical Summary

Problems solved by technology

[0018] Since Canvas forms an animation, it needs to be cleared after each picture drawing is completed, and then calculate and draw the next frame of picture, which will cause the calculation process to slow down the animation. Although it can solve the precise control of the animation content, but in complex situations , it is easy to obtain poor performance

Images