Page rendering method and related equipment
By detecting component status in page rendering and performing incremental updates, the problem of low page rendering performance in the prior art is solved, and more efficient page rendering and improved user experience is achieved.
Patent Information
- Application Number
- CN202510060182.X
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2025-01-14
- Publication Date
- 2025-05-09
AI Technical Summary
Existing page rendering methods require creating the entire page from scratch each time, resulting in frequent DOM operations, large resource overhead, and low page rendering performance, especially in the case of large or complex pages.
By detecting the trigger signal that generates the target page, determine the target component and its DOM operations, determine whether the component in the component state table is a created state. If it is not a created state, create the component and update the state to achieve incremental update rather than a completely new creation.
Reduces unnecessary DOM operation and resource overhead, improves page rendering performance, and significantly improves loading speed and user experience of large or complex pages.
Smart Images
Figure CN119960852A_ABST
Abstract
Description
Technical Field
[0001] The embodiments of the present application relate to the field of page rendering, and more specifically, to a page rendering method, a page rendering apparatus, a page rendering device, a computer-readable storage medium, and a computer program product containing instructions. Background Art
[0002] As the demand for applications or websites increases and technology develops, page content becomes more and more diverse, resulting in frequent page updates and display of new information or features.
[0003] The existing page rendering method is that when a user requests a page, the system will load all components of the page at once, whether it is a large block of content or a small widget, they will be newly created and complete DOM construction and style rendering will be performed in the browser. For example, when opening a news website, all articles, pictures, and advertisements will be loaded together, even if the user may only pay attention to one or two articles.
[0004] However, this page rendering method requires creating the entire page from scratch each time, which requires more DOM operations (operations on document object model elements), has a large resource overhead, and has low page rendering performance. In particular, for large or complex pages, the page loading speed will be particularly slow, and the user experience will be particularly poor. Summary of the invention
[0005] Embodiments of the present application provide a page rendering method, a page rendering apparatus, a page rendering device, a computer-readable storage medium, and a computer program product containing instructions, which are used to perform page rendering while improving page rendering performance.
[0006] In a first aspect, an embodiment of the present application provides a page rendering method, comprising:
[0007] If a trigger signal for generating a target page is detected, a plurality of target components and target DOM operations of the plurality of target components are determined;
[0008] Determine whether the status of the plurality of target components in the target component status table is a created status;
[0009] If the status of multiple target components in the target component status table is not a created status, multiple target components are created based on the target DOM operation of the multiple target components, and the status of multiple target components in the target component status table is updated to a created status to render and generate the target page.
[0010] In a second aspect, an embodiment of the present application provides a page rendering device, including:
[0011] A determination unit, configured to determine a plurality of target components and target DOM operations of the plurality of target components if a trigger signal for generating a target page is detected;
[0012] The determination unit is further used to determine whether the status of multiple target components in the target component status table is a created status;
[0013] A rendering unit is used to create multiple target components based on the target DOM operation of the multiple target components if the status of multiple target components in the target component status table is not a created status, and update the status of multiple target components in the target component status table to a created status, so as to render and generate the target page.
[0014] In a third aspect, an embodiment of the present application provides a page rendering device, including:
[0015] CPU, memory, input and output interfaces, wired or wireless network interfaces, and power supply;
[0016] The memory is a short-term storage memory or a persistent storage memory;
[0017] The central processing unit is configured to communicate with the memory and execute instruction operations in the memory to perform the aforementioned page rendering method.
[0018] In a fourth aspect, an embodiment of the present application provides a computer-readable storage medium, which includes instructions. When the instructions are executed on a computer, the computer executes the aforementioned page rendering method.
[0019] In a fifth aspect, an embodiment of the present application provides a computer program product comprising instructions, which, when the computer program product is run on a computer, enables the computer to execute the aforementioned page rendering method.
[0020] It can be seen from the above technical solutions that the embodiments of the present application have the following advantages: it can. BRIEF DESCRIPTION OF THE DRAWINGS
[0021] Figure 1 A schematic diagram of a flow chart of a page rendering method disclosed in an embodiment of the present application;
[0022] Figure 2 A flowchart of another page rendering method disclosed in an embodiment of the present application;
[0023] Figure 3 A schematic diagram of the structure of a page rendering device disclosed in an embodiment of the present application;
[0024] Figure 4 A schematic diagram of the structure of a page rendering device disclosed in an embodiment of the present application. DETAILED DESCRIPTION
[0025] Embodiments of the present application provide a page rendering method, a page rendering apparatus, a page rendering device, a computer-readable storage medium, and a computer program product containing instructions, which are used to perform page rendering while improving page rendering performance.
[0026] Some key terms in the examples of this application are explained as follows:
[0027] Vue3: Vue.js 3.x version is a progressive JavaScript framework for building user interfaces.
[0028] TS: TypeScript, a superset language developed by Microsoft, extends JavaScript and provides static type checking and object-oriented programming capabilities.
[0029] SPA: Single Page Application, a single-page application, is an architecture of a web application in which all content is loaded in a single HTML page and dynamically updated through JavaScript.
[0030] VITE: Command line, a startup interface that interacts with the computer through text commands.
[0031] Dynamic responsiveness: Dynamic responsiveness refers to automatically adjusting the page layout and content display based on user input, data changes, or screen size. Usually, responsive design is applied to different devices and screen sizes to maintain a good user experience.
[0032] Componentized architecture: Componentized architecture means breaking down an application into multiple independent, reusable modules or components. Each component is responsible for an independent function or view, and the components interact through clear interfaces. It helps improve development efficiency, maintainability, and scalability.
[0033] Virtual DOM: Virtual DOM is a lightweight representation for efficiently updating the interface. Vue3 uses virtual DOM to compare DOM changes, thereby only updating the parts that actually need to be changed to improve performance.
[0034] See also Figure 1 , Figure 1 A schematic diagram of a page rendering method disclosed in an embodiment of the present application, the method comprising:
[0035] 101. If a trigger signal for generating a target page is detected, multiple target components and target DOM operations of the multiple target components are determined.
[0036] In this embodiment, when a page is rendered, if a trigger signal for generating a target page is detected, multiple target components and target DOM operations of the multiple target components may be determined.
[0037] Specifically, when building a web page, a single Vue component may represent the functionality or structure of the entire page. A target component can also correspond to a page, representing the functionality or structure of the entire page, or it can correspond to a specific component in a page, representing a part of the page layout, such as a widget nested inside a large component, such as a navigation bar, header, footer, list, table, grid, or a part used to display data, such as a card component or a carousel. Target DOM operations refer to operations performed on the actual browser document object model (DOM) during the page construction process, such as adding, modifying, or deleting elements. Target DOM operations can be used to represent specific HTML and CSS changes required to achieve the final state of the page.
[0038] It is understandable that the page rendering framework of the present application may include but is not limited to a single page application (SPA) optimization framework combining Vue3 and TypeScript, or a single page application framework based on React.
[0039] 102. Determine whether the status of multiple target components in the target component status table is a created status.
[0040] After determining the multiple target components, it may be determined whether the states of the multiple target components in the target component state table are in a created state.
[0041] Specifically, the target component state table can record the state of each component, which is a created state or an uncreated state. The created state is used to indicate that the component has been created on a previous page, and the uncreated state is used to indicate that the component has not been created on a previous page.
[0042] It is worth mentioning that the target component status table can be used to determine whether the status of multiple target components is in the created state, and only incremental updates (creations) are performed on components whose status is not in the created state. This can reduce unnecessary DOM operations and resource overhead, and improve the performance of page rendering.
[0043] 103. If the status of multiple target components in the target component status table is not a created status, multiple target components are created based on the target DOM operation of the multiple target components, and the status of the multiple target components in the target component status table is updated to a created status to render and generate a target page.
[0044] After determining whether the status of multiple target components in the target component status table is the created state, if the status of multiple target components in the target component status table is not the created state, multiple target components can be created based on the target DOM operation of the multiple target components, and the status of the multiple target components in the target component status table can be updated to the created state to render and generate the target page.
[0045] Specifically, for example, if the target page needs to render multiple product card components, and in the target component status table, the status of these multiple product card components is not the created status, then the system will create a new card instance based on the template of each card component and the required data, and update the status of these product card components in the target component status table to the created status to render and generate the target page.
[0046] In the embodiment of the present application, the target component status table can be used to determine whether the status of multiple target components is in the created state, and only the components whose status is not in the created state can be incrementally updated (created), without having to create the entire page from scratch every time, which can reduce unnecessary DOM operations and resource overhead, and the page rendering performance is higher. In particular, for large or complex pages, it can significantly improve the page loading speed and user experience.
[0047] based on Figure 1 In the described embodiment, during the page rendering process, although only components whose status is not created can be incrementally updated (created) to render and generate the target page, for the created components, when the user returns to a previously visited page or enters a new page that requires the created component, the page rendering performance may still be low. In order to solve the above problem, the following is a detailed embodiment of this solution that can be optionally executed during implementation. Please refer to Figure 2 , Figure 2 This is a flow chart of another page rendering method disclosed in an embodiment of the present application. The method of another embodiment of the page rendering method of the present application includes:
[0048] 201. If a trigger signal for generating a target page is detected, multiple target components and target DOM operations of the multiple target components are determined.
[0049] 202. Determine whether the status of multiple target components in the target component status table is a created status.
[0050] Steps 201 to 202 in this embodiment are similar to those in the previous Figure 1 Steps 101 to 102 in the illustrated embodiment are similar and will not be described in detail here.
[0051] Specifically, the component records a life cycle state, and the component life cycle state may include initialization (creation), destruction (stop using), mounting (inserting into DOM), and uninstallation (removing from DOM). The created state can be determined by the component life cycle state. If the component life cycle state is creation or mounting, it can be determined that the state of the component in the component state table is created.
[0052] It is worth mentioning that the intelligent component lifecycle management of the present application can ensure that components can be effectively reused throughout the entire lifecycle (initialization, destruction, mounting and uninstallation), reducing resource consumption. For example, when a user leaves a page, the relevant components will be automatically uninstalled, and when the user returns, they can be quickly restored from the pre-rendered data without re-creation. For example, in a news application, the details page component of each article is created and uninstalled on demand, saving a lot of memory and CPU resources. Secondly, the present application finely controls the process of component state transition. For example, the created component will start to participate in the DOM when the lifecycle state becomes mounted. When it is no longer needed (such as the user navigates to other pages), the component will be uninstalled and the state will be saved. It will be quickly restored the next time you enter the relevant page, further improving the overall application responsiveness and user experience.
[0053] 203. If the status of multiple target components in the target component status table is not a created status, multiple target components are created based on the target DOM operation of the multiple target components, and the status of the multiple target components in the target component status table is updated to a created status to render and generate a target page.
[0054] Step 203 in this embodiment is similar to the aforementioned Figure 1 Step 103 in the illustrated embodiment is similar and will not be described in detail here.
[0055] 204. If the status of multiple target components in the target component status table is the created status, a target page is generated based on the pre-rendering data of the multiple target components in the target component status table, wherein the target component status table includes the pre-rendering data of the components in the created status.
[0056] After determining whether the status of multiple target components in the target component status table is a created state, if the status of multiple target components in the target component status table is a created state, a target page can be rendered and generated based on the pre-rendered data of the multiple target components in the target component status table, and the target component status table includes pre-rendered data of components whose status is a created state.
[0057] Specifically, for example, on an e-commerce website, when a user browses a product details page, there is a pre-rendered component named XX, which contains the user's shopping cart information and favorites data. When the user leaves the details page and enters other pages (such as the shopping cart or personal center), the system saves part of the state of the user data in the XX component (the user's product selection and browsing history). When the user returns to the product details page, the system no longer reloads the entire component, but finds the pre-rendered version that has been created and contains the user data from the target component state table, and directly uses this data for rendering. This method saves time for network requests and DOM operations, improves the response speed of the page, and also maintains the user's personalized experience.
[0058] It is worth mentioning that when a component completes its life cycle and is no longer needed during the application (for example, the user leaves the page), the user data related to the component will be used as pre-rendered data and persisted or cached. When the user returns to a previously visited page or enters a new page, if the component and its data already exist and match, the system can directly obtain this data from the cache instead of re-requesting or creating the entire component, which can further improve the performance of page rendering.
[0059] It is also worth mentioning that "rendering and generating the target page based on the pre-rendered data of multiple target components in the target component state table" is a way of global state management. The target component state table can save the pre-rendered data of multiple target components, and these target components can be shared across projects. This distributed state management mode makes the state management of large applications clearer and reduces unnecessary synchronization overhead. In addition, components can be added and deleted from the target component state table, so the target component state table is scalable and maintainable.
[0060] In an embodiment of the present application, it is possible to determine whether the states of multiple target components are in a created state through the target component state table, and only components whose states are not in a created state can be incrementally updated (created), without having to create the entire page from scratch every time, which can reduce unnecessary DOM operations and resource overhead, and the performance of page rendering is high. In particular, for large or complex pages, the page loading speed and user experience can be significantly improved. Secondly, the user data of the created component can be used as pre-rendering data and saved, such as saving it to the target component state table. When the user returns to a previously visited page or enters a new page that requires the created component, the pre-rendering data of the created component can be directly obtained from the target component state table, thereby further improving the page rendering performance.
[0061] based on Figure 1 and Figure 2On this basis, in order to further improve the performance of page rendering, you can also use the following specific implementation methods to perform page rendering. For specific implementation methods, please refer to the following description:
[0062] Among them, if a trigger signal for generating a target page is detected, a method for determining multiple target components and target DOM operations of multiple target components may be: if a trigger signal for generating an initial page is detected, multiple target components and target DOM operations of multiple target components are determined, and the initial page is the target page, and / or if a trigger signal for switching from a first page to a second page is detected, multiple target components and target DOM operations of multiple target components are determined based on difference information between the second page and the first page, and the second page is the target page.
[0063] Specifically, if a trigger signal for generating an initial page (initialization page, i.e., the first page) is detected, multiple target components and target DOM operations of the multiple target components are determined, and the initial page is the target page, and / or if a trigger signal for switching from a first page to a second page is detected, multiple target components (components that exist on the first page but not on the second page, and components that exist on the second page but not on the first page) and target DOM operations of the multiple target components are determined based on the difference information between the second page and the first page (components that exist on the first page but not on the second page, and components that exist on the second page but not on the first page), and the second page is the target page.
[0064] Among them, if a trigger signal for switching from a first page to a second page is detected, a method for determining multiple target components based on the difference information between the second page and the first page, and target DOM operations of multiple target components may be to first determine the first component tree of the first page and the second component tree of the second page, and then determine the difference components between the second component tree and the first component tree, and determine multiple target components based on the difference components, and target DOM operations of multiple target components.
[0065] Specifically, the component tree is a data structure used to represent the component information contained in the page, and the component tree includes multiple component nodes. Secondly, the comparison between the second page and the first page can be achieved through the virtual DOM, which is a lightweight memory representation that can be used to compare the existing DOM and the expected state, so that only the necessary parts can be updated. This incremental rendering technology can reduce the number of DOM operations and optimize page rendering performance.
[0066] Among them, a method for creating multiple target components based on a target DOM operation of multiple target components, and updating the status of multiple target components in a target component status table to a created status to render and generate a target page may be: first, dividing the multiple target components into multiple batches to obtain multiple component combinations, the multiple component combinations include a first component combination and a second component combination, the number of components of the first component combination is less than the number of components of the second component combination, and then, based on the target DOM operation of the components of the first component combination, creating components of the first component combination, and updating the status of the components of the first component combination in the target component status table to a created status to render and generate a third page, and finally, based on the target DOM operation of the components of the second component combination, creating components of the second component combination, and updating the status of the components of the second component combination in the target component status table to a created status to render and generate the target page based on the third page.
[0067] It is worth mentioning that using a batch rendering strategy, such as loading a small number of key components first and then loading more components later, can display content to users faster and provide a better user experience.
[0068] Among them, if a trigger signal for generating a target page is detected, a method for determining multiple target components and target DOM operations of multiple target components may be, if a trigger signal for generating a target page is detected, multiple first components and target DOM operations of multiple first components are determined, and then based on the target page and the user's historical data, the predicted components of the next page of the target page and the predicted components are predicted, and then the multiple first components and the predicted components are used as multiple target components, and the target DOM operations of the multiple first components and the target DOM operations of the predicted components are used as the target DOM operations of multiple target components.
[0069] It is worth mentioning that this intelligent routing lazy loading mechanism relies on user behavior prediction and pre-loads components that may be accessed, which can reduce the delay when switching pages and improve overall performance and satisfaction.
[0070] Among them, the method of predicting the prediction component of the next page of the target page based on the target page and the user's historical data, and the target DOM operation of the prediction component can be, through a deep learning model, predicting the user's preference information based on the target page and the user's historical data, determining the target project identifier based on the preference information, and determining the prediction component based on the target project identifier, and the target DOM operation of the prediction component, the component of the target component status table is marked with the project identifier.
[0071] Specifically, through a deep learning model, the user's preference information is predicted based on the target page and the user's historical data, the target project identifier is determined based on the preference information, and the prediction component is determined based on the target project identifier. This method of first determining the preference information, then determining the target project identifier, and then determining the prediction component can improve the efficiency and completeness of determining the prediction component.
[0072] Among them, the method of creating multiple target components based on the target DOM operation of multiple target components, and updating the status of multiple target components in the target component status table to the created status to render and generate the target page can be, based on the target DOM operation of multiple target components, creating multiple target components and URLs corresponding to the multiple target components, and updating the status of multiple target components in the target component status table to the created status to render and generate the target page based on the URLs corresponding to the multiple target components.
[0073] It is worth mentioning that the URL of the target component can only contain the information of the component, not the information of other components, which is highly secure. When generating a page, the page of the component can be directly generated without generating the page of the previous component first and then generating the page of the component, which improves the efficiency of page rendering and saves resources. Therefore, for complex nested routing structures, this improved routing parameter transmission mechanism simplifies the implementation of nested routing, ensures the security and efficiency of data transmission between routes, and improves development efficiency.
[0074] It is also worth mentioning that the present application can also dynamically adjust the rendering strategy based on the actual load. Specifically, it introduces a dynamic scheduling mechanism based on performance monitoring, which can dynamically adjust the rendering strategy according to the load of the current page and optimize the performance in large data volumes or high-frequency interaction scenarios.
[0075] It is understandable that if the data of the component is upgraded / modified in the server, the upgraded / modified data can be synchronized to the client (browser, front-end page) to achieve data flow and two-way binding optimization. This improved data flow management method solves the performance bottleneck caused by two-way binding and state synchronization in some scenes in traditional Vue3. Especially in the scene of large-scale data interaction, invalid component re-rendering and state synchronization operations are reduced. Secondly, in addition to being directly applied to the client (browser) to perform the above-mentioned page rendering steps, the page rendering method of the present application can also be performed by the server-side The above-mentioned page rendering steps, and then the target page generated by the rendering is sent to the client.
[0076] It is understandable that the target page generated by rendering can also be adaptively adjusted to the preset screen size according to the preset screen size of the client screen, and then displayed on the client screen.
[0077] The page rendering method in the embodiment of the present application is described above. The page rendering device in the embodiment of the present application is described below. Figure 3 , an embodiment of the page rendering device in the embodiment of the present application includes:
[0078] A determination unit, configured to determine a plurality of target components and target DOM operations of the plurality of target components if a trigger signal for generating a target page is detected;
[0079] The determination unit is further used to determine whether the status of multiple target components in the target component status table is a created status;
[0080] A rendering unit is used to create multiple target components based on the target DOM operation of the multiple target components if the status of multiple target components in the target component status table is not a created status, and update the status of multiple target components in the target component status table to a created status, so as to render and generate the target page.
[0081] The rendering unit is further used to render and generate the target page based on the pre-rendering data of the multiple target components in the target component status table if the status of multiple target components in the target component status table is a created state, and the target component status table includes the pre-rendering data of the components whose status is a created state.
[0082] The determination unit is specifically used to determine multiple target components and target DOM operations of the multiple target components if a trigger signal for generating an initial page is detected, and the initial page is the target page; if a trigger signal for switching from a first page to a second page is detected, multiple target components and target DOM operations of the multiple target components are determined based on difference information between the second page and the first page, and the second page is the target page.
[0083] The determination unit is specifically used to determine the first component tree of the first page and the second component tree of the second page, determine the difference components between the second component tree and the first component tree, and determine multiple target components based on the difference components, as well as target DOM operations of the multiple target components.
[0084] The rendering unit is specifically used to divide multiple target components into multiple batches to obtain multiple component combinations, the multiple component combinations include a first component combination and a second component combination, the number of components of the first component combination is less than the number of components of the second component combination, based on the target DOM operation of the components of the first component combination, create the components of the first component combination, and update the status of the components of the first component combination in the target component status table to a created status to render and generate a third page, based on the target DOM operation of the components of the second component combination, create the components of the second component combination, and update the status of the components of the second component combination in the target component status table to a created status to render and generate the target page based on the third page.
[0085] The determination unit is specifically used to determine multiple first components and target DOM operations of the multiple first components if a trigger signal for generating a target page is detected, predict a predicted component of the next page of the target page based on the target page and the user's historical data, and the target DOM operation of the predicted component, use the multiple first components and the predicted components as multiple target components, and use the target DOM operations of the multiple first components and the target DOM operations of the predicted components as the target DOM operations of the multiple target components.
[0086] The determination unit is specifically used to predict the user's preference information based on the target page and the user's historical data through a deep learning model, determine the target project identifier based on the preference information, and determine the prediction component and the target DOM operation of the prediction component based on the target project identifier, and the components of the target component status table are marked with project identifiers.
[0087] The rendering unit is specifically used to create multiple target components and URLs corresponding to the multiple target components based on the target DOM operation of the multiple target components, and update the status of the multiple target components in the target component status table to a created status, so as to generate the target page based on the URL rendering corresponding to the multiple target components.
[0088] In the embodiment of the present application, the target component status table can be used to determine whether the status of multiple target components is in the created state, and only the components whose status is not in the created state can be incrementally updated (created), without having to create the entire page from scratch every time, which can reduce unnecessary DOM operations and resource overhead, and the performance of page rendering is higher. In particular, for large or complex pages, it can significantly improve page loading speed and user experience.
[0089] See below Figure 4Another embodiment of the page rendering device 400 in the embodiment of the present application includes:
[0090] CPU 401, memory 405, input / output interface 404, wired or wireless network interface 403 and power supply 402;
[0091] The memory 405 is a temporary storage memory or a permanent storage memory;
[0092] The CPU 401 is configured to communicate with the memory 405 and execute the instructions in the memory 405 to perform the aforementioned Figure 1 and Figure 2 The method in the illustrated embodiment.
[0093] The embodiment of the present application also provides a computer-readable storage medium, the computer-readable storage medium includes instructions, when the instructions are executed on a computer, the computer executes the aforementioned Figure 1 and Figure 2 The method in the illustrated embodiment.
[0094] The present application also provides a computer program product including instructions, which, when executed on a computer, enables the computer to execute the aforementioned Figure 1 and Figure 2 The method in the illustrated embodiment.
[0095] It should be understood that, although the various steps in the flowcharts involved in the above-mentioned embodiments are displayed in sequence according to the indication of the arrows, these steps are not necessarily executed in sequence according to the order indicated by the arrows. Unless there is a clear explanation in this article, the execution of these steps does not have a strict order restriction, and these steps can be executed in other orders. Moreover, at least a part of the steps in the flowcharts involved in the above-mentioned embodiments can include multiple steps or multiple stages, and these steps or stages are not necessarily executed at the same time, but can be executed at different times, and the execution order of these steps or stages is not necessarily to be carried out in sequence, but can be executed in turn or alternately with other steps or at least a part of the steps or stages in other steps.
[0096] Those skilled in the art can clearly understand that, for the convenience and brevity of description, the specific working processes of the systems, devices and units described above can refer to the corresponding processes in the aforementioned method embodiments and will not be repeated here.
[0097] In the several embodiments provided in the present application, it should be understood that the disclosed systems, devices and methods can be implemented in other ways. For example, the device embodiments described above are only schematic. For example, the division of the units is only a logical function division. There may be other division methods in actual implementation, such as multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be an indirect coupling or communication connection through some interfaces, devices or units, which can be electrical, mechanical or other forms.
[0098] The units described as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed on multiple network units. Some or all of the units may be selected according to actual needs to achieve the purpose of the solution of this embodiment.
[0099] In addition, each functional unit in each embodiment of the present application may be integrated into one processing unit, or each unit may exist physically separately, or two or more units may be integrated into one unit. The above-mentioned integrated unit may be implemented in the form of hardware or in the form of software functional units.
[0100] If the integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present application is essentially or the part that contributes to the prior art or all or part of the technical solution can be embodied in the form of a software product, and the computer software product is stored in a storage medium, including a number of instructions to enable a computer device (which can be a personal computer, a server, or a network device, etc.) to perform all or part of the steps of the method described in each embodiment of the present application. The aforementioned storage medium includes: U disk, mobile hard disk, read-only memory (ROM, read-on lymemory), random access memory (RAM, random access memory), disk or optical disk and other media that can store program codes.
Claims
1. A page rendering method, characterized in that: include: If a trigger signal for generating a target page is detected, a plurality of target components and target DOM operations of the plurality of target components are determined; Determine whether the status of the plurality of target components in the target component status table is a created status; If the status of multiple target components in the target component status table is not a created status, multiple target components are created based on the target DOM operation of the multiple target components, and the status of multiple target components in the target component status table is updated to a created status to render and generate the target page.
2. The method according to claim 1, characterized in that The target component state table includes pre-rendering data of components in a created state; After determining whether the states of the plurality of target components in the target component state table are in the created state, the method further comprises: If the states of the plurality of target components in the target component state table are in the created state, the target page is generated by rendering based on the pre-rendering data of the plurality of target components in the target component state table.
3. The method according to claim 1, characterized in that If a trigger signal for generating a target page is detected, a plurality of target components and target DOM operations of the plurality of target components are determined, including at least one of the following situations: If a trigger signal for generating an initial page is detected, a plurality of target components and target DOM operations of the plurality of target components are determined, the initial page being the target page; If a trigger signal for switching from a first page to a second page is detected, multiple target components and target DOM operations of the multiple target components are determined based on difference information between the second page and the first page, and the second page is the target page.
4. The method according to claim 3, characterized in that If a trigger signal for switching from the first page to the second page is detected, a plurality of target components and target DOM operations of the plurality of target components are determined based on difference information between the second page and the first page, including: Determine a first component tree for the first page and a second component tree for the second page; The difference components between the second component tree and the first component tree are determined, and a plurality of target components and target DOM operations of the plurality of target components are determined based on the difference components.
5. The method according to claim 1, characterized in that The target DOM operation based on the multiple target components creates the multiple target components, and updates the status of the multiple target components in the target component status table to a created status, so as to render and generate the target page, including: Dividing the plurality of target components into a plurality of batches to obtain a plurality of component combinations, the plurality of component combinations comprising a first component combination and a second component combination, the number of components in the first component combination being less than the number of components in the second component combination; Create a component of the first component combination based on a target DOM operation of the component of the first component combination, and update the state of the component of the first component combination in the target component state table to a created state, so as to render and generate a third page; Create the components of the second component combination based on the target DOM operation of the components of the second component combination, and update the status of the components of the second component combination in the target component status table to a created status, so as to generate the target page based on the third page rendering.
6. The method according to claim 1, characterized in that If a trigger signal for generating a target page is detected, a plurality of target components and target DOM operations of the plurality of target components are determined, including: If a trigger signal for generating a target page is detected, a plurality of first components and target DOM operations of the plurality of first components are determined; A prediction component for predicting the next page of the target page based on the target page and the user's historical data, and a target DOM operation of the prediction component; The plurality of first components and the predicted components are used as the plurality of target components, and the target DOM operations of the plurality of first components and the target DOM operations of the predicted components are used as the target DOM operations of the plurality of target components.
7. The method according to claim 6, characterized in that The components of the target component status table are marked with project identifiers; The prediction component for predicting the next page of the target page based on the target page and the historical data of the user, and the target DOM operation of the prediction component, include: Through a deep learning model, the user's preference information is predicted based on the target page and the user's historical data, a target item identifier is determined based on the preference information, and the prediction component and the target DOM operation of the prediction component are determined based on the target item identifier.
8. The method according to claim 1, characterized in that The target DOM operation based on the multiple target components creates the multiple target components, and updates the status of the multiple target components in the target component status table to a created status, so as to render and generate the target page, including: Based on the target DOM operation of the multiple target components, multiple target components and URLs corresponding to the multiple target components are created, and the status of the multiple target components in the target component status table is updated to a created status, so as to generate the target page based on the URL rendering corresponding to the multiple target components.
9. A page rendering device, characterized in that: include: A determination unit, configured to determine a plurality of target components and target DOM operations of the plurality of target components if a trigger signal for generating a target page is detected; The determination unit is further used to determine whether the status of multiple target components in the target component status table is a created status; A rendering unit is used to create multiple target components based on the target DOM operation of the multiple target components if the status of multiple target components in the target component status table is not a created status, and update the status of multiple target components in the target component status table to a created status, so as to render and generate the target page.
10. A page rendering device, characterized in that: include: CPU and memory; The memory is a short-term storage memory or a persistent storage memory; The central processing unit is configured to communicate with the memory and execute instructions in the memory to perform the method according to any one of claims 1 to 8.
11. A computer-readable storage medium, characterized in that: The computer-readable storage medium comprises instructions, and when the instructions are executed on a computer, the computer is caused to perform the method according to any one of claims 1 to 8.
12. A computer program product comprising instructions, characterized in that When the computer program product is run on a computer, the computer is caused to execute the method according to any one of claims 1 to 8.