Page rendering method and device, electronic equipment and storage medium
Patent Information
- Application Number
- CN202611092474.2
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2026-07-22
- Publication Date
- 2026-10-27
AI Technical Summary
在数据到达时，若同时触发所有组件的完整渲染流程，将导致浏览器主线程长时间处于阻塞状态，引发页面卡顿、丢帧、用户交互无响应等问题，严重影响页面渲染的性能
[0019]根据本申请的页面渲染装置，通过确定待渲染的目标页面组件的渲染优先级，并在目标页面组件的渲染优先级为第一优先级的情况下，将目标页面组件的渲染任务写入过渡任务队列，根据过渡任务队列执行队列中各页面组件的渲染任务，并采用可中断异步渲染模式，在完成目标页面组件的第一子任务后，通过浏览器层空闲检测机制，将目标页面组件的第二子任务延迟至页面渲染主线程的剩余空闲时间大于或等于空闲时间阈值时执行，能够降低主线程的阻塞时间，从而提高页面渲染的性能。
Smart Images
Figure CN122985334A_ABST
Abstract
Description
Technical Field
[0001] This application belongs to the field of computer technology, and in particular relates to a page rendering method, apparatus, electronic device and storage medium. Background Technology
[0002] When components such as charts and cards on a browser page trigger data updates, the browser needs to complete multiple rendering nodes in sequence, from updating the data to the completion of page rendering, including component state updates, page DOM (Document Object Model Update) updates, page reflow and repaint.
[0003] In complex data visualization dashboards, pages typically contain numerous components. When data arrives, if the complete rendering process of all components is triggered simultaneously, the browser's main thread will be blocked for an extended period, causing page stuttering, frame drops, and unresponsive user interactions, severely impacting page rendering performance. Summary of the Invention
[0004] This application aims to at least address one of the technical problems existing in the prior art. To this end, this application proposes a page rendering method, apparatus, electronic device, and storage medium to improve page rendering performance.
[0005] Firstly, this application provides a page rendering method, including: In response to a page data update event, the target page component to be rendered, the rendering priority of the target page component, and the rendering task of the target page component are determined; the rendering task includes a first subtask and a second subtask, wherein the execution priority of the first subtask is higher than the execution priority of the second subtask; If the rendering priority of the target page component is the first priority, the rendering task of the target page component is written into the transition task queue; the transition task queue includes rendering tasks of multiple page components. According to the transition task queue, the rendering tasks of each page component are executed; After completing the first subtask of the target page component, the first remaining idle time of the main rendering thread of the page is obtained. If the first remaining idle time is greater than or equal to the first idle time threshold, the second subtask of the target page component is executed. If the first remaining idle time is less than the first idle time threshold, the process waits until the main rendering thread of the page enters the next idle cycle, then obtains the second remaining idle time of the main rendering thread of the page. If the second remaining idle time is greater than or equal to the first idle time threshold, the second subtask of the target page component is executed.
[0006] The page rendering method provided in this application determines the rendering priority of the target page component to be rendered. When the rendering priority of the target page component is the first priority, the rendering task of the target page component is written into the transition task queue. The rendering tasks of each page component in the queue are executed according to the transition task queue. The interruptible asynchronous rendering mode is adopted. After the first sub-task of the target page component is completed, the second sub-task of the target page component is delayed until the remaining idle time of the page rendering main thread is greater than or equal to the idle time threshold through the browser layer idle detection mechanism. This can reduce the blocking time of the main thread and thus improve the performance of page rendering.
[0007] According to one embodiment of this application, the method further includes: Obtain the second subtask of the target page component, and calculate the waiting time starting from the completion of the first subtask of the target page component; If the waiting time is greater than or equal to the waiting time threshold, the second subtask of the target page component is executed.
[0008] In this embodiment, by setting a timeout fallback mechanism, the second subtask is forcibly executed when the waiting time is greater than or equal to the waiting time threshold, which can reduce the situation where component content is not displayed for a long time under continuous high load scenarios.
[0009] According to one embodiment of this application, executing the rendering tasks of each page component according to the transition task queue includes: In response to a target event, the execution of rendering tasks in the transition task queue is paused, and the rendering task corresponding to the target event is executed; the execution priority of the rendering task corresponding to the target event is higher than the execution priority of the rendering tasks in the transition task queue. After completing the rendering task corresponding to the target event, continue executing the rendering tasks in the transition task queue.
[0010] In this embodiment, by pausing the execution of rendering tasks in the transition task queue when there are rendering tasks with higher execution priority, and prioritizing the execution of the rendering task corresponding to the target event, the response speed to high-priority events can be improved.
[0011] According to one embodiment of this application, the method further includes: When the rendering priority of the target page component is the second priority, the rendering task of the target page component is executed; the second priority is higher than the first priority.
[0012] In this embodiment, by immediately executing all rendering tasks for components with higher rendering priority, the rendering latency of high-priority components can be reduced.
[0013] According to one embodiment of this application, the method further includes: If the rendering priority of the target page component is the third priority, obtain the third remaining idle time of the main rendering thread of the page; the third priority is lower than the first priority. If the third remaining idle time is greater than or equal to the second idle time threshold, the rendering task of the target page component is executed.
[0014] In this embodiment, by completely delaying the rendering tasks of components with lower rendering priority to be executed during the idle time period of the main thread, the blocking of the main thread by the rendering tasks of low rendering priority components can be reduced.
[0015] According to one embodiment of this application, determining the rendering priority of the target page component includes: Obtain the priority tag of the target page component; if the priority tag of the target page component is obtained, determine the rendering priority of the target page component based on the priority tag of the target page component. If the priority tag of the target page component is not obtained, determine the parent component corresponding to the target page component; The rendering priority of the parent component is determined, and the rendering priority of the target page component is set as the rendering priority of the parent component.
[0016] In this embodiment, by determining the rendering priority of the target page component as the rendering priority of its corresponding parent component when the priority tag of the target page component is not obtained, the child component can automatically inherit the rendering strategy of the parent component without having to repeatedly declare the priority tag in each child component.
[0017] According to one embodiment of this application, the first subtask includes at least one of component state update, component style calculation, and page layout update; The second subtask includes at least one of the following: third-party library calls and component rendering.
[0018] Secondly, this application provides a page rendering apparatus, comprising: The determination module is used to determine the target page component to be rendered, the rendering priority of the target page component, and the rendering task of the target page component in response to the data update event of the page; the rendering task includes a first subtask and a second subtask, wherein the execution priority of the first subtask is higher than the execution priority of the second subtask; The writing module is used to write the rendering task of the target page component into the transition task queue when the rendering priority of the target page component is the first priority; the transition task queue includes rendering tasks of multiple page components. The first execution module is used to execute the rendering tasks of each page component according to the transition task queue; The second execution module is used to complete the first subtask of the target page component, obtain the first remaining idle time of the main rendering thread of the page, and execute the second subtask of the target page component if the first remaining idle time is greater than or equal to the first idle time threshold.
[0019] According to the page rendering apparatus of this application, by determining the rendering priority of the target page component to be rendered, and when the rendering priority of the target page component is the first priority, the rendering task of the target page component is written into the transition task queue. The rendering tasks of each page component in the queue are executed according to the transition task queue. An interruptible asynchronous rendering mode is adopted. After the first sub-task of the target page component is completed, the second sub-task of the target page component is delayed until the remaining idle time of the page rendering main thread is greater than or equal to the idle time threshold through the browser layer idle detection mechanism. This can reduce the blocking time of the main thread and thus improve the performance of page rendering.
[0020] Thirdly, this application provides an electronic device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the computer program to implement the page rendering method as described in the first aspect above.
[0021] Fourthly, this application provides a non-transitory computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the page rendering method as described in the first aspect above.
[0022] Fifthly, this application provides a chip including a processor and a communication interface, the communication interface being coupled to the processor, the processor being used to run programs or instructions to implement the page rendering method as described in the first aspect above.
[0023] Sixthly, this application provides a computer program product, including a computer program that, when executed by a processor, implements the page rendering method as described in the first aspect above.
[0024] The above-described one or more technical solutions in the embodiments of this application have at least one of the following technical effects: According to the page rendering method of this application, by determining the rendering priority of the target page component to be rendered, and when the rendering priority of the target page component is the first priority, the rendering task of the target page component is written into the transition task queue. The rendering tasks of each page component in the queue are executed according to the transition task queue. An interruptible asynchronous rendering mode is adopted. After the first sub-task of the target page component is completed, the second sub-task of the target page component is delayed until the remaining idle time of the main thread of page rendering is greater than or equal to the idle time threshold through the browser layer idle detection mechanism. This can reduce the blocking time of the main thread and thus improve the performance of page rendering.
[0025] In some embodiments, by setting a timeout fallback mechanism, the second subtask can be forcibly executed if the waiting time is greater than or equal to the waiting time threshold, which can reduce the situation where component content is not displayed for a long time under continuous high load scenarios.
[0026] In some embodiments, by pausing the execution of rendering tasks in the transition task queue when there are rendering tasks with higher execution priority, and prioritizing the execution of the rendering task corresponding to the target event, the response speed to high-priority events can be improved.
[0027] In some embodiments, by immediately executing all rendering tasks for components with higher rendering priority, the rendering latency of high-priority components can be reduced.
[0028] In some embodiments, by completely deferring the rendering tasks of components with lower rendering priority to the idle time period of the main thread, it is possible to reduce the blocking of the main thread by the rendering tasks of components with lower rendering priority.
[0029] In some embodiments, by determining the rendering priority of the target page component as the rendering priority of its corresponding parent component when the priority tag of the target page component is not obtained, the child component can automatically inherit the rendering strategy of the parent component without having to repeatedly declare the priority tag in each child component.
[0030] Additional aspects and advantages of this application will be set forth in part in the description which follows, and in part will be obvious from the description, or may be learned by practice of this application. Attached Figure Description
[0031] To more clearly illustrate the technical solutions of the embodiments of this application, the accompanying drawings used in the embodiments will be briefly introduced below. It should be understood that the following drawings only show some embodiments of this application and should not be regarded as a limitation of the scope. For those skilled in the art, other related drawings can be obtained based on these drawings without creative effort.
[0032] Figure 1 This is a flowchart illustrating the page rendering method provided in an embodiment of this application; Figure 2 This is a schematic diagram of the structure of the page rendering apparatus provided in the embodiments of this application; Figure 3 This is a schematic diagram of the structure of the electronic device provided in the embodiments of this application. Detailed Implementation
[0033] The technical solutions of the embodiments of this application will be clearly described below with reference to the accompanying drawings. Obviously, the described embodiments are only some, not all, of the embodiments of this application. All other embodiments that can be directly obtained based on the embodiments of this application are within the scope of protection of this application.
[0034] The terms "first," "second," etc., used in the specification and claims of this application are used to distinguish similar objects and not to describe a specific order or sequence. It should be understood that such use of data can be interchanged where appropriate so that embodiments of this application can be implemented in orders other than those illustrated or described herein, and the objects distinguished by "first," "second," etc., are generally of the same class and the number of objects is not limited; for example, a first object can be one or more. Furthermore, in the specification and claims, "and / or" indicates at least one of the connected objects, and the character " / " generally indicates that the preceding and following objects are in an "or" relationship.
[0035] The page rendering method, apparatus, electronic device, and storage medium provided in this application will be described in detail below with reference to the accompanying drawings and through specific embodiments and application scenarios.
[0036] The page rendering method can be applied to the terminal, and can be executed by the hardware or software in the terminal.
[0037] The terminal includes, but is not limited to, portable communication devices such as mobile phones or tablets with touch-sensitive surfaces (e.g., touchscreen displays and / or touchpads). It should also be understood that, in some embodiments, the terminal may not be a portable communication device, but rather a desktop computer with touch-sensitive surfaces (e.g., touchscreen displays and / or touchpads).
[0038] The following embodiments describe a terminal including a display and a touch-sensitive surface. However, it should be understood that the terminal may include one or more other physical user interface devices such as a physical keyboard, mouse, and joystick.
[0039] The page rendering method provided in this application embodiment can be executed by an electronic device or a functional module or entity in an electronic device that can implement the page rendering method. The electronic devices mentioned in this application embodiment include, but are not limited to, mobile phones, tablets, computers, etc. The page rendering method provided in this application embodiment is described below using an electronic device as the execution subject.
[0040] like Figure 1 As shown, the page rendering method includes steps 110, 120, 130, and 140.
[0041] Step 110: In response to the page's data update event, determine the target page component to be rendered, the rendering priority of the target page component, and the rendering task of the target page component; the rendering task includes a first subtask and a second subtask, with the execution priority of the first subtask being higher than that of the second subtask.
[0042] Page components are the functional units that make up a browser's front-end page, including cards, pop-ups, charts, navigation bars, etc. When a page component in the browser triggers a data update, the updated data needs to be rendered into a visual page. This involves calculating the pixel data visible to the user based on code data in formats such as HTML (Hypertext Markup Language), CSS (Cascading Style Sheets), and JavaScript. From updating data to completing page rendering, the browser needs to sequentially complete multiple rendering nodes, including component state updates, DOM (Document Object Model) updates, page reflow, and repainting.
[0043] In complex data visualization dashboards, pages typically contain numerous components, such as bar charts, statistical cards, data tables, and force-directed graphs. When data arrives, if the complete rendering process of all page components is triggered simultaneously, the browser's main thread will be blocked for an extended period, causing page stuttering, frame drops, and unresponsive user interactions, severely impacting page rendering performance.
[0044] In this embodiment of the application, when a data update event is triggered on the page, the target page component to be rendered, the rendering priority of the target page component, and the rendering task of the target page component are first determined.
[0045] The data update event can be triggered by a timer, or by the backend pushing updated data, or by the user clicking the "refresh" button on the page, etc. This application embodiment does not limit this.
[0046] A data update request can carry the target page component to be rendered and the update data corresponding to the target page component, so the target page component can be directly parsed from the data update request; a data update request can also contain only the update data corresponding to the entire page, so the target page component to be rendered can be determined based on the data items contained in the update data and the data items corresponding to each component; of course, the target page component can also be determined by other methods, and this application embodiment does not limit this.
[0047] After determining the target page component to be rendered, determine the rendering priority and rendering task of the target page component.
[0048] Rendering priority represents the priority at which a page component is rendered. A higher rendering priority indicates that the rendering task of that component is more likely to be executed first. For example, in some embodiments, there are three preset rendering priorities: "urgent," "delayable," and "background," in the order of "urgent > delayable > background." When three rendering tasks corresponding to "urgent," "delayable," and "background" are received simultaneously, the rendering task with the "urgent" priority will be executed first, and the rendering task with the "background" priority will be executed last.
[0049] Priority attributes can be pre-declared for each page component using custom higher-order components or hooks. Once the target page component is determined, its rendering priority can be obtained by reading its priority attribute value. Of course, other methods can also be used to determine the rendering priority of each page component, such as determining the rendering priority based on the page component's type or data update frequency. This application does not limit the specific methods used in this embodiment.
[0050] A rendering task refers to the computational task required to render a page component. It can include a series of rendering nodes, such as component state updates, component style calculations, page layout updates, third-party library calls, and component drawing. In this embodiment, the rendering task of the target page component includes a first subtask and a second subtask, with the first subtask having a higher execution priority than the second subtask. Each subtask can contain one or more rendering nodes; the execution priority indicates the degree to which the rendering task is executed, with a higher priority indicating that the rendering task is executed more frequently.
[0051] The content of the first and second subtasks can be determined based on the position of each rendering node in the entire rendering task process, the expected computation time, and the logical dependencies between each rendering task node.
[0052] For example, if "component drawing" is located after component state update, component style calculation, and page layout update in the entire rendering task process, and its execution depends on the completion of component state update, component style calculation, and page layout update, then component state update, component style calculation, and page layout update can be assigned to the first subtask, and component drawing can be assigned to the second subtask. The execution process of "third-party library call" cannot be interrupted by the scheduler and occupies a long time of the main thread, so it can be assigned to the second subtask.
[0053] Of course, the first and second subtasks may also include other types of rendering nodes or other computing tasks; in addition to the first and second subtasks, the rendering task may also include other subtasks, which are not limited in this embodiment.
[0054] Step 120: If the rendering priority of the target page component is the first priority, write the rendering task of the target page component into the transition task queue; the transition task queue includes rendering tasks of multiple page components.
[0055] In this embodiment, the path for executing the rendering task of the target page component is determined based on the rendering priority of the target page component, so as to reduce the situation where page components with lower rendering priority compete for main thread resources with page components with higher rendering priority.
[0056] In this embodiment, when the rendering priority of the target page component is first priority, the rendering task of the target page component is written into the transition task queue. The transition task queue includes rendering tasks for multiple page components; in some embodiments, the transition task queue may be empty or contain only the rendering task for one page component.
[0057] The rendering task of the target page component can be written to the tail of the transition task queue; or the first priority can be divided into sub-priorities, and the position of the rendering task of the target page component in the transition task queue can be determined based on the sub-priority of the target page component; of course, the position of the rendering task of the target page component in the transition task queue can also be determined by other methods, such as determining the position according to the expected execution time of the rendering task, etc., and the embodiments of this application do not limit this.
[0058] Step 130: Execute the rendering tasks for each page component according to the transition task queue.
[0059] In this embodiment, the rendering tasks of each page component can be executed sequentially according to their position in the transition task queue. After a rendering task is completed, the completed rendering task is removed from the transition task queue, and then the rendering task at the head of the transition task queue is executed, and so on.
[0060] In some embodiments, rendering tasks for each page component are executed according to the transition task queue, including: In response to the target event, the execution of rendering tasks in the transition task queue is paused, and the rendering task corresponding to the target event is executed; the execution priority of the rendering task corresponding to the target event is higher than the execution priority of the rendering tasks in the transition task queue. After completing the rendering task corresponding to the target event, continue executing the rendering tasks in the transition task queue.
[0061] In this embodiment, the execution of rendering tasks in the transition task queue can be interrupted by rendering tasks with higher execution priority. The target event refers to an event that triggers a high-priority rendering task, such as user input clicks, drags, keyboard input, or the arrival of an animation frame.
[0062] The Interruptible Rendering feature introduced in React 18 can be used to split each rendering task in the transition task queue into one or more time slices of 5ms each. After each time slice is completed, check if there is a rendering task corresponding to the target event. If so, pause the currently executing rendering task, process the newly arrived task, and continue executing the paused rendering task after completing the newly arrived task.
[0063] As a result, the waiting time required for high-priority tasks such as user interaction event response and animation frame rendering can be shortened to the length of a single time slice, i.e., 5ms, significantly reducing the perceived lag for users.
[0064] Of course, the target event can also be other types of events; in addition to the rendering task corresponding to the target event, the rendering tasks in the transition task queue can also be interrupted by other types of tasks, such as the rendering tasks of page components with higher rendering priority than the first priority, etc., which are not limited in this embodiment of the application.
[0065] In this embodiment, by pausing the execution of rendering tasks in the transition task queue when there are rendering tasks with higher execution priority, and prioritizing the execution of the rendering task corresponding to the target event, the response speed to high-priority events can be improved.
[0066] Of course, other methods can be used to execute the rendering tasks in the transition task queue, such as using a batch processing mechanism to merge multiple rendering tasks into one rendering task before execution. This application does not limit this method.
[0067] Step 140: After completing the first subtask of the target page component, obtain the remaining idle time of the main rendering thread of the page. If the remaining idle time is greater than or equal to the idle time threshold, execute the second subtask of the target page component. If the first remaining idle time is less than the first idle time threshold, wait until the main rendering thread of the page enters the next idle cycle, obtain the second remaining idle time of the main rendering thread of the page, and if the second remaining idle time is greater than or equal to the first idle time threshold, execute the second subtask of the target page component.
[0068] The second subtask may contain rendering nodes that cannot be interrupted by the React scheduler and are time-consuming. For example, in some embodiments, the second subtask includes calls to third-party libraries such as ECharts charting library. These calls are synchronous, uninterruptible Canvas drawing operations that execute native code directly from the main thread and cannot be controlled by the React scheduler. In complex charts such as force-directed graphs, the operation may take 50-100ms. If executed during user interaction, this will cause noticeable frame drops.
[0069] Therefore, in this embodiment, after completing the first subtask of the target page component, the first remaining idle time of the page's main rendering thread is obtained. This first remaining idle time can be the time remaining after the page's main rendering thread completes operations such as input processing for one frame, JavaScript execution, component style calculation, page layout update, and component rendering. The first remaining idle time of the page's main rendering thread can be directly obtained by calling the `timeRemaining()` method. Of course, the first remaining idle time can also be determined using other methods, such as calculating the remaining idle time based on the device frame rate, the end time of the previous frame, and the current time; this embodiment does not limit this method.
[0070] After determining the first remaining idle time of the main rendering thread of the page, the first remaining idle time is compared with a first idle time threshold. The first idle time threshold can be a pre-set fixed value, such as a preset first idle time threshold of 10ms. Of course, the first idle time threshold can also be determined by other methods, such as dynamically calculating the first idle time threshold based on the device frame rate, or setting different first idle time thresholds for different types of second subtasks, etc. This application embodiment does not limit this approach.
[0071] If the first remaining idle time is greater than or equal to the first idle time threshold, the second subtask of the target page component will be executed to reduce the chance of the next frame's rendering cycle being interrupted due to task timeout.
[0072] If the first remaining idle time is less than the first idle time threshold, then wait until the main rendering thread of the page enters the next idle cycle, and then obtain the second remaining idle time of the main rendering thread of the page. If the second remaining idle time is greater than or equal to the first idle time threshold, execute the second subtask of the target page component; if the second remaining idle time is less than the first idle time threshold, then continue to wait until the next idle cycle, until the remaining idle time of the main rendering thread of the page is greater than or equal to the first idle time threshold.
[0073] The page rendering method provided in this application determines the rendering priority of the target page component to be rendered. When the rendering priority of the target page component is the first priority, the rendering task of the target page component is written into the transition task queue. The rendering tasks of each page component in the queue are executed according to the transition task queue. An interruptible asynchronous rendering mode is adopted. After the first sub-task of the target page component is completed, the second sub-task of the target page component is delayed until the remaining idle time of the page rendering main thread is greater than or equal to the idle time threshold through the browser layer idle detection mechanism. This can reduce the blocking time of the main thread and thus improve the performance of page rendering.
[0074] In some embodiments, the method further includes: Get the second subtask of the target page component, and calculate the waiting time starting from the completion of the first subtask of the target page component; If the waiting time is greater than or equal to the waiting time threshold, execute the second subtask of the target page component.
[0075] In this embodiment, the second subtask of the target page component is delayed until the idle time period of the main page rendering thread. However, in scenarios such as frequent user interaction and rendering of high frame rate animations, the main page rendering thread may be under continuous high load. The second subtask of the target page component is constantly postponed due to insufficient remaining idle time, resulting in the target page component being unable to complete rendering for a long time, and the corresponding position on the page being blank or remaining in the state before data update.
[0076] Therefore, in this embodiment of the application, a timeout fallback mechanism is set up. When the first remaining idle time is less than the first idle time threshold, the waiting time from the completion of the first subtask of the target page component is recorded. When the waiting time is greater than or equal to the preset waiting time threshold, the second subtask of the target page component is forcibly started to complete the rendering of the target page component.
[0077] In this embodiment, by setting a timeout fallback mechanism, the second subtask is forcibly executed when the waiting time is greater than or equal to the waiting time threshold, which can reduce the situation where component content is not displayed for a long time under continuous high load scenarios.
[0078] In some embodiments, the method further includes: If the rendering priority of the target page component is the second priority, then the rendering task of the target page component is executed; the second priority is higher than the first priority.
[0079] In this embodiment of the application, page components with high real-time requirements, such as alarm cards and QPS (Queries Per Second) trend charts, can be assigned a rendering priority higher than the first priority. For example, if the first priority is "delayable", the second priority can be set to "urgent".
[0080] When the rendering priority of the target page component is set to the second priority "urgent," all rendering tasks for the target page component are executed in an uninterrupted manner. This can be achieved using the synchronous rendering mode of the framework layer scheduler. As a result, the original immediate rendering capability is maintained, and the user perceives "instantaneous response."
[0081] In this embodiment, by immediately executing all rendering tasks for components with higher rendering priority, the rendering latency of high-priority components can be reduced.
[0082] In some embodiments, the method further includes: If the rendering priority of the target page component is the third priority, obtain the third remaining idle time of the main rendering thread of the page; the third priority is lower than the first priority. If the third remaining idle time is greater than or equal to the second idle time threshold, the rendering task of the target page component is executed.
[0083] In this embodiment, for page components such as force-directed graphs and detailed log tables, which have low real-time requirements and long rendering times, a rendering priority lower than the first priority can be assigned. For example, if the first priority is "delayable," the third priority can be set to "background." When the rendering priority of the target page component is the third priority "background," all rendering tasks of the target page component are postponed to the idle time period of the main page rendering thread to avoid occupying the main thread resources during the interaction period.
[0084] Before starting the rendering task of the target page component, first obtain the third remaining idle time of the main rendering thread of the page. If the third remaining idle time is less than the second idle time threshold, continue to wait; if the third remaining idle time is greater than or equal to the second idle time threshold, execute the rendering task of the target page component.
[0085] The process for obtaining the third remaining idle time and the method for determining the second idle time threshold can refer to the process for obtaining the first remaining idle time and the method for determining the first idle time threshold described above. To avoid repetition, they will not be repeated here.
[0086] In some embodiments, a timeout fallback mechanism can be set for page components with a rendering priority of third priority and whose rendering tasks are all postponed to the idle time period of the main page rendering thread. The waiting time from the receipt of the rendering task of the target page component is recorded, and the rendering task is forcibly started if the waiting time is greater than or equal to the waiting time threshold.
[0087] In this embodiment, by completely delaying the rendering tasks of components with lower rendering priority to be executed during the idle time period of the main thread, the blocking of the main thread by the rendering tasks of low rendering priority components can be reduced.
[0088] In some embodiments, determining the rendering priority of a target page component includes: Obtain the priority tag of the target page component. If the priority tag of the target page component is obtained, determine the rendering priority of the target page component based on the priority tag. If the priority tag of the target page component is not obtained, determine the parent component corresponding to the target page component; Determine the rendering priority of the parent component, and set the rendering priority of the target page component to be the rendering priority of the parent component.
[0089] Page components may be nested. For example, a container component may contain multiple card components. Updates to the container component's data may trigger a re-rendering of each card component and may also trigger the creation of new card components. In this case, the container component is the parent component of all card components, and the card components are the child components of the container component.
[0090] For page components defined by the developer, the priority attribute field declared by the developer can be read to obtain its priority tag, and the rendering priority can be determined based on its priority tag; however, for child components created by the parent component, if the developer has not manually declared the priority attribute, its priority tag may be empty or non-existent.
[0091] In this embodiment, the parent component of the target page component is determined when the priority tag of the target page component is not obtained. The parent component can be determined based on function call relationships in the code, or it can be determined based on a component tree structure, etc. This embodiment does not limit the determination in this way.
[0092] After determining the parent component of the target page component, determine the rendering priority of the parent component. This can be done by obtaining the parent component's priority tag. If the parent component's priority tag is available, the rendering priority of the target page component is determined based on that tag. If the parent component's priority tag is not available, the rendering priority of the next higher-level parent component is retrieved.
[0093] In some embodiments, the React Context mechanism can also be used to create a Context object bound to the component tree. The upper-level parent component acts as the Provider to provide the rendering priority field parameter. Then, the lower-level child component can directly obtain the rendering priority parameter provided by the upper-level parent component by calling the useContext method, without passing it through the intermediate layer.
[0094] Of course, other methods can also be used to determine the rendering priority of the parent component, and this application embodiment does not limit this.
[0095] In some embodiments, if the rendering priority cannot be determined after traversing all parent components, the rendering priority of the target page component can be set to a preset default value, such as the third priority "background", to reduce the occurrence of errors due to an empty rendering priority field.
[0096] In this embodiment, by determining the rendering priority of the target page component as the rendering priority of its corresponding parent component when the priority tag of the target page component is not obtained, the child component can automatically inherit the rendering strategy of the parent component without having to repeatedly declare the priority tag in each child component.
[0097] The page rendering method provided in this application can be executed by a page rendering device. This application uses a page rendering device executing the page rendering method as an example to illustrate the page rendering device provided in this application.
[0098] This application also provides a page rendering apparatus.
[0099] like Figure 2 As shown, the page rendering device includes: The determination module 210 is used to respond to the page's data update event to determine the target page component to be rendered, the rendering priority of the target page component, and the rendering task of the target page component; the rendering task includes a first subtask and a second subtask, with the execution priority of the first subtask being higher than that of the second subtask. The writing module 220 is used to write the rendering task of the target page component into the transition task queue when the rendering priority of the target page component is the first priority; the transition task queue includes the rendering tasks of multiple page components. The first execution module 230 is used to execute rendering tasks for each page component according to the transition task queue; The second execution module 240 is used to, after completing the first subtask of the target page component, obtain the remaining idle time of the main rendering thread of the page, and execute the second subtask of the target page component if the remaining idle time is greater than or equal to the idle time threshold; if the first remaining idle time is less than the first idle time threshold, wait until the main rendering thread of the page enters the next idle cycle, obtain the second remaining idle time of the main rendering thread of the page, and execute the second subtask of the target page component if the second remaining idle time is greater than or equal to the first idle time threshold.
[0100] According to the page rendering apparatus of this application, by determining the rendering priority of the target page component to be rendered, and when the rendering priority of the target page component is the first priority, the rendering task of the target page component is written into the transition task queue. The rendering tasks of each page component in the queue are executed according to the transition task queue. An interruptible asynchronous rendering mode is adopted. After the first sub-task of the target page component is completed, the second sub-task of the target page component is delayed until the remaining idle time of the page rendering main thread is greater than or equal to the idle time threshold through the browser layer idle detection mechanism. This can reduce the blocking time of the main thread and thus improve the performance of page rendering.
[0101] In some embodiments, the second execution module 240 is further configured to: Get the second subtask of the target page component, and calculate the waiting time starting from the completion of the first subtask of the target page component; If the waiting time is greater than or equal to a waiting time threshold, the second subtask of the target page component is executed. In some embodiments, the first execution module 230 is further configured to: In response to the target event, the execution of rendering tasks in the transition task queue is paused, and the rendering task corresponding to the target event is executed; the execution priority of the rendering task corresponding to the target event is higher than the execution priority of the rendering tasks in the transition task queue. After completing the rendering task corresponding to the target event, continue executing the rendering tasks in the transition task queue.
[0102] In some embodiments, the page rendering apparatus further includes a third execution module, configured to: If the rendering priority of the target page component is the second priority, then the rendering task of the target page component is executed; the second priority is higher than the first priority.
[0103] In some embodiments, the page rendering apparatus further includes a fourth execution module, configured to: If the rendering priority of the target page component is the third priority, obtain the third remaining idle time of the main rendering thread of the page; the third priority is lower than the first priority. If the third remaining idle time is greater than or equal to the second idle time threshold, the rendering task of the target page component is executed.
[0104] In some embodiments, the determining module 210 is further configured to: Obtain the priority tag of the target page component. If the priority tag of the target page component is obtained, determine the rendering priority of the target page component based on the priority tag. If the priority tag of the target page component is not obtained, determine the parent component corresponding to the target page component; Determine the rendering priority of the parent component, and set the rendering priority of the target page component to the rendering priority of the parent component.
[0105] The page rendering device in this application embodiment can be an electronic device or a component within an electronic device, such as an integrated circuit or a chip. The electronic device can be a terminal or other devices besides a terminal. For example, the electronic device can be a mobile phone, tablet computer, laptop computer, PDA, in-vehicle electronic device, mobile internet device (MID), augmented reality (AR) / virtual reality (VR) device, robot, wearable device, ultra-mobile personal computer (UMPC), netbook, or personal digital assistant (PDA), etc. It can also be a server, network attached storage (NAS), personal computer (PC), television (TV), ATM, or self-service machine, etc. This application embodiment does not specifically limit the device.
[0106] The page rendering device in this application embodiment can be a device with an operating system. This operating system can be a Microsoft (Windows) operating system, an Android operating system, an iOS operating system, or other possible operating systems; this application embodiment does not specifically limit the specific operating system.
[0107] In some embodiments, such as Figure 3 As shown, this application embodiment also provides an electronic device 300, including a processor 301, a memory 302, and a computer program stored in the memory 302 and executable on the processor 301. When the program is executed by the processor 301, it implements the various processes of the above-described page rendering method embodiment and achieves the same technical effect. To avoid repetition, it will not be described again here.
[0108] It should be noted that the electronic devices in the embodiments of this application include the aforementioned mobile electronic devices and non-mobile electronic devices.
[0109] This application also provides a non-transitory computer-readable storage medium storing a computer program. When the computer program is executed by a processor, it implements the various processes of the above-described page rendering method embodiments and achieves the same technical effect. To avoid repetition, it will not be described again here.
[0110] The processor is the processor in the electronic device described in the above embodiments. The readable storage medium includes computer-readable storage media, such as computer read-only memory (ROM), random access memory (RAM), magnetic disk, or optical disk.
[0111] This application also provides a computer program product, including a computer program that, when executed by a processor, implements the above-described page rendering method.
[0112] The processor is the processor in the electronic device described in the above embodiments. The readable storage medium includes computer-readable storage media, such as computer read-only memory (ROM), random access memory (RAM), magnetic disk, or optical disk.
[0113] This application embodiment also provides a chip, which includes a processor and a communication interface. The communication interface and the processor are coupled. The processor is used to run programs or instructions to implement the various processes of the above-described page rendering method embodiments and can achieve the same technical effect. To avoid repetition, it will not be described again here.
[0114] It should be understood that the chip mentioned in the embodiments of this application may also be referred to as a system-on-a-chip, system chip, chip system, or system-on-a-chip, etc.
[0115] It should be noted that, in this document, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Without further limitations, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes that element. Furthermore, it should be noted that the scope of the methods and apparatuses in the embodiments of this application is not limited to performing functions in the order shown or discussed, but may also include performing functions substantially simultaneously or in the reverse order, depending on the functions involved. For example, the described methods may be performed in a different order than described, and various steps may be added, omitted, or combined. Additionally, features described with reference to certain examples may be combined in other examples.
[0116] Through the above description of the embodiments, those skilled in the art can clearly understand that the methods of the above embodiments can be implemented by means of software plus necessary general-purpose hardware platforms. Of course, they can also be implemented by hardware, but in many cases the former is a better implementation method. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, can be embodied in the form of a computer software product. This computer software product is stored in a storage medium (such as ROM / RAM, magnetic disk, optical disk) and includes several instructions to cause a terminal (which may be a mobile phone, computer, server, or network device, etc.) to execute the methods described in the various embodiments of this application.
[0117] The embodiments of this application have been described above with reference to the accompanying drawings. However, this application is not limited to the specific embodiments described above. The specific embodiments described above are merely illustrative and not restrictive. Those skilled in the art can make many other forms under the guidance of this application without departing from the spirit and scope of the claims, and all of these forms are within the protection scope of this application.
[0118] In the description of this specification, the references to terms such as "one embodiment," "some embodiments," "illustrative embodiment," "example," "specific example," or "some examples," etc., indicate that a specific feature, structure, material, or characteristic described in connection with that embodiment or example is included in at least one embodiment or example of this application. In this specification, the illustrative expressions of the above terms do not necessarily refer to the same embodiment or example. Furthermore, the specific features, structures, materials, or characteristics described may be combined in any suitable manner in one or more embodiments or examples.
[0119] Although embodiments of this application have been shown and described, those skilled in the art will understand that various changes, modifications, substitutions and alterations can be made to these embodiments without departing from the principles and spirit of this application, the scope of which is defined by the claims and their equivalents.
Claims
1. A page rendering method, characterized in that, include: In response to a data update event on the page, determine the target page component to be rendered, the rendering priority of the target page component, and the rendering task of the target page component; The rendering task includes a first subtask and a second subtask, with the execution priority of the first subtask being higher than that of the second subtask. If the rendering priority of the target page component is the first priority, the rendering task of the target page component is written into the transition task queue; the transition task queue includes rendering tasks of multiple page components. According to the transition task queue, the rendering tasks of each page component are executed; After completing the first subtask of the target page component, the first remaining idle time of the main rendering thread of the page is obtained. If the first remaining idle time is greater than or equal to the first idle time threshold, the second subtask of the target page component is executed. If the first remaining idle time is less than the first idle time threshold, the process waits until the main rendering thread of the page enters the next idle cycle, then obtains the second remaining idle time of the main rendering thread of the page. If the second remaining idle time is greater than or equal to the first idle time threshold, the second subtask of the target page component is executed.
2. The method according to claim 1, characterized in that, The method further includes: Obtain the second subtask of the target page component, and calculate the waiting time starting from the completion of the first subtask of the target page component; If the waiting time is greater than or equal to the waiting time threshold, the second subtask of the target page component is executed.
3. The method according to claim 1, characterized in that, The step of executing the rendering tasks of each page component according to the transition task queue includes: In response to a target event, the execution of rendering tasks in the transition task queue is paused, and the rendering task corresponding to the target event is executed; the execution priority of the rendering task corresponding to the target event is higher than the execution priority of the rendering tasks in the transition task queue. After completing the rendering task corresponding to the target event, continue executing the rendering tasks in the transition task queue.
4. The method according to claim 1, characterized in that, The method further includes: When the rendering priority of the target page component is the second priority, the rendering task of the target page component is executed; the second priority is higher than the first priority.
5. The method according to claim 1, characterized in that, The method further includes: If the rendering priority of the target page component is the third priority, obtain the third remaining idle time of the main rendering thread of the page; the third priority is lower than the first priority. If the third remaining idle time is greater than or equal to the second idle time threshold, the rendering task of the target page component is executed.
6. The method according to claim 1, characterized in that, Determining the rendering priority of the target page component includes: Obtain the priority tag of the target page component; if the priority tag of the target page component is obtained, determine the rendering priority of the target page component based on the priority tag of the target page component. If the priority tag of the target page component is not obtained, determine the parent component corresponding to the target page component; The rendering priority of the parent component is determined, and the rendering priority of the target page component is set as the rendering priority of the parent component.
7. The method according to claim 1, characterized in that, The first subtask includes at least one of component state update, component style calculation, and page layout update; The second subtask includes at least one of the following: third-party library calls and component rendering.
8. A page rendering apparatus, characterized in that, include: The determination module is used to determine the target page component to be rendered, the rendering priority of the target page component, and the rendering task of the target page component in response to the page's data update event. The rendering task includes a first subtask and a second subtask, with the execution priority of the first subtask being higher than that of the second subtask. The writing module is used to write the rendering task of the target page component into the transition task queue when the rendering priority of the target page component is the first priority; the transition task queue includes rendering tasks of multiple page components. The first execution module is used to execute the rendering tasks of each page component according to the transition task queue; The second execution module is used to complete the first subtask of the target page component, obtain the first remaining idle time of the rendering main thread of the page, and execute the second subtask of the target page component if the first remaining idle time is greater than or equal to the first idle time threshold.
9. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that, When the processor executes the program, it implements the page rendering method as described in any one of claims 1-7.
10. A non-transitory 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 page rendering method as described in any one of claims 1-7.