Page display processing method and device, equipment and storage medium

Abstract

The embodiment of the invention discloses a page display processing method and device, equipment and a storage medium, and can be applied to the field of maps. The method comprises the steps that after it is detected that an interface interaction operation is triggered in a display page, a virtual document object model tree is created based on a real document object model tree, and the real document object model tree acts on page display in a client side; performing rendering updating processing on the virtual document object model tree to obtain an updated virtual document object model tree; obtaining difference information between the virtual document object model tree and the updated virtual document object model tree; and carrying out rendering updating processing on the real document object model tree based on the difference information so as to realize page updating corresponding to the interface interaction operation. The page updating performance can be improved.

Description

Technical Field

[0001] This application relates to the technical field of web development, and in particular, to a page display processing method, apparatus, electronic device, and computer-readable storage medium. Background Art

[0002] Currently, the mainstream web page rendering methods include client-side rendering and server-side rendering. Client-side rendering means that the page content is generated by the browser executing JS (JavaScript) scripts. Server-side rendering means that after the browser initiates a page request, the server renders a Hyper Text Markup Language (HTML) string and returns it to the client, enabling the browser to directly render the page content presented to the user based on this HTML string.

[0003] In scenarios where the page structure is relatively complex, due to the need for more complex rendering, the page update speed is slow. Therefore, how to improve the page update performance is a technical problem that needs to be solved by those skilled in the art. Summary of the Invention

[0004] To solve the above technical problems, embodiments of this application provide a page display processing method, apparatus, electronic device, computer-readable storage medium, and computer program product.

[0005] One aspect of the embodiments of this application provides a page display processing method, which is applied to a client. The method includes: after detecting that an interface interaction operation is triggered in the display page, creating a virtual document object model tree based on the real document object model tree, where the real document object model tree is used to implement the page display in the client; performing a rendering update process on the virtual document object model tree to obtain an updated virtual document object model tree; obtaining the difference information between the virtual document object model tree and the updated virtual document object model tree; and performing a rendering update process on the real document object model tree based on the difference information to implement the page update corresponding to the interface interaction operation.

[0006] Another aspect of the embodiments of the present application provides a page display processing device, which is deployed on the client side. The device includes: a virtual tree creation module configured to create a virtual document object model tree based on a real document object model tree after detecting an interface interaction operation in the display page, where the real document object model tree is used to implement page display in the client; a virtual tree update module configured to perform rendering update processing on the virtual document object model tree to obtain an updated virtual document object model tree; a difference acquisition module configured to obtain difference information between the virtual document object model tree and the updated virtual document object model tree; and a difference update module configured to perform rendering update processing on the real document object model tree based on the difference information to implement page update corresponding to the interface interaction operation.

[0007] Another aspect of the embodiments of the present application provides an electronic device, including: one or more processors; a memory for storing one or more programs, which, when executed by the one or more processors, cause the electronic device to implement the page display processing method as described above.

[0008] Another aspect of the embodiments of the present application provides a computer-readable storage medium, on which computer-readable instructions are stored. When the computer-readable instructions are executed by a processor of the computer, the computer is caused to execute the page display processing method as described above.

[0009] Another aspect of the embodiments of the present application provides a computer program product, including a computer program, which, when executed by a processor, implements the page display processing method as described above.

[0010] In the technical solution provided by the embodiments of the present application, after the client detects an interface interaction operation in the display page, it first creates a virtual document object model tree based on the real document object model tree, then performs rendering update processing on the basis of the virtual document object model tree to obtain an updated virtual document object model tree, obtains the difference information corresponding to the interface interaction operation by comparing the new and old virtual document object model trees, and finally performs rendering update processing on the real document object model tree based on this difference information to implement page update corresponding to the interface interaction operation. It can be seen from this that the present application uses the difference resources between the nodes of the document object model tree to implement page update in order to achieve the purpose of improving page update performance.

[0011] It should be understood that the above general description and the following detailed description are only exemplary and explanatory, and cannot limit the present application. BRIEF DESCRIPTION OF THE DRAWINGS

[0012] Figure 1It is a schematic flowchart of a browser rendering a page shown in an exemplary embodiment of the present application;

[0013] Figure 2 It is a schematic flowchart of a browser rendering a page shown in another exemplary embodiment of the present application;

[0014] Figure 3 It is a schematic flowchart of a browser rendering a page shown in yet another exemplary embodiment of the present application;

[0015] Figure 4 It is a flowchart of a page display processing method shown in an exemplary embodiment of the present application;

[0016] Figure 5 It is on the basis of the embodiment shown in Figure 4 A flowchart of a page display processing method further proposed;

[0017] Figure 6 It is a schematic flowchart of traversing and comparing new and old virtual DOM trees exemplarily;

[0018] Figure 7 It is a flowchart of a page display processing method shown in another exemplary embodiment of the present application;

[0019] Figure 8 It is a flowchart of a page display processing method shown in another exemplary embodiment of the present application;

[0020] Figure 9 It is a schematic interaction flowchart corresponding to a rendering server exemplarily;

[0021] Figure 10 It is a flowchart of a page display processing method shown in yet another exemplary embodiment of the present application;

[0022] Figure 11 It is a schematic flowchart of a page display execution process of an exemplary application scenario of the present application;

[0023] Figure 12 It is a block diagram of a page display processing device shown in an exemplary embodiment of the present application;

[0024] Figure 13 It shows a schematic structural diagram of a computer system of an electronic device suitable for implementing the embodiments of the present application. Detailed implementation manners

[0025] Exemplary embodiments will be described in detail herein, and examples thereof are shown in the accompanying drawings. When the following description refers to the accompanying drawings, unless otherwise indicated, the same numbers in different drawings represent the same or similar elements. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with the present application. On the contrary, they are merely examples of devices and methods consistent with some aspects of the present application as detailed in the appended claims.

[0026] The block diagrams shown in the accompanying drawings are merely functional entities and do not necessarily correspond to physically independent entities. That is, these functional entities can be implemented in software form, or implemented in one or more hardware modules or integrated circuits, or implemented in different networks and / or processor devices and / or microcontroller devices.

[0027] The flowcharts shown in the accompanying drawings are merely exemplary illustrations and do not necessarily include all content and operations / steps, nor do they necessarily need to be executed in the described order. For example, some operations / steps can be decomposed, while some operations / steps can be combined or partially combined. Therefore, the actual execution order may change according to the actual situation.

[0028] As used in this application, "a plurality of" means two or more. "And / or" describes the association relationship of associated objects and indicates that three relationships can exist. For example, A and / or B can represent: A exists alone, A and B exist simultaneously, and B exists alone. The character " / " generally represents an "or" relationship between the associated objects before and after.

[0029] In the specification and claims of this application and the accompanying drawings, terms such as "first", "second", "third", and "fourth" are used to distinguish different objects, rather than to describe a specific order. The terms "comprising" and "having" and any variations thereof are intended to cover non-exclusive inclusion. For example, a process, method, system, product, or device that includes a series of steps or units is not limited to the listed steps or units, but optionally further includes steps or units not listed, or optionally further includes other steps or units inherent to these processes, methods, products, or devices.

[0030] In the embodiments of this application, the term "module" or "unit" refers to a computer program with a predetermined function or a part of a computer program, which works together with other related parts to achieve a predetermined goal, and can be fully or partially implemented by using software, hardware (such as processing circuits or memories), or a combination thereof. Similarly, one processor (or multiple processors or memories) can be used to implement one or more modules or units. In addition, each module or unit can be a part of the overall module or unit that includes the function of the module or unit.

[0031] First, please refer to Figure 1 , Figure 1 which is a schematic flowchart of a browser rendering a page shown in an exemplary embodiment of the present application. It should be noted that Figure 1 the flowchart of the browser rendering the page shown can be understood as the rendering process of a browser of the type where the front-end and back-end are not separated.

[0032] Specifically, after the user enters a website address in the browser and requests a search, the browser first requests the server to obtain the corresponding HTML file. The browser parses the HTML file and constructs a Document Object Model (DOM) tree based on the HTML file, and constructs a style tree according to the Cascading Style Sheets (CSS) file. During the process of parsing the HTML file, if a JS script needs to be executed, the browser will request the server again to obtain the JS file and execute the obtained JS file. If the execution of the JS file modifies the DOM structure, the DOM tree will be regenerated. After the DOM tree and the style tree are generated, the rendering tree is continued to be generated. The rendering process of the browser renders the rendering tree, generates a layout tree accordingly, then performs drawing, then composes frames, and synthesizes the final page image through the Graphics Processing Unit (GPU).

[0033] Currently, the mainstream web page rendering modes include client-side rendering and server-side rendering. Please refer to Figure 2 , Figure 2 which is a schematic flowchart of a browser rendering a page shown in another exemplary embodiment of the present application, and specifically shows the flowchart of the browser rendering the page in the client-side rendering mode.

[0034] It can be understood that the client-side rendering mode means that the content on the page is generated by the browser executing a JS script. The browser first requests the front-end server to obtain the HTML file according to the website address input by the user, and then renders the obtained HTML file to obtain a static page. If a JS file needs to be obtained, it requests the interface provided by the back-end server, and the back-end server returns data. The browser continues to render. The data returned by the back-end server can be understood as including the dynamic data and interaction events of the page, and the browser continuing to render can be understood as inserting data into the static page, and finally forming a complete page.

[0035] The client - side rendering mode shown above can also be further understood as follows: components are output in the browser, and the page is rendered to the renderer by executing JS scripts. User interaction is achieved by generating and manipulating the DOM tree. The HTML file serves only as a static file. When the client makes a request, the server does not perform any processing and directly returns the original file to the client. Then, background data is requested according to the JS script code in the HTML file and inserted into the page.

[0036] In the client - side rendering mode, the browser front - end is responsible for rendering the page, and the back - end is responsible for implementing the interfaces. When the front - end jumps, there is no need to request the back - end, which can accelerate page jumps and thus improve the user experience. However, since the page content needs to be loaded through JS, during the page rendering process, it is necessary to wait for the entire application's JS to be loaded and for dynamic page data to be obtained through interface data requests. Therefore, there is also the drawback of a long first - screen loading time.

[0037] Figure 3 It is a schematic diagram of the process of a browser rendering a page shown in another exemplary embodiment of the present application, which specifically shows the process of a browser rendering a page in the server - side rendering mode. Figure 3 It can be seen that, different from the client - side rendering mode, in the server - side rendering mode, all JS rendering work is completed by the front - end server, and a complete HTML file and data are returned by the front - end server. The browser only needs to render it into a page image.

[0038] The server - side rendering mode can also be further understood as follows: when the user requests a page for the first time, the server renders the required components or pages into an HTML string and then returns it to the browser. What the browser obtains is HTML content that can be directly rendered and presented to the user, without the need to execute JS code to generate the DOM tree.

[0039] In the server - side rendering mode, since the server directly outputs an HTML string, the browser does not need to load the entire application's JS code when loading the first screen. Therefore, the first - screen loading speed is relatively fast. However, since the page needs to access the server every time it jumps, the user experience is relatively poor compared to the client - side rendering mode.

[0040] From this, it can be seen that different page rendering modes have different advantages and disadvantages. Therefore, in actual application scenarios, different page rendering modes can be selected according to actual needs. And in scenarios where the page structure is relatively complex or there are complex rendering requirements, page rendering is also more complex. No matter which rendering mode is used, there will be a problem of slow page update speed. Therefore, it is necessary to solve the problem of improving the performance of page updates.

[0041] To solve this problem, embodiments of the present application propose a page display processing method, a page display processing device, an electronic device, a computer-readable storage medium, and a computer program product. These embodiments of the present application will be introduced in detail below.

[0042] Figure 4 FIG. 4 is a flowchart of a page display processing method shown in an exemplary embodiment of the present application. It can be understood that this method is applied to a client, for example, specifically executed by a browser, or specifically executed by other clients. The client can be installed on user terminals including but not limited to mobile phones, computers, intelligent voice interaction devices, smart home appliances, vehicle terminals, aircraft, etc. This embodiment does not limit this.

[0043] As Figure 4 shown, this method includes S410 - S440, which are introduced in detail as follows:

[0044] S410, after detecting that an interface interaction operation is triggered in the display page, create a virtual document object model tree based on the real document object model tree, and the real document object model tree is used to implement page display in the client.

[0045] First, it should be noted that this embodiment is used to implement page updates corresponding to interface interaction operations in the client, and does not limit how the client displays the first - screen page.

[0046] It should also be mentioned that the client implements page display based on page rendering. Therefore, it can also be understood that the client needs to build a DOM tree to implement page display. Thus, in this embodiment, the DOM tree used to implement page display in the client is called the real DOM tree. That is, the page displayed in the client is obtained based on the rendering of the real DOM tree, and the update of the page displayed in the client must also correspond to the update of the real DOM tree.

[0047] The interface interaction operation triggered in the display page detected by the client is, for example, clicking on a certain page button, entering data in an input box, etc. This embodiment does not limit the specific content of the interface interaction operation. After the interface interaction operation is triggered in the display page, the client usually needs to perform corresponding page updates to meet the user's usage requirements.

[0048] An easily conceivable way to update the page is to directly render and update the real DOM tree. However, due to the complexity of the real DOM tree structure itself, operations such as creating, updating, and inserting the real DOM tree will cause a large amount of performance loss. Especially when the page structure itself is also relatively complex, the method of directly updating the real DOM tree is very inefficient, not only wasting processing resources but also easily causing memory leakage problems. Among them, memory leakage refers to the situation where the heap memory that has been dynamically allocated in the program is not released or cannot be released due to some reason, resulting in a waste of system memory and causing serious consequences such as a slowdown in the program's running speed or even system crashes.

[0049] To solve the above problems, this embodiment proposes a technical solution that uses the virtual DOM technology to achieve more efficient real DOM tree updates, and then acts on achieving more efficient page updates, thereby saving processing resources and avoiding memory leakage. It can be understood that the virtual DOM technology is a lightweight data structure that represents the real DOM structure in memory.

[0050] Specifically, after the client detects an interface interaction operation triggered in the displayed page, it first creates a virtual DOM tree based on the real DOM tree. This virtual DOM tree can be understood as a replica of the real DOM tree, so that subsequent changes to the real DOM tree caused by the interface interaction operation can be calculated in memory based on this virtual DOM tree, and then these changes can be applied to the real DOM tree, thus enabling more efficient page updates.

[0051] S420. Render and update the virtual document object model tree to obtain an updated virtual document object model tree.

[0052] The technical solution adopted in this embodiment to calculate in memory the changes to the real DOM tree generated by the interface interaction operation is to render and update the created virtual DOM tree based on the triggered interface interaction operation, thereby obtaining an updated virtual DOM tree.

[0053] It can be understood that the updated virtual DOM tree is first calculated in memory, so that subsequent differences can be obtained by comparing the new (i.e., the virtual DOM tree created in S410) and old (i.e., the updated virtual DOM tree) virtual DOM trees, and the real DOM tree can be rendered and updated based on the difference information, thus achieving the corresponding page update.

[0054] Since directly updating the DOM tree consumes a lot of computer resources, compared with directly rendering and updating the real DOM tree, in this embodiment, the virtual DOM technology is used to transfer this resource-consuming process to the memory for processing. Actually, based on the DOM difference information obtained from the in-memory processing, the real DOM tree is updated, thereby improving the update efficiency of the real DOM tree, which in turn acts on improving the performance of the client to update the page, and it is not easy to cause memory leakage problems, and further ensures the stability of the client display page.

[0055] S430, obtain the difference information between the virtual document object model tree and the updated virtual document object model tree.

[0056] Since the new virtual DOM tree is updated based on the old virtual DOM tree, by comparing the differences between the two virtual DOM trees, the difference information can be obtained, and this difference information reflects the specific content that needs to be updated for the real DOM tree to implement page updates.

[0057] S440, perform rendering and updating processing on the real document object model tree based on the difference information to implement the page update corresponding to the interface interaction operation.

[0058] It can be seen from this that in the method provided in this embodiment, after the client detects that an interface interaction operation is triggered in the display page, it first creates a virtual DOM tree based on the real DOM tree, and then performs rendering and updating processing on the basis of the virtual DOM tree to obtain the updated virtual DOM tree. The difference information corresponding to the interface interaction operation is obtained by comparing the new and old virtual DOM trees, and finally, based on this difference information, the real DOM tree is rendered and updated, thereby using the difference resources between the nodes of the DOM tree to implement page updates, and the purpose of improving the page update performance can be achieved.

[0059] Please continue to refer to Figure 5 , Figure 5 which is Figure 4 a flowchart of a page display processing method further proposed on the basis of the embodiment shown.

[0060] From Figure 5 the process shown, as an exemplary implementation, the process of the client creating a virtual DOM tree based on the real DOM tree may include S510 - S520 shown below:

[0061] S510, define virtual document object model nodes;

[0062] S520, perform conversion processing on the real document object model tree to obtain a virtual document object model tree composed of virtual document object model nodes.

[0063] It can be understood that both the virtual DOM tree and the real DOM tree are tree-shaped data structures composed of multiple nodes, and each node represents a DOM node. Starting from the root node, all child nodes will have a unique parent node and at least one child node, and the child nodes contain information such as describable attributes, types, and child nodes; if the DOM node is a leaf node, it does not contain information about child nodes.

[0064] In this embodiment, the nodes of the virtual DOM tree are called virtual DOM nodes. Therefore, the essence of a virtual DOM node is a JS object used to represent information such as the type, attributes, or child nodes of a real DOM node. A virtual DOM node can be an element node, a text node, or a component node. In a more complex page or business logic, a virtual DOM node can also be a custom component node.

[0065] After defining the virtual DOM nodes, the real DOM tree is processed and transformed to obtain a virtual DOM tree composed of virtual DOM nodes. Exemplarily, JSX can be used to describe the structure of the virtual DOM tree, that is, a virtual DOM tree can be constructed using a JSX file. JSX is a JS extension syntax used to describe the UI (User Interface) structure.

[0066] Exemplarily, by converting the code file for describing the interface design (i.e., the JSX file) into a code file in the target format and executing the code file in the target format, the framework function of the client can be called to create corresponding virtual DOM nodes, thereby generating a virtual DOM tree. Among them, the code file in the target format can be, for example, a JS code file. Tools such as Babel can be used to convert the JSX file into a JS file. The framework function of the client can be, for example, the createElement function of the React (a JS library for building user interfaces) framework, which is not limited here.

[0067] Thus, in this embodiment, by defining virtual DOM nodes, converting the JSX file into a JS file, and executing the JS file, the framework function of the client can be called to create corresponding virtual DOM nodes, thereby generating a virtual DOM.

[0068] As another exemplary embodiment, the process of rendering and updating the virtual DOM tree to obtain the updated virtual DOM tree may include: the client re-calls the rendering function to create a new virtual DOM tree to obtain the updated virtual DOM tree.

[0069] It can be understood that a rendering function is a function that takes properties and states as inputs and returns a virtual DOM tree. The front-end framework where the client is located can directly use the rendering function, and the rendering function can be created through a component, which can be an object or a class encapsulating the rendering function. When the properties or states of the component change, the front-end framework will re-call the rendering function, thereby obtaining a new virtual DOM tree, so as to implement the rendering update process of the virtual DOM tree.

[0070] As another exemplary implementation, the process of obtaining the difference information between the new and old virtual DOM trees may include the following steps:

[0071] S530, perform a depth-first traversal on the virtual document object model tree and the updated virtual document object model tree respectively;

[0072] S540, compare the two nodes obtained from each traversal, and determine the difference information between the virtual document object model tree and the updated virtual document object model tree according to the comparison result.

[0073] In this implementation, starting from the root nodes of their respective tree structures, perform a depth-first traversal on the new and old virtual DOM trees respectively. The strategy of depth-first traversal means that starting from the initial access node, if there are multiple adjacent nodes for the initial access node, the first adjacent node is preferentially accessed, and then this accessed adjacent node is used as the initial access node to access its first adjacent node. That is to say, it can be summarized that each time, after accessing the current node, the first adjacent node of the current node is accessed first. It can be seen that the depth-first traversal strategy is a process of preferentially digging deep into the longitudinal nodes.

[0074] Each traversal will traverse a node from the new and old virtual DOM trees respectively, that is, one node comes from the old virtual DOM tree and one node comes from the new virtual DOM tree. Since the structures of the new and old virtual DOM trees are similar, there is a correlation between the two nodes obtained from each traversal. Based on this correlation, the two nodes are comparable. This correlation can be understood as that the two nodes being compared are at the same level.

[0075] The strategy for comparing the two nodes obtained from each traversal may include the following steps:

[0076] S541, compare whether the node information of the two traversed nodes is the same;

[0077] S542, if there is different node information, record the difference information accordingly, and when the current node is not a leaf node, traverse the child nodes of the current node again on the basis of the current traversal operation, otherwise stop traversing the child nodes;

[0078] S543. If the node information is the same, continue to traverse the child nodes of the current node.

[0079] It can be understood that the node information may include at least one of the node type and the node attributes. As long as any one of the node types or node attributes of two nodes is different, it means that there is a difference between these two nodes.

[0080] In the case where it is obtained by comparison that there are different node information between two nodes, record the difference information accordingly and perform the next traversal. In the case where the node information of two nodes is the same, directly perform the next traversal.

[0081] The node obtained in this traversal is called the current node. When the current node is not a leaf node, the next traversal means starting an asynchronous thread to traverse the child nodes of the current node again based on the current traversal operation. When the current node is a leaf node, stop traversing the child nodes of the current node and return to the upper layer node, that is, return to the parent node of the current node. It can be seen from this that the entire traversal process is recursive until the traversal and comparison of the new and old DOM trees are completed.

[0082] In an exemplary embodiment, when there are multiple items of node information, the comparison can also be performed for each item of node information in sequence. For example, the node types of two nodes can be compared first. If the node types are different, for example, one node type is div and the other node type is p, then record the difference information and perform the next traversal and comparison. If the node types are the same, continue to compare the node attributes of the two nodes. If there are changes in the node attributes, for example, one node attribute is class and the other node attribute is style, then record the difference information and perform the next traversal and comparison.

[0083] Figure 6 is a schematic flowchart of an exemplary process for traversing and comparing new and old virtual DOM trees. As Figure 6 shown, start depth - first traversal from the root nodes of the new and old virtual DOM trees respectively. For the two nodes obtained by traversal, first compare whether the node types are the same. If they are different, record the difference information, and determine whether the current node is a leaf node. If it is not a leaf node, start an asynchronous thread to traverse the child nodes respectively and jump to the comparison of the node types. If it is a leaf node, after returning to the upper layer node, jump to the traversal of the child nodes. If the node types are the same, continue to determine whether the node attributes are the same. If they are different, also record the difference information and jump to the judgment of whether the current node is a leaf node. If they are the same, jump to the traversal of the child nodes.

[0084] In another exemplary embodiment, the recorded difference information includes information corresponding to DOM operations. DOM operations can be understood as information that maps how to perform update operations on the real DOM tree when there are differences between two nodes. DOM operations can be replacement operations, deletion operations, addition operations, etc.

[0085] For example, if the node types or node attributes of the new and old virtual DOM nodes are different, the DOM operation can be a replacement operation, indicating directly replacing the old virtual DOM node with the new virtual DOM node. If the old virtual DOM node has child nodes while the new virtual DOM node does not have child nodes, the DOM operation can be a deletion operation, indicating directly deleting the old virtual DOM node. If the old virtual DOM node does not have child nodes while the new virtual DOM node has child nodes, the DOM operation is an addition operation, indicating adding a virtual DOM node. Thus, when subsequently performing rendering and update processing on the real DOM tree based on the difference information, the rendering and update processing of the real DOM tree can be directly performed based on the difference operations, thereby achieving more efficient page updates.

[0086] In addition, it should be noted that during the process of traversing and comparing the nodes of the new and old virtual DOM trees, for the case where the new virtual DOM node does not have child nodes while the old virtual DOM node has child nodes, the old virtual DOM node can be directly deleted, and then the difference information is recorded accordingly. At this time, the comparison process of the child nodes is no longer executed, so processing resources can be saved to a certain extent. For the case where the old virtual DOM node does not have child nodes while the new virtual DOM node has child nodes, a child node with blank content can be constructed for the old virtual DOM node, so as to compare the child node with blank content and the child nodes of the new virtual DOM node. It can be seen that this still ensures the effectiveness of the DOM node comparison operation and can ensure the performance stability of the client to a certain extent.

[0087] In another exemplary embodiment, multiple threads can run in the client. The thread responsible for page display in the client is called the main thread, that is, the main thread is responsible for page rendering processing. On this basis, as Figure 7 shown, the page display processing method further includes S710 - S730, which are introduced in detail as follows:

[0088] S710, create an independent thread, and send the virtual document object model tree and the updated virtual document object model tree from the main thread to the independent thread.

[0089] In this embodiment, it should be understood that an independent thread refers to a separate thread that runs in parallel with the main thread, and the creation and processing of independent threads can be achieved through the Web Workers architecture (a technology for running background tasks in browsers). Exemplarily, first, a new JS file, such as worker.js, can be created to write the code to be executed in the Web Worker, and then a Web Worker instance is created in the main thread and pointed to the JS file, thereby achieving the creation of an independent thread.

[0090] In the main thread, the process of creating a virtual DOM tree based on the real DOM tree and performing rendering and update processing on the virtual DOM tree is still executed. Therefore, after creating an independent thread, the new and old virtual DOM trees can be sent from the main thread to the independent thread, which can improve the performance of page update for the client based on the subsequent interaction between the independent thread and the main thread. Exemplarily, the new and old virtual DOM trees can be sent to the WebWorker (i.e., the created independent thread) in the main thread through the postMessage method.

[0091] S720, obtain the difference information between the virtual document object model tree and the updated virtual document object model tree through the independent thread, and send the difference information to the main thread.

[0092] After obtaining the new and old virtual DOM trees, the independent thread executes the process of obtaining the difference information between the new and old virtual DOM trees, and sends the obtained difference information to the main thread. It should be noted that the process of the independent thread executing to obtain the difference information between the new and old virtual DOM trees can be referred to the description in the foregoing embodiments, and will not be elaborated here.

[0093] S730, perform page update corresponding to the interface interaction operation in the main thread according to the difference information.

[0094] The main thread specifically executes the process of rendering and updating the real DOM tree according to the difference information sent by the independent thread, thereby achieving page update corresponding to the interface interaction operation. Exemplarily, the difference information can be a DOM operation sequence. After receiving the DOM operation sequence, the main thread directly applies the corresponding DOM operation to the real DOM tree, thereby completing the update of the display page.

[0095] It can be seen that the method provided in this embodiment realizes the update of the display page by creating an independent thread to assist the main thread, and improves the efficiency of page update by utilizing the parallel processing ability of the multi-core CPU (Central Processing Unit).

[0096] In addition, it should be noted that another embodiment of the present application also proposes a technical solution based on the server-side rendering mode to enhance the rendering of the first-screen page in a scenario where the page structure is relatively complex, so as to improve the user experience.

[0097] Please refer to Figure 8 , Figure 8 which is a flowchart of a page display processing method shown in another exemplary embodiment of the present application. The page display processing method further includes S810 - S830 based on the embodiment shown in Figure 4 and is introduced in detail as follows:

[0098] S810, send a page request to the rendering server.

[0099] In the server-side rendering mode, the client sends a page request to the rendering server, so that the rendering server returns the rendered page rendering data to the client, and the client can directly perform rendering and display according to the received page rendering data. As mentioned above, the page rendering data is an HTML string rendered by the rendering server.

[0100] It should be understood that the rendering server mentioned in this embodiment is used to provide server-side rendering-related services to the client. The rendering server can specifically be an independent physical server, or a server cluster or distributed system composed of multiple physical servers, or a cloud server that provides basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, security services, and big data and artificial intelligence platforms. This embodiment does not limit the specific product form of the rendering server.

[0101] S820, receive multiple page rendering data blocks returned by the rendering server for the page request. The multiple page rendering data blocks are used to describe the first-screen page corresponding to the page request and are transmitted to the client based on at least one transmission channel.

[0102] In this embodiment, the rendering server transmits the page rendering data to the client in a block manner, that is, the rendering server transmits multiple page rendering data blocks used to describe the first-screen page corresponding to the page request to the client.

[0103] Figure 9 is an interaction flowchart corresponding to an exemplary rendering server, and is shown by Figure 9It can be seen that after the client responds to the HTML request sent by the client, it requests relevant data from the interface service, renders it, and then returns it to the client. It can be understood that the interface service is a server that provides business data services for the display of pages in the client. The interface service can return data to the rendering server in chunks. After receiving each chunk of data, the rendering server performs rendering processing on the chunk of data to obtain respective page rendering data chunks. For example Figure 9 The page rendering data chunks 1-3 shown

[0104] Exemplarily, the interface service can return the interface data to the rendering server in chunks when it determines that the amount of data received requested by the rendering server exceeds a preset data volume threshold, or it can also return the interface data requested by the rendering server in chunks based on a pre-configured chunking strategy. The chunking strategy can be, for example, splitting the interface data into a preset number of chunks, or chunking the interface data requested by the rendering server according to the preset data volume of each chunk. This embodiment does not limit this and can be set according to actual application requirements

[0105] Multiple page rendering data chunks can be transmitted to the client through at least one transmission channel. It should be noted that the transmission channel between the client and the rendering server can refer to the communication between the respective processes at both ends. That is to say, the rendering server can use multiple threads to transmit different page rendering data chunks respectively

[0106] It should also be noted that this embodiment does not limit the order in which the rendering server transmits multiple page rendering data chunks to the client, nor does it limit the order in which multiple page rendering data chunks arrive at the client. Generally speaking, after the rendering server obtains the chunked data returned by the interface service, it can immediately perform rendering processing to obtain the corresponding page rendering data chunks, and preferentially transmit the obtained page rendering data chunks to the client through idle threads to ensure that each page rendering data chunk can be transmitted to the client as quickly as possible, thereby improving the overall rendering performance of the client

[0107] An idle thread is understood to be a thread that is not transferring page rendering data blocks. If there is no idle thread currently, one can continue to wait for an idle thread or, through a preset policy, allocate the page rendering data block to be transferred to a certain target thread, and immediately execute the transfer of the page rendering data block after the target thread switches to the idle state. The preset policy is, for example, randomly selecting a thread from multiple threads as the target thread, or selecting the thread with the smallest queue volume among multiple threads as the target thread, or selecting the thread with the smallest waiting duration among multiple threads as the target thread. The waiting duration in each thread can be estimated based on the remaining data volume to be transferred and / or the start transfer time in the thread. Or, in the case where there are multiple threads with the smallest queue volume, one can randomly select a target thread from them or select the thread with the smallest waiting duration as the target thread. This embodiment does not limit this.

[0108] S830. Render multiple page rendering data blocks to display the initial screen page.

[0109] After the client receives the page rendering data block, it immediately performs rendering and display instead of waiting for the entire page to finish loading.

[0110] It can be seen from this that, through the use of the streaming server-side rendering mode in this embodiment, the time for the page rendering data to reach the client can be shortened, thereby shortening the time for the page in the client to become interactive, which can greatly improve the user's perceived performance and user experience.

[0111] In another embodiment of the present application, some optimization schemes for the initial screen page rendering are further provided. For example Figure 10 As shown, the page display processing method further includes one or more groups of steps among S1010 - S1030, S1040 - S1050, and S1060 - S1080.

[0112] First, the step contents shown in S1010 - S1030 are as follows:

[0113] S1010. Bind the first target page element to the first event processor;

[0114] S1020. When the first event processor is triggered, request the rendering server to obtain the first code file;

[0115] S1030. Load and execute the first code file to implement the event processing of the first event processor.

[0116] In the above process, binding the first target page element to the first event handler means adding the first event handler, such as onclick, etc., to the first target page element and pointing the first event handler to the corresponding JS function. This ensures that only when the user interacts with the first target page element, the rendering server is requested to load and execute the relevant JS code through the interface service, thus replacing the injection of all JS code during preloading and achieving on-demand loading and execution.

[0117] It can be understood that the essence of an event handler is a piece of code for handling specific events, usually a function. These events typically include interaction events of user interaction, such as clicks, keyboard inputs, mouse movements, etc., which are not restricted here.

[0118] Taking the first event handler corresponding to the click event as an example, by binding the click event handler to the first target page element, when the user clicks on the first target page element, the function associated with the click event handler will be called, and a request will be made to the rendering server to obtain the first code file, and the obtained first code file will be loaded and executed.

[0119] The step content shown in S1040 - S1050 is as follows:

[0120] S1040, add a target attribute to the second target page element, where the target attribute is used to identify the first component rendered by the second target page element;

[0121] S1050, perform rendering processing of the first component based on the target attribute.

[0122] In the above process, add a target attribute to the second target page element, such as the data - component attribute, so that after the client captures this target attribute, it can dynamically request and render the first component according to the content identified by this target attribute, thereby achieving on - demand loading and execution.

[0123] In addition, the first component can also be associated with a specific URL (Uniform Resource Locator), so that the client can dynamically request and render the first component according to the page request corresponding to this specific URL to further achieve on - demand loading and execution.

[0124] It should be understood that in a front - end framework, a component refers to a reusable unit that encapsulates specific functions or user interfaces, usually composed of HTML, CSS, and JS code, and is used to create specific user interface elements.

[0125] The step content shown in S1060 - S1080 is as follows:

[0126] S1060, bind the second component to the second event handler;

[0127] S1070, when the second event handler is triggered, request the rendering server to obtain the second code file;

[0128] S1080, after loading the second code file into the second component, perform the rendering process of the second component.

[0129] The above process realizes that when the user interacts with the page element associated with the second component that needs to be lazily loaded, the second component is dynamically loaded and rendered. Specifically, the second component can still be bound to the second event handler, so that when the second event handler is triggered, the client requests the rendering server to obtain the second code file, and through the loading and execution of the second code file, the rendering process of the second component is realized.

[0130] In other words, when the user interacts with the page element associated with the second component that needs to be lazily loaded, the second event handler will be triggered. The second event handler is responsible for dynamically loading the JS code related to the second component, that is, the code in the second code file. Once the JS code is loaded, the logic for rendering the relevant component can be executed and inserted into the page.

[0131] In some other embodiments, the code of the component and the event handler can be split into independent modules. For example, a modularization tool (such as Webpack) can be used for processing. The client can load these modules on demand instead of loading all the code at the beginning. The client can also cache these modules to improve performance and reduce repeated loading.

[0132] From the above, any set of steps among S1010 - S1030, S1040 - S1050, and S1060 - S1080 can realize the on-demand loading and execution of JS files by the client. The relevant JS code will only be loaded and executed when the user interacts with a certain element on the page. Therefore, it helps to reduce the resource consumption during the initial page loading, thereby improving the page display performance. And for the rendering server, since it does not need to inject all the JS code during the preloading stage, it can also improve the chunk data transmission performance of the rendering server, further improving the performance of the entire page rendering system.

[0133] Figure 11It is a schematic flowchart of page display processing for an exemplary application scenario of the present application. It can be seen that after the browser sends an HTML request to the rendering server, the rendering server responds to the HTML request, requests data from the interface service, obtains the interface data returned by the interface service accordingly, renders the interface data, and returns the obtained HTML string to the browser. Subsequently, the browser performs DOM parsing and rendering on the obtained HTML string. If it is necessary to load JS code, it sends a JS request to the rendering server, enabling the rendering server to obtain the preloaded code from the Content Delivery Network (CDN) and return the preloaded code to the browser. The browser performs DOM parsing and rendering to achieve the corresponding page display. When the user interacts with a component or element of the page displayed in the browser that is not preloaded code, such as clicking, the browser requests JS code from the rendering server. The rendering server still obtains the JS code file from the content delivery network. The browser loads and executes the JS code file to achieve the page display processing corresponding to the interaction operation.

[0134] It can be obtained therefrom that in the server-side rendering mode, it is not necessary to inject all JS code during the preloading stage, but only load and execute the relevant JS code when the user interacts with a certain element on the page, thereby reducing the resource consumption during page loading and improving the page display performance.

[0135] Figure 12 It is a block diagram of a page display processing device shown in an exemplary embodiment of the present application. The page display processing device is deployed on the client side and includes:

[0136] A virtual tree creation module 1210, configured to create a virtual document object model tree based on the real document object model tree after detecting an interface interaction operation triggered in the display page. The real document object model tree is used to implement the page display in the client;

[0137] A virtual tree update module 1220, configured to perform rendering update processing on the virtual document object model tree to obtain an updated virtual document object model tree;

[0138] A difference acquisition module 1230, configured to acquire the difference information between the virtual document object model tree and the updated virtual document object model tree;

[0139] A difference update module 1240, based on the difference information, performs rendering update processing on the real document object model tree to achieve page update corresponding to the interface interaction operation.

[0140] In another exemplary embodiment, the virtual tree creation module 1210 includes:

[0141] A node definition unit configured to define nodes of a virtual document object model;

[0142] A conversion processing unit configured to perform conversion processing on a real document object model tree to obtain a virtual document object model tree composed of nodes of the virtual document object model.

[0143] In another exemplary embodiment, the conversion processing unit is further configured to:

[0144] Convert a code file for describing interface design into a code file in a target format;

[0145] By executing the code file in the target format, call a framework function to create corresponding nodes of the virtual document object model and generate a virtual document object model tree.

[0146] In another exemplary embodiment, the difference acquisition module 1230 includes:

[0147] A traversal module configured to perform a depth-first traversal on the virtual document object model tree and the updated virtual document object model tree respectively; wherein, each traversal obtains a node in the virtual document object model tree and a node in the updated virtual document object model tree;

[0148] A comparison module configured to compare the two nodes obtained by each traversal and determine the difference information between the virtual document object model tree and the updated virtual document object model tree according to the comparison result.

[0149] In another exemplary embodiment, the comparison module is further configured to:

[0150] Compare whether the node information of the two traversed nodes is the same, and the node information includes at least one of the node type and the node attributes;

[0151] If there is different node information, record the difference information accordingly, and in the case where the current node is not a leaf node, traverse the child nodes of the current node again based on the current traversal operation, otherwise stop traversing the child nodes;

[0152] If the node information is the same, continue to traverse the child nodes of the current node.

[0153] In another exemplary embodiment, the page display processing device further includes a thread control module, and the thread control module is configured to:

[0154] Create an independent thread and send the virtual document object model tree and the updated virtual document model tree from the main thread to the independent thread;

[0155] Obtain the difference information between the virtual document object model tree and the updated virtual document object model tree through an independent thread, and send the difference information to the main thread;

[0156] In the main thread, perform page updates corresponding to interface interaction operations according to the difference information.

[0157] In another exemplary embodiment, the page display processing device further includes a rendering control module, and the rendering control module is configured to:

[0158] Send a page request to the rendering server;

[0159] Receive multiple page rendering data blocks returned by the rendering server for the page request. The multiple page rendering data blocks are used to describe the initial screen page corresponding to the page request and are transmitted to the client based on at least one transmission channel;

[0160] Perform rendering processing on the multiple page rendering data blocks to display the initial screen page.

[0161] In another exemplary embodiment, the page display processing device further includes a first binding control module, and the first binding control module is configured to:

[0162] Bind a first target page element to a first event processor;

[0163] When the first event processor is triggered, request the rendering server to obtain a first code file;

[0164] Load and execute the first code file to implement the event processing of the first event processor.

[0165] In another exemplary embodiment, the page display processing device further includes a second binding control module, and the second binding control module is configured to:

[0166] Add a target attribute to a second target page element, where the target attribute is used to identify a first component rendered by the second target page element;

[0167] Perform rendering processing of the first component based on the target attribute.

[0168] In another exemplary embodiment, the page display processing device further includes a third binding control module, and the third binding control module is configured to:

[0169] Bind a second component to a second event processor;

[0170] When the second event processor is triggered, request the rendering server to obtain a second code file;

[0171] After loading the second code file into the second component, perform the rendering process of the second component.

[0172] It should be noted that the page display processing device provided in the above embodiments and the page display processing method provided in the above embodiments belong to the same concept. The specific manners in which each module and unit perform operations have been described in detail in the method embodiments and will not be elaborated here. In actual application, the page display processing device provided in the above embodiments may, according to needs, allocate the above functions to different functional modules to complete, that is, divide the internal structure of the device into different functional modules to complete all or part of the functions described above. This is not limited here either.

[0173] An embodiment of the present application also provides an electronic device, including: one or more processors; a memory for storing one or more programs, and when the one or more programs are executed by the one or more processors, enabling the electronic device to implement the page display processing method provided in each of the above embodiments.

[0174] Figure 13 The structure diagram of a computer system of an electronic device suitable for implementing the embodiments of the present application is shown. It should be noted that Figure 13 The computer system 1300 of the electronic device shown is only an example and should not bring any limitation to the functions and usage scope of the embodiments of the present application.

[0175] As Figure 13 shown, the computer system 1300 includes a central processing unit (CPU) 1301, which can perform various appropriate actions and processes according to the program stored in the read-only memory (ROM) 1302 or the program loaded from the storage section 1308 into the random access memory (RAM) 1303, such as executing the method described in the above embodiments. In the RAM 1303, various programs and data required for system operation are also stored. The CPU 1301, ROM 1302, and RAM 1303 are connected to each other through a bus 1304. The input / output (I / O) interface 1305 is also connected to the bus 1304.

[0176] The following components are connected to the I / O interface 1305: an input part 1306 including a keyboard, a mouse, etc.; an output part 1307 including, for example, a cathode ray tube (CRT), a liquid crystal display (LCD), etc. and a speaker, etc.; a storage part 1308 including a hard disk, etc.; and a communication part 1309 including a network interface card such as a LAN (Local Area Network) card, a modem, etc. The communication part 1309 performs communication processing via a network such as the Internet. The drive 1310 is also connected to the I / O interface 1305 as required. A removable medium 1311, such as a magnetic disk, an optical disk, a magneto-optical disk, a semiconductor memory, etc., is installed on the drive 1310 as required so that a computer program read from it can be installed into the storage part 1308 as required.

[0177] Specifically, according to an embodiment of the present application, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, an embodiment of the present application includes a computer program product, which includes a computer program carried on a computer-readable medium, and the computer program includes a computer program for executing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from the network through the communication part 1309, and / or installed from the removable medium 1311. When the computer program is executed by the central processing unit (CPU) 1301, various functions defined in the system of the present application are executed.

[0178] It should be noted that the computer-readable medium shown in the embodiments of the present application can be a computer-readable signal medium or a computer-readable storage medium or any combination of the two. More specific examples of the computer-readable storage medium can include, but are not limited to: an electrical connection having one or more wires, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM), a flash memory, an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above. The computer program included on the computer-readable medium can be transmitted by any appropriate medium, including but not limited to: wireless, wired, etc., or any suitable combination of the above.

[0179] The flowcharts and block diagrams in the accompanying drawings illustrate the possible architectures, functions, and operations of systems, methods, and computer program products according to various embodiments of the present application. Among them, each block in the flowchart or block diagram may represent a module, a program segment, or a part of code, and the above-mentioned module, program segment, or part of code contains one or more executable instructions for implementing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the blocks may occur in a different order from that marked in the accompanying drawings. For example, two consecutively represented blocks may actually be executed substantially in parallel, and they may sometimes be executed in the reverse order, depending on the functions involved. It should also be noted that each block in the block diagram or flowchart, as well as the combination of blocks in the block diagram or flowchart, can be implemented by a dedicated hardware-based system for performing the specified functions or operations, or can be implemented by a combination of dedicated hardware and computer instructions.

[0180] The units involved in the embodiments described in the present application can be implemented in software or in hardware, and the described units can also be provided in a processor. Among them, the names of these units do not, in some cases, constitute a limitation on the unit itself.

[0181] On the other hand, the present application also provides a computer-readable storage medium, on which a computer program is stored. When the computer program is executed by a processor, it implements the page display processing method as described above. The computer-readable storage medium may be included in the electronic device described in the above embodiments, or may exist separately without being assembled into the electronic device.

[0182] On the other hand, the present application also provides a computer program product or a computer program. The computer program product or the computer program includes computer instructions, and the computer instructions are stored in a computer-readable storage medium. The processor of the computer device reads the computer instructions from the computer-readable storage medium, and the processor executes the computer instructions, so that the computer device executes the page display processing method provided in the above various embodiments.

[0183] The above content is only a preferred exemplary embodiment of the present application and is not used to limit the implementation of the present application. Those of ordinary skill in the art can easily make corresponding adaptations or modifications according to the main concept and spirit of the present application. Therefore, the protection scope of the present application should be subject to the protection scope required by the claims.

[0184] It is understandable that in the specific embodiments of the present application, data related to document object model trees, code files, etc. are involved. When the above embodiments of the present application are applied to specific products or technologies, user permission or consent is required, and the collection, use, and processing of relevant data need to comply with relevant laws, regulations, and standards of relevant countries and regions.

Claims

1. A page display processing method, characterized in that, Applied to a client, the method includes: After detecting an interface interaction operation triggered in a display page, creating a virtual document object model tree based on a real document object model tree, where the real document object model tree is used to implement page display in the client; Performing a rendering update process on the virtual document object model tree to obtain an updated virtual document object model tree; Obtaining difference information between the virtual document object model tree and the updated virtual document object model tree; Performing a rendering update process on the real document object model tree based on the difference information to implement page update corresponding to the interface interaction operation.

2. The method according to claim 1, wherein The creating of the virtual document object model tree based on the real document object model tree includes: Defining virtual document object model nodes; Performing a conversion process on the real document object model tree to obtain a virtual document object model tree composed of the virtual document object model nodes.

3. The method according to claim 2, wherein The performing of the conversion process on the real document object model tree to obtain a virtual document object model tree composed of the virtual document object model nodes includes: Converting a code file for describing interface design into a code file in a target format; By executing the code file in the target format, calling a framework function to create corresponding virtual document object model nodes and generating the virtual document object model tree.

4. The method according to claim 1, wherein The obtaining of the difference information between the virtual document object model tree and the updated virtual document object model tree includes: Performing a depth-first traversal on the virtual document object model tree and the updated virtual document object model tree respectively; where each traversal obtains a node in the virtual document object model tree and a node in the updated virtual document object model tree; Comparing the two nodes obtained by each traversal and determining the difference information between the virtual document object model tree and the updated virtual document object model tree according to the comparison result.

5. The method according to claim 4, characterized in that, The comparing of the two nodes obtained by each traversal and determining the difference information between the virtual document object model tree and the updated virtual document object model tree according to the comparison result includes: Comparing whether the node information of the two traversed nodes is the same, where the node information includes at least one of node type and node attributes; If there is different node information, correspondingly recording the difference information, and in the case that the current node is not a leaf node, traversing the child nodes of the current node again based on the current traversal operation, otherwise stopping traversing the child nodes; If the node information is the same, continuing to traverse the child nodes of the current node.

6. The method according to any one of claims 1-5, characterized in that, The page display in the client is executed by the main thread; the method further includes: Creating an independent thread and sending the virtual document object model tree and the updated virtual document model tree from the main thread to the independent thread; Obtaining the difference information between the virtual document object model tree and the updated virtual document object model tree through the independent thread and sending the difference information to the main thread; Performing page update corresponding to the interface interaction operation in the main thread according to the difference information.

7. The method according to claim 1, wherein The method further includes: Sending a page request to a rendering server; Receiving a plurality of page rendering data blocks returned by the rendering server for the page request, where the plurality of page rendering data blocks are used to describe a first-screen page corresponding to the page request and are transmitted to the client based on at least one transmission channel; Performing a rendering process on the plurality of page rendering data blocks to display the first-screen page.

8. The method according to claim 7, wherein The method further includes: Binding a first target page element to a first event handler; Requesting to obtain a first code file from the rendering server when the first event handler is triggered; Loading and executing the first code file to implement the event handling of the first event handler.

9. The method according to claim 7, wherein The method further includes: Adding a target attribute to a second target page element, where the target attribute is used to identify a first component rendered by the second target page element; Performing a rendering process on the first component based on the target attribute.

10. The method according to claim 7, characterized in that The method further includes: Binding a second component to a second event handler; Requesting to obtain a second code file from the rendering server when the second event handler is triggered; Performing a rendering process on the second component after loading the second code file into the second component.

11. A page display processing device, characterized in that, Deployed on a client, the device includes: A virtual tree creation module configured to create a virtual document object model tree based on a real document object model tree after detecting an interface interaction operation triggered in a display page, where the real document object model tree is used to implement page display in the client; A virtual tree update module configured to perform a rendering update process on the virtual document object model tree to obtain an updated virtual document object model tree; A difference acquisition module configured to acquire difference information between the virtual document object model tree and the updated virtual document object model tree; A difference update module configured to perform a rendering update process on the real document object model tree based on the difference information to implement page update corresponding to the interface interaction operation.

12. An electronic device, characterized in that, Includes: One or more processors; A memory for storing one or more programs, which when executed by the one or more processors, cause the electronic device to implement the page display processing method according to any one of claims 1-10.

13. A computer-readable storage medium, characterized in that, Having computer-readable instructions stored thereon, which when executed by a processor of a computer, cause the computer to execute the page display processing method according to any one of claims 1-10.

14. A computer program product, characterized in that, Including a computer program, which when executed by a processor, implements the page display processing method according to any one of claims 1-10.

Images