CN119415792A

CN119415792A - Page rendering method, device, electronic device and computer-readable storage medium

Info

Publication number: CN119415792A
Application number: CN202411487586.9A
Authority: CN
Inventors: 刘新洲
Original assignee: Beijing Longzhi Digital Technology Service Co Ltd
Current assignee: Beijing Longzhi Digital Technology Service Co Ltd
Priority date: 2024-10-23
Filing date: 2024-10-23
Publication date: 2025-02-11

Abstract

The disclosure relates to the technical field of computers, and provides a page rendering method, a page rendering device, electronic equipment and a computer readable storage medium. The method comprises the steps of receiving page display instructions, creating a virtual Document Object Model (DOM) tree based on the page display instructions, determining rendering page codes of pages to be rendered from the page codes according to preset rendering rules, obtaining page data of the pages to be rendered based on the rendering page codes, generating virtual nodes corresponding to the rendering page codes based on the rendering page codes and the page data corresponding to the rendering page codes, wherein each virtual node corresponds to one virtual node of the virtual DOM tree, rendering the pages to be rendered based on the virtual nodes corresponding to the rendering page codes, and displaying the rendered pages to be displayed to a target screen based on the page codes. By the page rendering method, the white screen time during page switching can be reduced, and user experience is improved.

Description

Page rendering method and device, electronic equipment and computer readable storage medium

Technical Field

The disclosure relates to the field of computer technology, and in particular, to a page rendering method, a page rendering device, electronic equipment and a computer readable storage medium.

Background

In the conventional webpage loading process, if the route switching is met, the terminal equipment needs to re-request and render the data and elements of the webpage, so that static resources and data related to the webpage need to be re-acquired and the webpage is re-rendered when the webpage switching is met, display delay is generated on a display screen of the terminal equipment when the data is re-requested and the webpage is rendered, and a user sees a white screen within a period of time, so that user experience is affected.

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 a page, however, when the iframe is pre-rendered, the page data needs to be re-requested and a new iframe needs to be rendered, the white screen time can only be relatively shortened, the div in the pre-rendered page can solve the problem of re-requesting the data, but the problem of repeated page rendering is not solved, and when the page data is updated, the div in the pre-rendered page may not coincide with the updated page data.

Disclosure of Invention

In view of the above, embodiments of the present disclosure provide a page rendering method, apparatus, electronic device, and computer readable storage medium, so as to solve the problem in the prior art that when a page jumps, a new page is rendered for a longer time, and a white screen is seen, which affects user experience.

In a first aspect of an embodiment of the present disclosure, a page rendering method is provided, including:

Receiving a page display instruction, and creating a virtual Document Object Model (DOM) tree based on the page display instruction, wherein the page display instruction comprises a page code corresponding to a page to be displayed;

Determining a rendering page code of a page to be rendered from the page codes according to a preset rendering rule;

Acquiring 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 page data corresponding to each rendering page code, wherein each virtual node is a child node of a virtual DOM tree, and each page code 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 to the 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 corresponding to the two adjacent pages after the page code is determined to be the rendering page code, and if the page code is the page code corresponding to the non-first page, the previous page code and the next page code adjacent to the page code are determined to be the rendering page code.

In a second aspect of the embodiments of the present disclosure, there is provided a page rendering apparatus, including:

The 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 comprises a page code corresponding to a page to be displayed;

The first processing module is configured to determine a rendering page code of a page to be rendered from the page codes according to a preset rendering rule;

The second processing module is configured to acquire page data of each page to be rendered based on each rendering page code, generate virtual nodes corresponding to each rendering page code based on each rendering page code and page data corresponding to the rendering page code, wherein the virtual nodes are child nodes of a virtual DOM tree, and each page code corresponds to one virtual node;

the 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 to the target screen based on the page code;

In a third aspect of the disclosed embodiments, an electronic device is provided, comprising a memory, a processor and a computer program stored in the memory and executable on the processor, the processor implementing the steps of the above method when executing the computer program.

In a fourth aspect of the disclosed embodiments, a computer-readable storage medium is provided, which stores a computer program which, when executed by a processor, implements the steps of the above-described method.

The method has the advantages that a page display instruction is received, a virtual Document Object Model (DOM) tree is created according to the page display instruction, the page display instruction comprises page codes corresponding to pages to be displayed, the rendering page codes of the pages to be rendered are determined from the page codes according to preset rendering rules, page data of the pages to be rendered are obtained according to the rendering page codes, virtual nodes corresponding to the rendering page codes are generated, the virtual nodes are child nodes of the virtual DOM tree, each page code corresponds to one virtual node, the pages to be rendered are rendered according to the virtual nodes corresponding to the rendering page codes, and meanwhile the rendered pages to be displayed are displayed to a target screen according to the page codes corresponding to the pages to be displayed. The preset rendering rule is that when the page code is the page code corresponding to the first page, the page codes corresponding to the two adjacent pages after the page code and the page code are determined to be rendering page codes, and when the page code is the page code corresponding to the non-first page, the previous page code and the next page code adjacent to the page code are determined to be rendering page codes. According to the preset rendering rule, repeated data requests can be avoided when the page is switched and the corresponding rendered page exists, so that the page loading speed is improved, meanwhile, through rendering the page coded by the rendered page, re-rendering can be avoided when the corresponding page is checked, the white screen time is reduced, and the user experience is improved.

Drawings

In order to more clearly illustrate the technical solutions of the embodiments of the present disclosure, the drawings that are required for the embodiments or the description of the prior art will be briefly introduced below, and it is obvious that the drawings in the following description are only some embodiments of the present disclosure, and other drawings may be obtained according to these drawings without inventive effort for a person of ordinary skill in the art.

Fig. 1 is a schematic flow chart of a page rendering method according to an embodiment of the disclosure;

FIG. 2 is a schematic flow chart of displaying rendered pages to be displayed according to a cache queue according to an embodiment of the present disclosure;

FIG. 3 is a flow chart of another page rendering method provided by an embodiment of the present disclosure;

FIG. 4 is a schematic diagram of a page rendering apparatus provided by an embodiment of the present disclosure;

Fig. 5 is a schematic structural diagram of an electronic device according to an embodiment of the present disclosure.

Detailed Description

In the following description, for purposes of explanation and not limitation, specific details are set forth, such as particular system configurations, techniques, etc. in order to provide a thorough understanding of the disclosed embodiments. However, it will be apparent to one skilled in the art that the present disclosure may be practiced in other embodiments that depart from these specific details. In other instances, detailed descriptions of well-known systems, devices, circuits, and methods are omitted so as not to obscure the description of the present disclosure with unnecessary detail.

A page rendering method and apparatus according to embodiments of the present disclosure will be described in detail below with reference to the accompanying drawings.

Fig. 1 is a flowchart of a page rendering method according to an embodiment of the present disclosure. The receiving page display instruction in the page rendering method of fig. 1 may be executed by a client, the portion rendering the page content may be executed by a server or the client, and displaying the rendered page to be displayed to the target screen may be executed by the client. As shown in fig. 1, the page rendering method includes:

S101, receiving a page display instruction, and creating a virtual Document Object Model (DOM) tree based on the page display instruction;

the page display instruction comprises page codes corresponding to pages to be displayed;

S102, determining a rendering page code of a page to be rendered from page codes according to a preset rendering rule;

S103, acquiring page data of each page to be rendered based on each rendering page code, and generating virtual nodes corresponding to each rendering page code based on each rendering page code and 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 one virtual node;

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 to the 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 corresponding to the two adjacent pages after the page code is determined to be the rendering page code, and if the page code is the page code corresponding to the non-first page, the previous page code adjacent to the page code and the next page code are determined to be the rendering page code.

Specifically, a page display instruction is received, and the page display instruction is analyzed, so that a virtual Document Object Model (DOM) tree can be created according to the page display instruction, wherein the page display instruction comprises page codes corresponding to pages to be displayed, and the page codes are unique identifiers of the pages and are used for distinguishing different pages.

The page display command may be transmitted through a hypertext transfer protocol (Hypertext Transfer Protocol, HTTP) request, a full duplex communication protocol WebSocket message, or event transmission in an application, etc.

The virtual DOM tree is a representation of the actual DOM tree in the memory, and can be used for efficiently updating pages without directly operating DOM, so that the performance is improved. When the virtual DOM tree is built, the virtual DOM tree can be implemented through frames such as JavaScript (a lightweight programming language), act (a frame for building user pages), vue (a frame for building user pages), and the like, and the root node of the virtual DOM tree can represent the root container of all pages in the whole application.

The root node of the virtual DOM tree may be a div (division) node, where the div node is used to represent a block-level element in the document, and the div node may be understood as a container, where a plurality of other child nodes, i.e. child nodes of the virtual DOM tree, are included.

In addition, according to a preset rendering rule, determining the rendering page codes of the pages to be rendered from the page codes of all the pages, namely determining the rendering page codes corresponding to the page contents to be rendered.

If the page code is the page code corresponding to the first page, determining the page codes corresponding to two adjacent pages after the page code and the page code as rendering page codes, for example, the rule of all current page codes is a positive integer from 1, the page code included in the page display instruction is 1, and it is known that the page code corresponding to the page display instruction is the page code corresponding to the first page, and rendering the page codes are 1,2 and 3.

If the page code is the page code corresponding to the non-first page, determining the previous page code and the next page code adjacent to the page code as rendering page codes, for example, the rule of all the current page codes is a positive integer from 1, the page code included in the page display instruction is 3, and it is known that the page code corresponding to the page display instruction is the page code corresponding to the non-first page, and rendering the page codes is 2, 3 and 4.

In addition, according to each rendering page code, page data corresponding to the rendering page code is obtained from a rear end or a local storage, and according to the rendering page code and the page data corresponding to the rendering page code, virtual nodes corresponding to the rendering page code are generated, wherein the virtual nodes are child nodes of a virtual DOM tree, and each page code corresponds to one virtual node.

The page data may be a hypertext markup language (HyperText Markup Language, HTML) string, JSON (JavaScript Object Notation ) object, or other format, where the specific requirement is to be resolved according to the actual situation.

Further, when the page display instruction is not received for the first time, traversing in the virtual DOM tree according to the page code corresponding to the page display instruction, if the traversing result is that the child node corresponding to the page code does not exist, generating the child node corresponding to the page code, and if the traversing result is that the child node corresponding to the page code exists, directly calling the child node.

In addition, according to the virtual node corresponding to the rendering page code, rendering the page to be rendered, and after the rendering is completed, displaying the rendered page to be displayed on a target screen, wherein the target screen can be a browser window or a screen of the mobile device.

Further, the virtual DOM tree can be converted into an actual DOM tree through a front-end rendering mechanism, and the picture to be rendered can be rendered through a rendering engine of the VUE to generate a real HTML page, so that the real HTML page is displayed on the target screen.

According to the technical scheme provided by the embodiment of the disclosure, the rendering page codes can be determined through the virtual DOM tree and the preset rendering rules, so that page data corresponding to the rendering page codes are determined, and the page to be displayed is rendered, so that data re-request is avoided when the page is switched, the page loading speed is improved, the white screen time on a target screen is greatly reduced, and the user experience is improved.

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:

Under the condition that an updated page display instruction is received, acquiring an updated page code based on the updated page display instruction;

updating the rendered page code based on the updated page code;

traversing the virtual DOM tree, and judging whether the virtual nodes corresponding to the updated rendering page codes are stored in the virtual DOM tree;

If yes, rendering the updated rendering page directly through the virtual node corresponding to the updated rendering page code in the virtual DOM tree;

If not, executing the step of acquiring the page data of each page to be rendered, acquiring the 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.

Specifically, when an updated page display instruction is received, an updated page code is obtained according to the updated page display instruction, the current rendering page code is updated according to the updated page code, for example, the current rendering page codes are 1,2 and 3, and the updated page display instruction is 6, and the rendering page codes are updated to be 5, 6 and 7.

In addition, the virtual DOM tree is traversed, so that whether the virtual node corresponding to the updated rendering page code is stored in the current DOM tree is judged, if the virtual node which is the same as the updated rendering page code exists in the virtual DOM tree, the existing virtual node is directly utilized for rendering, and therefore rendering efficiency is improved.

In addition, if the virtual DOM tree does not have the virtual node same as the updated rendering page code, page data related to the updated page code is acquired from a server or a local storage, a corresponding new virtual node is generated in the virtual DOM tree according to the newly acquired page data, and the virtual node included in the virtual DOM tree is updated.

For example, if the updated rendering page codes are 5, 6 and 7 and the virtual node corresponding to the page code 5 exists in the virtual DOM tree, the virtual node corresponding to the page code 5 is directly called to render, and meanwhile, the page data corresponding to the page codes 6 and 7 are acquired, the virtual nodes corresponding to the page codes 6 and 7 are generated, and the virtual nodes corresponding to the page codes 6 and 7 are updated to the virtual nodes included in the virtual DOM tree.

Further, according to the updated virtual DOM tree, rendering the corresponding page to be displayed in the updated page display instruction, and displaying the updated and rendered page to be displayed on the target screen.

According to the technical scheme provided by the embodiment of the disclosure, the virtual DOM tree can be updated according to the page display instruction, so that the operation of the actual DOM tree is reduced as much as possible, and the synchronous update of the page can be kept, so that when a user switches the page, the re-request of the page data is avoided, the page data can be continuously preloaded and prerendered, the white screen time of the display screen is reduced, and the page loading speed and the user experience are further improved.

In some embodiments, generating virtual nodes corresponding to each rendering page code based on each rendering page code and page data corresponding to the rendering page code includes:

Analyzing each page data to obtain a data structure and a grammar structure of each page data;

And for each rendering page code, taking the rendering page code as an index, and generating a virtual node corresponding to the rendering page code by creating a virtual node createVNode function based on the data structure and the grammar structure of the page data.

Specifically, in front-end development, particularly in the case of using page rendering through a JavaScript framework (e.g., vue), since data may exist in multiple formats, such as JSON, XML, etc., each page data needs to be parsed to be converted into a data structure and a syntax structure that JavaScript can understand and operate, where the parsed page data may be a JavaScript object or an array.

Further, the relationship between the hierarchical structure and the elements of the page in the page data can be understood according to the data structure obtained by parsing, and the grammar structure can be used for enabling a developer to understand how the page data is mapped to the visual and interactive elements of the page.

In addition, each rendering page code is used as a child node of a virtual DOM tree, a specific rendering page code is used as an index of the child node, the data structure and the grammar structure of the page data obtained through analysis are used as contents of the child node, and a virtual node corresponding to the rendering page code is generated by creating a virtual node createVNode function.

And further, returning the created virtual nodes so as to render the virtual nodes corresponding to the rendering page codes, and displaying the virtual nodes corresponding to the page codes of the pages to be displayed, which are included in the page display instruction, on the target screen.

According to the technical scheme provided by the embodiment of the disclosure, the virtual node corresponding to the rendering page code can be generated by creating the virtual node function, so that the aim of pre-rendering according to the virtual node is achieved, and the virtual DOM tree can be traversed to determine whether the content corresponding to the page code is rendered or not under the condition that the page code of the page to be displayed in the page display instruction is updated, thereby reducing the white screen time when the page jumps.

In some embodiments, receiving a page display instruction and creating a virtual hierarchy DOM tree includes:

Receiving a page display instruction, and sending a quantity request to the cloud end based on the page display instruction, wherein the quantity request is used for requesting the total quantity of pages to be displayed;

And receiving the total number sent by the cloud based on the number request, and returning a result to create a virtual DOM tree based on the total number.

Specifically, a page display instruction is received, wherein the page display instruction is realized through interaction between the front end and the back end or the server. According to the page display instruction, the front end communicates with the rear end or the server end to send a quantity request to the cloud end according to the content in the page display instruction, wherein the quantity request is used for requesting the total number of pages to be displayed, namely, according to a preset rendering rule, the total number of pages to be displayed is determined according to the page display instruction and the current virtual DOM tree, and further the request content of the quantity request is determined.

For example, in the page display instruction, the pages of the page to be displayed are encoded into pages 5, 6 and 7, the current virtual DOM tree includes virtual child nodes corresponding to page 5, and virtual child nodes corresponding to page 6 and page 7 do not exist, so that the request content of the quantity request is page 2, and data of page 6 and page 7 are included, so as to generate virtual child nodes corresponding to page 6 and page 7 in the virtual DOM tree.

Further, after the cloud receives the quantity request, corresponding database query or database retrieval operation is executed according to parameters in the quantity request, so that the content requested in the quantity request is obtained and returned.

In addition, the cloud end receives the total number of pages to be displayed sent by the number request, and creates a virtual DOM tree according to the total number return result, wherein the virtual DOM object can be generated through a rendering render function and an actual DOM object (document. Creation element) in a JavaScript framework (such as practice, vue and the like), so that a virtual node corresponding to the page to be rendered is obtained, the virtual DOM tree is created and updated, the virtual node is used as a basis for rendering the page to be displayed, and the page rendering efficiency is improved.

The virtual DOM tree takes a basic div node as a root node, and the virtual node corresponding to each page to be displayed is a tree of child nodes of the root node.

Furthermore, the number of virtual nodes in the virtual DOM tree can be determined according to the total number of the returned pages, so that page data are filled into the virtual DOM tree according to page codes in page display instructions, and the aim of prerendering the pages is fulfilled.

According to the technical scheme provided by the embodiment of the disclosure, the method and the device can communicate with the cloud, receive the page display instruction and create the virtual DOM tree, and achieve the purpose of efficient page rendering.

In some embodiments, rendering a page to be rendered based on a virtual node corresponding to a rendering page code includes:

mapping each virtual node based on the rendering function to obtain an actual node corresponding to the virtual node;

And rendering the page to be rendered based on each rendering page code and the corresponding actual node.

Specifically, the virtual DOM tree includes a virtual node, which is used to represent the structure of the real DOM in the memory, and the virtual node is a JavaScript object with a lightweight, and describes the structure of the DOM (such as a tag name, an attribute, a child node, etc.). And mapping each virtual node by a rendering function for the virtual nodes which do not exist in the current virtual DOM tree to obtain the actual nodes corresponding to the virtual nodes.

In addition, according to each rendering page code and the corresponding actual node, rendering is carried out on the page to be rendered, and the aim of pre-rendering is achieved.

In the process of mapping each virtual node through the rendering function, analyzing components, templates and the like included in the current page, mounting the virtual node on a root node of a virtual DOM tree, and creating a corresponding real DOM structure.

Further, when the data in the page changes, that is, the data in the virtual node changes, for example, user interaction, data update, etc., the virtual node is rendered again.

Further, when a page corresponding to a certain page code is deleted, the corresponding virtual node is removed from the virtual DOM tree, and the relevant resource is released.

According to the technical scheme provided by the embodiment of the disclosure, according to the virtual node corresponding to the rendering page code, the virtual node is rendered through the rendering function and mapped into the actual DOM node, 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 pages according to the page display instruction, so that the virtual node can be directly displayed on the target screen, and the white screen time during page switching is reduced.

In some embodiments, rendering a page to be rendered based on a virtual node corresponding to a rendering page code, and displaying the rendered page to be displayed to a target screen based on the page code, includes:

determining the virtual node as the input of a rendering engine, so as to render the page to be rendered through the rendering engine, and obtaining a rendered page to be displayed;

Displaying the rendered page to be displayed to a target screen, including:

and storing the rendered page to be displayed in a cache queue, and displaying the page code of the page to be displayed on a target screen corresponding to the rendered page to be displayed.

Specifically, the virtual nodes are determined to be input by the rendering engine, the rendering engine can convert the virtual nodes into corresponding real nodes in a real DOM tree and insert the real nodes into the DOM tree of a target screen corresponding to a browser, so that each virtual node is rendered to obtain a rendered page to be displayed, the rendered page can be directly called to be displayed when a page display instruction is received, the time for requesting data and the rendering time are reduced, and the white screen time when the page is switched is reduced.

In addition, the rendered page to be displayed is stored in a cache queue, wherein the cache queue is a data structure and is used for temporarily storing the rendered page so that the rendered page to be displayed can be directly displayed on a target screen according to page codes in page display instructions under the condition of fast access when the page display instructions are received, re-rendering is not needed, application performance is improved, white screen time in a skip process is reduced, and fast access can be performed under the condition that a user frequently accesses the same page or performs page skip.

Fig. 2 is a schematic flow chart of displaying rendered pages to be displayed according to a cache queue, as shown in fig. 2, when a page code included in a page display instruction is 1, rendering page codes are 1,2 and 3, storing rendered pages 1,2 and 3 into the cache queue, and displaying contents of page 1 to a target screen, where page 1 in the cache queue may be denoted as vnode1, page 2 may be denoted as vnode2, and page 3 may be denoted as vnode3, and so on, each page code is marked, and when page 1 is displayed on the target screen, it may be denoted as dom1.

Further, when the page rendering instruction updates that the displayed page is the 2 nd page, according to the preset rendering rule, the cache queue includes vnode1, vnode2 and vnode3, but the page to be displayed to the target screen is transferred to the 2 nd page, that is, the dom transfer occurs.

According to the technical scheme provided by the embodiment of the disclosure, the virtual node can be determined according to the page code, the rendered page to be displayed is obtained through the processing of the rendering engine, all the rendered pages to be displayed are stored in the buffer queue, the corresponding rendered pages to be displayed are displayed on the target screen according to the page code in the page display instruction, and the response speed and smoothness of page display can be improved through the buffer mechanism, so that the user experience is improved.

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 to the target screen based on the page code, the method further includes:

under the condition that an update instruction of page data is received, updating a corresponding virtual node based on the updated page data and a corresponding page code;

rendering the updated virtual nodes to update the rendered pages to be rendered.

Specifically, when an update instruction of page data is received, that is, when a certain data, a display frame, and the like in a page are updated, a corresponding virtual node is updated according to the updated page data and a corresponding page code, so that the page displayed to a target screen can reflect the state change of an application in real time.

Further, the difference between the updated virtual node and the virtual node before updating can be identified through a difference detection algorithm, and the data corresponding to the difference is updated to the actual DOM tree.

In addition, the updated virtual node is rendered, so that the rendered page to be rendered, namely the rendered page to be rendered in the cache queue, is updated, and the updated and rendered page to be rendered can be directly displayed when the page needs to be displayed.

According to the technical scheme provided by the embodiment of the disclosure, the page can be updated and re-rendered in time under the condition that the update instruction is received, the rendering capacity of the page is improved, and the white screen time during page display and switching is reduced.

Fig. 3 is a flowchart of another page rendering method provided by an embodiment of the present disclosure, as shown in fig. 3, a front-end service receives a page display instruction, queries a server for a total number of pages according to the page display instruction, returns a page tree to the front-end service, determines a page to be rendered according to the page display instruction, sends a page data request to the server to receive page data of the page to be rendered, determines an html structure of each page after receiving the page data, generates virtual nodes corresponding to each page code through vuecreatedVnode, generates a virtual DOM through a render function in a vue frame according to the virtual nodes, and displays the virtual DOM to a target screen.

Any combination of the above-mentioned optional solutions may be adopted to form an optional embodiment of the present disclosure, which is not described herein in detail.

The following are device embodiments of the present disclosure that may be used to perform method embodiments of the present disclosure. For details not disclosed in the embodiments of the apparatus of the present disclosure, please refer to the embodiments of the method of the present disclosure.

Fig. 4 is a schematic diagram of a page rendering apparatus according to an embodiment of the present disclosure. As shown in fig. 4, the page rendering includes a creation module 401, a first processing module 402, a second processing module 403, and a rendering module 404, wherein:

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, where the page display instruction includes a page code corresponding to a page to be displayed;

a first processing module 402 configured to determine a rendered page code of a page to be rendered from the page codes according to a preset rendering rule;

The second processing module 403 is configured to obtain page data of each page to be rendered based on each rendering page code, generate virtual nodes corresponding to each rendering page code based on each rendering page code and page data corresponding to the rendering page code, where the virtual nodes are child nodes of the virtual DOM, and each page code corresponds to one virtual node;

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 to the target screen based on the page code;

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 to the target screen, is further configured to:

updating the rendered page code based on the updated page code;

In some embodiments, the second processing module 403 is configured to:

In some embodiments, the creation module 401 is configured to:

In some embodiments, rendering module 404 is configured to:

Displaying the rendered page to be displayed to a target screen, including:

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 to the target screen based on the page code, is further configured to:

It should be understood that the sequence number of each step in the foregoing embodiment does not mean that the execution sequence of each process should be determined by the function and the internal logic of each process, and should not constitute any limitation on the implementation process of the embodiments of the disclosure.

Fig. 5 is a schematic diagram of an electronic device 5 provided by an embodiment of the present disclosure. As shown in fig. 5, the electronic device 5 of this embodiment comprises a processor 501, a memory 502 and a computer program 503 stored in the memory 502 and executable on the processor 501. The steps of the various method embodiments described above are implemented by processor 501 when executing computer program 503. Or the processor 501 when executing the computer program 503 performs the functions of the modules/units in the above-described apparatus embodiments.

The electronic device 5 may be a desktop computer, a notebook computer, a palm computer, a cloud server, or the like. The electronic device 5 may include, but is not limited to, a processor 501 and a memory 502. It will be appreciated by those skilled in the art that fig. 5 is merely an example of the electronic device 5 and is not limiting of the electronic device 5 and may include more or fewer components than shown, or different components.

The Processor 501 may be a central processing unit (Central Processing Unit, CPU), but may also be other general purpose processors, digital signal processors (DIGITAL SIGNAL Processor, DSP), application SPECIFIC INTEGRATED Circuit (ASIC), field-Programmable gate array (Field-Programmable GATE ARRAY, FPGA) or other Programmable logic device, discrete gate or transistor logic device, discrete hardware components, etc.

The memory 502 may be an internal storage unit of the electronic device 5, for example, a hard disk or a memory of the electronic device 5. The memory 502 may also be an external storage device of the electronic device 5, such as a plug-in hard disk, a smart memory card (SMART MEDIA CARD, SMC), a Secure Digital (SD) card, a flash memory card (FLASH CARD) or the like, which are provided on the electronic device 5. Memory 502 may also include both internal storage units and external storage devices of electronic device 5. The memory 502 is used to store computer programs and other programs and data required by the electronic device.

It will be apparent to those skilled in the art that, for convenience and brevity of description, only the above-described division of the functional units and modules is illustrated, and in practical application, the above-described functional distribution may be performed by different functional units and modules according to needs, i.e. the internal structure of the apparatus is divided into different functional units or modules to perform all or part of the above-described functions. The functional units and modules in the embodiment may be integrated in one processing unit, or each unit may exist alone physically, or two or more units may be integrated in one unit, where the integrated units may be implemented in a form of hardware or a form of a software functional unit.

The integrated modules/units, if implemented in the form of software functional units and sold or used as stand-alone products, may be stored in a computer-readable storage medium (e.g., a computer-readable storage medium). Based on such understanding, the present disclosure may implement all or part of the flow of the method of the above-described embodiments, or may be implemented by a computer program to instruct related hardware, and the computer program may be stored in a computer readable storage medium, where the computer program, when executed by a processor, may implement the steps of the method embodiments described above. The computer program may comprise computer program code, which may be in source code form, object code form, executable file or in some intermediate form, etc. The computer readable storage medium may include any entity or device capable of carrying computer program code, recording medium, USB flash disk, removable hard disk, magnetic disk, optical disk, computer Memory, read-Only Memory (ROM), random access Memory (Random Access Memory, RAM), electrical carrier signals, telecommunications signals, and software distribution media, among others.

The foregoing embodiments are merely for illustrating the technical solutions of the present disclosure, and not for limiting the same, and although the present disclosure has been described in detail with reference to the foregoing embodiments, it should be understood by those skilled in the art that the technical solutions described in the foregoing embodiments may be modified or some of the technical features may be replaced with the same, and that the modifications or the replacement should not depart from the spirit and scope of the technical solutions of the embodiments of the present disclosure.

Claims

1. A method of page rendering, comprising:

Acquiring page data of each page to be rendered based on each rendering page code, and 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, wherein each virtual node is a child node of a virtual DOM tree, and each page code 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 to a target screen based on the page code;

2. The method of claim 1, wherein after rendering the page to be rendered based on the virtual node corresponding to the rendered page code and displaying the rendered page to be displayed on a target screen, further comprising:

updating the rendered page code based on the updated page code;

And if not, executing the step of acquiring the page data of each page to be rendered, acquiring the 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.

3. The method of claim 1, wherein generating virtual nodes corresponding to each of the rendered page encodings based on each of the rendered page encodings and the page data corresponding to the rendered page encodings, comprises:

4. The method of claim 1, wherein receiving the page display instruction and creating the virtual hierarchy DOM tree comprises:

Receiving a page display instruction, and sending a quantity request to a cloud end based on the page display instruction, wherein the quantity request is used for requesting the total quantity of the pages to be displayed;

And receiving the total number sent by the cloud based on the number request, and returning a result based on the total number to create a virtual DOM tree.

5. The method of claim 1, wherein rendering the page to be rendered based on the virtual node to which the rendered page code corresponds comprises:

mapping each virtual node based on a rendering function to obtain an actual node corresponding to the virtual node;

6. The method of claim 1, wherein rendering the page to be rendered based on the virtual node to which the rendered page code corresponds and displaying the rendered page to be displayed to a target screen based on the page code, comprises:

displaying the rendered page to be displayed to a target screen, wherein the method comprises the following steps:

Storing the rendered page to be displayed into a cache queue, and displaying the page code of the page to be 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, wherein after rendering the page to be rendered based on the virtual node to which the rendered page code corresponds and displaying the rendered page to be displayed to a target screen based on the page code, further comprising:

updating the corresponding virtual node based on the updated page data and the corresponding page code under the condition that an updating instruction of the page data is received;

rendering the updated virtual node to update the rendered page to be rendered.

8. A page rendering apparatus, comprising:

The second processing module is configured to acquire page data of each page to be rendered based on each rendering page code, generate virtual nodes corresponding to each rendering page code based on each rendering page code and the page data corresponding to the rendering page code, wherein the virtual nodes are child nodes of a virtual DOM, and each page code corresponds to one virtual node;

The 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 to a target screen based on the 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 the processor implements the steps of the method according to any of claims 1 to 7 when the computer program is executed.

10. A computer readable storage medium storing a computer program, characterized in that the computer program when executed by a processor implements the steps of the method according to any one of claims 1 to 7.