Page rendering method, electronic equipment and computer readable storage medium
By sharding page data and combining virtual DOM technology and asynchronous rendering, the lag and delay problems in electronic device page rendering are solved, and efficient and smooth page display is achieved and user experience is improved.
Patent Information
- Application Number
- CN202510638094.3
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2025-05-16
- Publication Date
- 2025-08-08
AI Technical Summary
Electronic devices often experience lags and delays when rendering page data, affecting the user experience.
Split the page data into multiple initial data fragments, only the initial data fragment corresponding to the target display area is rendered, combined with virtual DOM technology and cache mechanism, dynamically adjust the rendering information, and use asynchronous rendering of the main thread and the child thread.
Effectively reduce the amount of page rendering data, improve rendering efficiency, avoid repeated rendering, achieve efficient and smooth page display, reduce memory usage, and improve user experience.
Smart Images

Figure CN120448656A_ABST
Abstract
Description
Technical Field
[0001] The present application relates to the field of computer technology, and in particular to a page rendering method, an electronic device, and a computer-readable storage medium. Background Art
[0002] Electronic devices such as mobile phones and computers can present application pages to users through applications such as browser applications for users to browse information. When electronic devices present application pages, they usually need to render page data such as tables, lists, charts, and images. In the process of rendering page data to present application pages, electronic devices often encounter problems such as page display freezes and delays, which affect the user experience. Therefore, how to better implement page data rendering and reduce or avoid page display freezes and delays is a problem that is being explored in the current field. Summary of the Invention
[0003] The purpose of this application is to solve the problem of page display freeze and delay, which affects the user experience.
[0004] To solve the above technical problems, in the first aspect, an embodiment of the present application discloses a page rendering method, which is applied to an electronic device, and the method includes: determining a target display area in a target page, the page data of the target page is stored in a manner of being divided into multiple initial data fragments, different display areas in the target page correspond to at least one initial data fragment, and the target display area includes at least a visible area in the target page corresponding to the page display window; from the multiple initial data fragments, determining at least one target initial data fragment corresponding to the target display area; according to the at least one target initial data fragment corresponding to the target display area, obtaining a rendering result of the target display area to display the corresponding page.
[0005] The page rendering method provided in this embodiment is adopted to divide the page data of the target page into multiple initial data segments and store them in a data segmentation manner. Different display areas in the target page correspond to at least one initial data segment. In the process of displaying the target page, at least one target initial data segment corresponding to the target display area in the target page is determined, and the rendering result of the target display area is obtained according to the at least one target initial data segment corresponding to the target display area to display the corresponding page. In this way, in the process of page rendering, it is only necessary to obtain the rendering result corresponding to the target display area according to the target initial data segment corresponding to the target display area in the target page to display the corresponding page. Compared with rendering the page according to all the page data of the target page, obtaining the rendering result corresponding to the target page and displaying the corresponding page can effectively reduce the amount of data loaded at one time during the page rendering process, improve the efficiency of page rendering and generation, effectively solve the problems of page display freeze and delay, achieve more efficient and smooth page display, and improve user experience.
[0006] According to another specific embodiment of the present application, in a page rendering method disclosed in an embodiment of the present application, a rendering result of the target display area is obtained based on at least one target initial data fragment corresponding to the target display area, including: when the target display area is the area displayed for the first time in the target page, rendering processing is performed on each target initial data fragment corresponding to the target display area to obtain a rendering data fragment corresponding to the target display area; and a rendering result of the target display area is obtained based on the rendering data fragment corresponding to the target display area.
[0007] In this way, when rendering page data, it is only necessary to render at least one target initial data fragment corresponding to the target display area in the target page to display the corresponding interface, without rendering all page data of the target page. Compared with the method of rendering all page data of the target page to display the corresponding page, it can effectively reduce the amount of data rendered at one time, improve page rendering efficiency, effectively solve the problems of page display jamming and delay, achieve efficient and smooth page display, and improve user experience.
[0008] In the page rendering method disclosed in a possible embodiment of this embodiment, the target display area can be the visible area of the target page to be displayed corresponding to the page display window. Therefore, when rendering page data, only the initial data fragment corresponding to the visible area of the target page to be displayed corresponding to the page display window can be rendered, without rendering all the page data of the target page, thereby effectively reducing the amount of data to be rendered.
[0009] In the page rendering method disclosed in a possible embodiment of this implementation, the target display area may further include a preview area below the visible area of the target page, the preview area being the area within the non-visible area adjacent to the visible area. Accordingly, upon determining the initial data segment corresponding to the visible area of the target page, the initial data segment corresponding to the preview area is determined, and the initial data segment corresponding to the preview area is rendered. Pre-rendering the initial data segment corresponding to the preview area allows for smoother page updates and improved page update speed when the user performs an update operation.
[0010] The page rendering method in this embodiment may also include: before determining the target initial data fragment corresponding to the target display area, determining whether the target display area is the area displayed for the first time in the target page; if the target display area is the area displayed for the first time in the target page, obtaining the target initial data fragment corresponding to the target display area from multiple initial data fragments, rendering each target initial data fragment to obtain a rendering data fragment, and further obtaining a rendering result.
[0011] Using the rendering method in this embodiment, before determining the target initial data fragment corresponding to the target display area, the electronic device determines whether the target display area is the area displayed for the first time in the target page. If the target display area is the area displayed for the first time in the target page, the target initial data fragment corresponding to the target display area is obtained for rendering processing, thereby avoiding repeated rendering of page data and reducing the amount of rendered data.
[0012] In the page rendering method disclosed in a possible embodiment of this embodiment, the target page can be the default page displayed when the electronic device opens an application. The target display area can be the default display area displayed in the page display window area of the default page, and the default display area is the area displayed in the visible area of the page display window when the default page is initially opened. Furthermore, in the case where the target display area is the default display area displayed in the surface display window area of the default page, the multiple initial data fragments corresponding to the default page have priority information, and the priority information corresponding to the multiple initial data fragments corresponding to the default page is pre-stored in the electronic device. Among the multiple initial data fragments obtained by segmenting the page data of the default page, the initial data fragment corresponding to the default display area has the highest priority. In addition, the page display window can also be called a visual window.
[0013] According to another specific embodiment of the present application, a page rendering method disclosed in an embodiment of the present application further includes: storing rendering data segments obtained by rendering.
[0014] The rendering method in this embodiment is used to store the rendering data fragments obtained by rendering in the electronic device. In this way, when it is determined that the target initial data fragment corresponding to the target display area exists with a corresponding rendering data fragment, the rendering data fragment corresponding to the target initial data fragment corresponding to the target display area stored in the electronic device can be called. According to the called rendering data fragment, the rendering result of the target display area is obtained, thereby realizing the reuse of the rendering data fragment, avoiding repeated rendering of page data, and at the same time, making the generation efficiency of the page of the target display area faster, that is, improving the page rendering efficiency.
[0015] In the page rendering method disclosed in a possible embodiment of this embodiment, the rendering data fragments stored in the electronic device can be understood as rendering data fragments that have been pre-rendered but have not yet obtained the final rendering results, that is, the stored rendering data fragments can be pre-rendering data fragments, so that when the page is displayed, the corresponding final rendering results can be obtained directly according to the pre-rendering data fragments.
[0016] In the page rendering method disclosed in a possible embodiment of this embodiment, the rendering data fragment stored in the electronic device can also be a rendering data fragment obtained after rendering the initial data fragment corresponding to the area displayed for the first time when the target display area is the area displayed for the first time in the target page, so that in the subsequent page rendering process, when the target display area is the area again, the rendering data fragment corresponding to the initial data fragment corresponding to the area stored in the electronic device is directly called.
[0017] According to another specific embodiment of the present application, in a page rendering method disclosed in an embodiment of the present application, each target initial data fragment corresponding to the target display area is rendered to obtain a rendering data fragment corresponding to the target display area, including: obtaining first target information, the first target information including performance information of the electronic device, performance information of the network where the electronic device is located, application scenario information of the target page, and at least one item of user interaction information; determining rendering information based on the first target information; and rendering processing is performed on each target initial data fragment corresponding to the target display area based on the rendering information to obtain a rendering data fragment corresponding to the target display area.
[0018] When using the page rendering method in this embodiment, when rendering the initial data fragment, the rendering information can also be determined based on the first target information, and the initial data fragment is rendered based on the rendering information. The first target information includes performance information of the electronic device and the network where the electronic device is located, application scenario information of the target page, and at least one of the user interaction information. Therefore, the rendering information of the initial data fragment can be dynamically adjusted based on the information related to the application scenario of the electronic device and the target page to improve the rendering efficiency of the page data, thereby improving the page generation efficiency and improving the user experience.
[0019] Furthermore, the performance information of the electronic device may be, for example, information such as the performance information of the electronic device's memory, the performance information of the processor in the electronic device, and the performance information of the graphics processing unit in the electronic device. The performance information of the network in which the electronic device is located may be, for example, information such as the network status of the network in which the electronic device is located. Information related to the application scenario of the target page may be, for example, information such as the application type and page attributes. User interaction information may be, for example, information such as scrolling direction information when the user performs a scrolling operation, and information such as focus position change information on the displayed page when the user performs a page adjustment operation on the displayed page. Of course, the first target information may also be other information.
[0020] Furthermore, in the page rendering method disclosed in a possible embodiment of this implementation, priority information of at least one non-target initial data segment corresponding to the non-target display page may be dynamically allocated based on user interaction information.
[0021] According to another specific embodiment of the present application, in a page rendering method disclosed in an embodiment of the present application, rendering information includes at least one of the following information: the number of subtasks included in a rendering task; the number of initial data fragments for each rendering; rendering frequency information; rendering mode information; rendering priority information; rendering thread information, including a main thread and subthreads; and rendering time information. Of course, the rendering information may also include other information.
[0022] In the page rendering method disclosed in a possible embodiment of this implementation, a rendering task may be configured to include multiple subtasks for rendering, and a thread for rendering an initial data segment may include a main thread and at least one sub-thread.
[0023] By adopting the page rendering method in this embodiment, at least one of the information on the number of subtasks included in the rendering task, the information on the number of initial data fragments rendered each time, the rendering frequency information, the rendering mode information, the rendering priority information, the rendering thread information, and the rendering time information can be determined based on the first target information, so as to dynamically adjust the information on the number of subtasks included in the rendering task for rendering the initial data fragments, the information on the number of initial data fragments rendered each time, the rendering frequency information, the rendering mode information, the rendering priority information, the rendering thread information, and the rendering time information based on the first target information, thereby adjusting the rendering information of the rendering data fragments in real time or periodically based on the first target information to speed up the rendering and generation efficiency of the page and improve the user experience.
[0024] Furthermore, the rendering information for rendering the initial data fragments is determined based on the first target information. The number of subtasks included in the rendering task, the number of initial data fragments rendered each time, the rendering frequency information, the rendering mode information, the rendering priority information, the rendering thread information, the rendering time information, etc. can be determined based on the performance information of the electronic device, the performance information of the network where the electronic device is located, the application scenario information of the target page, and the user interaction information.
[0025] According to another specific embodiment of the present application, in a page rendering method disclosed in an embodiment of the present application, each target initial data fragment corresponding to the target display area is rendered to obtain the rendering data fragment corresponding to the target display area, including: based on the virtual document object model (DOM) technology, each target initial data fragment corresponding to the target display area is rendered to obtain the rendering data fragment corresponding to the target display area.
[0026] The page rendering method in this embodiment is used to render the initial data fragment based on the virtual document object model technology, thereby effectively reducing the number of operations of the actual document object model technology, simplifying the complexity of the actual document object model technology operations, and improving the efficiency of page rendering.
[0027] According to another specific embodiment of the present application, in a page rendering method disclosed in an embodiment of the present application, a rendering result of the target display area is obtained based on at least one target initial data fragment corresponding to the target display area, and the method also includes: when the target display area is an area that is not displayed for the first time in the target page, obtaining a rendering data fragment corresponding to at least one target initial data fragment corresponding to the target display area from the stored rendering data fragments to obtain a rendering data fragment corresponding to the target display area; and obtaining a rendering result of the target display area based on the rendering data fragment corresponding to the target display area.
[0028] In the page rendering method of this embodiment, if the target display area is determined to be an area of the target page that is not being displayed for the first time, this indicates that the target display area has been displayed before the current display, and the target initial data segment corresponding to the target display area has already been rendered, resulting in a rendered data segment. In this case, the rendered data segment corresponding to the target initial data segment corresponding to the target display area can be determined from the rendered data segments stored in the electronic device, thereby obtaining a rendering result for the target display area based on the rendered data segment corresponding to the target display area.
[0029] By adopting the page rendering method in this embodiment, the rendering data segment corresponding to the target initial data segment corresponding to the target display area is called from the stored rendering data segment, and the rendering result of the target display area is obtained based on the called rendering data segment. There is no need to repeatedly render the target initial data segment corresponding to the target display area, thereby effectively reducing the amount of data rendered by the electronic device and effectively improving the rendering and generation efficiency of the page.
[0030] According to another specific embodiment of the present application, in a page rendering method disclosed in an embodiment of the present application, a rendering result of the target display area is obtained based on at least one target initial data fragment corresponding to the target display area, and the method also includes: when the target display area includes a first area displayed for the first time and a second area not displayed for the first time in the target page, rendering processing is performed on the target initial data fragment corresponding to the first area to obtain a rendering data fragment corresponding to the first area, and obtaining a rendering data fragment corresponding to the target initial data fragment corresponding to the second area from the stored rendering data fragments to obtain a rendering data fragment corresponding to the second area; and obtaining the rendering result of the target display area based on the rendering data fragment corresponding to the first area and the rendering data fragment corresponding to the second area.
[0031] In the page rendering method disclosed in a possible embodiment of this embodiment, the target display area includes a first area displayed for the first time and a second area not displayed for the first time in the target page. Correspondingly, the rendering data segments used to obtain the rendering results of the target display area include rendering data segments corresponding to the first area and rendering data segments corresponding to the second area.
[0032] If the target display area includes a first area that is displayed for the first time and a second area that is not displayed for the first time, the first area is displayed for the first time, and the target initial data segments corresponding to the first area need to be rendered to obtain corresponding rendering data segments. If the second area is displayed for the second time, the rendering data segments corresponding to the second area can be determined from the rendering data segments stored in the electronic device. The rendering result of the target display area is obtained based on the rendering data segments corresponding to the first area and the rendering data segments corresponding to the second area.
[0033] The page rendering method in this embodiment is adopted. When the first area included in the target display area is an area displayed for the first time, the corresponding rendering data segment is rendered according to the target initial data segment corresponding to the first area. When the second area included in the target display area is an area not displayed for the first time, the rendering data segment corresponding to the second area stored in the electronic device is called. That is, according to whether each area in the target display area is an area displayed for the first time, a method for obtaining the rendering data segment corresponding to the target initial data segment corresponding to each area is determined. This can effectively avoid repeated rendering of the target initial data segment corresponding to the area not displayed for the first time, reduce the amount of data rendered by the electronic device, and effectively improve the rendering and generation efficiency of the page.
[0034] Furthermore, obtaining the rendering result of the target display area based on the rendering data segments corresponding to the first area and the rendering data segments corresponding to the second area may include: obtaining the rendering result of the first area based on the rendering data segments corresponding to the first area, obtaining the rendering result of the second area based on the rendering data segments corresponding to the second area, and splicing the rendering result of the first area and the rendering result of the second area to obtain the rendering result of the target display area; or splicing the rendering data segments corresponding to the first area and the rendering data segments corresponding to the second area to obtain rendering data segments, and obtaining the rendering result of the target display area based on the rendering data segments.
[0035] According to another specific embodiment of the present application, a page rendering method disclosed in an embodiment of the present application further includes: determining whether the target display area includes an area of the target page that is not displayed for the first time based on the virtual document object model technology.
[0036] In another specific embodiment of the present application, before rendering the target initial data segment corresponding to the target display area, it can be determined based on the virtual document object model technology whether the target display area includes an area that is not displayed for the first time. If the target display area includes an area that is not displayed for the first time, the target initial data segment corresponding to the area displayed for the first time in the target display area is rendered according to the virtual document object model technology to obtain a corresponding rendered data segment.
[0037] The page rendering method in this embodiment is adopted to determine whether the target display area includes areas that are not displayed for the first time based on the virtual document object model technology. Therefore, when the target display area includes areas that are not displayed for the first time, only the target initial data fragment corresponding to the area displayed for the first time in the target display area needs to be rendered. This avoids the full rendering of the target initial data fragment corresponding to the target display area when the target display area includes areas that are not displayed for the first time, reduces the amount of rendered data, and thus achieves more efficient page updates.
[0038] Furthermore, in the page rendering method provided in this embodiment, whether the target display area includes an area that is not displayed for the first time is determined based on the virtual document object model technology. The at least one target initial data segment corresponding to the target display area can be compared with the initial data segment corresponding to the stored rendering data segment to determine whether the at least one target initial data segment corresponding to the target display area corresponds to the initial data segment corresponding to the stored rendering data segment, thereby determining whether the target display area includes an area that is not displayed for the first time.
[0039] According to another specific embodiment of the present application, in a page rendering method disclosed in an embodiment of the present application, the size of the initial data fragment is determined based on second target information, where the second target information includes at least one of the following: performance information of the electronic device, performance information of the network where the electronic device is located, and application scenario information of the target page. Of course, the second target information may also be other information.
[0040] By adopting the page rendering method in this embodiment, the size of the initial data segment can be determined based on the second target information, that is, at least one of the information such as the performance information of the electronic device, the performance information of the network where the electronic device is located, and the application scenario information of the target page. That is, the page data corresponding to the target page can be segmented based on the second target device information. When the initial data segment corresponding to the target page is loaded to generate the target page, each time the target display page is displayed, only the target initial data segment corresponding to the target display area needs to be loaded, and there is no need to load all the initial data segments corresponding to the target page at one time, so as to realize on-demand loading of the initial data segment and reduce the page data rendered at one time.
[0041] Furthermore, according to another specific embodiment of the present application, the size of the initial data segment can also be dynamically adjusted based on the second target information.
[0042] According to another specific embodiment of the present application, in a page rendering method disclosed in an embodiment of the present application, determining the target display area in the target page includes: determining the target display area in the target page in response to a page rendering instruction, the page rendering instruction being generated based on a user's opening operation on the target page, or based on a user's update operation on the target page.
[0043] In a page rendering method disclosed in a possible embodiment of this embodiment, when a user opens or updates a target page, a page rendering instruction is generated. Based on the page rendering instruction, a target display area in the target page is determined, thereby determining at least one target initial data segment corresponding to the target display area, obtaining a rendering data segment corresponding to the at least one target initial data segment, and thereby obtaining a rendering result for the target display area, thereby opening or updating the page. Furthermore, the user's update operation on the target page may include scrolling a progress bar, sliding the page, and manipulating a specific area.
[0044] In a second aspect, an embodiment of the present application further discloses an electronic device, which includes: a processor, a memory communicatively connected to the processor; the memory stores computer-executable instructions; the processor executes the computer-executable instructions stored in the memory, so that the electronic device implements a page rendering method as in any of the above embodiments.
[0045] On the third aspect, an embodiment of the present application further discloses a computer-readable storage medium, which stores a computer program. The computer program includes program instructions, and the program instructions are executed by an electronic device to enable the electronic device to execute a page rendering method as in any of the above embodiments.
[0046] In a fourth aspect, an embodiment of the present application further discloses a computer program product, including a computer program, which, when executed by an electronic device, implements the page rendering method in any of the above embodiments.
[0047] It can be understood that the beneficial effects of the second to fourth aspects mentioned above can also be found in the relevant description of the first aspect mentioned above, and will not be repeated here. BRIEF DESCRIPTION OF THE DRAWINGS
[0048] Figure 1 A schematic diagram of a flow chart of a page rendering method disclosed in an embodiment of this application;
[0049] Figure 2A schematic diagram of the principle of the page rendering method disclosed in the embodiment of this application;
[0050] Figure 3 Another flowchart of the page rendering method disclosed in the embodiment of this application;
[0051] Figure 4 Another flowchart of the page rendering method disclosed in the embodiment of this application;
[0052] Figure 5 A schematic diagram of the structure of an electronic device disclosed in an embodiment of the present application. DETAILED DESCRIPTION
[0053] As mentioned above, electronic devices such as mobile phones and computers need to render page data to display application pages in the process of presenting application pages to users. In the process of rendering page data, if the amount of data to be rendered is large, it is easy to affect the rendering performance of the electronic device, thereby affecting the page performance, resulting in page display freezes and delays, affecting the user experience. In addition, in the process of rendering page data, there are other factors that cause page display freezes and delays. Therefore, how to better implement page data rendering and reduce or avoid page display freezes and delays is a problem that is being explored in the current field.
[0054] Based on the above problems, the embodiment of the present application proposes a page rendering method, which is applied to electronic devices such as Figure 1 As shown, the method includes the following steps.
[0055] S1, determine the target display area in the target page, the page data of the target page is stored in a manner of being divided into multiple initial data segments, different display areas in the target page correspond to at least one initial data segment, and the target display area includes at least a visible area in the target page corresponding to the page display window.
[0056] S2: Determine at least one target initial data segment corresponding to the target display area from the multiple initial data segments.
[0057] S3: Obtain a rendering result of the target display area according to at least one target initial data segment corresponding to the target display area, so as to display the corresponding page.
[0058] Thus, in the page rendering method of the present application, the page data of the target page is divided into multiple initial data segments and stored in the form of data shards. In the process of rendering the page, at least one target initial data segment corresponding to the target display area is determined, and the rendering result of the target display area is obtained according to the at least one target initial data segment to display the corresponding page. That is, when rendering the page data, the corresponding page can be displayed by obtaining the rendering result corresponding to the target display area only according to the target initial data segment corresponding to the target display area. There is no need to obtain the rendering result corresponding to the target page according to all the page data of the target page to display the corresponding page. Compared with the method of realizing page display according to all the page data of the target page, it can effectively reduce the amount of data loaded at one time, improve the efficiency of page rendering and generation, effectively solve the problem of page display freeze and delay, achieve more efficient and smooth page display, and improve user experience.
[0059] Moreover, since the amount of data loaded is small, the amount of data stored in the electronic device's memory during the page rendering process is small, which can reduce memory usage, thereby avoiding or reducing the problem of page freeze or crash caused by large memory usage, achieving more efficient and smooth page display, and improving user experience.
[0060] In the page rendering method disclosed in a possible embodiment of the present embodiment, when the target display area is an area displayed for the first time in the target page, at least one target initial data segment corresponding to the target display area is obtained from a plurality of initial data segments, and the at least one target initial data segment corresponding to the target display area is rendered to obtain a rendering data segment, and a rendering result of the target display area is obtained based on the rendering data segment. Furthermore, the rendered rendering data segment obtained by rendering is stored in an electronic device, so that when the target display area is an area not displayed for the first time in the target page, the rendering data segment corresponding to the target initial data segment corresponding to the target display area can be obtained from the stored rendering data segment to obtain the rendering result of the target display area, thereby realizing the reuse of the rendering data segment, avoiding repeated rendering of page data, that is, reducing repeated calculations, reducing the amount of rendered data, reducing the rendering overhead of the electronic device, improving the rendering and generation efficiency of the page corresponding to the target display area in the target page, and also reducing the power consumption of the electronic device.
[0061] In the page rendering method disclosed in a possible embodiment of this embodiment, the initial data fragment can be rendered based on the virtual DOM technology to obtain the rendered data fragment. And based on the virtual DOM technology, it is determined whether the target display area includes an area that is not displayed for the first time, thereby effectively reducing the number of operations of the actual DOM technology and simplifying the complexity of the actual DOM technology operation, thereby improving the efficiency of page rendering. And based on the virtual DOM technology, the difference between at least one target initial data fragment corresponding to the target display area and the rendered initial data fragment can be calculated, that is, the unrendered target initial data fragment in the at least one target initial data fragment corresponding to the target display area can be compared, so that when the target display area changes, only the unrendered target initial data fragment in the at least one target initial data fragment corresponding to the target display area needs to be rendered, avoiding the full rendering of the at least one target initial data fragment corresponding to the target display area, reducing the amount of rendered data, and thus achieving more efficient page updates.
[0062] In the page rendering method disclosed in a possible embodiment of this embodiment, it is also possible to obtain first target information, determine rendering information based on the first target information, and then render the initial data fragment based on the rendering information to obtain a rendering data fragment. The first target information includes at least one of the performance information of the electronic device, the performance information of the network where the electronic device is located, the application scenario information of the target page, and user interaction information. The rendering information includes: information on the number of subtasks included in the rendering task, information on the number of initial data fragments rendered each time, rendering frequency information, rendering mode information, rendering priority information, rendering thread information, and rendering time information. Therefore, based on the first target information, the rendering information of the initial data fragment can be dynamically adjusted to adapt to different scenarios and device performance, etc., thereby improving the rendering efficiency of the page, thereby improving the generation efficiency of the page and improving the user experience.
[0063] In the page rendering method disclosed in a possible embodiment of this embodiment, second target information can also be obtained. The second target information includes at least one of the performance information of the electronic device, the performance information of the network where the electronic device is located, and the application scenario information of the target page, and the size of the initial data segment is determined based on the second target information. In this way, the page data corresponding to the target page can be segmented based on the second target information. When loading the page data corresponding to the target display area in the target page, only the at least one target initial data segment corresponding to the target display area is loaded, so as to achieve on-demand loading of the initial data segment and reduce the amount of page data loaded at one time.
[0064] Furthermore, by slicing the page data corresponding to the target page and loading the page data on demand, it is possible to effectively solve the problem of slow initial loading leading to a long first screen loading time when all the page data corresponding to the target page is loaded at once, and the problem of storing all the page data of the loaded target page in memory, which may cause the page to freeze or crash when the amount of page data corresponding to the page is large. Therefore, the page rendering method provided in this embodiment, which slices the page data and loads it on demand, is suitable for rendering pages with large amounts of data.
[0065] In the page rendering method disclosed in a possible embodiment of this embodiment, a rendering task includes subtasks, and a rendering thread includes a main thread and subthreads. Specifically, the rendering task is decomposed into multiple subtasks, and the rendering threads are configured as a main thread and subthreads, so that multiple subtasks can be performed on the main thread and multiple subthreads, respectively. Furthermore, the main thread and subthreads can render different page data through asynchronous rendering, thereby avoiding main thread blocking based on asynchronous rendering, thereby achieving non-blocking rendering and improving page rendering and generation efficiency.
[0066] In summary, if Figure 2 As shown, based on the page rendering method disclosed in this embodiment, when the page data corresponding to the target page is obtained, that is, the large data set or original data corresponding to the target page is obtained, the page data corresponding to the target page can be segmented based on the data segmentation mechanism to obtain multiple initial data fragments for storage, so that the page data can be loaded and rendered on demand during the page rendering process, reducing the amount of data loaded and rendered at one time.
[0067] Furthermore, a virtual DOM technology mechanism can be set up to render the page data corresponding to the target page based on the virtual DOM technology, and to determine whether the target display area includes the area of the target page that is not displayed for the first time based on the virtual DOM technology, so as to optimize the rendering efficiency by using the virtual DOM technology and reduce the number of operations of the actual DOM technology.
[0068] Furthermore, a dynamic adjustment mechanism can be set up, that is, dynamically adjusting the rendering information based on the first target information such as the aforementioned device performance to adapt to different scenarios and electronic device performance, thereby achieving efficient and smooth page display in large data rendering scenarios.
[0069] Furthermore, a cache mechanism may be provided to store the rendered data segments in the electronic device so that the segments that are not displayed for the first time can be called when displayed again, thereby avoiding repeated rendering of page data.
[0070] Furthermore, an asynchronous rendering mechanism can be set up, that is, the rendering thread is divided into a main thread and a sub-thread, so that the main thread can be avoided from being blocked through asynchronous rendering, and non-blocking rendering can be achieved.
[0071] The page rendering method disclosed in a possible embodiment of this implementation mode is based on a combination of one or more of the aforementioned data sharding mechanism, virtual DOM technology mechanism, dynamic adjustment mechanism, caching mechanism and asynchronous rendering mechanism, which can better implement page data rendering, significantly improve the page rendering performance, thereby improving the page rendering and generation efficiency, effectively solving the problems of page display jams and delays, achieving more efficient and smooth page display, and improving the user experience.
[0072] The application page is also commonly referred to as the front-end page. Below, taking the electronic device based on the page rendering method in the above embodiment to implement the front-end page display process of the application in the electronic device as an example, the page rendering method provided in the embodiment of this application is further explained.
[0073] like Figure 3 As shown, in one embodiment of the present application, implementing page display based on the page rendering method includes the following steps.
[0074] Step S101: Determine a target display area in a target page in response to a page rendering instruction. The page rendering instruction is generated based on a user opening the target page or a user updating the target page. The page data of the target page is stored in a manner divided into multiple initial data segments. Different display areas in the target page correspond to at least one of the initial data segments. The target display area may be a visible area in the target page corresponding to a page display window.
[0075] Exemplarily, user operations are monitored, and when a user opens or updates a target page, a corresponding page rendering instruction is generated based on the user opening or updating the target page, the page rendering instruction including information about a target display area in the target page. A target display area in the target page is determined based on the page rendering instruction, the target display area including a visible area of the target page to be displayed corresponding to the page display window.
[0076] Step S102: determining at least one target initial data segment corresponding to a target display area from a plurality of initial data segments.
[0077] Exemplarily, at least one target initial data segment corresponding to the target display area may be determined according to the target display area and a preset correspondence between the display area and the initial data segment.
[0078] Step S103: Based on the virtual DOM technology, it is determined whether the target display area includes the area of the target page that is initially displayed. If so, step S104 is executed; if not, step S107 is executed.
[0079] Step S104: If the target display area includes the area of the target page that is initially displayed, determine based on the virtual DOM technology whether the target display area includes an area of the target page that is not initially displayed. If not, execute step S105; if so, execute step S106.
[0080] Step S105: If the target display area does not include an area of the target page that is not initially displayed, that is, if the target display area is an area of the target page that is initially displayed, at least one target initial data segment corresponding to the target display area is rendered based on virtual DOM technology to obtain a rendered data segment. A rendering result of the target display area is then obtained based on the rendered data segment for use in page display. Furthermore, the rendered data segment may be stored for subsequent reuse.
[0081] Furthermore, storing the rendered data segments eliminates the need to re-request and render the target initial data segments corresponding to the target display area if the target display area is not being displayed for the first time, thereby reusing the rendered data segments corresponding to the loaded initial data segments, that is, reusing the rendered data segments corresponding to the cached page data. This effectively avoids the need to repeatedly render the target initial data segments corresponding to the target display area if the target display area corresponding to the user's update operation is not being displayed for the first time, that is, the historical display area.
[0082] Step S106: When the target display area includes areas of the target page that are initially displayed and areas that are not initially displayed, for example, when the target display area includes a first area that is initially displayed and a second area that is not initially displayed, a target initial data segment corresponding to the first area is obtained from the plurality of initial data segments, and the target initial data segment corresponding to the first area is rendered to obtain a rendered data segment; and a rendered data segment corresponding to the target initial data segment corresponding to the second area is obtained from the stored rendered data segments. A rendering result of the target display area is obtained based on the obtained rendered data segment to display the corresponding page.
[0083] Step S107, when the target display area is an area not displayed for the first time in the target page, obtain the rendering data segment corresponding to the target initial data segment corresponding to the target display area from the stored rendering data segments, and obtain the rendering result of the target display area based on the rendering data segment to display the corresponding page.
[0084] In a possible embodiment of this embodiment, the electronic device executes Figure 3 Before the page rendering method shown, or when the user opens the target page, the electronic device can divide the page data corresponding to the target page into multiple initial data segments according to the second target information, that is, the electronic device performs segmentation processing operations on the page data corresponding to the target page.
[0085] Furthermore, dividing the page data corresponding to the target page into multiple initial data fragments includes: obtaining the page data corresponding to the target page and second target information, where the second target information can be at least one of information such as performance information of the electronic device, performance information of the network where the electronic device is located, and application scenario information of the target page. The page data corresponding to the target page can be a large data set corresponding to the target page, or the original data corresponding to the target page. According to the second target information, a data slicing operation is performed on the page data corresponding to the target page to divide the page data corresponding to the target page into multiple small data slices. For example, for electronic devices with high performance and good network quality, and application scenarios such as browser applications, the size of the data slice can be set to be larger. Conversely, for electronic devices with low performance and poor network quality, and application scenarios such as non-browser applications, the size of the data slice can be set to be smaller. Of course, the data slice size can also be set by R&D personnel based on experience. Through data slicing, data slices can be loaded and rendered on demand later, reducing the amount of data rendered at one time.
[0086] Furthermore, the size of the initial data segment can be dynamically adjusted based on the second target information. If the second target information includes performance information of the electronic device and the network on which the electronic device resides, the size of the initial data segment can be dynamically adjusted based on the performance information of the electronic device and the network on which the electronic device resides, thereby adapting to different scenarios and device performance, improving page rendering efficiency, thereby improving page generation efficiency, and enhancing user experience.
[0087] Executed in electronic devices Figure 3 During the page rendering method shown, the electronic device can obtain first target information in real time or periodically, determine rendering information based on the first target information, and render the initial data fragment based on the rendering information to obtain the rendered data fragment. The first target information includes at least one of the performance information of the electronic device, the performance information of the network where the electronic device is located, the application scenario information of the target page, and the user interaction information. The rendering information includes: at least one of the information of the number of subtasks included in the rendering task, the number of initial data fragments rendered each time, rendering frequency information, rendering mode information, rendering priority information, rendering thread information, and rendering time information.
[0088] Furthermore, in the page rendering method provided in this embodiment, the rendering information can be determined based on the first target information, that is, the rendering strategy of the electronic device can be dynamically adjusted based on the first target information, so that the rendering strategy can be adjusted for low-performance devices to effectively enrich the rendering strategy and solve the problem of a single rendering strategy.
[0089] Furthermore, the first target information and the second target information may be the same or different.
[0090] In the page rendering method disclosed in a possible embodiment of this implementation, the performance information of the electronic device may include information such as performance information of the electronic device's memory, performance information of the electronic device's processor, and performance information of the electronic device's graphics processing unit. The performance information of the network in which the electronic device resides may include information such as the network status of the electronic device's network.
[0091] In the page rendering method disclosed in a possible embodiment of this implementation, the target display area may further include a preview area below the visible area of the target page, the preview area being the area within the non-visible area adjacent to the visible area. Accordingly, upon determining the initial data segment corresponding to the visible area of the target page, the initial data segment corresponding to the preview area is determined, and the initial data segment corresponding to the preview area is rendered. Pre-rendering the initial data segment corresponding to the preview area allows for smoother page updates and improved page update speed when the user performs an update operation.
[0092] Furthermore, the target display area includes a preview area below the visible area of the target page, which allows for continuous interaction between the displayed page in the visible area of the page display window and the page to be displayed in the preview area. This effectively improves the consistency of the electronic device generating the page to be displayed in response to the update operation when the user performs the update operation.
[0093] Furthermore, the preview area below the visible area in the target page enables the electronic device to support the loading and rendering of page data of the area outside the visible area of the page display window to be displayed in the target page when responding to an update operation, so that the electronic device can support rapid retrieval or global operation of cross-page data, thereby improving the smoothness of the display of the target page.
[0094] Furthermore, the preview area below the visible area in the target page can effectively avoid the problem of blank area appearing in the page display window of the electronic device, that is, a white screen appearing on the electronic device, due to the delay in loading page data on the electronic device when the user quickly performs an update operation.
[0095] Furthermore, when the electronic device fails to release the initial data fragment corresponding to the target display area corresponding to the executed update operation in a timely and reasonable manner, it is easy for the content to occupy the time process, resulting in the risk of memory leakage. In the page rendering method disclosed in this embodiment, the target display area includes a preview area below the visible area of the target page. When the user performs an update operation and the target display area corresponding to the update operation is the preview area below the visible area of the target page, the electronic device can respond to the update operation and directly display the corresponding page based on the rendering result corresponding to the preview area, without loading the initial data fragment corresponding to the preview area, so as to effectively avoid the risk of memory leakage.
[0096] In the page rendering method disclosed in a possible embodiment of the present embodiment, it is possible to determine whether the target display area includes an area that is not displayed for the first time based on the virtual DOM technology, and it is also possible to determine whether the target display area includes an area that is displayed for the first time based on the virtual DOM technology. Furthermore, based on the virtual DOM technology, determining whether the target display area includes an area that is displayed for the first time includes: using the difference algorithm (Difference algorithm, Diff algorithm) in the virtual DOM technology, calculating the transformation of at least one target initial data segment corresponding to the target display area compared to at least one target initial data segment corresponding to the previous target display area, thereby determining the initial data segment that needs to be rendered, and thus updating the DOM corresponding to the at least one target initial data segment corresponding to the previous target display area to obtain the DOM corresponding to the at least one target initial data segment corresponding to the current target display area.
[0097] In the page rendering method disclosed in a possible embodiment of this implementation, when rendering the initial data fragment based on the BOM technology, the rendering task of rendering the initial data fragment can be divided into multiple subtasks for rendering to ensure the smoothness of page generation.
[0098] Furthermore, the rendering mode information may include, for example: a first rendering mode and a second rendering mode, the rendering granularity of the first rendering mode is lower than the rendering granularity of the second rendering mode, the rendering granularity of the first rendering mode is lower than a preset rendering granularity threshold, and the rendering granularity of the second rendering mode is higher than the preset rendering granularity threshold.
[0099] For example, when the performance of the electronic device is lower than the preset electronic device performance, the performance of the network where the electronic device is located is lower than the preset network performance, and the application scenario of the target page requires no page accuracy and / or no page animation for the rendered page, and the rendering granularity requirement is lower than the preset rendering granularity threshold, the number of subtasks can be set to multiple, the number of initial data fragments rendered each time is reduced, the rendering frequency is increased, the rendering mode is selected as the first rendering mode, the rendering priority information is set to the highest priority of the visible area corresponding to the visible window to be displayed in the target page, multiple rendering threads are set, and the rendering time is increased.
[0100] For example, when the performance of the electronic device is higher than the preset electronic device performance, the performance of the network where the electronic device is located is higher than the preset network performance, and the application scenario of the target page requires the rendered page to have high display accuracy and / or the page has animation requirements, and the rendering granularity requirement is higher than the preset rendering granularity threshold, the number of subtasks can be set to multiple, the number of initial data fragments rendered each time is increased, the rendering frequency is reduced, the rendering mode is selected as the second rendering mode, the rendering priority information is set to the highest priority of the visible area corresponding to the visible window to be displayed in the target page, multiple rendering threads are set, and the rendering time is increased.
[0101] The above examples are only examples of possible embodiments of this embodiment. The specific settings of rendering information for rendering the initial data segment according to the first target information can be determined based on the specific application scenario and user needs of the page rendering method in this embodiment, and are not limited to this.
[0102] Furthermore, the preset rendering granularity threshold, preset electronic device performance, preset network performance and application scenario of the target page can be determined for the rendered page based on the specific application scenario and user needs of the page rendering method in this embodiment, and there is no limitation on this.
[0103] In the page rendering method disclosed in a possible embodiment of this embodiment, the rendering data fragments corresponding to the initial data fragments can be stored as a persistent cache. Furthermore, when storing the rendering data fragments corresponding to the initial data fragments, the rendering data fragments can be identified by a unique identifier (e.g., a data hash) to achieve rapid reuse and avoid repeated rendering.
[0104] The page rendering method disclosed in a possible embodiment of this embodiment can be understood as a front-end page large data rendering optimization solution, which is applied to the front-end page rendering large data scenarios to achieve the rendering of large data front-end pages. As mentioned above, based on the combination of one or more of the aforementioned data sharding mechanism, virtual DOM technology mechanism, dynamic adjustment mechanism, caching mechanism and asynchronous rendering mechanism, page data rendering can be better achieved, significantly improving the rendering performance of the front-end page, thereby reducing or avoiding page freezes, delays and other problems, achieving efficient and smooth page display, and improving user experience.
[0105] A web application can also be referred to as a web application, and thus its front-end page can also be referred to as a front-end web page. The following uses an electronic device implementing a front-end web page display process of a web browser application based on the page rendering method provided in the above embodiment as an example to further illustrate the page rendering method provided in the embodiment of the present application.
[0106] When a user opens a web browser application, the electronic device uses, for example, the default interface of the web browser application as the target page and determines a target display area therein. The target display area may be the area initially displayed when the web browser application is opened, and the at least one target initial data segment corresponding to the target display area is the initial data segment.
[0107] like Figure 4 As shown, the process of implementing web browser application page display by the electronic device based on the above page rendering method includes the following steps.
[0108] Step S201: Load each target initial data segment corresponding to the initial display area, that is, load the initial data slice. The initial display area is an example of a target display area, and may be a visual page displayed by default when a web browser application is opened.
[0109] Step S202 , rendering each target initial data segment corresponding to the initial display area based on the virtual DOM technology, that is, using the virtual DOM technology to render the initial data segment to obtain rendered data segments, storing the rendered data segments, and obtaining the rendering result of the initial display area based on the rendered data segments.
[0110] Step S203: monitor page update operations such as scroll events or user operations, etc. If no page update operations such as scroll events or user operations occur, monitor continuously.
[0111] In step S204, if a scroll event occurs or a page update operation such as a user operation occurs, the virtual DOM technology is used to determine whether the current area to be displayed includes the area of the target page that is initially displayed. In other words, it is determined whether a new data slice needs to be loaded. If so, step S205 is executed; if not, step S206 is executed. This is another example of the current area to be displayed being the target display area.
[0112] Step S205: When it is determined that the current area to be displayed includes the area displayed for the first time in the target page, that is, a new data piece needs to be loaded, the new data piece corresponding to the area displayed for the first time is loaded, and the target initial data segment corresponding to the area displayed for the first time in the target page is rendered according to the virtual DOM technology to obtain a new rendering data segment to display the corresponding page, that is, the difference (Difference, Diff) algorithm in the virtual DOM technology is used to update the DOM processing.
[0113] Specifically, as previously described, if the current area to be displayed includes only the area of the target page that is initially displayed, a rendering result is obtained based on the newly rendered rendering data segments to display the corresponding page. If the current area to be displayed includes not only the area of the target page that is initially displayed but also areas of the target page that are not initially displayed, a rendering result is obtained based on the newly rendered rendering data segments and the stored rendering data segments corresponding to the areas that are not initially displayed to display the corresponding page.
[0114] Based on the page rendering method provided in the embodiment of the present application, a large data set is divided into multiple small data slices. By monitoring scrolling events or user operations, the data slices of the current visible area are dynamically loaded, which can be loaded and rendered on demand, reducing the amount of data rendered at one time.
[0115] Furthermore, using a virtual DOM can reduce the number of actual DOM operations and improve rendering efficiency. Furthermore, by comparing virtual DOM changes through a Diff algorithm, only the necessary changes can be updated, avoiding full rendering.
[0116] Step S206: storing the newly rendered data segments, that is, caching the rendered data segments based on the previous ones.
[0117] Step S207 : When it is determined that the current display area does not include the initial display area in the target page, the rendering data segment corresponding to the stored target initial data segment corresponding to the target display area is called.
[0118] Subsequently, based on the rendered data fragments, splicing and other processing can be performed to obtain the corresponding rendering results to display the corresponding page.
[0119] This way, already rendered data is cached to avoid repeated rendering. When the user scrolls back to the loaded area, the cached data is used directly, reducing rendering overhead.
[0120] Furthermore, during the page rendering process, the electronic device may also execute the following step S208 to dynamically adjust the rendering information during the rendering process.
[0121] Step S208: Dynamically adjust the rendering granularity according to the performance information of the electronic device and the network status.
[0122] Among them, the performance information and network status of the electronic device are examples of the first target information, and the rendering granularity, that is, the aforementioned rendering information, can be the size of the aforementioned loaded data slices and the rendering frequency and other information.
[0123] Furthermore, during the page rendering process, the electronic device may also execute step S209 to dynamically present the corresponding page.
[0124] Step S209: Repeatedly monitor scrolling events or user operations until the target page is rendered and displayed.
[0125] When a web browser application in an electronic device displays a page based on the page rendering method described in the above embodiment, caching the rendered initial data slice can effectively avoid repeated rendering of page data. Furthermore, when a user scrolls back to the rendered target display area, the rendered data fragment stored in the electronic device can be directly called, reducing rendering overhead.
[0126] Furthermore, when a web browser application in an electronic device displays a page based on the page rendering method described in the above embodiment, the rendering task of rendering the initial data fragment can be broken down into multiple subtasks. The rendering threads are configured as a main thread and multiple sub-threads. During the rendering of the initial data fragment, the web browser application's idle time or a Web Worker can be used for asynchronous rendering. The main thread and multiple sub-threads collaboratively render the initial data fragments, effectively avoiding main thread blocking and ensuring smooth page flow.
[0127] During page display by a web browser application in an electronic device based on the page rendering method of the above-described embodiment, determining rendering information based on the first target information may include dynamically adjusting the rendering frequency based on the electronic device's performance, network conditions, and user interaction information. Electronic device performance may include processor performance and memory performance. Furthermore, determining rendering information based on the first target information may include reducing the amount of data rendered per rendering on low-performance electronic devices and increasing rendering granularity on high-performance electronic devices to enhance the user experience.
[0128] In the process of displaying a page based on the page rendering method in the above-mentioned embodiment by a web browser application in an electronic device, the rendering information is determined according to the first target information. For example, the number of initial data fragments loaded or rendered each time can be dynamically adjusted according to the performance and network conditions of the electronic device. For example, when a high-performance device is in a good network condition, the number of initial data fragments loaded or rendered is 200 / pieces; when a low-performance device is in a poor network condition, the number of initial data fragments loaded or rendered is 50 / pieces.
[0129] In the page rendering method disclosed in a possible embodiment of this embodiment, the rendering task of rendering the initial data fragment can be divided into multiple sub-tasks, and the rendering information is determined according to the first target information. For example, the rendering priority can also be dynamically assigned according to the user interaction behavior (that is, user interaction information, such as scrolling direction, focus position). The main thread in the rendering thread is responsible for high-priority rendering tasks (for example, the rendering task of at least one target initial data fragment corresponding to the visible area in the target display area), and the sub-thread is responsible for low-priority rendering tasks (for example, the rendering task of the initial data fragment corresponding to the preview area in the target display area). Furthermore, the sub-thread can also be responsible for rendering the initial data fragment corresponding to the non-target display area when the main thread is responsible for the rendering task of the initial data fragment corresponding to the target display area.
[0130] In the page rendering method disclosed in a possible embodiment of this embodiment, the performance information of the processor, memory, and graphics processor in the electronic device can be obtained through the number of logical processor cores (navigator.hardware concurrency), device memory API (Device Memory API), etc., so as to determine the rendering information based on the performance information of the processor, memory, and graphics processor in the electronic device. Furthermore, a lightweight rendering mode (such as reducing animation and degrading rendering complexity) can be automatically enabled on low-performance devices. Furthermore, the initial data fragment rendering of multiple subtasks can be merged into a batch operation to reduce the number of reordering / redrawing times.
[0131] Of course, the method of determining the rendering information according to the first target information may also be other methods other than the above-mentioned methods.
[0132] Furthermore, the page rendering method provided in the embodiments of the present application can realize the rendering of front-end web pages such as the above-mentioned web browser application, and can also realize the rendering of application pages in other scenarios such as game applications.
[0133] For example, on an e-commerce website or content platform, users can search for products or content through natural language input, and the e-commerce website or content platform can render and display the corresponding page content based on the page rendering method provided in the embodiments of the present application.
[0134] In addition, the current large model can generate personalized recommended content based on the user's historical behavior, interests, and context. Therefore, based on the page rendering method provided in the embodiment of this application, the page content corresponding to the personalized recommended content can be rendered and displayed.
[0135] For example, in customer service or education scenarios, users can interact with a large model through a chat interface. The large model generates responses in real time, and the front-end needs to efficiently render the chat log. Therefore, the front-end can render and display the corresponding page content based on the page rendering method provided in the embodiments of this application.
[0136] Furthermore, in a big data analysis platform, a large model can analyze data and generate visual charts, and the front end needs to render these charts efficiently. Therefore, the front end can render and display the corresponding page content based on the page rendering method provided in the embodiment of this application.
[0137] Another embodiment of the present application also discloses an electronic device, which can be a computer, a server, etc. Figure 5 As shown, the electronic device may include: a transceiver 121 , a processor 122 , and a memory 123 .
[0138] The processor 122 executes the computer-executable instructions stored in the memory, so that the processor 122 performs the technical solution of the page rendering method in the above embodiment. The processor 122 can be a general-purpose processor, including a central processing unit (CPU), a network processor (NP), etc.; it can also be a digital data processor (DSP), an application-specific integrated circuit (ASIC), a field-programmable gate array (FPGA), or other programmable logic devices, discrete gate or transistor logic devices, or discrete hardware components.
[0139] The memory 123 is connected to the processor 122 via a system bus and communicates with the processor 122. The memory 123 is used to store computer program instructions.
[0140] The transceiver 121 may be used to obtain tasks to be executed and configuration information of the tasks to be executed.
[0141] The system bus can be a Peripheral Component Interconnect (PCI) bus or an Extended Industry Standard Architecture (EISA) bus, among others. The system bus can be divided into an address bus, a data bus, a control bus, and so on. For ease of illustration, the figure shows only one thick line, but this does not imply that there is only one bus or only one type of bus. Transceivers are used to enable communication between the database access device and other computers (e.g., clients, read-write libraries, and read-only libraries). Memory may include random access memory (RAM) and non-volatile memory.
[0142] Another embodiment of the present application further discloses a computer-readable storage medium storing a computer program, which, when executed by a processor, implements the page rendering method in any of the above embodiments.
[0143] Another embodiment of the present application further discloses a computer program product, including a computer program, which, when executed by a processor, implements the page rendering method in any of the above embodiments.
[0144] It should be noted that, in addition to the implementation methods of the present application described in the above-mentioned specific embodiments, those skilled in the art can easily understand other advantages and effects of the present application from the contents disclosed in this specification. Although the description of the present application is introduced in conjunction with the preferred embodiment, this does not mean that the features of this application are limited to this implementation method. On the contrary, the purpose of introducing the application in conjunction with the implementation method is to cover other options or modifications that may be extended based on the page rendering method of the present application. In order to provide an in-depth understanding of the present application, the above description contains many specific details, and the present application can also be implemented without using these details. In addition, in order to avoid confusion or blurring the focus of the present application, some specific details will be omitted in the description. It should be noted that the embodiments in the present application and the features in the embodiments can be combined with each other without conflict.
[0145] It should be noted that in this specification, similar reference numerals and letters denote similar items in the following drawings, and therefore, once an item is defined in one drawing, it does not need to be further defined or explained in subsequent drawings.
[0146] In the description of this embodiment, it should be noted that the terms "upper", "lower", "inner", "bottom", etc. indicate orientations or positional relationships based on the orientations or positional relationships shown in the accompanying drawings, or are the orientations or positional relationships in which the product of the application is usually placed when in use. They are only for the convenience of describing this application and simplifying the description, and do not indicate or imply that the device or element referred to must have a specific orientation, be constructed and operated in a specific orientation. Therefore, they cannot be understood as limitations on this application.
[0147] The terms “first”, “second”, etc. are only used for distinguishing descriptions and should not be understood as indicating or implying relative importance.
[0148] Although the present application has been illustrated and described with reference to certain preferred embodiments of the present application, those skilled in the art will appreciate that the above descriptions are provided as further details of the present application in conjunction with specific embodiments, and that the specific implementation of the present application should not be limited to these descriptions. Those skilled in the art may make various changes in form and detail, including simple deductions or substitutions, without departing from the spirit and scope of the present application.
Claims
1. A page rendering method, characterized in that: Applied to electronic equipment, the method includes: determining a target display area in a target page, wherein page data of the target page is stored in a manner of being divided into a plurality of initial data segments, different display areas in the target page correspond to at least one of the initial data segments, and the target display area includes at least a visible area of the target page corresponding to a page display window; determining, from the multiple initial data segments, at least one target initial data segment corresponding to the target display area; A rendering result of the target display area is obtained according to the at least one target initial data segment corresponding to the target display area to display a corresponding page.
2. The page rendering method according to claim 1, characterized in that: Obtaining a rendering result of the target display area according to the at least one target initial data segment corresponding to the target display area includes: In a case where the target display area is an area displayed for the first time in the target page, rendering is performed on each of the target initial data segments corresponding to the target display area to obtain rendered data segments corresponding to the target display area; A rendering result of the target display area is obtained according to the rendering data segment corresponding to the target display area.
3. The page rendering method according to claim 2, characterized in that: The method further comprises: The rendering data fragment is stored.
4. The page rendering method according to claim 2, characterized in that: Rendering each of the target initial data segments corresponding to the target display area to obtain a rendering data segment corresponding to the target display area includes: Acquire first target information, where the first target information includes at least one of performance information of the electronic device, performance information of a network where the electronic device is located, application scenario information of the target page, and user interaction information; determining rendering information according to the first target information; Rendering is performed on each of the target initial data segments corresponding to the target display area according to the rendering information to obtain rendering data segments corresponding to the target display area.
5. The page rendering method according to claim 4, characterized in that: The rendering information includes at least one of the following information: The number of subtasks included in the rendering task; The number of the initial data segments rendered each time; Rendering frequency information; Rendering mode information; Rendering priority information; Rendering thread information, including main thread and child thread; Rendering time information.
6. The page rendering method according to any one of claims 2 to 5, characterized in that: Rendering each of the target initial data segments corresponding to the target display area to obtain a rendering data segment corresponding to the target display area includes: Based on the virtual document object model technology, rendering processing is performed on each of the target initial data segments corresponding to the target display area to obtain rendering data segments corresponding to the target display area.
7. The page rendering method according to claim 3, characterized in that: Obtaining a rendering result of the target display area according to the at least one target initial data segment corresponding to the target display area further includes: When the target display area is an area of the target page that is not displayed for the first time, acquiring, from the stored rendering data segments, the rendering data segments corresponding to the at least one target initial data segment corresponding to the target display area, to obtain the rendering data segments corresponding to the target display area; A rendering result of the target display area is obtained according to the rendering data segment corresponding to the target display area.
8. The page rendering method according to claim 3, characterized in that: Obtaining a rendering result of the target display area according to the at least one target initial data segment corresponding to the target display area further includes: When the target display area includes a first area displayed for the first time and a second area not displayed for the first time in the target page, rendering the target initial data segment corresponding to the first area to obtain a rendering data segment corresponding to the first area, and acquiring the rendering data segment corresponding to the target initial data segment corresponding to the second area from the stored rendering data segments to obtain the rendering data segment corresponding to the second area; A rendering result of the target display area is obtained according to the rendering data fragment corresponding to the first area and the rendering data fragment corresponding to the second area.
9. The page rendering method according to any one of claims 2, 7, and 8, characterized in that: The method further comprises: Based on the virtual document object model technology, it is determined whether the target display area includes an area of the target page that is not displayed for the first time.
10. The page rendering method according to claim 1, wherein: The size of the initial data segment is determined according to second target information, where the second target information includes at least one of performance information of the electronic device, performance information of a network where the electronic device is located, and application scenario information of the target page.
11. The page rendering method according to claim 1, wherein: Determining a target display area in the target page includes: The target display area in the target page is determined in response to a page rendering instruction, where the page rendering instruction is generated according to a user's opening operation on the target page or a user's updating operation on the target page.
12. An electronic device, characterized in that: The electronic device includes: a processor, and a memory communicatively connected to the processor; The memory stores computer-executable instructions; The processor executes the computer-executable instructions stored in the memory to enable the electronic device to implement the page rendering method according to any one of claims 1 to 11.
13. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a computer program, wherein the computer program includes program instructions, and the program instructions are executed by the electronic device to enable the electronic device to execute the page rendering method according to any one of claims 1 to 11.
Citation Information
Cited By
Data retrieval method for graph database, terminal equipment and server
CN121144573A