Quick loading display method and device for SVGA animation, client and medium

Abstract

The invention provides a rapid loading display method and device for SVGA animation, a client and a medium. The method comprises the steps that an animation display request is received through a main thread; judging whether the to-be-displayed SVGA animation corresponding to the animation display request is loaded for the first time or not through the sub-thread; if yes, the SVGA animation to be displayed is obtained through the main thread, an off-screen rendering instance is created through the sub-thread, a new rendering result corresponding to the SVGA animation to be displayed is generated through 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 to be displayed and transmitted to a local database to be cached; if not, a historical rendering result corresponding to the SVGA animation to be displayed is read from the local database through the sub-thread, and the historical rendering result is transmitted to the main thread to be displayed. According to the method, the loading speed of the SVGA animation can be greatly improved, the problem of blockage of a main thread is solved, and the rendering efficiency of the SVGA animation is improved.

Description

Technical Field

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

[0002] The 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, a special parser (such as the SVGA-JS library) is used to decode the file, extract animation-related data, including layer information, frame data, image resources (Base64 or embedded images), and convert them into internal data structures that can be drawn. When the animation is played, the SVGA player will render according to the decoded layer status, attribute changes (such as transparency, position, rotation, etc.) and image resources of each frame. The rendering core relies on HTML5's canvas or WebGL (Web Graphics Library) to draw the animation frame by frame on the specified canvas.

[0003] The existing technology has the following disadvantages: (1) High network dependence, decoding is required every time: The existing technology needs to request the network each time to load the SVGA file. If the SVGA file is large or in a weak network environment, the loading time will be particularly long each time. Even if the HTTP (Hypertext Transfer Protocol) strong cache can be enabled, it still needs to parse the strongly cached data when it is played, which still takes a long time. (2) Main thread pressure: Since loading and decoding are performed on the main thread, frame-by-frame rendering relies 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 response speed and interactive experience of the page. (3) Rendering efficiency limitation: During the rendering process, the existing technology uses a frame-by-frame drawing method. For complex animation (multi-layer, dynamic transformation) scenes, the performance bottleneck is particularly obvious, and the rendering efficiency will be 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 animation, which can greatly improve the loading speed of SVGA animation, solve the main thread blocking problem, and improve the rendering efficiency of SVGA animation.

[0005] In a first aspect, the present invention provides a method for fast loading and displaying an SVGA animation. 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. The method includes: Receive animation display request through the main thread; Through a child thread, based on cached data in a local database, determining whether the SVGA animation to be displayed corresponding to the animation display request is loaded for the first time, the cached data including historical rendering results; If yes, obtain the SVGA animation to be displayed through the main thread, create an off-screen rendering instance through the child thread, 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 transmit the new rendering result to the main thread for display and to the local database for caching; If not, the historical rendering result corresponding to the SVGA animation to be displayed is read from the local database through the child thread, and the historical rendering result is transmitted to the main thread for display.

[0006] In one embodiment, the cached data further 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; Through the child thread, based on the cache data in the local database, it is determined whether the SVGA animation to be displayed corresponding to the animation display request is loaded for the first time, including: Through the child 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.

[0007] In one implementation, creating an off-screen rendering instance through a child thread, and using the off-screen rendering instance to generate a new rendering result corresponding to the SVGA animation to be displayed, includes: The animation analysis result is obtained by parsing the SVGA animation to be displayed through the child thread; Convert the animation parsing results into binary data sets through a child thread; The binary data set is cached in the form of key-value pairs in a local database through a 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.

[0008] In one embodiment, the method further comprises: When the off-screen rendering instance generates a 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.

[0009] In one implementation, reading the historical rendering result corresponding to the SVGA animation to be displayed from the local database through a child thread, and transmitting the historical rendering result to the main thread for display, includes: Through the child thread, asynchronously read the multi-frame historical rendering results from the local database, and transfer the multi-frame historical rendering results to the memory of the main thread; Through the main thread, the multi-frame historical rendering results cached in memory are displayed; When the main thread displays the historical rendering results of multiple frames, the main thread sends a data reading notification to the child thread based on the current display progress; Through the child thread, based on the frame number carried in the data reading notification, continue to asynchronously read multiple frames of historical rendering results from the local database until each frame of historical rendering results corresponding to the SVGA animation to be displayed is displayed.

[0010] In one embodiment, the method further comprises: Through the main thread, when it is monitored that the multi-frame historical rendering results cached in the memory exceed the preset limit, the multi-frame historical rendering results that have been displayed are cleared from the memory.

[0011] 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.

[0012] In a second aspect, the present invention further provides a display device for 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: The main thread is used to: receive animation display requests; The child thread is used to: determine whether the SVGA animation to be displayed corresponding to the animation display request is loaded for the first time based on the cached data in the local database, and the cached data includes historical rendering results; The main thread is also used to: if the judgment result is yes, obtain the SVGA animation to be displayed; the child thread is also 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 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; The child thread is also 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.

[0013] In a third aspect, the present invention further provides a client, comprising 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 any one of the methods provided in the first aspect.

[0014] In a fourth aspect, the present invention further provides a computer-readable storage medium, which stores computer-executable instructions. When the computer-executable instructions are called and executed by a processor, the computer-executable instructions prompt the processor to implement any one of the methods provided in the first aspect.

[0015] The present invention provides a method, device, client and medium for quickly loading and displaying SVGA animation. First, an animation display request is received through a main thread; then, through a child thread, based on cached data in a local database, it is determined 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; when the judgment result is yes, the SVGA animation to be displayed can be 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 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; when the judgment result is no, the historical rendering result corresponding to the SVGA animation to be displayed can be read from the local database through the child thread, and the historical rendering result is transmitted to the main thread for display. When the SVGA animation is loaded for the first time, the above method can use the off-screen rendering instance in the child thread to generate the corresponding new rendering results, so that the rendering activity is isolated from the main thread. This not only solves the problem of main thread blocking, but also supports high-performance rendering of complex animation scenes, thereby improving rendering efficiency. When the SVGA animation is not loaded for the first time, the corresponding historical rendering results can be directly read from the local database to avoid repeated network requests and decoding, thereby greatly improving the loading speed and resource utilization of the SVGA animation.

[0016] Other features and advantages of the present invention will be described in the following description, and partly become apparent from the description, or understood by practicing the present invention. The purpose and other advantages of the present invention are realized and obtained by the structures particularly pointed out in the description, claims and drawings.

[0017] In order to make the above-mentioned objects, features and advantages of the present invention more obvious and easy to understand, preferred embodiments are given below and described in detail with reference to the accompanying drawings. BRIEF DESCRIPTION OF THE DRAWINGS

[0018] In order to more clearly illustrate the specific implementation methods of the present invention or the technical solutions in the prior art, the drawings required for use in the specific implementation methods or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are some implementation methods of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.

[0019] Figure 1 A schematic diagram of a flow chart of a method for quickly loading and displaying an SVGA animation provided by an embodiment of the present invention; Figure 2 A main / sub-thread communication and sub-thread workflow diagram provided by an embodiment of the present invention; Figure 3 A schematic diagram of an IndexedDB storage format provided by an embodiment of the present invention; Figure 4 A flow chart comparing a method for quickly loading and displaying SVGA animation provided by an embodiment of the present invention; Figure 5 A comparison diagram of the effects of a method for quickly loading and displaying SVGA animation provided by an embodiment of the present invention; Figure 6 A schematic diagram of the structure of a fast loading and display device for SVGA animation provided by an embodiment of the present invention; Figure 7 A schematic diagram of the structure of a client provided by an embodiment of the present invention. DETAILED DESCRIPTION

[0020] In order to make the purpose, technical solution and advantages of the embodiments of the present invention clearer, the technical solution of the present invention will be clearly and completely described in combination with the embodiments below. Obviously, the described embodiments are part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0021] At present, the existing technology has problems such as long loading time of SVGA files, high main thread pressure, low rendering efficiency, etc. Based on this, the present invention provides a method, device, client and medium for fast loading and displaying SVGA animations, which can greatly improve the loading speed of SVGA animations, solve the main thread blocking problem, and improve the rendering efficiency of SVGA animations.

[0022] To facilitate understanding of this embodiment, a method for quickly loading and displaying an SVGA animation disclosed in an embodiment of the present invention is first described in detail. The method is applied to a client, and the client is configured with a main thread and a sub-thread. The client also deploys a local database. Figure 1 The flowchart of a method for quickly loading and displaying an SVGA animation is shown, and the method mainly includes the following steps S102 to S108: Step S102: receiving an animation display request through the main thread.

[0023] The animation display request carries the identifier or URL (Uniform Resource Locator) address of the SVGA animation to be displayed, and 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.

[0024] Step S104: judging, through 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.

[0025] Among them, the cached data includes historical rendering results cached in the form of key-value pairs and 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 the 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 that the URL address is associated with the historical rendering data. Similarly, the historical binary data set can be cached in the form of key-value pairs in the above form. The binary data set is also the SVGA animation parsing result in binary format, including metadata, frame data and related resources.

[0026] In one example, the URL address of the SVGA animation to be displayed can be matched with the URL address 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.

[0027] Step S106, if yes, obtain the SVGA animation to be displayed through the main thread, create an off-screen rendering instance through the child thread, 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 transmit the new rendering result to the main thread for display and to the local database for caching.

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

[0029] 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 transmit the historical rendering result to the main thread for display.

[0030] In one example, when it is not the first time loading, the child thread can directly read the historical rendering results 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 each frame of historical rendering results of the SVGA animation to be rendered is displayed.

[0031] The fast loading and display method of SVGA animation provided by the embodiment of the present invention can generate corresponding new rendering results by using off-screen rendering instances in a child thread when the SVGA animation is loaded for the first time, so as to isolate the rendering activity from the main thread. This not only solves the problem of main thread blocking, but also supports high-performance rendering of complex animation scenes, thereby improving rendering efficiency. When the SVGA animation is not loaded for the first time, the corresponding historical rendering results can be directly read from the local database to avoid repeated network requests and decoding, thereby greatly improving the loading speed and resource utilization of the SVGA animation.

[0032] In one embodiment, 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 embodiment of the present invention is based on WebWorker+OffscreenCanvas (off-screen rendering)+IndexedDB technology to achieve high-performance loading of SVGA animation. Among them, OffscreenCanvas provides a canvas object that can be rendered off the screen. It is valid in both window environments and webworker environments. IndexedDB is an underlying API (Application Programming Interface) for storing large amounts of structured data (including rendering results / binary data sets) on the client. The API uses indexes to achieve high-performance searches for data. Although Web Storage is useful for storing smaller amounts of data, it is not capable of storing larger amounts of structured data. IndexedDB provides a solution for this scenario. The storage space is theoretically unlimited and depends on the size of the disk. Web Worker provides a simple way for Web content to run scripts in background threads. Child threads can perform tasks without interfering with the user interface. Additionally, they can perform I / O using XMLHttpRequest (although the responseXML and channel properties are always null) or fetch (which does not have these restrictions).

[0033] The specific logic is as follows: (1) Initialize the WebWorker child thread: First, create a WebWorker child thread in the main thread to handle the parsing and off-screen rendering tasks. In the WebWorker child thread, create an OffscreenCanvas and bind it to the execution thread of the WebWorker child thread so that the rendering work will not block the main thread. (2) Determine whether the IndexedDB database has a cache. If so, use it directly, skip the network request and parsing steps, and enter the rendering. If not, load it from the network, and use the WebWorker child thread initialized in the first step to parse each frame of the SVGA animation to be displayed, and store it in the IndexedDB database at the same time. (3) Use OffscreenCanvas in the WebWorker child thread to render the parsed animation frame. Whenever a frame of animation is rendered, the WebWorker child thread can send the rendering result back to the main thread, and the main thread displays it on the actual canvas. The embodiment of the present invention solves 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 request through the network or decode it again for the second time. (2) Parsing through WebWorker child threads can avoid page freezes caused by main thread blocking, thus improving user experience. (3) OffscreenCanvas off-screen rendering technology. The biggest advantage of this function is that it can run in the WebWorker child thread environment. The main thread will not be blocked during the rendering process, which greatly improves rendering efficiency.

[0034] For ease of understanding, the present invention provides a specific implementation of a method for quickly loading and displaying an SVGA animation. Figure 2 A main / sub-thread communication and sub-thread workflow diagram shown, Figure 2 It is shown that the main thread creates a WebWorker child thread and sends a parsing instruction, the WebWorker child thread creates an OffscreenCanvas for parsing / rendering / storage, and the main thread and the child thread realize two-way communication through postMessage and onmessage.

[0035] 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.

[0036] 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.

[0037] 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.

[0038] 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: Step 1: Get the SVGA animation to be displayed through the main thread.

[0039] 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.

[0040] The decoding and resource processing of SVGA animations are performed in child threads through WebWorker, ensuring that the main thread is focused on user interaction and page rendering. The parsing process is as follows: Step 2.1, parse the SVGA animation to be displayed through the WebWorker child thread to obtain the animation parsing result, and convert the animation parsing result into a binary data set.

[0041] Specifically, when loading for the first time, the SVGA animation to be displayed is obtained through network request and parsed 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 of each layer, bitmap resources, etc.; c) Process related resources: If the frame contains bitmaps 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.

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

[0043] Step 2.2, cache the binary data set in the form of key-value pairs to the local database through the WebWorker child thread; and create an off-screen rendering instance in the WebWorker child 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.

[0044] In one example, the embodiment of the present invention uses the IndexedDB database to store the parsed binary data set and related resources in a local database. Figure 3 The schematic diagram of an IndexedDB storage format is shown, where 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 a binary data set that can be directly rendered after each frame is parsed, supporting on-demand loading and fast indexing. The embodiment of the present invention caches each frame of the parsed SVGA animation to be displayed into a local database by first loading the SVGA animation to be displayed, so as to reduce the performance overhead of subsequent playback.

[0045] In one example, the rendering process is as follows: Use OffscreenCanvas technology to migrate the rendering process from the main thread to the WebWorker environment to achieve off-screen drawing of frame-by-frame animation. Step 1: Create an OffscreenCanvas instance in the WebWorker child thread and start listening to the main thread. Step 2: The main thread sends an instruction to the WebWorker child thread, requiring the WebWorker child thread to use OffscreenCanvas to draw the current frame in the child thread, and pass the rendering result to the main thread for display through transferToImageBitmap.

[0046] OffscreenCanvas technology not only supports running in a WebWorker environment, but also has the following core advantages: (1) Parallel processing: The rendering process is completely isolated from the main thread, which can fully utilize multi-core CPU resources and improve the smoothness of animation playback. (2) Real-time rendering and frame rate control: Supports frame-by-frame rendering and dynamic adjustment of frame rate to meet different performance requirements. (3) Reduce the pressure on the main thread: The main thread is only responsible for receiving the rendering results and updating them to the page, and does not participate in specific drawing operations to ensure smooth page operation.

[0047] Step 3: The new rendering result is transmitted to the main thread for display and to the local database for caching. In one example, the main thread completes page rendering after receiving the rendering result in the onmessage callback function. The main thread renders the rendering result of the OffscreenCanvas to the visible <canvas>Elements to ensure smooth display of animation.

[0048] The embodiment of the present invention provides a specific implementation of the aforementioned 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 with the OffscreenCanvas to render the animation, and the main thread is only responsible for receiving the results and updating the page. It includes the following steps: through the WebWorker sub-thread, 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; through the main thread, display the multiple frames of historical rendering results cached in the memory; in the process of the main thread displaying multiple frames of historical rendering results, send a data reading notification to the WebWorker sub-thread based on the current display progress through the main thread; through the WebWorker sub-thread, based on the number of frames carried by the data reading notification, continue to asynchronously read multiple frames of historical rendering results from the local database until each frame of historical rendering results corresponding to the SVGA animation to be displayed is displayed.

[0049] The specific implementation includes: a) When playback starts, the system reads the rendering results of the previous frames from the IndexedDB database and caches them in memory. These rendering results will be passed to the rendering process of the WebWorker child 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. In order to avoid UI jams, the reading and rendering of rendering results are performed separately, that is, the WebWorker child thread asynchronously reads the data of the next frame or the previous frames from the IndexedDB database. At the same time, the main thread uses the rendering results cached in memory for display. c) Memory caching and release: During playback, the previous and next frames of the current playback will be cached in 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 cleared from the memory in time to release the memory.

[0050] The embodiment of the present invention can achieve fast loading: if the IndexedDB cache exists, the parsed frame data is read directly from the local database, bypassing the network request and decoding process, and significantly improving the loading speed. Compared with the existing solution, the advantage here is: even if the existing solution turns on strong caching, it can only cache the original SVGA data. Although network requests can be avoided, the parsing process is still required, which is also a time-consuming process that blocks the main thread. The embodiment of the present invention stores the data after the first parsing in the IndexedDB database, and it can be used directly when it is used again. This does not consume traffic and does not require parsing, which significantly improves the loading speed of the SVGA animation.

[0051] Furthermore, the embodiment of the present invention also performs memory management and performance optimization. In order to achieve efficient memory management during animation playback, the system dynamically controls the cache in the memory according to the actual playback progress. Specific memory management strategies include: (1) Memory usage limit: Through the main thread, when it is detected that the multi-frame historical rendering results cached in the memory exceed the preset limit, the multi-frame historical rendering results that have been displayed will be 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, which may occupy 100M of memory after parsing. The IndexedDB storage solution used in the embodiment of the present invention is to store the data to the disk, read it while playing, and only cache a few frames of data before and after the playback in the memory to release invalid memory usage. 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 will be automatically released to avoid excessive memory usage.

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

[0053] (3) Off-screen rendering and recycling: When the off-screen rendering instance generates a new rendering result for any frame of the SVGA animation to be displayed, the graphics resources used for off-screen rendering of the new rendering result are recycled. When using OffscreenCanvas for off-screen rendering, each frame of rendered data can be directly transmitted to the main thread for display. In order to further optimize performance, after rendering a frame, the related graphics resources (such as ImageBitmap) will be recycled in a timely manner.

[0054] In summary, see Figure 4 A process comparison diagram of a method for quickly loading and displaying SVGA animation is shown. The left flowchart is a traditional method for quickly loading and displaying SVGA animation. In the case of the first loading, loading, parsing and other processes need to be performed, and then the SVGA animation is played by the main thread. In the case of not the first loading, if strong caching is not used, parsing and other processes need to be performed again. If strong caching is used, loading, parsing and other processes need to be performed again. The existing technical solutions all complete the process of loading->parsing->rendering through the main thread, which can easily cause jamming and affect user operations; the right flowchart is a method for quickly loading and displaying SVGA animation provided by an embodiment of the present invention. In the case of the first loading, it is necessary to obtain the rendering result through WebWorker+OffscreenCanvas (off-screen rendering), and then the SVGA animation is played by the main thread, and the rendering result is stored in the IndexedDB database. In the case of not the first loading, the corresponding rendering result is directly read from the IndexedDB database, and then the SVGA animation is played by the main thread. Therefore, the embodiment of the present invention will not cause the main thread to be blocked.

[0055] For example, the embodiment of the present invention takes the loading of a 9.5M svga file as an example, and compares the loading time of the prior art solution and the embodiment of the present invention, such as Figure 5 The figure shows a comparison of the effects of a fast loading and display method of SVGA animation. Figure 5 It is shown that compared with the prior art, the first loading of the embodiment of the present invention takes less time: because the client has no cache for the first loading, it can only load the original file of the SVGA animation from the server through a network request. The embodiment of the present invention and the prior art are the same, depending on the server performance and the user's network speed, but the reason why the embodiment of the present invention takes less time is mainly that the efficient parsing and rendering performance of WebWorker + OffscreenCanvas is better than the main thread rendering solution of the prior art. Figure 5 It is also shown that compared with the prior art, the secondary loading of the embodiment of the present invention takes less time: because the embodiment of the present invention uses IndexedDB to store the parsed frame data, it does not require network requests and decoding processes, and can be used directly, which reduces the dimensionality of the strong caching technology of the existing solution, so the time consumption is saved by nearly 20 times.

[0056] Therefore, the embodiments of the present invention have at least the following characteristics: (1) Separation of multi-threaded parsing and rendering: The WebWorker child thread parses the animation data, and OffscreenCanvas performs off-screen rendering, which solves the main thread blocking problem and significantly improves the user experience.

[0057] (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 loading speed and resource utilization efficiency.

[0058] (3) Efficient off-screen rendering: OffscreenCanvas technology renders animations in a child thread, reducing the rendering overhead of the main thread while supporting high-performance rendering of complex animation scenes.

[0059] (4) Fluency and scalability: The overall solution supports dynamic adjustment of frame rate and on-demand loading to adapt to the needs of different scenarios and is easy to expand and integrate into existing systems.

[0060] Based on the above embodiments, an embodiment of the present invention provides a display device for SVGA animation, which is applied to a client. The client is configured with a main thread and a sub-thread. The client is also deployed with a local database. Figure 6 A schematic diagram of the structure of a display device for SVGA animation is shown: The main thread 602 is used to: receive an animation display request; The sub-thread 604 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 cached data in the local database, the cached data including the historical rendering results; The main thread 602 is also used to: if the judgment result is yes, obtain the SVGA animation to be displayed; the child thread 604 is also 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 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; The sub-thread 604 is also 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.

[0061] The display device of SVGA animation provided by the embodiment of the present invention can generate corresponding new rendering results by using off-screen rendering instances in a child thread when the SVGA animation is loaded for the first time, so as to isolate the rendering activity from the main thread. This not only solves the problem of main thread blocking, but also supports high-performance rendering of complex animation scenes, thereby improving rendering efficiency. When the SVGA animation is not loaded for the first time, the corresponding historical rendering results can be directly read from the local database to avoid repeated network requests and decoding, thereby greatly improving the loading speed and resource utilization of the SVGA animation.

[0062] In one embodiment, 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 sub-thread 604 is also used to: match 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 local database, and determine whether the SVGA animation to be displayed corresponding to the animation display request is loaded for the first time based on the matching result.

[0063] In one embodiment, the child thread 604 is further used to: Analyze the SVGA animation to be displayed to obtain the animation analysis result; Convert animation parsing results into binary datasets; The binary data set is cached in the form of key-value pairs in a local database; and an off-screen rendering instance is created in a child thread, and the off-screen rendering instance is used 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.

[0064] In one embodiment, the main thread 602 is also used to: When the off-screen rendering instance generates a 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.

[0065] In one embodiment, the child thread 604 is further used to asynchronously read the multi-frame historical rendering results from the local database, and transmit the multi-frame historical rendering results to the memory of the main thread; The main thread 602 is also used to display the multi-frame historical rendering results cached in the memory; In the process of the main thread displaying the historical rendering results of multiple frames, the main thread 602 is also used to send a data reading notification to the child thread based on the current display progress; The sub-thread 604 is also used to continue to asynchronously read multiple frames of historical rendering results from the local database based on the frame number carried in the data reading notification, until each frame of historical rendering results corresponding to the SVGA animation to be displayed is completely displayed.

[0066] In one implementation, the main thread 602 is further configured to clear the displayed multi-frame historical rendering results from the memory when it is detected that the multi-frame historical rendering results cached in the memory exceed a preset limit.

[0067] 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.

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

[0069] An embodiment of the present invention provides a client, specifically, the client includes a processor and a storage device; the storage device stores a computer program, and when the computer program is executed by the processor, it executes the method described in any one of the above-mentioned implementation methods.

[0070] Figure 7 A structural diagram of a client provided in an embodiment of the present invention, the client 100 includes: a processor 70, a memory 71, a bus 72 and a communication interface 73, wherein the processor 70, the communication interface 73 and the memory 71 are connected via the bus 72; the processor 70 is used to execute an executable module stored in the memory 71, such as a computer program.

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

[0072] The bus 72 may be an ISA bus, a PCI bus, or an EISA bus, etc. The bus may be divided into an address bus, a data bus, a control bus, etc. For ease of representation, Figure 7 Only one bidirectional arrow is used in the diagram, but this does not mean that there is only one bus or only one type of bus.

[0073] Among them, the memory 71 is used to store programs, and the processor 70 executes the program after receiving the execution instruction. The method executed by the device for flow process definition disclosed in any embodiment of the above-mentioned embodiment of the present invention can be applied to the processor 70 or implemented by the processor 70.

[0074] 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 hardware integrated logic circuit or software instructions in the processor 70. The above processor 70 can be a general-purpose processor, including a central processing unit (CPU), a network processor (NP), etc.; it can also be a digital signal processor (DSP), an application-specific integrated circuit (ASIC), a field-programmable gate array (FPGA), or other programmable logic devices, discrete gates or transistor logic devices, discrete hardware components. The methods, steps and logic block diagrams disclosed in the embodiments of the present invention can be implemented or executed. The general-purpose processor can be a microprocessor or the processor can also be any conventional processor. The steps of the method disclosed in the embodiment of the present invention can be directly embodied as a hardware decoding processor to execute, or can be executed by a combination of hardware and software modules in the decoding processor. The software module can be located in a mature storage medium in the field 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. The storage medium is located in the memory 71, and the processor 70 reads the information in the memory 71 and completes the steps of the above method in combination with its hardware.

[0075] The computer program product of the readable storage medium provided in the embodiment 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 previous method embodiments. The specific implementation can be referred to the previous method embodiments, which will not be repeated here.

[0076] If the functions are implemented in the form of software functional 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, or the part that contributes to the prior art, or the part of the technical solution, can be embodied in the form of a software product. The computer software product is stored in a storage medium, including several instructions to enable a computer device (which can be a personal computer, server, or network device, etc.) to perform all or part of the steps of the methods described in various embodiments of the present invention. The aforementioned storage medium includes: U disk, mobile hard disk, read-only memory (ROM, Read-Only Memory), random access memory (RAM, Random Access Memory), disk or optical disk, etc., which can store program codes.

[0077] Finally, it should be noted that the above-described embodiments are only specific implementations of the present invention, which are used to illustrate the technical solutions of the present invention, rather than to limit them. The protection scope of the present invention is not limited thereto. Although the present invention is described in detail with reference to the above-described embodiments, ordinary technicians in the field should understand that any technician familiar with the technical field can still modify the technical solutions recorded in the above-described embodiments within the technical scope disclosed by the present invention, or can easily think of changes, or make equivalent replacements for some of the technical features therein; 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 be included in the protection scope of the present invention. Therefore, the protection scope of the present invention shall 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