Method, device, client and medium for fast loading and displaying of SVGA animations

Abstract

The present invention provides a method, device, client and medium for quickly loading and displaying an SVGA animation, including: receiving an animation display request through the main thread; judging whether the SVGA animation to be displayed corresponding to the animation display request is loaded for the first time through a child thread; if so, obtaining the SVGA animation to be displayed through the main thread, creating an off-screen rendering instance through the child thread, generating a new rendering result corresponding to the SVGA animation to be displayed by using the off-screen rendering instance, so as to isolate the rendering process from the main thread, and transmitting the new rendering result to the main thread for display and to the local database for caching; if not, reading the historical rendering result corresponding to the SVGA animation to be displayed from the local database through the child thread, and transmitting the historical rendering result to the main thread for display. The present invention can greatly improve the loading speed of the SVGA animation, solve the problem of main thread blockage, and improve the rendering efficiency of the SVGA animation.

Description

Technical Field

[0001] The present invention relates to the technical field of animation processing, and in particular, to a method, device, client, and medium for quickly loading and displaying SVGA animations. Background Art

[0002] Traditional SVGA (Super video graphics adapter) loading technology first initiates a network request through fetch or XML Http Request to load the.svga file. After loading is completed, a dedicated parser (such as the SVGA-JS library) is used to decode the file and extract animation-related data, including layer information, frame data, and image resources (Base64 or embedded images), which are then converted into an internal data structure for drawing. When playing the animation, the SVGA player renders based on the state of each frame's layer, property changes (such as transparency, position, rotation, etc.), and image resources after decoding. The rendering core depends on HTML5's canvas or WebGL (Web Graphics Library) to draw the animation frame by frame onto the specified canvas.

[0003] The prior art has the following disadvantages: (1) High network dependence and decoding required each time: Each time the prior art loads an SVGA file, it needs to initiate a network request. If the SVGA file is large or in a weak network environment, the loading time will be extremely long each time. Even if HTTP (Hypertext Transfer Protocol) strong caching can be enabled, when playing, it still needs to parse the data in the strong cache, and the time consumption is still very long. (2) Main thread pressure: Since loading and decoding are both executed on the main thread, and frame-by-frame rendering depends on canvas or WebGL for parsing, which also runs in the main thread DOM (Document Object Model) environment. When the animation complexity is high, it may cause the main thread to be blocked, affecting the page response speed and interaction experience. (3) Rendering efficiency limitation: During the rendering process, the prior art uses a frame-by-frame drawing method, and for complex animation (multi-layer, dynamic transformation) scenarios, the performance bottleneck is particularly obvious, and the rendering efficiency will be even lower. Summary of the Invention

[0004] In view of this, the purpose of the present invention is to provide a method, device, client, and medium for quickly loading and displaying SVGA animations, which can greatly improve the loading speed of SVGA animations, solve the problem of main thread blockage, and improve the rendering efficiency of SVGA animations.

[0005] In a first aspect, the present invention provides a method for quickly loading and displaying an SVGA animation. The method is applied to a client, which is configured with a main thread and a sub-thread, and a local database is also deployed on the client. The method includes:

[0006] Receiving an animation display request through the main thread;

[0007] Through the sub-thread, based on the cached data in the local database, determining whether the to-be-displayed SVGA animation corresponding to the animation display request is a first-time load. The cached data includes historical rendering results;

[0008] If so, obtaining the to-be-displayed SVGA animation through the main thread, creating an off-screen rendering instance through the sub-thread, generating a new rendering result corresponding to the to-be-displayed SVGA animation by using the off-screen rendering instance, so as to isolate the rendering process from the main thread, and transmitting the new rendering result to the main thread for display and to the local database for caching;

[0009] If not, reading the historical rendering result corresponding to the to-be-displayed SVGA animation from the local database through the sub-thread, and transmitting the historical rendering result to the main thread for display.

[0010] In an implementation, the cached data further includes historical rendering data cached in the form of key-value pairs. The key of the key-value pair is the URL address of the historical SVGA animation, and the value of the key-value pair is the historical rendering data corresponding to each frame in the historical SVGA animation, so as to associate and cache the URL address with the historical rendering data;

[0011] Determining whether the to-be-displayed SVGA animation corresponding to the animation display request is a first-time load through the sub-thread based on the cached data in the local database, including:

[0012] Through the sub-thread, matching the URL address of the to-be-displayed SVGA animation corresponding to the animation display request with the URL address associated with the historical rendering data in the local database, and determining whether the to-be-displayed SVGA animation corresponding to the animation display request is a first-time load based on the matching result.

[0013] In an implementation, creating an off-screen rendering instance through the sub-thread and generating a new rendering result corresponding to the to-be-displayed SVGA animation by using the off-screen rendering instance includes:

[0014] Parsing the to-be-displayed SVGA animation through the sub-thread to obtain an animation parsing result;

[0015] Converting the animation parsing result into a binary data set through the sub-thread;

[0016] Cache the binary data set in the local database in the form of key-value pairs through a sub-thread; and, create an off-screen rendering instance in the sub-thread, and use the off-screen rendering instance to perform off-screen rendering on the binary data set in parallel to obtain a new rendering result corresponding to the SVGA animation to be displayed.

[0017] In one implementation, the method further includes:

[0018] When the off-screen rendering instance generates any frame of the new rendering result corresponding to the SVGA animation to be displayed, recycle the graphic resources used for off-screen rendering of this frame of the new rendering result.

[0019] In one implementation, reading the historical rendering result corresponding to the SVGA animation to be displayed from the local database through a sub-thread and transmitting the historical rendering result to the main thread for display includes:

[0020] Asynchronously read multiple frames of historical rendering results from the local database through a sub-thread and transmit the multiple frames of historical rendering results to the memory of the main thread;

[0021] Display the multiple frames of historical rendering results cached in the memory through the main thread;

[0022] During the process of the main thread displaying multiple frames of historical rendering results, send a data reading notification to the sub-thread based on the current display progress through the main thread;

[0023] Based on the number of frames carried in the data reading notification, continue to asynchronously read multiple frames of historical rendering results from the local database through the sub-thread until each frame of the historical rendering result corresponding to the SVGA animation to be displayed is completely displayed.

[0024] In one implementation, the method further includes:

[0025] When the main thread monitors that the multiple frames of historical rendering results cached in the memory exceed the preset limit, clear the multiple frames of historical rendering results that have been completed for display from the memory.

[0026] In one implementation, the sub-thread is a WebWorker thread, the off-screen rendering instance is an OffscreenCanvas instance, and the local database is an IndexedDB database.

[0027] In a second aspect, the present invention further provides a display device for an SVGA animation. The device is applied to a client, the client is configured with a main thread and a sub-thread, and the client is also deployed with a local database:

[0028] The main thread is used to: receive an animation display request;

[0029] The sub-thread is used to: based on the cached data in the local database, determine whether the SVGA animation to be displayed corresponding to the animation display request is loaded for the first time, and the cached data includes historical rendering results;

[0030] The main thread is further used to: when the judgment result is yes, obtain the SVGA animation to be displayed; the sub-thread is further used to: create an off-screen rendering instance, generate a new rendering result corresponding to the SVGA animation to be displayed by using the off-screen rendering instance, so as to isolate the rendering process from the main thread, and transmit the new rendering result to the main thread for display and to the local database for caching;

[0031] The sub-thread is further used to: when the judgment result is no, read the historical rendering result corresponding to the SVGA animation to be displayed from the local database, and transmit the historical rendering result to the main thread for display.

[0032] In a third aspect, the present invention further provides a client, including a processor and a memory, the memory stores computer-executable instructions that can be executed by the processor, and the processor executes the computer-executable instructions to implement the method according to any one of the first aspect.

[0033] In a fourth aspect, the present invention further provides a computer-readable storage medium, the computer-readable storage medium stores computer-executable instructions, and when the computer-executable instructions are called and executed by the processor, the computer-executable instructions cause the processor to implement the method according to any one of the first aspect.

[0034] A method, device, client, and medium for quickly loading and displaying SVGA animations provided by the present invention first receive an animation display request through the main thread; then, through a child thread, based on the cached data in the local database, it is determined whether the to-be-displayed SVGA animation corresponding to the animation display request is loaded for the first time. The cached data includes historical rendering results; when the determination result is yes, the to-be-displayed SVGA animation can be obtained through the main thread, a off-screen rendering instance is created through the child thread, and a new rendering result corresponding to the to-be-displayed SVGA animation is generated by using the off-screen rendering instance, so that the rendering process is isolated from the main thread, and the new rendering result is transmitted to the main thread for display and transmitted to the local database for caching; when the determination result is no, the historical rendering result corresponding to the to-be-displayed SVGA animation can be read from the local database through the child thread, and the historical rendering result is transmitted to the main thread for display. In the case of loading an SVGA animation for the first time, the above method can generate corresponding new rendering results by using an off-screen rendering instance in a child thread, so that the rendering process is isolated from the main thread, which not only solves the problem of main thread blockage, but also supports high-performance rendering of complex animation scenes, thereby improving the rendering efficiency. In the case of not loading an SVGA animation for the first time, the corresponding historical rendering result can be directly read from the local database, avoiding repeated network requests and decoding, and thus greatly improving the loading speed and resource utilization rate of the SVGA animation.

[0035] Other features and advantages of the present invention will be described in the following specification, and, in part, will be obvious from the specification, or will be understood by implementing the present invention. The objectives and other advantages of the present invention are achieved and obtained by the structures specifically pointed out in the specification, claims, and drawings.

[0036] To make the above objectives, features, and advantages of the present invention more obvious and understandable, the following specific preferred embodiments are given, and in conjunction with the accompanying drawings, the detailed description is as follows. BRIEF DESCRIPTION OF THE DRAWINGS

[0037] In order to more clearly illustrate the specific embodiments of the present invention or the technical solutions in the prior art, the following will briefly introduce the drawings required for the description of the specific embodiments or the prior art. Obviously, the following drawings are some embodiments of the present invention. For those of ordinary skill in the art, without creative efforts, other drawings can also be obtained based on these drawings.

[0038] Figure 1 It is a schematic flowchart of a method for quickly loading and displaying an SVGA animation provided by an embodiment of the present invention;

[0039] Figure 2 It is a flowchart of main / child thread communication and child thread work provided by an embodiment of the present invention;

[0040] Figure 3 Schematic diagram of an IndexedDB storage format provided by an embodiment of the present invention;

[0041] Figure 4 Flow comparison diagram of a method for quickly loading and displaying an SVGA animation provided by an embodiment of the present invention;

[0042] Figure 5 Effect comparison diagram of a method for quickly loading and displaying an SVGA animation provided by an embodiment of the present invention;

[0043] Figure 6 Schematic diagram of the structure of a device for quickly loading and displaying an SVGA animation provided by an embodiment of the present invention;

[0044] Figure 7 Schematic diagram of the structure of a client provided by an embodiment of the present invention. Detailed implementation manners

[0045] To make the objectives, technical solutions, and advantages of the embodiments of the present invention clearer, the technical solutions of the present invention will be clearly and completely described below in conjunction with the embodiments. Obviously, the described embodiments are some, rather than all, of the embodiments of the present invention. All other embodiments obtained by those of ordinary skill in the art based on the embodiments of the present invention without creative efforts shall fall within the protection scope of the present invention.

[0046] Currently, the prior art has problems such as too long SVGA file loading time, high main thread pressure, and low rendering efficiency. Based on this, the embodiments of the present invention provide a method, device, client, and medium for quickly loading and displaying an SVGA animation, which can greatly improve the loading speed of the SVGA animation, solve the main thread blocking problem, and improve the rendering efficiency of the SVGA animation.

[0047] For ease of understanding of this embodiment, first, a method for quickly loading and displaying an SVGA animation disclosed in the embodiments of the present invention will be introduced in detail. This method is applied to a client, the client is configured with a main thread and a child thread, and a local database is also deployed on the client. Refer to Figure 1 The flow schematic diagram of a method for quickly loading and displaying an SVGA animation shown. This method mainly includes the following steps S102 to step S108:

[0048] Step S102, receiving an animation display request through the main thread.

[0049] Among them, the animation display request carries the identifier or URL (Uniform Resource Locator) address of the SVGA animation to be displayed. The animation display request is used to trigger the main thread to display the SVGA animation to be displayed through the graphical user interface of the client.

[0050] Step S104: Through a child thread, based on the cached data in the local database, determine whether the SVGA animation to be displayed corresponding to the animation display request is loaded for the first time.

[0051] Among them, the cached data includes the historical rendering results cached in the form of key-value pairs and the historical binary data sets cached in the form of key-value pairs. Taking the historical rendering results as an example, the key of the key-value pair is the URL address of the historical SVGA animation (that is, the SVGA animation to be displayed corresponding to the animation display request received by the main thread at a historical moment), and the value of the key-value pair is the historical rendering data corresponding to each frame in the historical SVGA animation, so as to cache the association between the URL address and the historical rendering data; similarly, the historical binary data sets can be cached in the form of key-value pairs according to the above form. The binary data set is also the parsing result of the SVGA animation in binary format, including metadata, frame data, and related resources, etc.

[0052] In one example, the URL address of the SVGA animation to be displayed can be matched with the URL addresses cached in the local database. If there is a matching URL address, it can be considered that the SVGA animation to be displayed is not loaded for the first time. If there is no matching URL address, it can be considered that the SVGA animation to be displayed is loaded for the first time.

[0053] Step S106: If so, obtain the SVGA animation to be displayed through the main thread, create an off-screen rendering instance through the child thread, and use the off-screen rendering instance to generate a new rendering result corresponding to the SVGA animation to be displayed, so as to isolate the rendering process from the main thread, and transfer the new rendering result to the main thread for display and to the local database for caching.

[0054] Among them, the historical rendering results and the new rendering results are only used to distinguish the rendering results of the SVGA animations to be displayed corresponding to the animation display requests received at different times. In one example, in the case of the first load, the main thread obtains the SVGA animation to be displayed according to the URL address carried by the animation display request, transfers it to the child thread, the child thread parses to obtain the binary data set corresponding to the SVGA animation to be displayed, then creates an off-screen rendering instance, and the off-screen rendering instance performs off-screen rendering on the binary data set of each frame in parallel, realizing the isolation of the rendering process from the main thread, and finally transferring the new rendering result to the main thread for display, and at the same time transferring the new rendering result to the local database for caching.

[0055] Step S108: If not, read the historical rendering result corresponding to the SVGA animation to be displayed from the local database through the child thread, and transfer the historical rendering result to the main thread for display.

[0056] In one example, in the case of non-first loading, the child thread can directly read the historical rendering result corresponding to the SVGA animation to be displayed from the local database. Optionally, the child thread can read multiple frames of historical rendering results, transfer them to the main thread for display, and continue to read subsequent multiple frames of historical rendering results according to the display progress of the main thread until the historical rendering result of each frame of the SVGA animation to be rendered is completely displayed.

[0057] The method for fast loading and displaying of SVGA animations provided by the embodiments of the present invention can, in the case of first loading an SVGA animation, generate corresponding new rendering results within a child thread by using an off-screen rendering instance, so as to isolate the rendering process from the main thread, not only solving the problem of main thread blockage, but also supporting high-performance rendering of complex animation scenes, thereby improving the rendering efficiency. In the case of non-first loading of an SVGA animation, the corresponding historical rendering results can be directly read from the local database, avoiding repeated network requests and decoding, and thus greatly improving the loading speed and resource utilization rate of the SVGA animation.

[0058] In one implementation, the child thread is a WebWorker thread, the off-screen rendering instance is an OffscreenCanvas instance, and the local database is an IndexedDB database. That is, the embodiments of the present invention implement high-performance loading of svga animations based on the WebWorker + OffscreenCanvas (off-screen rendering) + IndexedDB technology. Among them, OffscreenCanvas provides a canvas object that can perform off-screen rendering. It is effective in both the window environment and the webworker environment. IndexedDB is a low-level API (Application Programming Interface) for storing a large amount of structured data (including rendering results / binary data sets) on the client side. This API uses indexes to achieve high-performance search of data. Although Web Storage is useful for storing a relatively small amount of data, it is insufficient for storing a larger amount of structured data. And IndexedDB provides a solution for this scenario. The storage space is theoretically unlimited, depending on the disk size. Web Worker provides a simple way for web content to run scripts in a background thread. The child thread can execute tasks without interfering with the user interface. In addition, they can perform I / O using XMLHttpRequest (although the responseXML and channel properties are always empty) or fetch (without these limitations).

[0059] The specific logic is as follows: (1) Initialize the WebWorker sub-thread: First, create a WebWorker sub-thread in the main thread to handle the tasks of parsing and offscreen rendering. In the WebWorker sub-thread, create an OffscreenCanvas and bind it to the execution thread of the WebWorker sub-thread, so that the rendering work does not block the main thread. (2) Check if there is a cache in the IndexedDB database. If there is, directly use it, skip the network request and parsing steps, and enter the rendering process. If not, load from the network and use the WebWorker sub-thread initialized in the first step to parse each frame of the SVGA animation to be displayed, and at the same time store it in the IndexedDB database. (3) Use the OffscreenCanvas in the WebWorker sub-thread to render the parsed animation frames. Whenever a frame of the animation is rendered, the WebWorker sub-thread can send the rendering result back to the main thread, and the main thread displays it on the actual canvas. The embodiments of the present invention solve some pain points of the prior art: (1) As long as the IndexedDB database is loaded for the first time, each frame of decoded data can be stored in the local database. There is no need to make a network request or decode again for the second time. (2) Parse through the WebWorker sub-thread to avoid page lags caused by blocking the main thread and improve the user experience. (3) The OffscreenCanvas offscreen rendering technology. The greatest advantage of this function is that it can run in the environment of the WebWorker sub-thread, and the rendering process does not block the main thread, greatly improving the rendering efficiency.

[0060] For easy understanding, the embodiments of the present invention provide a specific implementation manner of a method for quickly loading and displaying an SVGA animation. Refer to Figure 2 the main / sub-thread communication and sub-thread work flow chart shown in Figure 2 which shows that the main thread creates a WebWorker sub-thread and sends a parsing instruction, and the WebWorker sub-thread creates an OffscreenCanvas for parsing / rendering / storing. In addition, two-way communication between the main thread and the sub-thread is achieved through postMessage and onmessage.

[0061] An embodiment of the present invention provides a specific implementation of the aforementioned step S102, including: providing a user with a cover, name or link of an SVGA animation through a graphical user interface of a client, so that the user can select the SVGA animation to be displayed, thereby receiving an animation display request corresponding to the SVGA animation to be displayed, the main thread creating a WebWorker child thread, and using postMessage to pass the request to the WebWorker child thread, so as to assign heavy calculation or time-consuming tasks (such as parsing and rendering) to the WebWorker child thread.

[0062] The embodiment of the present invention provides a specific implementation of the aforementioned step S104, including: matching the URL address of the SVGA animation to be displayed corresponding to the animation display request with the URL address associated with the historical rendering data in the IndexedDB database through the WebWorker child thread, and judging whether the SVGA animation to be displayed corresponding to the animation display request is loaded for the first time based on the matching result. Specifically, if there is a matching URL address, it can be considered that the SVGA animation to be displayed is not loaded for the first time, and if there is no matching URL address, it can be considered that the SVGA animation to be displayed is loaded for the first time.

[0063] In actual applications, when loading the SVGA animation to be displayed, first check whether the parsed frame data exists in the IndexedDB database. Compared with the existing solutions, the advantages here are: the IndexedDB database is the underlying API of the browser and is not affected by user operations. Although the existing solution can use HTTP strong cache, the user can manually turn it off on the browser side. If the user disables the cache, each load requires a network request, which takes a long time and wastes traffic.

[0064] The embodiment of the present invention provides a specific implementation of the aforementioned step S106. In the case of the first loading, the main thread initiates a network request, the WebWorker child thread parses the file and decodes the frame data in the background, and the OffscreenCanvas performs off-screen rendering to minimize the burden on the main thread. After the parsing is completed, all frame data and resources are stored in the IndexedDB database. The following steps are included:

[0065] Step 1: Get the SVGA animation to be displayed through the main thread.

[0066] Step 2: Create an off-screen rendering instance through a child thread, and use the off-screen rendering instance to generate a new rendering result corresponding to the SVGA animation to be displayed, so as to isolate the rendering process from the main thread.

[0067] The decoding and resource processing of the SVGA animation are executed in a worker thread through WebWorker, ensuring that the main thread focuses on user interaction and page rendering. The parsing process is as follows:

[0068] Step 2.1: Parse the SVGA animation to be displayed through a WebWorker worker thread to obtain an animation parsing result, and convert the animation parsing result into a binary data set.

[0069] Specifically, at the first loading, obtain the SVGA animation to be displayed through a network request and parse it using WebWorker to avoid blocking the main thread. Parsing logic: a) Extract metadata: Extract basic metadata such as the width, height, frame rate, and duration of the animation from the SVGA animation to be displayed; b) Extract frame data: Parse the content of each frame, mainly including the shape data and bitmap resources of each layer; c) Process relevant resources: If the frame contains a bitmap or other external resources, first download and cache these resources. The parsed animation frame data is converted into a binary data structure that can be directly rendered.

[0070] The worker thread parses the incoming data into a binary data set that can be directly rendered and passes it to the main thread through self.postMessage.

[0071] Step 2.2: Cache the binary data set in the local database in the form of key-value pairs through a WebWorker worker thread; and, create an off-screen rendering instance in the WebWorker worker thread, and use the off-screen rendering instance to perform off-screen rendering on the binary data set in parallel to obtain a new rendering result corresponding to the SVGA animation to be displayed.

[0072] In one example, the embodiment of the present invention uses the IndexedDB database to store the parsed binary data set and related resources in the local database. See Figure 3 As shown in a schematic diagram of an IndexedDB storage format, the frame data is stored in the form of key-value pairs, with the URL of the SVGA animation to be displayed as the key, and the value is the binary data set that can be directly rendered after parsing each frame, supporting on-demand loading and fast indexing. The embodiment of the present invention caches the parsed data of each frame of the SVGA animation to be displayed in the local database at the first loading to reduce the performance overhead of subsequent playback.

[0073] In one example, the rendering process is as follows: The OffscreenCanvas technology is used to migrate the rendering process from the main thread to the WebWorker environment to achieve offscreen drawing of frame-by-frame animations. Step 1, create an OffscreenCanvas instance in the WebWorker sub-thread and start listening to the main thread. Step 2, the main thread sends instructions to the WebWorker sub-thread, asking the WebWorker sub-thread to use OffscreenCanvas to draw the current frame in the sub-thread, and transfer the rendering result to the main thread for display through transferToImageBitmap.

[0074] The OffscreenCanvas technology not only supports running in the WebWorker environment but also has the following core advantages: (1) Parallel processing: The rendering process is completely isolated from the main thread, and the multi-core CPU resources can be fully utilized to improve the smoothness of animation playback. (2) Real-time rendering and frame rate control: Support frame-by-frame rendering and dynamic adjustment of the frame rate to adapt to different performance requirements. (3) Reduce the pressure on the main thread: The main thread is only responsible for receiving the rendering result and updating it to the page, without participating in the specific drawing operation, ensuring the smooth operation of the page.

[0075] Step 3, transfer the new rendering result to the main thread for display and transfer it to the local database for caching. In one example, the main thread completes the page rendering after receiving the rendering result in the onmessage callback function. The main thread renders the rendering result of OffscreenCanvas onto the visible part of the page through ImageBitmap <canvas>Elements to ensure smooth display of the animation.

[0076] An embodiment of the present invention provides a specific implementation manner of the foregoing step S108. In the case of secondary loading, it is checked whether the cache exists. If it exists, the frame data is directly read from the IndexedDB database. The WebWorker sub-thread combines the OffscreenCanvas to render the animation, and the main thread is only responsible for receiving the results and updating the page. The steps include: asynchronously reading multiple frames of historical rendering results from the local database through the WebWorker sub-thread and transmitting the multiple frames of historical rendering results to the memory of the main thread; displaying the multiple frames of historical rendering results cached in the memory through the main thread; during the process of the main thread displaying the multiple frames of historical rendering results, sending a data reading notification to the WebWorker sub-thread by the main thread based on the current display progress; and continuing to asynchronously read multiple frames of historical rendering results from the local database through the WebWorker sub-thread based on the number of frames carried in the data reading notification until each frame of historical rendering result corresponding to the SVGA animation to be displayed is completely displayed.

[0077] When specifically implemented, it includes: a) When the playback starts, the system reads the rendering results of the first few frames from the IndexedDB database and caches them in the memory. These rendering results will be passed to the rendering process of the WebWorker sub-thread for processing. b) Frame data reading. As the animation plays, the system asynchronously reads the rendering results of subsequent frames from the IndexedDB database according to the playback progress. To avoid UI jank, the reading and rendering of the rendering results are separated, that is: the WebWorker sub-thread asynchronously reads the data of the next frame or the first few frames from the IndexedDB database. At the same time, the main thread uses the rendering results cached in the memory for display. c) Memory caching and release. During the playback process, the previous and next few frames currently being played will be cached in the memory. Each time a new frame is rendered, the system checks whether the current frame has been cached. If not, it reads the data from the IndexedDB database and updates the memory cache. At the same time, when the playback progress moves forward, the frame data that is no longer needed will be promptly cleared from the memory to release the memory.

[0078] The embodiments of the present invention can achieve fast loading: If the IndexedDB cache exists, the parsed frame data is directly read from the local database, bypassing the network request and decoding processes, significantly improving the loading speed. The advantage compared with the existing solutions here is that even if the existing solutions enable strong caching, they can only cache the original SVGA data. Although network requests can be avoided, the parsing process still needs to be carried out, which is also a time-consuming process that blocks the main thread. The embodiments of the present invention store the data after the first parsing in the IndexedDB database and can directly use it when fetching again, so that no traffic is consumed and no parsing is required, significantly improving the loading speed of the SVGA animation.

[0079] Furthermore, the embodiments of the present invention also perform memory management and performance optimization. In order to achieve efficient memory management during the animation playback, the system dynamically controls the cache in memory according to the actual playback progress. The specific memory management strategies include:

[0080] (1) Memory occupancy limit: Through the main thread, when it is monitored that the multi-frame historical rendering results in the memory cache exceed the preset limit, the multi-frame historical rendering results that have completed display are cleared from the memory. The existing SVGA parsing solution is to parse each frame of data in the original file and push all the parsed data into the memory. For example, a 9M SVGA file has 130 frames, and after parsing, it may occupy 100M of memory. However, the IndexedDB storage solution used in the embodiments of the present invention stores the data on the disk and reads it while playing, and only caches a few frames of data before and after playback in the memory, releasing the invalid memory occupancy. Specifically, the system will set a maximum limit for the memory cache. When the number of cached frames exceeds the limit, the frame data that has been played before is automatically released, thus avoiding excessive memory occupancy.

[0081] (2) Adaptive frame cache: According to the memory size of different devices, the system can adjust the number of cached frames. On devices with less memory, the number of cached frames may be reduced to ensure the stability of the system and improve the playback flexibility and efficiency.

[0082] (3) Offscreen rendering and recycling: When an offscreen rendering instance generates a new rendering result for any frame corresponding to the SVGA animation to be displayed, the graphic resources used for offscreen rendering of this new rendering result for the frame are recycled. When using OffscreenCanvas for offscreen rendering, each frame of data rendered can be directly transmitted to the main thread for display. To further optimize the performance, after rendering a frame, the relevant graphic resources (such as ImageBitmap) will be recycled in a timely manner.

[0083] In summary, see Figure 4 Flow chart comparison diagram of a method for quickly loading and displaying SVGA animations. The flow chart on the left is for the traditional method of quickly loading and displaying SVGA animations. In the case of the first load, processes such as loading and parsing are required, and then the SVGA animation is played by the main thread. In the case of non-first load, if strong caching is not used, parsing and other processes need to be carried out again. If strong caching is used, loading, parsing and other processes need to be carried out again. Existing technical solutions all complete the process of loading -> parsing -> rendering through the main thread, which is very likely to cause lags and affect user operations. The flow chart on the right is for the method of quickly loading and displaying SVGA animations provided by the embodiments of the present invention. In the case of the first load, the rendering result needs to be obtained through WebWorker + OffscreenCanvas (off-screen rendering), and then the SVGA animation is played by the main thread. At the same time, the rendering result is stored in the IndexedDB database. In the case of non-first load, the corresponding rendering result is directly read from the IndexedDB database, and then the SVGA animation is played by the main thread. Therefore, the embodiments of the present invention will not cause blockage of the main thread.

[0084] Exemplarily, the embodiments of the present invention take the loading of an svga file with a size of 9.5M as an example to compare the loading time-consuming of the existing technical solutions and the embodiments of the present invention, such as Figure 5 Effect comparison diagram of a method for quickly loading and displaying SVGA animations as shown. Figure 5 It is shown that, compared with the existing technology, the first load of the embodiments of the present invention takes less time: because there is no cache on the client for the first load, the original file of the SVGA animation can only be loaded from the server through a network request, which is the same for both the embodiments of the present invention and the existing technology, depending on the server performance and the user's network speed. However, the reason why the embodiments of the present invention take less time is mainly that the efficient parsing and rendering performance of WebWorker + OffscreenCanvas is better than the main thread rendering solution of the existing technology. Figure 5 It is also shown that, compared with the existing technology, the second load of the embodiments of the present invention takes even less time: because the embodiments of the present invention use IndexedDB to store the parsed frame data, there is no need for network requests and decoding processes, and it can be directly used, which is a dimensionality reduction blow to the strong caching technology of the existing solution. Therefore, the time saved is nearly 20 times.

[0085] Therefore, the embodiments of the present invention have at least the following characteristics:

[0086] (1) Separation of multi-threaded parsing and rendering: The WebWorker sub-thread parses the animation data, and OffscreenCanvas performs off-screen rendering, solving the problem of main thread blockage and significantly improving the user experience.

[0087] (2) Cache Optimization: After the first parsing, the frame data is stored in the IndexedDB database to avoid repeated network requests and decoding, greatly improving the loading speed and resource utilization efficiency.

[0088] (3) Efficient Offscreen Rendering: The OffscreenCanvas technology renders animations in a sub-thread, reducing the rendering overhead of the main thread and supporting high-performance rendering of complex animation scenes at the same time.

[0089] (4) Fluency and Expandability: The overall solution supports dynamic adjustment of the frame rate and loading on demand, adapts to different scenario requirements, and is easy to expand and integrate into existing systems.

[0090] Based on the foregoing embodiments, an embodiment of the present invention provides a display device for SVGA animations. The device is applied to a client, the client is configured with a main thread and a sub-thread, and a local database is also deployed on the client. Refer to Figure 6 the structural schematic diagram of a display device for SVGA animations shown in

[0091] The main thread 602 is used to: receive an animation display request;

[0092] The sub-thread 604 is used to: based on the cached data in the local database, determine whether the to-be-displayed SVGA animation corresponding to the animation display request is loaded for the first time, and the cached data includes historical rendering results;

[0093] The main thread 602 is further used to: in the case where the judgment result is yes, obtain the to-be-displayed SVGA animation; the sub-thread 604 is further used to: create an offscreen rendering instance, generate a new rendering result corresponding to the to-be-displayed SVGA animation by using the offscreen rendering instance, so as to isolate the rendering process from the main thread, and transmit the new rendering result to the main thread for display and to the local database for caching;

[0094] The sub-thread 604 is further used to: in the case where the judgment result is no, read the historical rendering result corresponding to the to-be-displayed SVGA animation from the local database, and transmit the historical rendering result to the main thread for display.

[0095] The display device for SVGA animations provided by the embodiment of the present invention can generate corresponding new rendering results in a sub-thread by using an offscreen rendering instance when loading an SVGA animation for the first time, so as to isolate the rendering process from the main thread, which not only solves the problem of main thread blockage, but also supports high-performance rendering of complex animation scenes, thereby improving the rendering efficiency. In the case of non-first-time loading of an SVGA animation, the corresponding historical rendering result can be directly read from the local database to avoid repeated network requests and decoding, thereby greatly improving the loading speed and resource utilization rate of the SVGA animation.

[0096] In one embodiment, the cached data further includes historical rendering data cached in the form of key-value pairs. The key of the key-value pair is the URL address of the historical SVGA animation, and the value of the key-value pair is the historical rendering data corresponding to each frame in the historical SVGA animation, so as to cache the association between the URL address and the historical rendering data; the sub-thread 604 is further configured to: match the URL address of the to-be-displayed SVGA animation corresponding to the animation display request with the URL address associated with the historical rendering data in the local database, and determine whether the to-be-displayed SVGA animation corresponding to the animation display request is a first-time load based on the matching result.

[0097] In one embodiment, the sub-thread 604 is further configured to:

[0098] Parse the to-be-displayed SVGA animation to obtain an animation parsing result;

[0099] Convert the animation parsing result into a binary data set;

[0100] Cache the binary data set into the local database in the form of key-value pairs; and create an off-screen rendering instance in the sub-thread, and use the off-screen rendering instance to perform off-screen rendering on the binary data set in parallel to obtain a new rendering result corresponding to the to-be-displayed SVGA animation.

[0101] In one embodiment, the main thread 602 is further configured to:

[0102] When the off-screen rendering instance generates any frame of the new rendering result corresponding to the to-be-displayed SVGA animation, recycle the graphic resources used for off-screen rendering of this frame of the new rendering result.

[0103] In one embodiment, the sub-thread 604 is further configured to asynchronously read multiple frames of historical rendering results from the local database and transfer the multiple frames of historical rendering results to the memory of the main thread;

[0104] The main thread 602 is further configured to display the multiple frames of historical rendering results cached in the memory;

[0105] During the process of the main thread displaying multiple frames of historical rendering results, the main thread 602 is further configured to send a data reading notification to the sub-thread based on the current display progress;

[0106] The sub-thread 604 is further configured to continue to asynchronously read multiple frames of historical rendering results from the local database based on the number of frames carried in the data reading notification until each frame of historical rendering result corresponding to the to-be-displayed SVGA animation is completely displayed.

[0107] In one embodiment, the main thread 602 is further configured to clear the multiple frames of historical rendering results that have been completed for display from the memory when it is monitored that the multiple frames of historical rendering results cached in the memory exceed the preset limit.

[0108] In one embodiment, the child thread is a WebWorker thread, the offscreen rendering instance is an OffscreenCanvas instance, and the local database is an IndexedDB database.

[0109] The device provided by the embodiment of the present invention has the same implementation principle and technical effects as those of the foregoing method embodiment. For the sake of brief description, for the parts not mentioned in the device embodiment, reference may be made to the corresponding content in the foregoing method embodiment.

[0110] The embodiment of the present invention provides a client. Specifically, the client includes a processor and a storage device; a computer program is stored on the storage device, and when the computer program is run by the processor, it executes the method according to any one of the foregoing embodiments.

[0111] Figure 7 FIG. 10 is a schematic structural diagram of a client provided by an embodiment of the present invention. The client 100 includes: a processor 70, a memory 71, a bus 72, and a communication interface 73. The processor 70, the communication interface 73, and the memory 71 are connected through the bus 72. The processor 70 is used to execute an executable module stored in the memory 71, such as a computer program.

[0112] Among them, the memory 71 may include a high-speed random access memory (RAM, Random Access Memory), and may also include a non-volatile memory, such as at least one disk memory. Through at least one communication interface 73 (which can be wired or wireless), a communication connection between the system network element and at least one other network element is realized, and the Internet, a wide area network, a local area network, a metropolitan area network, etc. can be used.

[0113] The bus 72 may be an ISA bus, a PCI bus, an EISA bus, etc. The bus may be divided into an address bus, a data bus, a control bus, etc. For the sake of convenience of representation, Figure 7 only a bidirectional arrow is used in FIG. 10, but it does not mean that there is only one bus or one type of bus.

[0114] Among them, the memory 71 is used to store a program. After receiving an execution instruction, the processor 70 executes the program. The method executed by the device defined by the flow process disclosed in any one of the foregoing embodiments of the present invention can be applied to the processor 70 or implemented by the processor 70.

[0115] The processor 70 may be an integrated circuit chip with signal processing capabilities. In the implementation process, each step of the above method can be completed by the integrated logic circuit of the hardware in the processor 70 or the instructions in the form of software. The above-mentioned processor 70 may be a general-purpose processor, including a central processing unit (CPU for short), a network processor (NP for short), etc.; it may also be a digital signal processor (DSP for short), an application specific integrated circuit (ASIC for short), a field-programmable gate array (FPGA for short), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components. It can implement or execute various methods, steps, and logic block diagrams disclosed in the embodiments of the present invention. The general-purpose processor may be a microprocessor or the processor may also be any conventional processor, etc. The steps of the method disclosed in combination with the embodiments of the present invention can be directly embodied as being executed and completed by a hardware decoding processor, or executed and completed by a combination of hardware and software modules in the decoding processor. The software module may be located in a mature storage medium in the art such as a random access memory, a flash memory, a read-only memory, a programmable read-only memory, or an electrically erasable programmable memory, a register, etc. This storage medium is located in the memory 71, and the processor 70 reads the information in the memory 71 and combines its hardware to complete the steps of the above method.

[0116] The computer program product of the readable storage medium provided by the embodiments of the present invention includes a computer-readable storage medium storing program code, and the instructions included in the program code can be used to execute the methods described in the foregoing method embodiments. For specific implementation, reference can be made to the foregoing method embodiments and will not be elaborated herein.

[0117] When the above-mentioned functions are implemented in the form of software function units and sold or used as independent products, they can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present invention, in essence, or the part that contributes to the prior art, or a part of this technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions for causing a computer device (which may be a personal computer, a server, or a network device, etc.) to execute all or part of the steps of the methods described in various embodiments of the present invention. The foregoing storage medium includes: various media such as USB flash drives, mobile hard disks, read-only memories (ROM, Read-Only Memory), random access memories (RAM, Random Access Memory), magnetic disks, or optical discs that can store program codes.

[0118] Finally, it should be noted that the above-mentioned embodiments are only specific implementation manners of the present invention, used to illustrate the technical solutions of the present invention, rather than limiting it. The protection scope of the present invention is not limited thereto. Although the present invention has been described in detail with reference to the foregoing embodiments, those of ordinary skill in the art should understand that: any person skilled in the art within the technical scope disclosed by the present invention can still modify the technical solutions recorded in the foregoing embodiments, or can easily think of changes, or perform equivalent replacements on some of the technical features; and these modifications, changes, or replacements do not make the essence of the corresponding technical solutions deviate from the spirit and scope of the technical solutions of the embodiments of the present invention, and should all be covered within the protection scope of the present invention. Therefore, the protection scope of the present invention should be subject to the protection scope of the claims.< / canvas>

Claims

1. A method for fast loading and displaying SVGA animation, characterized in that: The method is applied to a client, the client is configured with a main thread and a sub-thread, and the client is also deployed with a local database, and the method includes: Receiving an animation display request through the main thread; By means of the child thread, based on the cache data in the local database, determining whether the SVGA animation to be displayed corresponding to the animation display request is loaded for the first time, wherein the cache data includes historical rendering results; If yes, the SVGA animation to be displayed is obtained through the main thread, an off-screen rendering instance is created through the child thread, and a new rendering result corresponding to the SVGA animation to be displayed is generated by using the off-screen rendering instance, so that the rendering process is isolated from the main thread, and the new rendering result is transmitted to the main thread for display and to the local database for caching; If not, the historical rendering result corresponding to the to-be-displayed SVGA animation is read from the local database through the child thread, and the historical rendering result is transmitted to the main thread for display.

2. The method for fast loading and displaying SVGA animation according to claim 1, characterized in that: The cached data also includes historical rendering data cached in the form of a key-value pair, the key of the key-value pair being the URL address of the historical SVGA animation, and the value of the key-value pair being the historical rendering data corresponding to each frame in the historical SVGA animation, so that the URL address is associated with the historical rendering data and cached; The method of determining, by the child thread and based on the cache data in the local database, whether the SVGA animation to be displayed corresponding to the animation display request is loaded for the first time includes: Through the sub-thread, the URL address of the SVGA animation to be displayed corresponding to the animation display request is matched with the URL address associated with the historical rendering data in the local database, and based on the matching result, it is determined whether the SVGA animation to be displayed corresponding to the animation display request is loaded for the first time.

3. The method for fast loading and displaying SVGA animation according to claim 2, characterized in that: Creating an off-screen rendering instance through the child thread, and using the off-screen rendering instance to generate a new rendering result corresponding to the SVGA animation to be displayed, including: Parsing the SVGA animation to be displayed by the sub-thread to obtain an animation parsing result; Converting the animation parsing result into a binary data set through the child thread; The binary data set is cached in the local database in the form of key-value pairs through the child thread; and an off-screen rendering instance is created in the child thread, and the binary data set is rendered off-screen in parallel using the off-screen rendering instance to obtain a new rendering result corresponding to the SVGA animation to be displayed.

4. The method for quickly loading and displaying SVGA animation according to claim 3, characterized in that: The method further comprises: When the off-screen rendering instance generates the new rendering result of any frame corresponding to the SVGA animation to be displayed, the graphic resources used for off-screen rendering of the new rendering result of the frame are recovered.

5. The method for fast loading and displaying SVGA animation according to claim 1, characterized in that: Reading the historical rendering result corresponding to the to-be-displayed SVGA animation from the local database through the child thread, and transmitting the historical rendering result to the main thread for display, including: Asynchronously reading multiple frames of the historical rendering results from the local database through the child thread, and transmitting the multiple frames of the historical rendering results to the memory of the main thread; Displaying the historical rendering results of multiple frames cached in the memory through the main thread; In the process of the main thread displaying multiple frames of the historical rendering results, the main thread sends a data reading notification to the child thread based on the current display progress; Through the sub-thread, based on the frame number carried in the data reading notification, multiple frames of the historical rendering results continue to be asynchronously read from the local database until each frame of the historical rendering results corresponding to the SVGA animation to be displayed is completely displayed.

6. The method for fast loading and displaying SVGA animation according to claim 5, characterized in that: The method further comprises: Through the main thread, when it is monitored that the multiple frames of the historical rendering results cached in the memory exceed a preset limit, the multiple frames of the historical rendering results that have been displayed are cleared from the memory.

7. The method for quickly loading and displaying SVGA animation according to any one of claims 1 to 6, characterized in that: The child thread is a WebWorker thread, the off-screen rendering instance is an OffscreenCanvas instance, and the local database is an IndexedDB database.

8. A display device for SVGA animation, characterized in that: The device is applied to a client, the client is configured with a main thread and a sub-thread, and the client is also deployed with a local database: The main thread is used to: receive an animation display request; The child thread is used to: determine whether the to-be-displayed SVGA animation corresponding to the animation display request is loaded for the first time based on the cache data in the local database, the cache data including historical rendering results; The main thread is further used to: if the judgment result is yes, obtain the SVGA animation to be displayed; the sub-thread is further used to: create an off-screen rendering instance, use the off-screen rendering instance to generate a new rendering result corresponding to the SVGA animation to be displayed, so that the rendering process is isolated from the main thread, and transmit the new rendering result to the main thread for display and to the local database for caching; The sub-thread is further used for: when the judgment result is no, reading the historical rendering result corresponding to the SVGA animation to be displayed from the local database, and transmitting the historical rendering result to the main thread for display.

9. A client, characterized in that: The method comprises a processor and a memory, wherein the memory stores computer executable instructions that can be executed by the processor, and the processor executes the computer executable instructions to implement the method according to any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores computer-executable instructions, and when the computer-executable instructions are called and executed by a processor, the computer-executable instructions prompt the processor to implement the method according to any one of claims 1 to 7.

Images