Page rendering method and device, electronic equipment and computer readable storage medium
By creating a virtual DOM tree and determining the rendering page encoding according to preset rendering rules, the problem of long rendering time when page jumps is solved, fast loading and low white screen time are achieved, and user experience is improved.
Patent Information
- Application Number
- CN202411487586.9
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-10-23
- Publication Date
- 2025-02-11
AI Technical Summary
In the prior art, the new page rendering time is long when the page is redirected, causing users to see a white screen, affecting the user experience.
By receiving page display instructions, a virtual document object model DOM tree is created, and the rendering page encoding of the page to be rendered is determined according to the preset rendering rules, thereby obtaining page data and generating virtual nodes, rendering and displaying the page.
It avoids duplicate data requests, improves page loading speed, reduces white screen time, and improves user experience.
Smart Images
Figure CN119415792A_ABST
Abstract
Description
Technical Field
[0001] The present disclosure relates to the field of computer technology, and in particular to a page rendering method, device, electronic device, and computer-readable storage medium. Background Art
[0002] During the normal web page loading process, if a route switch occurs, the terminal device needs to re-request and render the data and elements of the web page, which results in the need to re-acquire static resources and page-related data and re-render the page when the page switches. Re-requesting data and re-rendering the page will cause display delays on the display screen of the terminal device, and the user sees a white screen for a period of time, affecting the user experience.
[0003] In the prior art, the white screen time of the display screen of the terminal device can be shortened by pre-rendering an inline frame iframe or pre-rendering a block-level element div in the page. However, pre-rendering an iframe requires re-requesting page data and rendering a new iframe, which can only shorten the white screen time relatively. Pre-rendering the div in the page can solve the problem of re-requesting data, but does not solve the problem of repeated rendering of the page, and when the data of the page is updated, the div in the pre-rendered page may not match the updated page data. Summary of the invention
[0004] In view of this, the embodiments of the present disclosure provide a page rendering method, device, electronic device and computer-readable storage medium to solve the problem in the prior art that when a page jumps, a new page takes a long time to render, a white screen is seen, and the user experience is affected.
[0005] A first aspect of an embodiment of the present disclosure provides a page rendering method, including:
[0006] Receive a page display instruction, and create a virtual document object model DOM tree based on the page display instruction, wherein the page display instruction includes a page code corresponding to the page to be displayed;
[0007] According to the preset rendering rule, determine the rendering page code of the page to be rendered from the page code;
[0008] Based on each rendering page code, the page data of each to-be-rendered page is obtained; based on each rendering page code and the page data corresponding to the rendering page code, a virtual node corresponding to each rendering page code is generated, where the virtual node is a child node of the virtual DOM tree, and each page code corresponds to one virtual node;
[0009] Rendering the page to be rendered based on the virtual node corresponding to the rendering page code, and displaying the rendered page to be displayed on the target screen based on the page code;
[0010] The preset rendering rule is that if the page code is the page code corresponding to the first page, the page code and the page codes corresponding to the two adjacent pages after the page code are determined as the rendering page code; if the page code is the page code corresponding to a non-first page, the previous page code and the next page code adjacent to the page code are determined as the rendering page code.
[0011] A second aspect of the embodiments of the present disclosure provides a page rendering device, including:
[0012] A creation module is configured to receive a page display instruction and create a virtual document object model DOM tree based on the page display instruction, wherein the page display instruction includes a page code corresponding to the page to be displayed;
[0013] A first processing module is configured to determine a rendering page code of a to-be-rendered page from the page code according to a preset rendering rule;
[0014] The second processing module is configured to obtain page data of each to-be-rendered page based on each rendering page code, and generate a virtual node corresponding to each rendering page code based on each rendering page code and the page data corresponding to the rendering page code, where the virtual node is a child node of the virtual DOM tree, and each page code corresponds to one virtual node;
[0015] A rendering module is configured to render the page to be rendered based on the virtual node corresponding to the rendering page code, and display the rendered page to be displayed on the target screen based on the page code;
[0016] The preset rendering rule is that if the page code is the page code corresponding to the first page, the page code and the page codes corresponding to the two adjacent pages after the page code are determined as the rendering page code; if the page code is the page code corresponding to a non-first page, the previous page code and the next page code adjacent to the page code are determined as the rendering page code.
[0017] According to a third aspect of an embodiment of the present disclosure, an electronic device is provided, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the steps of the above method when executing the computer program.
[0018] According to a fourth aspect of the embodiments of the present disclosure, a computer-readable storage medium is provided, which stores a computer program, and when the computer program is executed by a processor, the steps of the above method are implemented.
[0019] Compared with the prior art, the disclosed embodiment has the following beneficial effects: receiving a page display instruction, creating a virtual document object model DOM tree according to the page display instruction, wherein the page display instruction includes a page code corresponding to the page to be displayed, determining the rendering page code of the page to be rendered from the page code according to the preset rendering rule, obtaining the page data of each page to be rendered according to each rendering page code, generating a virtual node corresponding to each rendering page code, wherein the virtual node is a child node of the virtual DOM tree, each page code corresponds to a virtual node, rendering the page to be rendered according to the virtual node corresponding to the rendering page code, and displaying the rendered page to be displayed to the target screen according to the page code corresponding to the page to be displayed. The preset rendering rule is that when the page code is the page code corresponding to the first page, the page code and the page code corresponding to the two adjacent pages after the page code are determined as the rendering page code; when the page code is the page code corresponding to a non-first page, the previous page code and the next page code adjacent to the page code are determined as the rendering page code. According to the preset rendering rules, when switching pages and there is a corresponding rendered page, repeated data requests can be avoided, thereby improving the page loading speed. At the same time, by rendering the page encoded by the rendering page, re-rendering can be avoided when viewing the corresponding page, reducing the white screen time and improving the user experience. BRIEF DESCRIPTION OF THE DRAWINGS
[0020] In order to more clearly illustrate the technical solutions in the embodiments of the present disclosure, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present disclosure. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.
[0021] Figure 1 It is a flowchart of a page rendering method provided by an embodiment of the present disclosure;
[0022] Figure 2 It is a flow chart of displaying a rendered page to be displayed according to a cache queue provided by an embodiment of the present disclosure;
[0023] Figure 3 is a flow chart of another page rendering method provided by an embodiment of the present disclosure;
[0024] Figure 4 is a schematic diagram of a page rendering device provided by an embodiment of the present disclosure;
[0025] Figure 5 It is a structural schematic diagram of an electronic device provided by an embodiment of the present disclosure. DETAILED DESCRIPTION
[0026] In the following description, specific details such as specific system structures and technologies are provided for the purpose of illustration rather than limitation, so as to provide a thorough understanding of the embodiments of the present disclosure. However, it should be clear to those skilled in the art that the present disclosure may be implemented in other embodiments without these specific details. In other cases, detailed descriptions of well-known systems, devices, circuits, and methods are omitted to avoid obstructing the description of the present disclosure with unnecessary details.
[0027] A page rendering method and device according to an embodiment of the present disclosure will be described in detail below with reference to the accompanying drawings.
[0028] Figure 1 It is a flow chart of a page rendering method provided by an embodiment of the present disclosure. Figure 1 The receiving page display instruction in the page rendering method can be executed by the client, the part of rendering the page content can be executed by the server or the client, and the displaying of the rendered page to be displayed on the target screen can be executed by the client. Figure 1 As shown, the page rendering method includes:
[0029] S101, receiving a page display instruction, and creating a virtual document object model DOM tree based on the page display instruction;
[0030] Wherein, the page display instruction includes the page code corresponding to the page to be displayed;
[0031] S102, determining a rendering page code of a page to be rendered from page codes according to a preset rendering rule;
[0032] S103, acquiring page data of each to-be-rendered page based on each rendering page code, and generating a virtual node corresponding to each rendering page code based on each rendering page code and the page data corresponding to the rendering page code;
[0033] Among them, the virtual node is the child node of the virtual DOM tree, and each page code corresponds to a virtual node;
[0034] S104, rendering the page to be rendered based on the virtual node corresponding to the rendering page code, and displaying the rendered page to be displayed on the target screen based on the page code;
[0035] Among them, the preset rendering rule is that if the page code is the page code corresponding to the first page, the page code and the page codes corresponding to the two adjacent pages after the page code are determined as the rendering page code; if the page code is the page code corresponding to a non-first page, the previous page code and the next page code adjacent to the page code are determined as the rendering page code.
[0036] Specifically, a page display instruction is received and parsed, so that a virtual document object model DOM tree can be created according to the page display instruction. The page display instruction includes a page code corresponding to the page to be displayed. The page code is a unique identifier of the page and is used to distinguish different pages.
[0037] The page display instruction may be transmitted via a Hypertext Transfer Protocol (HTTP) request, a full-duplex communication protocol WebSocket message, or an event transmission within an application.
[0038] The virtual DOM tree is a representation of the actual DOM tree in memory, which can be used to efficiently update pages without directly operating the DOM, thereby improving performance. When constructing a virtual DOM tree, it can be implemented through frameworks such as JavaScript (a lightweight programming language), React (a framework for building user pages), and Vue (a framework for building user pages). The root node of the virtual DOM tree can represent the root container of all pages in the entire application.
[0039] The root node of the virtual DOM tree may be a div (division) node, which is used to represent a block-level element in a document. The div node may be understood as a container, which includes multiple other child nodes, namely, child nodes of the virtual DOM tree.
[0040] In addition, according to the preset rendering rule, the rendering page code of the page to be rendered is determined from the page codes of all the pages, that is, the rendering page code corresponding to the page content that needs to be rendered is determined.
[0041] Among them, the preset rendering rule is: if the page code is the page code corresponding to the first page, the page code and the page codes corresponding to the two adjacent pages after the page code are determined as the rendering page code. For example, the current rule for all page codes is a positive integer starting from 1, and the page code included in the page display instruction is 1. It can be seen that the page code corresponding to the page display instruction is the page code corresponding to the first page, and the rendering page codes are 1, 2 and 3.
[0042] If the page code is not the page code corresponding to the first page, the previous page code and the next page code adjacent to the page code are determined as the rendering page code. For example, the current rule for all page codes is a positive integer starting from 1, and the page code included in the page display instruction is 3. It can be seen that the page code corresponding to the page display instruction is not the page code corresponding to the first page, and the rendering page codes are 2, 3 and 4.
[0043] In addition, according to each rendering page code, the page data corresponding to the rendering page code is obtained from the backend or local storage, and the virtual node corresponding to the rendering page code is generated according to the rendering page code and the page data corresponding to the rendering page code, wherein the virtual node is a child node of the virtual DOM tree, and each page code corresponds to a virtual node.
[0044] The page data may be a HyperText Markup Language (HTML) string, a JSON (JavaScript Object Notation) object or other formats, and the specific format needs to be parsed according to the actual situation.
[0045] Furthermore, the preset rendering rules also include: when a page display instruction is not received for the first time, traversing the virtual DOM tree according to the page code corresponding to the page display instruction, if the traversal result is that there is no child node corresponding to the page code, generating the child node corresponding to the page code, if the traversal result is that there is a child node corresponding to the page code, directly calling the child node.
[0046] In addition, the page to be rendered is rendered according to the virtual node corresponding to the rendering page code. After the rendering is completed, the rendered page to be displayed is displayed on the target screen, wherein the target screen may be a browser window or a screen of a mobile device.
[0047] Furthermore, the virtual DOM tree can be converted into an actual DOM tree through the front-end rendering mechanism, and the rendering image can be rendered through the VUE rendering engine to generate a real HTML page, which is then displayed on the target screen.
[0048] According to the technical solution provided by the embodiment of the present disclosure, the rendering page code can be determined through the virtual DOM tree and the preset rendering rules, so as to determine the page data corresponding to the rendering page code, and render the page to be displayed to avoid re-requesting data when switching pages, thereby improving the page loading speed, greatly reducing the white screen time on the target screen, and improving the user experience.
[0049] In some embodiments, after rendering the page to be rendered based on the virtual node corresponding to the rendering page code and displaying the rendered page to be displayed on the target screen, the method further includes:
[0050] When receiving the updated page display instruction, obtaining the updated page code based on the updated page display instruction;
[0051] Based on the updated page code, update the rendering page code;
[0052] Traverse the virtual DOM tree to determine whether the virtual node corresponding to the updated rendering page code is stored in the virtual DOM tree;
[0053] If so, directly render the updated rendering page through the virtual node corresponding to the updated rendering page code in the virtual DOM tree;
[0054] If not, execute the steps of obtaining page data of each page to be rendered, obtaining page data of each page to be rendered based on each rendering page code, generating virtual nodes corresponding to each rendering page code based on each rendering page code and the page data corresponding to the rendering page code, and updating the virtual nodes included in the virtual DOM tree.
[0055] Specifically, when an updated page display instruction is received, the updated page code is obtained according to the updated page display instruction, and the current rendering page code is updated according to the updated page code. For example, if the current rendering page code is 1, 2, and 3, and the updated page display instruction is 6, the rendering page code is updated to 5, 6, and 7.
[0056] In addition, the virtual DOM tree is traversed to determine whether a virtual node corresponding to the updated rendering page code is stored in the current DOM tree. If a virtual node with the same virtual node as the updated rendering page code already exists in the virtual DOM tree, the existing virtual node is directly used for rendering, thereby improving rendering efficiency.
[0057] In addition, if there is no virtual node identical to the updated rendered page code in the virtual DOM tree, page data related to the updated page code is obtained from the server or local storage, a corresponding new virtual node is generated in the virtual DOM tree according to the newly obtained page data, and the virtual nodes included in the virtual DOM tree are updated.
[0058] For example, if the updated rendering page codes are 5, 6, and 7, and there is a virtual node corresponding to the page code 5 in the virtual DOM tree, then the virtual node with the page code 5 can be directly called for rendering, and the page data corresponding to the page codes 6 and 7 can be obtained at the same time, and the virtual nodes corresponding to the page codes 6 and 7 are generated, and updated to the virtual nodes included in the virtual DOM tree.
[0059] Further, according to the updated virtual DOM tree, the page to be displayed corresponding to the updated page display instruction is rendered, and the updated and rendered page to be displayed is displayed on the target screen.
[0060] According to the technical solution provided by the embodiment of the present disclosure, the virtual DOM tree can be updated according to the page display instruction, thereby minimizing the operation of the actual DOM tree, and the page can be updated synchronously, so that when the user switches pages, the page data is avoided from being re-requested, so that the page data can be continuously preloaded and the page can be pre-rendered, thereby reducing the white screen time of the display screen, and further improving the page loading speed and user experience.
[0061] In some embodiments, based on each rendering page code and page data corresponding to the rendering page code, generating a virtual node corresponding to each rendering page code includes:
[0062] Parse the data of each page to obtain the data structure and syntax structure of the data of each page;
[0063] For each rendering page code, the rendering page code is used as an index, and based on the data structure and syntax structure of the page data, a virtual node corresponding to the rendering page code is generated by creating a virtual node createVNode function.
[0064] Specifically, in front-end development, especially when using a JavaScript framework (such as Vue) for page rendering, since the data may exist in multiple formats, such as JSON, XML, etc., it is necessary to parse the data of each page to convert it into a data structure and grammatical structure that JavaScript can understand and operate, wherein the parsed page data can be a JavaScript object or array.
[0065] Furthermore, based on the parsed data structure, the relationship between the hierarchical structure in the page data and the elements of the page can be understood, and the grammatical structure can be used to enable developers to understand how the page data is mapped to the visual and interactive elements of the page.
[0066] In addition, each rendered page code is taken as a child node of a virtual DOM tree, and the specific rendered page code is taken as the index of the child node, the data structure and syntax structure of the parsed page data are taken as the content of the child node, and a virtual node corresponding to the rendered page code is generated by creating a virtual node createVNode function.
[0067] Furthermore, the created virtual node is returned so as to render the virtual node corresponding to the rendering page code, and the virtual node corresponding to the page code of the page to be displayed included in the page display instruction is displayed on the target screen.
[0068] According to the technical solution provided by the embodiment of the present disclosure, a virtual node corresponding to the rendering page code can be generated by creating a virtual node function, so as to achieve pre-rendering according to the virtual node. When the page code of the page to be displayed in the page display instruction is updated, the virtual DOM tree can be traversed to determine whether the content corresponding to the page code has been rendered, thereby reducing the white screen time when the page jumps.
[0069] In some embodiments, receiving a page display instruction and creating a virtual hierarchical DOM tree includes:
[0070] receiving a page display instruction, and sending a quantity request to the cloud based on the page display instruction, wherein the quantity request is used to request the total quantity of pages to be displayed;
[0071] Receive the total quantity sent by the cloud based on the quantity request, and create a virtual DOM tree based on the total quantity return result.
[0072] Specifically, a page display instruction is received, wherein the page display instruction is implemented through the interaction between the front end and the back end or the server. According to the page display instruction, the front end communicates with the back end or the server to send a quantity request to the cloud according to the content in the page display instruction, wherein the quantity request is used to request the total number of pages to be displayed, that is, according to the preset rendering rules, the total number of pages to be displayed is determined according to the page display instruction and the current virtual DOM tree, and then the request content of the quantity request is determined.
[0073] For example, the page codes of the pages to be displayed in the page display instruction are pages 5, 6, and 7, and the current virtual DOM tree includes a virtual child node corresponding to page 5, but there are no virtual child nodes corresponding to pages 6 and 7. Then the request content of the quantity request is 2 pages, and includes data of pages 6 and 7, so as to generate virtual child nodes corresponding to pages 6 and 7 in the virtual DOM tree.
[0074] Furthermore, after receiving the quantity request, the cloud performs a corresponding database query or database retrieval operation according to the parameters in the quantity request to obtain and return the content requested in the quantity request.
[0075] In addition, the total number of pages to be displayed sent by the cloud based on the quantity request is received, and a virtual DOM tree is created according to the total number return result, wherein the virtual DOM object can be generated through the rendering function in the JavaScript framework (such as React, Vue, etc.) and the actual DOM object (document.createElement), so as to obtain the virtual node corresponding to the page to be rendered, create and update the virtual DOM tree, and use the virtual node as the basis for rendering the page to be displayed, thereby improving the efficiency of page rendering.
[0076] The virtual DOM tree is a tree that takes a basic div node as a root node, and each virtual node corresponding to a to-be-displayed page is a child node of the root node.
[0077] Furthermore, the number of virtual nodes in the virtual DOM tree can be determined according to the total number of pages returned, so that the page data can be filled into the virtual DOM tree according to the page code in the page display instruction, thereby achieving the purpose of pre-rendering the page.
[0078] According to the technical solution provided by the embodiment of the present disclosure, it is possible to communicate with the cloud, receive page display instructions and create a virtual DOM tree, thereby achieving the purpose of efficient page rendering.
[0079] In some embodiments, rendering a page to be rendered based on a virtual node corresponding to the rendering page code includes:
[0080] Map each virtual node based on the rendering function to obtain the actual node corresponding to the virtual node;
[0081] Based on the codes of each rendering page and the corresponding actual nodes, the pages to be rendered are rendered.
[0082] Specifically, the virtual DOM tree includes virtual nodes, which are used to represent the structure of the real DOM in memory. Virtual nodes are lightweight JavaScript objects that describe the structure of the DOM (such as tag names, attributes, child nodes, etc.). For virtual nodes that do not exist in the current virtual DOM tree, the rendering function is used to map each virtual node to obtain the actual node corresponding to the virtual node.
[0083] In addition, the pages to be rendered are rendered according to the codes of each rendering page and the corresponding actual nodes, thereby achieving the purpose of pre-rendering.
[0084] In the process of mapping each virtual node through the rendering function, the components, templates, etc. included in the current page are parsed, the virtual nodes are mounted on the root node of the virtual DOM tree, and the corresponding real DOM structure is created.
[0085] Furthermore, when the data in the page changes, that is, the data in the virtual node changes, such as user interaction, data update, etc., the virtual node is re-rendered.
[0086] Furthermore, when a page corresponding to a certain page code has been deleted, the corresponding virtual node is removed from the virtual DOM tree and related resources are released.
[0087] According to the technical solution provided by the embodiment of the present disclosure, according to the virtual node corresponding to the rendering page code, rendering is performed through a rendering function and mapped to an actual DOM node, so that the life cycle of all pages can be managed in an efficient and predictable manner, and the virtual DOM tree is rendered before the target screen displays the page according to the page display instruction, so that the virtual node can be directly displayed on the target screen, thereby reducing the white screen time when the page switches.
[0088] In some embodiments, rendering a page to be rendered based on a virtual node corresponding to the rendering page code, and displaying the rendered page to be displayed on a target screen based on the page code, includes:
[0089] Determine the virtual node as an input of the rendering engine, so as to render the page to be rendered through the rendering engine to obtain a rendered page to be displayed;
[0090] Display the rendered page to be displayed on the target screen, including:
[0091] The rendered pages to be displayed are stored in a cache queue, and the page codes of the pages to be displayed are displayed on a target screen corresponding to the rendered pages to be displayed.
[0092] Specifically, the virtual node is determined as the input of the rendering engine. The rendering engine can convert the virtual node into a corresponding real node in the real DOM tree, and insert it into the DOM tree of the target screen corresponding to the browser to render each virtual node to obtain a rendered page to be displayed, so that when a page display instruction is received, the rendered page can be directly called for display, reducing the time for requesting data and the rendering time, thereby reducing the white screen time when switching pages.
[0093] In addition, the rendered pages to be displayed are stored in a cache queue, where the cache queue is a data structure used to temporarily store the rendered pages so that when a page display instruction is received for quick access, the rendered pages to be displayed can be directly displayed on the target screen according to the page code in the page display instruction without re-rendering, thereby improving application performance and reducing the white screen time during the jump process. It can also be quickly accessed when the user frequently visits the same page or jumps to a page.
[0094] Figure 2 is a flow chart of displaying a rendered page to be displayed according to a cache queue provided by an embodiment of the present disclosure, such as Figure 2As shown, when the page code included in the page display instruction is 1, the rendered page codes are 1, 2 and 3, the rendered pages 1, 2 and 3 are stored in the cache queue, and the content of page 1 is displayed on the target screen, wherein page 1 in the cache queue can be recorded as vnode1, page 2 can be recorded as vnode2, page 3 can be recorded as vnode3, ..., and so on to mark each page code, and when page 1 is displayed on the target screen, it can be recorded as dom1.
[0095] Furthermore, when the page rendering instruction is updated to display page code as page 2, according to the preset rendering rules, the cache queue includes vnode1, vnode2 and vnode3, but the page to be displayed on the target screen is transferred to page 2, that is, DOM transfer occurs.
[0096] According to the technical solution provided by the embodiment of the present disclosure, it is possible to determine the virtual node according to the page code, obtain the rendered page to be displayed after processing by the rendering engine, store all the rendered pages to be displayed in the cache queue, and display the corresponding rendered page to be displayed on the target screen according to the page code in the page display instruction. Through the cache mechanism, the response speed and smoothness of the page display can be improved, thereby improving the user experience.
[0097] In some embodiments, after rendering the page to be rendered based on the virtual node corresponding to the rendering page code and displaying the rendered page to be displayed on the target screen based on the page code, the process further includes:
[0098] When receiving an update instruction of the page data, updating the corresponding virtual node based on the updated page data and the corresponding page code;
[0099] The updated virtual node is rendered to update the rendered page to be rendered.
[0100] Specifically, when an update instruction for page data is received, that is, when certain data, display frame, etc. in the page is updated, the corresponding virtual node is updated according to the updated page data and the corresponding page code, thereby ensuring that the page displayed on the target screen can reflect the status changes of the application in real time.
[0101] Furthermore, the difference between the updated virtual node and the virtual node before the update can be identified through a difference detection algorithm, and the data corresponding to the difference can be updated to the actual DOM tree.
[0102] In addition, the updated virtual node is rendered to update the rendered page to be rendered, that is, the rendered page to be rendered in the cache queue, so that the updated and rendered page to be rendered can be directly displayed when the page needs to be displayed.
[0103] According to the technical solution provided by the embodiment of the present disclosure, the page can be updated and re-rendered in time when an update instruction is received, thereby improving the rendering capability of the page and reducing the white screen time during page display and switching.
[0104] Figure 3 is a flowchart of another page rendering method provided by an embodiment of the present disclosure. Figure 3 As shown, the front-end service receives the page display instruction, and queries the server for the total number of pages according to the page display instruction. The server returns the page tree to the front-end service. The front-end service determines the page to be rendered according to the page display instruction, and sends a page data request to the server to receive the page data of the page to be rendered. After receiving the page data, the html structure of each page is determined, and the virtual node corresponding to each page code is generated through vuecreatedVnode. According to the virtual node, the virtual DOM is generated through the render function in the vue framework and displayed on the target screen.
[0105] All the above optional technical solutions can be arbitrarily combined to form optional embodiments of the present disclosure, and will not be described in detail here.
[0106] The following are embodiments of the device disclosed herein, which can be used to execute the method embodiments disclosed herein. For details not disclosed in the device embodiments disclosed herein, please refer to the method embodiments disclosed herein.
[0107] Figure 4 Schematic diagram of a page rendering device provided by an embodiment of the present disclosure. Figure 4 As shown, the page rendering includes: a creation module 401, a first processing module 402, a second processing module 403, and a rendering module 404, wherein:
[0108] The creation module 401 is configured to receive a page display instruction and create a virtual document object model DOM tree based on the page display instruction, wherein the page display instruction includes a page code corresponding to the page to be displayed;
[0109] The first processing module 402 is configured to determine the rendering page code of the to-be-rendered page from the page code according to a preset rendering rule;
[0110] The second processing module 403 is configured to obtain page data of each to-be-rendered page based on each rendering page code, and generate a virtual node corresponding to each rendering page code based on each rendering page code and the page data corresponding to the rendering page code, where the virtual node is a child node of the virtual DOM, and each page code corresponds to one virtual node;
[0111] The rendering module 404 is configured to render the page to be rendered based on the virtual node corresponding to the rendering page code, and display the rendered page to be displayed on the target screen based on the page code;
[0112] The preset rendering rule is that if the page code is the page code corresponding to the first page, the page code and the page codes corresponding to the two adjacent pages after the page code are determined as the rendering page code; if the page code is the page code corresponding to a non-first page, the previous page code and the next page code adjacent to the page code are determined as the rendering page code.
[0113] In some embodiments, after rendering the page to be rendered based on the virtual node corresponding to the rendering page code and displaying the rendered page to be displayed on the target screen, the rendering module 404 is further configured to:
[0114] When receiving the updated page display instruction, obtaining the updated page code based on the updated page display instruction;
[0115] Based on the updated page code, update the rendering page code;
[0116] Traverse the virtual DOM tree to determine whether the virtual node corresponding to the updated rendering page code is stored in the virtual DOM tree;
[0117] If so, directly render the updated rendering page through the virtual node corresponding to the updated rendering page code in the virtual DOM tree;
[0118] If not, execute the steps of obtaining page data of each page to be rendered, obtaining page data of each page to be rendered based on each rendering page code, generating virtual nodes corresponding to each rendering page code based on each rendering page code and the page data corresponding to the rendering page code, and updating the virtual nodes included in the virtual DOM tree.
[0119] In some embodiments, the second processing module 403 is configured to:
[0120] Parse the data of each page to obtain the data structure and syntax structure of the data of each page;
[0121] For each rendering page code, the rendering page code is used as an index, and based on the data structure and syntax structure of the page data, a virtual node corresponding to the rendering page code is generated by creating a virtual node createVNode function.
[0122] In some embodiments, the creation module 401 is configured to:
[0123] receiving a page display instruction, and sending a quantity request to the cloud based on the page display instruction, wherein the quantity request is used to request the total quantity of pages to be displayed;
[0124] Receive the total quantity sent by the cloud based on the quantity request, and create a virtual DOM tree based on the total quantity return result.
[0125] In some embodiments, the rendering module 404 is configured to:
[0126] Map each virtual node based on the rendering function to obtain the actual node corresponding to the virtual node;
[0127] Based on the codes of each rendering page and the corresponding actual nodes, the pages to be rendered are rendered.
[0128] In some embodiments, the rendering module 404 is configured to:
[0129] Determine the virtual node as an input of the rendering engine, so as to render the page to be rendered through the rendering engine to obtain a rendered page to be displayed;
[0130] Display the rendered page to be displayed on the target screen, including:
[0131] The rendered pages to be displayed are stored in a cache queue, and the page codes of the pages to be displayed are displayed on a target screen corresponding to the rendered pages to be displayed.
[0132] In some embodiments, the rendering module 404 renders the page to be rendered based on the virtual node corresponding to the rendering page code, and after displaying the rendered page to be displayed on the target screen based on the page code, is further configured to:
[0133] When receiving an update instruction of the page data, updating the corresponding virtual node based on the updated page data and the corresponding page code;
[0134] The updated virtual node is rendered to update the rendered page to be rendered.
[0135] It should be understood that the size of the serial numbers of the steps in the above embodiments does not mean the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of the present disclosure.
[0136] Figure 5 Schematic diagram of an electronic device 5 provided in an embodiment of the present disclosure. Figure 5 As shown, the electronic device 5 of this embodiment includes: a processor 501, a memory 502, and a computer program 503 stored in the memory 502 and executable on the processor 501. When the processor 501 executes the computer program 503, the steps in the above-mentioned method embodiments are implemented. Alternatively, when the processor 501 executes the computer program 503, the functions of the modules / units in the above-mentioned device embodiments are implemented.
[0137] The electronic device 5 may be a desktop computer, a notebook, a PDA, a cloud server, or other electronic device. The electronic device 5 may include, but is not limited to, a processor 501 and a memory 502. Those skilled in the art will appreciate that Figure 5 The electronic device 5 is merely an example and does not limit the electronic device 5 , and may include more or less components than those shown in the figure, or different components.
[0138] The processor 501 may be a central processing unit (CPU), or other general-purpose processors, digital signal processors (DSP), application-specific integrated circuits (ASIC), field-programmable gate arrays (FPGA), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc.
[0139] The memory 502 may be an internal storage unit of the electronic device 5, for example, a hard disk or memory of the electronic device 5. The memory 502 may also be an external storage device of the electronic device 5, for example, a plug-in hard disk, a smart media card (SMC), a secure digital (SD) card, a flash card, etc. equipped on the electronic device 5. The memory 502 may also include both an internal storage unit of the electronic device 5 and an external storage device. The memory 502 is used to store computer programs and other programs and data required by the electronic device.
[0140] Those skilled in the art can clearly understand that for the convenience and simplicity of description, only the division of the above-mentioned functional units and modules is used as an example. In actual applications, the above-mentioned functions can be assigned to different functional units and modules as needed, that is, the internal structure of the device can be divided into different functional units or modules to complete all or part of the functions described above. The functional units and modules in the embodiments can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The above-mentioned integrated unit can be implemented in the form of hardware or in the form of software functional units.
[0141] If the integrated module / 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 (e.g., a computer-readable storage medium). Based on this understanding, the present disclosure implements all or part of the processes in the above-mentioned embodiment method, and can also be completed by instructing the relevant hardware through a computer program. The computer program can be stored in a computer-readable storage medium, and the computer program can implement the steps of the above-mentioned various method embodiments when executed by the processor. The computer program may include computer program code, and the computer program code may be in source code form, object code form, executable file or some intermediate form, etc. The computer-readable storage medium may include: any entity or device capable of carrying computer program code, recording medium, U disk, mobile hard disk, magnetic disk, optical disk, computer memory, read-only memory (ROM), random access memory (RAM), electric carrier signal, telecommunication signal and software distribution medium, etc.
[0142] The above embodiments are only used to illustrate the technical solutions of the present disclosure, rather than to limit them. Although the present disclosure has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned embodiments, or make equivalent replacements for some of the technical features therein. These modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the embodiments of the present disclosure, and should all be included in the protection scope of the present disclosure.
Claims
1. A page rendering method, characterized in that: include: Receive a page display instruction, and create a virtual document object model DOM tree based on the page display instruction, wherein the page display instruction includes a page code corresponding to the page to be displayed; According to a preset rendering rule, determining a rendering page code of the page to be rendered from the page codes; Based on each of the rendering page codes, page data of each of the pages to be rendered is obtained; based on each of the rendering page codes and the page data corresponding to the rendering page codes, a virtual node corresponding to each of the rendering page codes is generated, wherein the virtual node is a child node of a virtual DOM tree, and each of the page codes corresponds to one virtual node; Rendering the page to be rendered based on the virtual node corresponding to the rendering page code, and displaying the rendered page to be displayed on a target screen based on the page code; The preset rendering rule is that if the page code is the page code corresponding to the first page, the page code and the page codes corresponding to the two adjacent pages after the page code are determined as the rendering page code; if the page code is the page code corresponding to a page other than the first page, the previous page code and the next page code adjacent to the page code are determined as the rendering page code.
2. The method according to claim 1, characterized in that: After rendering the page to be rendered based on the virtual node corresponding to the rendering page code and displaying the rendered page to be displayed on the target screen, the method further includes: When receiving the updated page display instruction, obtaining the updated page code based on the updated page display instruction; Based on the updated page code, updating the rendering page code; Traversing the virtual DOM tree to determine whether a virtual node corresponding to the updated rendering page code is stored in the virtual DOM tree; If so, directly rendering the updated rendering page through the virtual node corresponding to the updated rendering page code in the virtual DOM tree; If not, execute the steps of obtaining the page data of each of the pages to be rendered, obtaining the page data of each of the pages to be rendered based on each of the rendering page codes, generating a virtual node corresponding to each of the rendering page codes based on each of the rendering page codes and the page data corresponding to the rendering page codes, and updating the virtual nodes included in the virtual DOM tree.
3. The method according to claim 1, characterized in that Generating a virtual node corresponding to each rendering page code based on each rendering page code and the page data corresponding to the rendering page code includes: Parsing each of the page data to obtain a data structure and a grammatical structure of each of the page data; For each of the rendering page codes, the rendering page code is used as an index, and based on the data structure and syntax structure of the page data, a virtual node corresponding to the rendering page code is generated by creating a virtual node createVNode function.
4. The method according to claim 1, characterized in that Receive page display instructions and create a virtual hierarchical DOM tree, including: receiving a page display instruction, and sending a quantity request to the cloud based on the page display instruction, wherein the quantity request is used to request the total quantity of the pages to be displayed; The total quantity sent by the cloud based on the quantity request is received, and a virtual DOM tree is created based on a result returned by the total quantity.
5. The method according to claim 1, characterized in that Rendering the page to be rendered based on the virtual node corresponding to the rendering page code includes: Mapping each of the virtual nodes based on a rendering function to obtain an actual node corresponding to the virtual node; The to-be-rendered page is rendered based on each of the rendering page codes and the corresponding actual node.
6. The method according to claim 1, characterized in that Rendering the page to be rendered based on the virtual node corresponding to the rendering page code, and displaying the rendered page to be displayed on a target screen based on the page code, including: Determine the virtual node as an input of a rendering engine, so as to render the page to be rendered by the rendering engine to obtain a rendered page to be displayed; Displaying the rendered page to be displayed on a target screen includes: The rendered page to be displayed is stored in a cache queue, and the page code of the page to be displayed is displayed on a target screen corresponding to the rendered page to be displayed.
7. The method according to any one of claims 1 to 6, characterized in that After rendering the page to be rendered based on the virtual node corresponding to the rendering page code, and displaying the rendered page to be displayed on the target screen based on the page code, the method further includes: When receiving an update instruction for the page data, updating the corresponding virtual node based on the updated page data and the corresponding page code; The updated virtual node is rendered to update the rendered page to be rendered.
8. A page rendering device, characterized in that: include: A creation module is configured to receive a page display instruction and create a virtual document object model DOM tree based on the page display instruction, wherein the page display instruction includes a page code corresponding to the page to be displayed; A first processing module is configured to determine a rendering page code of a to-be-rendered page from the page code according to a preset rendering rule; A second processing module is configured to obtain page data of each to-be-rendered page based on each of the rendering page codes, and generate a virtual node corresponding to each of the rendering page codes based on each of the rendering page codes and the page data corresponding to the rendering page codes, wherein the virtual node is a child node of the virtual DOM, and each of the page codes corresponds to one virtual node; A rendering module, configured to render the page to be rendered based on the virtual node corresponding to the rendering page code, and display the rendered page to be displayed on a target screen based on the page code; The preset rendering rule is that if the page code is the page code corresponding to the first page, the page code and the page codes corresponding to the two adjacent pages after the page code are determined as the rendering page code; if the page code is the page code corresponding to a page other than the first page, the previous page code and the next page code adjacent to the page code are determined as the rendering page code.
9. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that: When the processor executes the computer program, the steps of the method according to any one of claims 1 to 7 are implemented.
10. A computer-readable storage medium storing a computer program, characterized in that: When the computer program is executed by a processor, the steps of the method according to any one of claims 1 to 7 are implemented.