Page rendering method and device, computer device, storage medium and program product

Abstract

The application relates to a page rendering method and device, computer equipment, a storage medium and a program product. The method comprises the following steps: calling a micro task unit obtained by decomposing a rendering task; rendering page data to be rendered through the micro task unit; if an interactive task is detected during the rendering process and the processing priority of the interactive task is higher than the processing priority of the micro task unit, the micro task unit is interrupted, and the interactive task is executed; if the interactive task is executed, the micro task unit is restored, so that the micro task unit continues to render part of the page data which has not been rendered in the page data. According to the method, even when facing a complex rendering scene, the problem of affecting page rendering and page response caused by main thread blocking can be avoided.

Description

Technical Field

[0001] This application relates to the field of computer technology, and in particular to a page rendering method, apparatus, computer equipment, storage medium, and program product. Background Technology

[0002] With the continuous development of technology, more and more terminals can render pages, thus displaying different content by presenting different pages, such as video content, game screens, and different promotional content, to present a rich variety of display content.

[0003] Traditional page rendering solutions typically run rendering tasks on the main thread to render the front-end page. However, running page rendering tasks on the main thread can lead to main thread blocking in complex rendering scenarios, affecting page rendering and page responsiveness. Summary of the Invention

[0004] Therefore, it is necessary to provide a page rendering method, apparatus, computer device, computer-readable storage medium, and computer program product to address the above-mentioned technical problems, so as to avoid the problem of main thread blocking affecting page rendering and page response, even when facing more complex rendering scenarios.

[0005] Firstly, this application provides a page rendering method, the method comprising:

[0006] Call the micro-task units obtained from the decomposition of the rendering task;

[0007] The page data to be rendered is rendered through the micro-task unit;

[0008] If an interactive task is detected during the rendering process, and the processing priority of the interactive task is higher than the processing priority of the microtask unit, then the microtask unit is interrupted and the interactive task is executed.

[0009] After the interactive task is completed, the microtask unit is restored so that it can continue to render the unrendered portion of the page data.

[0010] Secondly, this application also provides a page rendering apparatus, the apparatus comprising:

[0011] The calling module is used to invoke the micro-task units obtained from the decomposition of the rendering task;

[0012] The rendering module is used to render the page data to be rendered through the micro-task unit;

[0013] An interrupt handling module is used to interrupt the microtask unit and execute the interactive task if an interactive task is detected during the rendering process and the processing priority of the interactive task is higher than the processing priority of the microtask unit.

[0014] The recovery module is used to restore the microtask unit after the interactive task has been completed, so that the microtask unit can continue to render the unrendered part of the page data.

[0015] In one embodiment, the calling module is further configured to execute a target function in the main thread when the main thread of the application is idle; and to call micro-task units in the task list through the target function; wherein the micro-task unit is an interruptible and resumable micro-rendering task obtained by decomposing the rendering task, and the task list contains multiple micro-task units.

[0016] In one embodiment, the rendering module is further configured to render a portion of the page data to be rendered through the micro-task unit; determine the task execution duration during the rendering of the portion of the page data; and continue to render the unrendered page data through the micro-task unit if the task execution duration meets the task execution conditions.

[0017] The interrupt handling module is further configured to stop executing the microtask unit when the task execution duration does not meet the task execution conditions.

[0018] In one embodiment, the page data includes first subpage data;

[0019] The rendering module is further configured to determine the first subpage data to be rendered in the page data; and to render the first subpage data through the microtask unit.

[0020] In one embodiment, the device further includes:

[0021] The auto-increment processing module is used to auto-increment the recorded task index after the rendering of the first subpage data is completed.

[0022] The rendering module is also used to render the second subpage data to be rendered in the page data according to the micro-task unit corresponding to the auto-incremented task index when the rendering of the entire page data has not been completed and the task execution time meets the task execution conditions.

[0023] The second subpage data is the next subpage data after the first subpage data.

[0024] In one embodiment, the device further includes:

[0025] The storage module is used to store the micro-task units obtained from the decomposition of the rendering task in the target priority queue.

[0026] The invocation module is also used to invoke at least one first microtask unit from the target priority queue;

[0027] The rendering module is further configured to render at least a portion of the page data to be rendered through the first microtask unit.

[0028] In one embodiment, the storage module is further configured to assign priorities to the micro-task units obtained by decomposing the rendering task according to the rendering category; and to store the micro-task units obtained by decomposing the rendering task in a first priority queue and a second priority queue according to the assigned priorities.

[0029] The processing priority of the first priority queue is higher than that of the second priority queue.

[0030] In one embodiment, the interrupt handling module is further configured to: if an interactive task is detected during rendering and the processing priority of the interactive task is higher than the processing priority of the microtask unit, store the interactive task in a third priority queue; the processing priority of the third priority queue is higher than the processing priority of the target priority queue; interrupt the microtask unit; read the interactive task from the third priority queue and execute the interactive task.

[0031] In one embodiment, the number of interactive tasks is at least two;

[0032] The interrupt handling module is further configured to read a first interactive task from the third priority queue and execute the first interactive task; if the interactive task in the third priority queue has not been completed, to read a second interactive task from the third priority queue and execute the second interactive task;

[0033] The number of the first interactive tasks and the number of the second interactive tasks are positive integers greater than or equal to 1.

[0034] In one embodiment, the recovery module is further configured to, upon completion of the interactive task, initiate a first call request to the application; and, when the main thread of the application is idle, restore at least one microtask unit based on the first call request, so that the at least one microtask unit continues to render the unrendered portion of the page data.

[0035] In one embodiment, the device further includes:

[0036] The initiation module is used to initiate a second call request to the application if the microtask unit in the target priority queue has not been completed.

[0037] The calling module is also configured to, when the main thread of the application is idle, call an unexecuted second microtask unit from the target priority queue based on the second calling request;

[0038] The rendering module is also used to render the remaining page data through the second microtask unit.

[0039] In one embodiment, the device further includes:

[0040] Create a module for creating a pool of workers consisting of at least two background threads;

[0041] The calling module is also used to assign each of the rendering tasks to the background threads in the work pool;

[0042] The rendering module is used to execute each rendering task through a background thread in the worker pool to render the page data.

[0043] In one embodiment, the calling module is further configured to monitor at least two rendering tasks passed by the main thread through a work script; and to allocate the monitored micro-task units to background threads in the work pool.

[0044] In one embodiment, the device further includes:

[0045] Create a module for creating a pool of workers consisting of at least two background threads;

[0046] The calling module is also used to allocate the micro-task units obtained from the decomposition of the rendering task to the background threads in the work pool.

[0047] The background thread in the work pool is used to execute the micro-task unit to render the page data.

[0048] In one embodiment, the calling module is further configured to monitor the micro-task units obtained from the decomposition of the rendering task passed by the main thread through the working script; and to allocate the monitored micro-task units to background threads in the working pool.

[0049] In one embodiment, the calling module is further configured to invoke a rendering task from the task list for rendering the page data to be rendered;

[0050] The rendering module is also used to render the page data through the rendering task;

[0051] The interrupt handling module is further configured to interrupt the rendering task and execute the interactive task if the interactive task is detected during the rendering process and the processing priority of the interactive task is higher than the processing priority of the rendering task.

[0052] The recovery module is further configured to, upon completion of the interactive task, restore the rendering task so that the rendering task can continue to render the unrendered portion of the page data.

[0053] Thirdly, this application also provides a computer device, which includes a memory and a processor. The memory stores a computer program, and the processor executes the computer program to implement the steps of the page rendering method.

[0054] Fourthly, this application also provides a computer-readable storage medium having a computer program stored thereon, wherein the computer program, when executed by a processor, implements the steps of the page rendering method.

[0055] Fifthly, this application also provides a computer program product, which includes a computer program that, when executed by a processor, implements the steps of the page rendering method.

[0056] The aforementioned page rendering methods, apparatus, computer devices, storage media, and program products decompose the rendering task into multiple independently runnable micro-task units. During rendering, these micro-task units can be directly invoked to render the page data to be rendered. This small-task approach improves rendering efficiency and avoids impacting page rendering. Furthermore, if an interactive task is detected during rendering, and its processing priority is higher than that of the micro-task unit, the micro-task unit is interrupted, and the interactive task is executed. This effectively prevents the micro-task unit from continuously occupying the main thread, thus avoiding main thread blocking. It allows for timely and effective responses to page interactions, preventing rendering-related unresponsiveness and improving user experience. Finally, after completing the interactive task, the micro-task unit is resumed, allowing it to continue rendering the unrendered portion of the page data, preventing rendering unrecoverable issues caused by responding to page interactions. Attached Figure Description

[0057] Figure 1This is an application environment diagram of a page rendering method in one embodiment;

[0058] Figure 2 This is a flowchart illustrating a page rendering method in one embodiment;

[0059] Figure 3 This is a flowchart illustrating how a rendering task is decomposed into microtask units and executed when the browser is idle, as described in one embodiment.

[0060] Figure 4 This is a flowchart illustrating the rendering process under the incremental rendering strategy in one embodiment.

[0061] Figure 5 This is a schematic diagram of the rendering process according to priority in one embodiment;

[0062] Figure 6 This is a schematic diagram of a process in one embodiment that uses background threads in a worker pool to perform parallel rendering by creating a worker pool.

[0063] Figure 7 This is a structural block diagram of a page rendering apparatus in one embodiment;

[0064] Figure 8 This is a structural block diagram of a page rendering apparatus in another embodiment;

[0065] Figure 9 This is an internal structural diagram of a computer device in one embodiment. Detailed Implementation

[0066] To make the objectives, technical solutions, and advantages of this application clearer, the following detailed description is provided in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative and not intended to limit the scope of this application.

[0067] It should be noted that in the following description, the terms "first, second, and third" are used only to distinguish similar objects and do not represent a specific ordering of objects. It is understood that "first, second, and third" may be interchanged in a specific order or sequence where permitted, so that the embodiments of this application described herein can be implemented in an order other than that illustrated or described herein.

[0068] The page rendering method provided in this application embodiment can be applied to, for example, Figure 1 In the application environment shown, terminal 102 communicates with server 104 via a network. A data storage system can store the data that server 104 needs to process. The data storage system can be integrated onto server 104, or it can be located in the cloud or on another network server.

[0069] Terminal 102 can request page data to be rendered from server 104. Server 104 returns the page data to terminal 102. After receiving the page data, terminal 102 calls the micro-task units obtained from the decomposition of the rendering task; the micro-task units render the page data; if an interactive task is detected during the rendering process and the processing priority of the interactive task is higher than the processing priority of the micro-task units, the micro-task units are interrupted and the interactive task is executed; after the interactive task is completed, the micro-task units are resumed so that they can continue to render the unrendered part of the page data.

[0070] Among them, terminal 102 can be a smartphone, tablet, laptop, desktop computer, IoT device and portable wearable device, and IoT device can be a smart speaker, smart TV, smart air conditioner and smart vehicle device, etc.

[0071] Server 104 can be a standalone physical server or a service node in a blockchain system. These service nodes form a peer-to-peer (P2P) network, where the P2P protocol is an application layer protocol running on top of the Transmission Control Protocol (TCP). Furthermore, server 104 can also be a server cluster composed of multiple physical servers, and can be a cloud server providing basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communication, middleware services, domain name services, security services, content delivery networks (CDNs), and big data and artificial intelligence platforms.

[0072] In one embodiment, such as Figure 2 As shown, a page rendering method is provided, which can be generated by... Figure 1 The method is executed by a server or terminal, or by a server and terminal working together. Figure 1 Taking the terminal execution in the example, the following steps are included:

[0073] S202 invokes the micro-task units obtained from the decomposition of the rendering task.

[0074] The rendering task can include tasks that render the entire front-end page, such as rendering one or more areas of the front-end page, or updating and rendering animation frames; in addition, the rendering task can also include some data processing during the rendering process.

[0075] A microtask unit can be an independently executable micro-rendering task decomposed from a rendering task. Each microtask unit can be interrupted when necessary and can be resumed after interruption. In other words, a microtask unit is interruptible and resumable.

[0076] In one embodiment, the terminal may respond to a rendering operation by sending a data acquisition request to the server, receiving the page data to be rendered returned by the server, then decomposing the rendering task of rendering the page data into multiple micro-task units, and then invoking the micro-task units.

[0077] In response to the conditions or states on which the operation being performed depends, one or more operations may be performed in real time or with a set delay when the conditions or states on which they depend are met; unless otherwise specified, there is no restriction on the order in which the multiple operations are performed.

[0078] Page data can be one or more frames of data from the front-end page, and can be static or dynamic page data, or a combination of static and dynamic page data. Examples include at least one of the following: data from various controls on the front-end page, table data, image data, animated elements, or playback content (such as video data or game data). The front-end page can be the interface portion that the user sees and interacts with when interacting with the application, such as a video playback page or a game page.

[0079] In one embodiment, the terminal invokes the microtask units derived from the decomposition of the rendering task when the application's main thread is idle.

[0080] In another embodiment, when the main thread of the application is idle, the terminal executes the target function in the main thread; the target function calls the micro-task units in the task list; the micro-task unit is an interruptible and resumable micro-rendering task obtained by decomposing the rendering task, and the task list contains multiple micro-task units.

[0081] The application can be a browser, a game application, a video application, or other applications.

[0082] The main thread can be a thread created by the program after startup to handle the user interface (UI), such as creating and displaying forms, processing user input, and updating the UI. Rendering tasks and other long-running tasks may occupy the main thread and cause blocking. Therefore, this application decomposes the rendering task into multiple micro-task units, each of which can be interrupted when necessary and can be automatically resumed under certain conditions, thereby avoiding the problem of the main thread being occupied for a long time and causing blocking.

[0083] The target function can be a function that directly or indirectly calls the microtask unit. For example, executing the target function can directly call the microtask unit, or after executing the target function, other intermediate functions can be run through the target function, and the intermediate functions can call the microtask unit.

[0084] In one embodiment, the terminal can first determine whether the task execution duration meets the task execution conditions. If it does, it invokes the micro-task unit obtained from the decomposition of the rendering task. For the first invocation of the micro-task unit for rendering, the task execution duration is 0, thus meeting the task execution conditions.

[0085] The task execution duration can be the cumulative time for executing micro-task units. The task execution condition indicates whether the task execution duration is less than a preset duration threshold. If the task execution duration is less than the duration threshold, rendering of unrendered page data can continue. If the task execution duration is greater than or equal to the duration threshold, it indicates that rendering has not been completed for too long. To avoid latency issues, for some rendering processes with real-time requirements, setting task execution conditions can effectively ensure that the rendering of the current frame does not take too long, thus preventing stuttering.

[0086] S204 renders the page data to be rendered using micro-task units.

[0087] Rendering can be a process from data to image and output, including table rendering, special effects rendering, animation rendering, game scene rendering, game character rendering, and lighting rendering. After rendering, the image is presented more easily. To reflect a sense of space, the rendering program also performs other tasks, such as determining which objects are in the foreground, which are in the background, and which are occluded.

[0088] In one embodiment, when the terminal renders the page data to be rendered through the microtask unit, it can call the Web Graphics Library (WebGL) or the Open Graphics Library for Embedded Systems (OpenGL ES) to render the page data.

[0089] Among them, OpenGL ES is a subset of the OpenGL 3D graphics API, designed for smart electronic devices and AR devices, such as embedded devices like mobile phones, PDAs, and game consoles; WebGL is a 3D graphics standard that allows the integration of an interpreted scripting language (JavaScript) with OpenGL ES 2.0. By adding a JavaScript binding to OpenGL ES 2.0, hardware-accelerated rendering can be provided for the Hypertext Markup Language Version 5 Canvas (HTML5 Canvas), thus enabling smoother display of 2D or 3D scenes in the browser with the help of the system's graphics card.

[0090] In one embodiment, the terminal can first render a portion of the page data to be rendered through a micro-task unit; during the rendering of the portion of the page data, the task execution duration is determined; if the task execution duration meets the task execution conditions, the unrendered page data continues to be rendered through the micro-task unit; in addition, if the task execution duration does not meet the task execution conditions, the execution of the micro-task unit is stopped.

[0091] For example, in a game scenario, the terminal renders the page data of the first frame through micro-task units and records the task execution time (i.e., rendering time) during the rendering process. If the task execution time is greater than or equal to a preset time threshold, the micro-task unit will stop executing, thereby avoiding game lag. If the task execution time is less than the preset time threshold, the micro-task unit will continue to render the page data of the first frame that has not been fully rendered.

[0092] In one embodiment, the page data includes first subpage data; therefore, when rendering the page, the terminal can determine the first subpage data to be rendered in the page data; and render the first subpage data through a microtask unit.

[0093] The first subpage data can be subpage data (i.e., a portion of the page data) within the page data, and there can be one or more first subpage data. In addition to the first subpage data, the page data can also include other subpage data (such as second subpage data).

[0094] Subpage data can be small blocks of page data divided according to type or size. For example, the front-end page can be divided into multiple areas, and the page data corresponding to each area is the subpage data. Alternatively, it can be subpage data obtained by dividing different content in the front-end page. For example, in a game scene, the lighting, background environment, game characters, and game controls that need to be displayed on the game page can be divided to obtain multiple page data. In addition, for complex games (such as AAA games), the background environment, lighting, and game characters can also be further divided.

[0095] In one embodiment, when the terminal receives page data, it can divide the page data into subpage data to obtain multiple subpage data; in addition, the terminal can also set a call identifier for the micro-task unit that renders these subpage data.

[0096] The call identifier can be an identifier used to call a microtask unit. This call identifier corresponds to the task index. When the task index matches the call identifier (e.g., they are the same), the corresponding microtask unit can be found based on the task index and called.

[0097] In one embodiment, after the terminal completes the rendering of the first subpage data, it increments the recorded task index; if the rendering of the entire page data is not completed and the task execution time meets the task execution conditions, it renders the second subpage data to be rendered in the page data according to the microtask unit corresponding to the incremented task index; wherein, the second subpage data is the next subpage data after the first subpage data.

[0098] The task index can be an index of a microtask unit, which can be used to locate the corresponding microtask unit. After locating the corresponding microtask unit, the subpage data to be rendered can be determined, and then the subpage data can be rendered through that microtask unit.

[0099] For example, taking a game scene as an example, the terminal can initialize a task index and call a micro-task unit to render the environmental data of the game environment. After rendering is completed, the task index is incremented, and the micro-task unit for environmental lighting rendering is called according to the incremented index. The micro-task unit then performs lighting rendering on the game environment based on the lighting information of the game environment. Alternatively, the terminal can call a micro-task unit for character lighting rendering according to the incremented index. The micro-task unit then performs lighting rendering on the game character based on the lighting information of the game character.

[0100] For example, continuing with the game scene, the terminal can initialize the task index and call the micro-task unit to render the environmental data of region 1 in the game environment. After rendering is completed, the task index is incremented, and the micro-task unit is called according to the incremented index. The micro-task unit then renders the environmental data of region 2 in the game environment, and so on.

[0101] S206: If an interactive task is detected during the rendering process and the processing priority of the interactive task is higher than that of the microtask unit, then the microtask unit is interrupted and the interactive task is executed.

[0102] Interactive tasks can be tasks generated when users interact with the front-end page. For example, if a user triggers an interactive control on the front-end page, an interactive task corresponding to that interactive control will be generated.

[0103] Processing priority can represent the priority (i.e., priority level) of executing interactive tasks. If the processing priority of a certain task is higher than that of other tasks, that task will be executed first, and then the other tasks will be executed. In addition, even if a low-priority task is currently being executed, when a high-priority task is detected, the low-priority task will be terminated and the high-priority task will be executed first.

[0104] For example, taking the Video Account Store as an example, during the rendering of page data (such as rendering video data in the playback page), if the user clicks on the product details control displayed on the playback page, the micro-task unit is interrupted, the details viewing task is executed, and the user enters the product details page; or, if the user clicks on the playback page to pause playback, the micro-task unit is interrupted, the pause playback task is executed, and the currently playing content on the playback page is paused.

[0105] In one embodiment, if a page switch occurs during the execution of an interactive task, the page data after the switch will be rendered according to the scheme described in the above embodiment.

[0106] S208, after completing the interactive task, restore the microtask unit so that the microtask unit can continue to render the unrendered part of the page data.

[0107] Among them, the recovery microtask unit can be to restore the interrupted microtask unit to the execution state, so that the microtask unit can continue to render the unrendered part of the page data.

[0108] In one embodiment, if a page switch occurs during the execution of an interactive task after the terminal has completed the task, the microtask unit is restored after switching back to the original front-end page so that the microtask unit can continue to render the unrendered portion of the page data. Alternatively, if a page switch occurs during the execution of an interactive task, the microtask unit can be restored directly so that the microtask unit can continue to render the unrendered portion of the page data.

[0109] By breaking down rendering tasks into independently executable microtasks, each of which can be interrupted and resumed as needed, the main thread is avoided from being occupied for extended periods. Using JavaScript as an example, this process is simulated using `requestIdleCallback`, which allows functions to be invoked during the browser's idle periods, thus enabling low-priority tasks to be executed when the main thread is idle.

[0110] The following is a simplified example demonstrating how to divide a rendering task into multiple microtask units and execute these microtask units when the browser is idle, as shown in Table 1 below:

[0111] Table 1

[0112] const tasks = [ / / List of rendering tasks] { id: 1, render: () => { / * rendering logic* / }}, { id: 2, render: () => { / * rendering logic* / }}, / / ...more tasks ]; let currentTaskIndex = 0; / / Index of the current microtask unit, i.e., the task index function workLoop(deadline) { / / Check if there is any time remaining in the current frame, or if execution should stop to allow the browser to handle higher priority tasks. while ((deadline.timeRemaining() > 0 || deadline.didTimeout) && currentTaskIndex < tasks.length) { performTask(tasks[currentTaskIndex]); / / Execute the current microtask unit currentTaskIndex++; / / Move to the next microtask unit } if (currentTaskIndex < tasks.length) { / / If there is still page data that has not been fully rendered, continue to request microtask units during idle time. requestIdleCallback(workLoop); } } function performTask(task) { task.render(); / / Execute microtask units } / / Request the browser to be idle before starting the task. requestIdleCallback(workLoop);

[0113] The tasks array mentioned above contains a series of micro-task units (i.e., micro-rendering tasks), each of which has a render method that contains the actual rendering logic.

[0114] The currentTaskIndex is used to track the task index of the currently executing microtask unit.

[0115] The `workLoop` function is a loop function that is called during the browser's idle time. The `workLoop` function accepts a `deadline` parameter, which provides the `timeRemaining` method to determine how much time remains in the current frame that can be used to execute the task.

[0116] The `performTask` function receives a task object and calls the corresponding `render` method to perform the actual rendering work.

[0117] The requestIdleCallback(workLoop) method requests idle time from the browser to execute the workLoop function. When the browser's main thread is idle, the workLoop function is called, which in turn invokes the microtask unit.

[0118] Combination Figure 3 A brief explanation of the contents of Table 1 above and the corresponding functions is provided below:

[0119] S1, Initialize the task list;

[0120] The task list contains a series of micro-task units, which are derived from the decomposition of traditional rendering tasks. Each micro-task unit is independent and can be interrupted and resumed when necessary, avoiding long-term occupation of the main thread.

[0121] S2, set the current indexing task to 0;

[0122] S3, determine if there is any remaining time, that is, determine whether the task execution time exceeds the specified time threshold;

[0123] S4. If there is remaining time, execute the current microtask unit; if there is no remaining time, end the rendering process.

[0124] The requestIdleCallback method can be used to execute micro-task units when the browser's main thread is idle, thus ensuring that low-priority tasks do not affect the smoothness of user interaction.

[0125] S5, update the task index;

[0126] S6, determine if there are any unfinished microtask units;

[0127] If there are still unfinished microtask units, return to execute S3; if there are no unfinished microtask units, end the rendering process.

[0128] It should be noted that the rendering process in the above embodiments uses incremental rendering measurement, which allows the rendering process to be completed step by step, rather than rendering the entire front-end page at once. This can help improve the performance of large applications. The core idea of ​​the incremental rendering strategy is to decompose the rendering task into small working units (i.e., micro-task units), each of which can be completed independently, thus avoiding blocking the browser's main thread for too long. In this way, even large rendering tasks can be completed step by step over multiple frames. The following is a simplified example demonstrating how to implement the incremental rendering strategy, as shown in Table 2:

[0129] Table 2

[0130] / / Large task list, each task is a rendering function const largeRenderTasks = [ () => { / * Microtask Unit 1 * / }, () => { / * Microtask Unit 2 * / }, / / ...more microtask units ]; let currentTaskIndex = 0; / / Index of the current task function performWork(deadline) { / / Is there any time remaining in the current frame, or should execution be stopped to allow the browser to handle other tasks? while ((deadline.timeRemaining() > 0 || deadline.didTimeout) && currentTaskIndex < largeRenderTasks.length) { largeRenderTasks[currentTaskIndex](); / / Execute the current task currentTaskIndex++; / / Move to the next task if (currentTaskIndex < largeRenderTasks.length) { / / If there are still tasks that have not been completed, continue to request idle time. requestIdleCallback(performWork); } } } / / Request the browser to be idle before starting the task. requestIdleCallback(performWork);

[0131] LargeRenderTasks is an array containing multiple micro-task units, representing a large rendering process that needs to be completed step by step.

[0132] currentTaskIndex is used to track the index of the currently executing task.

[0133] The `performWork` function is a work loop that is called during the browser's idle time. It accepts a `deadline` parameter, which provides the `timeRemaining` method to determine how much time is left in the current frame that can be used to perform the task.

[0134] Inside the `performWork` function, a `while` loop is used to check if there is any remaining time and tasks. If the condition is met, the current microtask unit is executed and the task index is updated.

[0135] If there are more tasks to complete after one task has been completed, requestIdleCallback(performWork) can be called again to schedule the execution of the next microtask unit.

[0136] Finally, use requestIdleCallback(performWork) to start the entire incremental rendering process.

[0137] The incremental rendering strategy proposed in this application can help avoid blocking the main thread due to long rendering times, thereby improving the responsiveness of the application.

[0138] Combination Figure 4 A brief explanation of the contents of Table 2 above and the corresponding functions is provided below:

[0139] S1, initialize a large task list;

[0140] This large task list contains a large number of micro-task units, which are derived from the decomposition of traditional rendering tasks. Each micro-task unit is independent and can be interrupted and resumed when necessary, avoiding long-term occupation of the main thread.

[0141] S2, set the current indexing task to 0;

[0142] S3, determine if there is any remaining time, that is, determine whether the task execution time exceeds the specified time threshold;

[0143] S4. If there is remaining time, execute the current microtask unit; if there is no remaining time, end the rendering process.

[0144] The requestIdleCallback method can be used to execute micro-task units when the browser's main thread is idle, thus ensuring that low-priority tasks do not affect the smoothness of user interaction.

[0145] S5, update the task index;

[0146] S6, determine if there are any unfinished microtask units;

[0147] If there are still unfinished microtask units, return to execute S3; if there are no unfinished microtask units, end the rendering process.

[0148] In one embodiment, the terminal may also invoke a rendering task from the task list to render the page data to be rendered; render the page data through the rendering task; if an interactive task is detected during the rendering process and the processing priority of the interactive task is higher than that of the rendering task, then the rendering task is interrupted and the interactive task is executed; after the interactive task is completed, the rendering task is resumed so that the rendering task can continue to render the unrendered part of the page data.

[0149] In the above embodiments, by decomposing the rendering task into multiple independently runnable micro-task units, the micro-task units obtained from the decomposition of the rendering task can be directly invoked during rendering. These micro-task units then render the page data to be rendered, thus improving rendering efficiency and avoiding impact on page rendering through small tasks. Furthermore, if an interactive task is detected during rendering, and the processing priority of the interactive task is higher than that of the micro-task unit, the micro-task unit is interrupted, and the interactive task is executed. This effectively prevents the micro-task unit from occupying the main thread, thus avoiding main thread blocking. It allows for timely and effective response to page interaction operations, preventing unresponsiveness due to rendering, and improving user experience. Moreover, after the interactive task is completed, the micro-task unit is resumed, allowing it to continue rendering the unrendered portion of the page data, preventing rendering unrecoverable issues caused by responding to page interaction operations.

[0150] In one embodiment, the terminal can execute tasks according to priority scheduling, thereby ensuring that critical tasks (i.e., high-priority tasks) can be executed quickly, while low-priority tasks can be executed when the main thread is idle.

[0151] Specifically, the terminal stores the micro-task units obtained from decomposing the rendering task in the target priority queue; therefore, when making a call, at least one first micro-task unit can be called from the target priority queue; and at least a portion of the page data to be rendered is rendered through the first micro-task unit.

[0152] The target priority queue can be a queue for storing micro-task units used for rendering. The processing priority of this target priority queue is lower than that of the third priority queue. The third priority queue can be a queue for storing interactive tasks used for human-computer interaction, and may also store other tasks with the same priority as the interactive tasks.

[0153] The number of micro-task units obtained from the decomposition of the rendering task can be multiple. These micro-task units are stored in the target priority queue. When page data needs to be rendered, they are called from the target priority queue. Each time, one or more micro-task units can be called.

[0154] In one embodiment, the terminal can dynamically assign priorities to various tasks according to task type, thereby adjusting the execution order of tasks based on task type. After assigning priorities to tasks, tasks of the same type are stored in the same priority queue, such as storing the micro-task units obtained from decomposing the rendering task in the target priority queue.

[0155] In one embodiment, the terminal may also assign priorities to the micro-task units obtained from the decomposition of the rendering task according to the rendering category; and store the micro-task units obtained from the decomposition of the rendering task in a first priority queue and a second priority queue according to the assigned priorities.

[0156] The first priority queue has a higher processing priority than the second priority queue.

[0157] In one embodiment, if the terminal detects an interactive task during the rendering process and the processing priority of the interactive task is higher than the processing priority of the microtask unit, then the interactive task is stored in the third priority queue; the microtask unit is interrupted; the interactive task is read from the third priority queue and executed.

[0158] Among them, the processing priority of the third priority queue is higher than that of the target priority queue.

[0159] If other tasks (such as other interactive tasks or tasks with the same priority as the interactive task) are received during the execution of an interactive task, the other received tasks will continue to be executed after the interactive task is completed.

[0160] In one embodiment, the number of interactive tasks is at least two; therefore, the terminal can read the first interactive task from the third priority queue and execute the first interactive task; if the interactive tasks in the third priority queue have not been completed, the terminal can read the second interactive task from the third priority queue and execute the second interactive task.

[0161] The number of the first interactive task and the number of the second interactive task are positive integers greater than or equal to 1.

[0162] In one embodiment, after the terminal completes the interactive task, it initiates a first call request to the application; when the main thread of the application is idle, at least one microtask unit is resumed based on the first call request, so that at least one microtask unit can continue to render the unrendered portion of the page data.

[0163] In one embodiment, if the terminal has not completed the execution of the microtask unit in the target priority queue, it initiates a second call request to the application; when the main thread of the application is idle, it calls the unexecuted second microtask unit from the target priority queue based on the second call request; and renders the remaining page data through the second microtask unit.

[0164] As an example, in JavaScript, we can extend the example in Table 1 to add a priority scheduling system, assigning a priority to each task and determining the execution order of tasks based on this priority. Here, `requestAnimationFrame` is used to handle high-priority tasks, while `requestIdleCallback` is used to handle low-priority tasks. Below is a simplified example demonstrating how to schedule task execution based on priority, as shown in Table 3:

[0165] Table 3

[0166] const taskQueue = [ / / A list of tasks, each task has a priority and a rendering function.] { id: 1, priority: 'high', render: () => { / * High-priority rendering logic* / }}, { id: 2, priority: 'low', render: () => { / * Low-priority rendering logic* / }}, / / ...more tasks ]; / / Separate the task queue into high-priority and low-priority categories const highPriorityTasks = taskQueue.filter(task => task.priority === 'high'); const lowPriorityTasks = taskQueue.filter(task => task.priority === 'low'); function executeTask(task) { task.render(); / / Executes the task's rendering function. } function runHighPriorityTasks() { while (highPriorityTasks.length > 0) { const task = highPriorityTasks.shift(); / / Retrieve the first high-priority task executeTask(task); } / / Once all high-priority tasks are completed, continue executing low-priority tasks. requestIdleCallback(runLowPriorityTasks); } function runLowPriorityTasks(deadline) { while ((deadline.timeRemaining() > 0 || deadline.didTimeout) && lowPriori-tyTasks.length > 0) { const task = lowPriorityTasks.shift(); / / Retrieve the first low-priority task executeTask(task); } if (lowPriorityTasks.length > 0) { / / If there are still low-priority tasks that haven't been completed, continue requesting idle time. requestIdleCallback(runLowPriorityTasks); } } / / Use requestAnimationFrame to ensure high-priority tasks are executed as quickly as possible. requestAnimationFrame(runHighPriorityTasks);

[0167] The task list, taskQueue, contains all microtask units to be executed. Each microtask unit has a priority property indicating priority and a render method, which contains the actual rendering logic.

[0168] highPriorityTasks and lowPriorityTasks are queues for storing high-priority tasks and low-priority tasks, respectively.

[0169] The executeTask function receives a task object and calls the corresponding render method to perform rendering.

[0170] The `runHighPriorityTasks` function is used to execute high-priority tasks, and `requestAnimationFrame` ensures that these tasks can be executed as soon as possible before the next animation frame.

[0171] The `runLowPriorityTasks` function is used to execute low-priority tasks. It is executed via `requestIdleCallback` when the browser's main thread is idle, and it checks the remaining time of the current frame to decide whether to continue executing the task.

[0172] Finally, use requestAnimationFrame to initiate the execution of the high-priority task.

[0173] Combination Figure 5 A brief explanation of the contents of Table 3 above is provided below:

[0174] S1, Initialize the task list;

[0175] S2, separates high-priority tasks from low-priority tasks (such as microtask units).

[0176] S3 executes high-priority tasks;

[0177] S4 checks whether the high-priority task has been completed; if not, it returns to execute S4.

[0178] S5, if completed, requests the browser to execute a low-priority task when the main thread is idle;

[0179] S6, determine if there is any remaining time, that is, determine if the execution time of the microtask unit exceeds the specified time threshold; if there is no remaining time, end the rendering process;

[0180] S7, if there is remaining time, execute the low-priority task;

[0181] S8, determine if there are any unfinished low-priority tasks;

[0182] If there are still unfinished low-priority tasks, return to execute S7; if there are no unfinished microtask units, end the rendering process.

[0183] In the above embodiments, by setting priorities, different types of tasks are stored in queues with different processing priorities. When executing a task, the task is called from the queue according to the task's priority, which can effectively ensure that high-priority tasks can be executed quickly and improve the user experience.

[0184] In one embodiment, the terminal supports concurrent mode through the rendering mechanism, allowing multiple rendering tasks to be executed in parallel, as well as multiple micro-task units to be executed in parallel without blocking each other, effectively improving the smooth operation of complex applications.

[0185] In one embodiment, the terminal creates a work pool consisting of at least two background threads; assigns each rendering task to a background thread in the work pool; and executes each rendering task through the background threads in the work pool to render the page data.

[0186] The background threads in the worker pool are used to execute various rendering tasks to render the page data. This page data can be page data from different front-end pages, or page data from one front-end page and another from a subpage (such as a pop-up or overlay) of that front-end page.

[0187] If an interactive task is detected during the rendering of page data, and the processing priority of the interactive task is higher than that of the rendering task, the rendering task is interrupted and the interactive task is executed. After the interactive task is completed, the rendering task is resumed so that it can continue to render the unrendered part of the page data.

[0188] In one embodiment, for the allocation of rendering tasks, the terminal can monitor at least two rendering tasks passed by the main thread through the working script; and allocate the monitored rendering tasks to background threads in the worker pool.

[0189] In one embodiment, in addition to executing rendering tasks in parallel, the terminal can also execute micro-task units obtained from the decomposition of rendering tasks in parallel. Specifically, the terminal creates a work pool consisting of at least two background threads; invoking the micro-task units obtained from the decomposition of rendering tasks includes: allocating the micro-task units obtained from the decomposition of rendering tasks to the background threads in the work pool.

[0190] The background threads in the worker pool are used to execute micro-task units to render page data.

[0191] If an interactive task is detected during rendering via a microtask unit, and the processing priority of the interactive task is higher than that of the rendering task, the microtask unit is interrupted and the interactive task is executed. After the interactive task is completed, the microtask unit is resumed so that it can continue to render the unrendered portion of the page data.

[0192] In one embodiment, for the allocation of rendering tasks, the terminal can monitor the micro-task units obtained by decomposing the rendering task from the main thread through the working script; and allocate the monitored micro-task units to background threads in the working pool.

[0193] For example, in JavaScript, due to its single-threaded nature, parallel processing is not possible. This application can simulate parallel processing using WebWorkers, which allow code to run in background threads without blocking the main thread.

[0194] As an example, this demonstrates how to implement concurrent mode support using Web Workers. This example creates a Worker script file, such as renderWorker.js; furthermore, it creates multiple Web Workers, using the Worker script file to assign micro-task units to each Worker, so that each Worker is responsible for executing one micro-task unit. See Table 4 for details.

[0195] Table 4

[0196] / / renderWorker.js self.onmessage = function(e) { const { taskId, renderFunctionString} = e.data; / / Convert a function from string format into an executable function const renderFunction = new Function('return ' + renderFunctionString)(); renderFunction(); / / Execute microtask units / / Send a message to the main thread to indicate that the task is complete. self.postMessage({ taskId, status: 'completed'}); }; / / Code in the main thread / / Large task list, each task is a rendering function const largeRenderTasks = [ () => { / * Microtask Unit 1 * / }, () => { / * Microtask Unit 2 * / }, / / ...more microtask units ]; / / Create a Worker pool const workers = []; const maxWorkers = navigator.hardwareConcurrency || 4; / / The number of Workers is determined by the number of terminal cores. for (let i = 0; i < maxWorkers; i++) { const worker = new Worker('renderWorker.js'); worker.onmessage = function(e) { const { taskId, status} = e.data; console.log(`Task ${taskId} Completion status: ${status}`); / / You can handle the logic after the task is completed here. }; workers.push(worker); } / / Assign tasks to Workers largeRenderTasks.forEach((task, index) => { const worker = workers[index % maxWorkers]; worker.postMessage({ taskId: index, renderFunctionString: task.toString() }); });

[0197] Among them, renderWorker.js is a worker script that monitors messages from the main thread, executes the passed-in rendering function, and sends a message to the main thread after completion to indicate that the task has been completed.

[0198] In the main thread, the largeRenderTasks array is defined first, which contains all the microtask units.

[0199] A Worker pool is created based on the number of CPU cores in the terminal, and each Worker in the Worker pool is an independent background thread.

[0200] Iterate through the `largeRenderTasks` array and assign each microtask unit to a Worker in the Worker pool. The microtask unit is sent to the Worker via the `postMessage` method, including the task index `taskId` and the string representation of the task function `renderFunctionString`.

[0201] After receiving the microtask unit, each worker executes the rendering function and sends a message indicating task completion back to the main thread via postMessage.

[0202] Combination Figure 6 A brief explanation of the contents of Table 4 above and the corresponding functions is provided below:

[0203] S1, Create a Worker pool;

[0204] S2, initialize a large task list;

[0205] S3, assign microtask units to Workers;

[0206] S4, Worker executes microtask units through background threads;

[0207] S5, determine whether the assigned micro-task unit has been completed; if not, return to execute S4;

[0208] S6, if execution is complete, send a completion message to the main thread;

[0209] S7 determines whether the entire rendering task has been completed. If not, it returns to S3.

[0210] In the above embodiments, by creating a work pool, the corresponding tasks are assigned to background threads in the work pool, thereby enabling parallel processing of tasks without mutual blocking, which helps to improve rendering efficiency and ensures smooth display of the front-end page.

[0211] It should be understood that although the steps in the flowcharts of the embodiments described above are shown sequentially according to the arrows, these steps are not necessarily executed in the order indicated by the arrows. Unless explicitly stated herein, there is no strict order restriction on the execution of these steps, and they can be executed in other orders. Moreover, at least some steps in the flowcharts of the embodiments described above may include multiple steps or multiple stages. These steps or stages are not necessarily completed at the same time, but can be executed at different times. The execution order of these steps or stages is not necessarily sequential, but can be performed alternately or in turn with other steps or at least some of the steps or stages of other steps.

[0212] Based on the same inventive concept, this application also provides a page rendering apparatus for implementing the page rendering method described above. The solution provided by this apparatus is similar to the implementation described in the above method; therefore, the specific limitations in one or more page rendering apparatus embodiments provided below can be found in the limitations of the page rendering method described above, and will not be repeated here.

[0213] In one embodiment, such as Figure 7 As shown, a page rendering apparatus is provided, including: a calling module 702, a rendering module 704, an interrupt handling module 706, and a recovery module 708, wherein:

[0214] Module 702 is invoked to invoke the micro-task units obtained from the decomposition of the rendering task;

[0215] Rendering module 704 is used to render the page data to be rendered through micro-task units;

[0216] The interrupt handling module 706 is used to interrupt the microtask unit and execute the interactive task if an interactive task is detected during the rendering process and the processing priority of the interactive task is higher than the processing priority of the microtask unit.

[0217] The recovery module 708 is used to restore the microtask unit after the interactive task has been completed, so that the microtask unit can continue to render the unrendered part of the page data.

[0218] In one embodiment, the calling module 702 is further configured to execute a target function in the main thread when the main thread of the application is idle; and to call a micro-task unit in the task list through the target function; the micro-task unit is an interruptible and resumable micro-rendering task obtained by decomposing the rendering task, and the task list contains multiple micro-task units.

[0219] In one embodiment, the rendering module 704 is further configured to render a portion of the page data to be rendered through a micro-task unit; determine the task execution duration during the rendering of the portion of the page data; and continue to render the unrendered page data through the micro-task unit if the task execution duration meets the task execution conditions.

[0220] The interrupt handling module 706 is also used to stop the execution of the microtask unit when the task execution duration does not meet the task execution conditions.

[0221] In one embodiment, the page data includes first subpage data;

[0222] The rendering module 704 is also used to determine the first subpage data to be rendered in the page data; and to render the first subpage data through microtask units.

[0223] In one embodiment, such as Figure 8 As shown, the device also includes:

[0224] The auto-increment processing module 710 is used to auto-increment the recorded task index after the rendering of the first subpage data is completed.

[0225] The rendering module 704 is also used to render the second subpage data to be rendered in the page data according to the micro-task unit corresponding to the auto-incremented task index when the rendering of the entire page data has not been completed and the task execution time meets the task execution conditions.

[0226] The second subpage data is the subpage data following the first subpage data.

[0227] In the above embodiments, by decomposing the rendering task into multiple independently runnable micro-task units, the micro-task units obtained from the decomposition of the rendering task can be directly invoked during rendering. These micro-task units then render the page data to be rendered, thus improving rendering efficiency and avoiding impact on page rendering through small tasks. Furthermore, if an interactive task is detected during rendering, and the processing priority of the interactive task is higher than that of the micro-task unit, the micro-task unit is interrupted, and the interactive task is executed. This effectively prevents the micro-task unit from occupying the main thread, thus avoiding main thread blocking. It allows for timely and effective response to page interaction operations, preventing unresponsiveness due to rendering, and improving user experience. Moreover, after the interactive task is completed, the micro-task unit is resumed, allowing it to continue rendering the unrendered portion of the page data, preventing rendering unrecoverable issues caused by responding to page interaction operations.

[0228] In one embodiment, such as Figure 8 As shown, the device also includes:

[0229] Storage module 712 is used to store the micro-task units obtained from the decomposition of the rendering task in the target priority queue.

[0230] Module 702 is also used to invoke at least one first microtask unit from the target priority queue;

[0231] The rendering module 704 is also used to render at least a portion of the page data to be rendered through the first microtask unit.

[0232] In one embodiment, the storage module 712 is further configured to assign priorities to the micro-task units obtained from the decomposition of the rendering task according to the rendering category; and to store the micro-task units obtained from the decomposition of the rendering task in a first priority queue and a second priority queue according to the assigned priorities.

[0233] The first priority queue has a higher processing priority than the second priority queue.

[0234] In one embodiment, the interrupt handling module 706 is further configured to: if an interactive task is detected during rendering and the processing priority of the interactive task is higher than the processing priority of the microtask unit, store the interactive task in a third priority queue; the processing priority of the third priority queue is higher than the processing priority of the target priority queue; interrupt the microtask unit; read the interactive task from the third priority queue and execute the interactive task.

[0235] In one embodiment, the number of interactive tasks is at least two;

[0236] The interrupt handling module 706 is also used to read the first interactive task from the third priority queue and execute the first interactive task; if the interactive task in the third priority queue has not been completed, it reads the second interactive task from the third priority queue and executes the second interactive task.

[0237] The number of the first interactive task and the number of the second interactive task are positive integers greater than or equal to 1.

[0238] In one embodiment, the recovery module 708 is further configured to initiate a first call request to the application after the interactive task has been completed; and to restore at least one microtask unit based on the first call request when the main thread of the application is in an idle state, so that at least one microtask unit can continue to render the unrendered portion of the page data.

[0239] In one embodiment, such as Figure 8 As shown, the device also includes:

[0240] Initiation module 714 is used to initiate a second call request to the application if the microtask unit in the target priority queue has not been completed;

[0241] Module 702 is also used to invoke an unexecuted second microtask unit from the target priority queue based on a second invocation request when the main thread of the application is idle.

[0242] Rendering module 704 is also used to render the remaining page data through the second microtask unit.

[0243] In the above embodiments, by setting priorities, different types of tasks are stored in queues with different processing priorities. When executing a task, the task is called from the queue according to the task's priority, which can effectively ensure that high-priority tasks can be executed quickly and improve the user experience.

[0244] In one embodiment, such as Figure 8 As shown, the device also includes:

[0245] Create module 715 to create a worker pool consisting of at least two background threads;

[0246] Module 702 is also used to assign each rendering task to a background thread in the worker pool.

[0247] Rendering module 704 is used to execute various rendering tasks through background threads in the worker pool to render page data.

[0248] In one embodiment, the calling module 702 is further configured to monitor at least two rendering tasks passed by the main thread via a work script; and to allocate the monitored micro-task units to background threads in the work pool.

[0249] In one embodiment, such as Figure 8 As shown, the device also includes:

[0250] Create module 718 to create a worker pool consisting of at least two background threads;

[0251] Module 702 is also used to allocate the microtask units obtained from the decomposition of the rendering task to background threads in the worker pool.

[0252] The background threads in the worker pool are used to execute micro-task units to render page data.

[0253] In one embodiment, the calling module 702 is further configured to monitor the micro-task units obtained from the decomposition of the rendering task passed by the main thread through the working script; and to allocate the monitored micro-task units to background threads in the working pool.

[0254] In one embodiment, the calling module 702 is further configured to call a rendering task from the task list for rendering the page data to be rendered;

[0255] The rendering module 704 is further configured to render the page data through the rendering task;

[0256] The interrupt handling module 706 is further configured to interrupt the rendering task and execute the interactive task if the interactive task is detected during the rendering process and the processing priority of the interactive task is higher than the processing priority of the rendering task.

[0257] The recovery module 708 is further configured to restore the rendering task after the interactive task has been completed, so that the rendering task can continue to render the unrendered portion of the page data.

[0258] In the above embodiments, by creating a work pool, the corresponding tasks are assigned to background threads in the work pool, thereby enabling parallel processing of tasks without mutual blocking, which helps to improve rendering efficiency and ensures smooth display of the front-end page.

[0259] Each module in the aforementioned page rendering device can be implemented entirely or partially through software, hardware, or a combination thereof. These modules can be embedded in or independent of the processor in a computer device, or stored in the memory of a computer device as software, so that the processor can call and execute the operations corresponding to each module.

[0260] In one embodiment, a computer device, which may be a server, is provided, including a processor, memory, input / output (I / O) interfaces, and a communication interface. The processor, memory, and I / O interfaces are connected via a system bus, and the communication interface is connected to the system bus via the I / O interfaces. The processor of the computer device provides computing and control capabilities. The memory of the computer device includes non-volatile storage media and internal memory. The non-volatile storage media stores an operating system, computer programs, and a database. The internal memory provides an environment for the operation of the operating system and computer programs in the non-volatile storage media. The database of the computer device stores page data. The I / O interfaces of the computer device are used for exchanging information between the processor and external devices. The communication interface of the computer device is used for communicating with external terminals via a network connection. When the computer program is executed by the processor, it implements a page rendering method.

[0261] In one embodiment, a computer device is provided, which may be a terminal, and its internal structure diagram may be as follows: Figure 9 As shown, the computer device includes a processor, memory, input / output interfaces, a communication interface, a display unit, and an input device. The processor, memory, and input / output interfaces are connected via a system bus, and the communication interface, display unit, and input device are also connected to the system bus via the input / output interfaces. The processor provides computing and control capabilities. The memory includes non-volatile storage media and internal memory. The non-volatile storage media stores the operating system and computer programs. The internal memory provides an environment for the operation of the operating system and computer programs stored in the non-volatile storage media. The input / output interfaces are used for exchanging information between the processor and external devices. The communication interface is used for wired or wireless communication with external terminals; wireless communication can be achieved through Wi-Fi, mobile cellular networks, NFC (Near Field Communication), or other technologies. When the computer program is executed by the processor, it implements a page rendering method. The display unit of the computer device is used to form a visually visible image. It can be a display screen, a projection device, or a virtual reality imaging device. The display screen can be an LCD screen or an e-ink screen. The input device of the computer device can be a touch layer covering the display screen, or buttons, trackballs, or touchpads set on the casing of the computer device, or external keyboards, touchpads, or mice, etc.

[0262] Those skilled in the art will understand that Figure 9The structure shown is merely a block diagram of a portion of the structure related to the present application and does not constitute a limitation on the computer device to which the present application is applied. Specific computer devices may include more or fewer components than those shown in the figure, or combine certain components, or have different component arrangements.

[0263] In one embodiment, a computer device is provided, including a memory and a processor, wherein the memory stores a computer program, and the processor executes the computer program to implement the steps of the page rendering method described above.

[0264] In one embodiment, a computer-readable storage medium is provided having a computer program stored thereon, which, when executed by a processor, implements the steps of the page rendering method described above.

[0265] In one embodiment, a computer program product is provided, including a computer program that, when executed by a processor, implements the steps of the page rendering method described above.

[0266] It should be noted that the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for analysis, data stored, data displayed, etc.) involved in this application are all information and data authorized by the user or fully authorized by all parties, and the collection, use and processing of related data must comply with the relevant laws, regulations and standards of the relevant countries and regions.

[0267] Those skilled in the art will understand that all or part of the processes in the above embodiments can be implemented by a computer program instructing related hardware. The computer program can be stored in a non-volatile computer-readable storage medium. When executed, the computer program can include the processes of the embodiments described above. Any references to memory, databases, or other media used in the embodiments provided in this application can include at least one of non-volatile and volatile memory. Non-volatile memory can include read-only memory (ROM), magnetic tape, floppy disk, flash memory, optical memory, high-density embedded non-volatile memory, resistive random access memory (ReRAM), magnetic random access memory (MRAM), ferroelectric random access memory (FRAM), phase change memory (PCM), graphene memory, etc. Volatile memory can include random access memory (RAM) or external cache memory, etc. By way of illustration and not limitation, RAM can take many forms, such as Static Random Access Memory (SRAM) or Dynamic Random Access Memory (DRAM). The databases involved in the embodiments provided in this application may include at least one type of relational database and non-relational database. Non-relational databases may include, but are not limited to, blockchain-based distributed databases. The processors involved in the embodiments provided in this application may be general-purpose processors, central processing units, graphics processing units, digital signal processors, programmable logic devices, quantum computing-based data processing logic devices, etc., and are not limited to these.

[0268] The technical features of the above embodiments can be combined in any way. For the sake of brevity, not all possible combinations of the technical features in the above embodiments are described. However, as long as there is no contradiction in the combination of these technical features, they should be considered to be within the scope of this specification.

[0269] The embodiments described above are merely illustrative of several implementation methods of this application, and while the descriptions are specific and detailed, they should not be construed as limiting the scope of this patent application. It should be noted that those skilled in the art can make various modifications and improvements without departing from the concept of this application, and these all fall within the protection scope of this application. Therefore, the protection scope of this application should be determined by the appended claims.

Claims

1. A page rendering method, characterized in that, The method includes: Call the micro-task units obtained from the decomposition of the rendering task; The page data to be rendered is rendered through the micro-task unit; If an interactive task is detected during the rendering process, and the processing priority of the interactive task is higher than the processing priority of the microtask unit, then the microtask unit is interrupted and the interactive task is executed. After the interactive task is completed, the microtask unit is restored so that it can continue to render the unrendered portion of the page data.

2. The method according to claim 1, characterized in that, The invocation of the micro-task units obtained from the decomposition of the rendering task includes: The target function is executed in the main thread of the application when the main thread is idle. The target function calls the micro-task units in the task list; the micro-task unit is an interruptible and resumable micro-rendering task obtained by decomposing the rendering task, and the task list contains multiple micro-task units.

3. The method according to claim 2, characterized in that, The rendering of the page data to be rendered through the micro-task unit includes: The microtask unit is used to render a portion of the page data to be rendered. During the rendering of the aforementioned portion of the page data, the task execution duration is determined; If the task execution time meets the task execution conditions, the unrendered page data continues to be rendered through the micro-task unit; The method further includes: stopping the execution of the microtask unit when the task execution duration does not meet the task execution conditions.

4. The method according to claim 3, characterized in that, The page data includes the first subpage data; The rendering of the portion of page data to be rendered through the micro-task unit includes: Determine the first subpage data to be rendered from the page data; The first subpage data is rendered through the micro-task unit.

5. The method according to claim 4, characterized in that, The method further includes: After rendering the data of the first subpage is completed, the recorded task index is incremented. The step of continuing to render the unrendered page data through the micro-task unit when the task execution duration meets the task execution conditions includes: If the rendering of the entire page data is not completed and the task execution time meets the task execution conditions, the second subpage data to be rendered in the page data is rendered according to the micro-task unit corresponding to the auto-incremented task index. The second subpage data is the next subpage data after the first subpage data.

6. The method according to claim 1, characterized in that, The method further includes: The micro-task units obtained from decomposing the rendering task are stored in the target priority queue. The invocation of the micro-task units obtained from the decomposition of the rendering task includes: Invoke at least one first microtask unit from the target priority queue; The rendering of the page data to be rendered through the micro-task unit includes: The first microtask unit renders at least a portion of the page data to be rendered.

7. The method according to claim 6, characterized in that, The step of storing the micro-task units obtained from decomposing the rendering task in the target priority queue includes: The micro-task units obtained from decomposing the rendering task are assigned priority according to the rendering category; According to the assigned priority, the micro-task units obtained by decomposing the rendering task are stored in the first priority queue and the second priority queue respectively. The processing priority of the first priority queue is higher than that of the second priority queue.

8. The method according to claim 6, characterized in that, If an interactive task is detected during rendering, and the processing priority of the interactive task is higher than the processing priority of the microtask unit, then the microtask unit is interrupted and the interactive task is executed, including: If an interactive task is detected during the rendering process, and the processing priority of the interactive task is higher than the processing priority of the microtask unit, then the interactive task is stored in the third priority queue; the processing priority of the third priority queue is higher than the processing priority of the target priority queue. The microtask unit is interrupted; Read the interactive task from the third priority queue and execute the interactive task.

9. The method according to claim 8, characterized in that, The number of interactive tasks is at least two; the step of reading the interactive task from the third priority queue and executing the interactive task includes: Read the first interactive task from the third priority queue and execute the first interactive task; If the interactive task in the third priority queue has not been completed, a second interactive task is read from the third priority queue and executed. The number of the first interactive tasks and the number of the second interactive tasks are positive integers greater than or equal to 1.

10. The method according to claim 6, characterized in that, Upon completion of the interactive task, the microtask unit is restored to allow it to continue rendering the unrendered portion of the page data, including: Upon completion of the interactive task, a first invocation request is sent to the application. When the main thread of the application is idle, at least one microtask unit is resumed based on the first call request, so that the at least one microtask unit continues to render the unrendered portion of the page data.

11. The method according to claim 10, characterized in that, The method further includes: If the microtask unit in the target priority queue has not been completed, a second call request is initiated to the application. When the main thread of the application is idle, an unexecuted second microtask unit is invoked from the target priority queue based on the second invocation request; The remaining page data is rendered by the second microtask unit.

12. The method according to any one of claims 1 to 11, characterized in that, The number of rendering tasks is at least two, and the method further includes: Create a worker pool consisting of at least two background threads; Each of the rendering tasks is assigned to a background thread in the worker pool; The rendering tasks are executed by background threads in the worker pool to render the page data.

13. The method according to claim 12, characterized in that, The step of assigning each of the rendering tasks to a background thread in the worker pool includes: Monitor at least two of the aforementioned rendering tasks passed by the main thread using a working script; The detected microtask units are assigned to background threads in the work pool.

14. The method according to any one of claims 1 to 11, characterized in that, The method further includes: Create a worker pool consisting of at least two background threads; The invocation of the micro-task units obtained from the decomposition of the rendering task includes: The micro-task units obtained from decomposing the rendering task are assigned to background threads in the work pool. The background thread in the work pool is used to execute the micro-task unit to render the page data.

15. A page rendering apparatus, characterized in that, The device includes: The calling module is used to invoke the micro-task units obtained from the decomposition of the rendering task; The rendering module is used to render the page data to be rendered through the micro-task unit; An interrupt handling module is used to interrupt the microtask unit and execute the interactive task if an interactive task is detected during the rendering process and the processing priority of the interactive task is higher than the processing priority of the microtask unit. The recovery module is used to restore the microtask unit after the interactive task has been completed, so that the microtask unit can continue to render the unrendered part of the page data.

16. A computer device comprising a memory and a processor, wherein the memory stores a computer program, characterized in that, When the processor executes the computer program, it implements the steps of the method according to any one of claims 1 to 14.

17. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by a processor, it implements the steps of the method according to any one of claims 1 to 14.

18. A computer program product, comprising a computer program, characterized in that, When the computer program is executed by a processor, it implements the steps of the method according to any one of claims 1 to 14.

Images