CN111639287A - Page processing method and device, terminal equipment and readable storage medium - Google Patents

Abstract

Embodiments of the present invention provide a page processing method, an apparatus, a terminal device, and a readable storage medium. The page processing method is applied to a terminal device, and the page processing method includes: receiving a page update instruction for a target page to be rendered, and based on The page update instruction updates the target page to be rendered to obtain the updated target page to be rendered; builds a first virtual document object model tree based on the updated target page to be rendered, and compares the first virtual document object model tree with the target page based on the to-be-rendered Render the second virtual document object model tree constructed by the target page, and determine the target document object model element node based on the comparison result; update the target page pre-rendered based on the target page to be rendered according to the target document object model element node, and obtain the updated target page. By adopting such a page processing method, the loading speed of the updated data is improved, and the page update efficiency is improved.

Description

A page processing method, apparatus, terminal device and readable storage medium

technical field

The present invention relates to the field of computer applications, and in particular, to a page processing method, apparatus, terminal device and readable storage medium.

Background technique

The system interface contains multiple system objects, and the user can operate the system objects to update the system interface. In the existing system interface display, when operating on system objects, the data complexity increases as the number of operable objects in the system increases, resulting in slower data display on the system interface and untimely display of data in the system interface. It can be seen that how to provide a page processing method that can improve the loading speed of the updated data in the page, thereby improving the efficiency of page rendering is an urgent problem to be solved.

SUMMARY OF THE INVENTION

Embodiments of the present invention provide a page processing method, an apparatus, a terminal device, and a readable storage medium. By using such a page processing method, the loading speed of data can be improved, thereby improving the efficiency of page rendering.

In a first aspect, an embodiment of the present invention provides a page processing method, the method is applied to a terminal device, and the method includes:

receiving a page update instruction for the target page to be rendered, and updating the target page to be rendered based on the page update instruction to obtain an updated target page to be rendered;

A first virtual document object model tree is constructed based on the updated target page to be rendered. The first virtual document object model tree includes at least one first document object model element node, and each first document object model element node is associated with the Each target component included in the updated target page to be rendered corresponds one by one;

Comparing the first virtual document object model tree and the second virtual document object model tree, and determining a target document object model element node from the first document object model element node based on the comparison result, wherein the second virtual document object model element node is The document object model tree is constructed based on the to-be-rendered target page;

The target page pre-rendered based on the to-be-rendered target page is updated according to the target document object model element node to obtain the updated target page.

In a second aspect, an embodiment of the present invention provides a page processing apparatus, the method is configured on a terminal device, and the apparatus includes:

a data acquisition module, configured to receive a page update instruction for the target page to be rendered, and to update the target page to be rendered based on the page update instruction to obtain an updated target page to be rendered;

A data processing module, configured to construct a first virtual document object model tree based on the updated target page to be rendered, the first virtual document object model tree includes at least one first document object model element node, each first document object The model element nodes are in one-to-one correspondence with each target component included in the updated target page to be rendered;

The data processing module is further configured to compare the first virtual document object model tree with the second virtual document object model tree, and determine a target document object model from the first document object model element node based on the comparison result an element node, wherein the second virtual document object model tree is constructed based on the target page to be rendered;

The data processing module is further configured to update the target page pre-rendered based on the target page to be rendered according to the target document object model element node to obtain the updated target page.

In a third aspect, an embodiment of the present invention provides a terminal device, where the terminal device includes an input device and an output device, and the terminal device further includes a processor adapted to implement one or more instructions, the one or more instructions The instructions are adapted to be loaded by the processor and execute the page processing method of the first aspect above.

In a fourth aspect, an embodiment of the present invention provides a computer-readable storage medium, where instructions are stored in the computer-readable storage medium, when the computer-readable storage medium runs on a computer, the computer executes the page processing described in the first aspect above method.

In this embodiment of the present invention, the terminal device receives a page update instruction for the target page to be rendered, and updates the target page to be rendered based on the page update instruction to obtain the updated target page to be rendered. Further, the terminal device may update the target page to be rendered based on the update instruction. A first virtual document object model tree is constructed from the target page to be rendered, wherein the first virtual document object model tree includes at least one first document object model element node, each first document object model element node and the updated to-be-rendered Each target component included in the target page is in one-to-one correspondence. Further, the terminal device can compare the first virtual document object model tree with the second virtual document object model tree, and determine the target document object model element node from the first document object model element node based on the comparison result, wherein the second virtual document The object model tree is constructed based on the target page to be rendered, and the target page pre-rendered based on the target page to be rendered is updated according to the target document object model element node to obtain the updated target page. Using such a page processing method, the performance problem of the terminal device is alleviated by constructing a virtual document object model tree, and the loading speed of the updated data is improved by the comparison technology of the virtual document object model tree, thereby improving the efficiency of page rendering.

Description of drawings

In order to explain the embodiments of the present invention or the technical solutions in the prior art more clearly, the following briefly introduces the accompanying drawings that need to be used in the description of the embodiments or the prior art. Obviously, the accompanying drawings in the following description are only These are some embodiments of the present invention. For those of ordinary skill in the art, other drawings can also be obtained according to these drawings without creative efforts.

1 is a schematic diagram of the architecture of a page processing system provided by an embodiment of the present invention;

2 is a schematic flowchart of a page processing method provided by an embodiment of the present invention;

3 is a schematic diagram corresponding to a target page and a virtual DOM tree provided by an embodiment of the present invention;

4 is a schematic flowchart of another page processing method provided by an embodiment of the present invention;

5 is a schematic diagram of a data flow between a component to be updated and a subcomponent to be updated according to an embodiment of the present invention;

6 is a schematic diagram of a development and editing page provided by an embodiment of the present invention;

7 is a schematic structural diagram of a page processing apparatus provided by an embodiment of the present invention;

FIG. 8 is a schematic structural diagram of a terminal device according to an embodiment of the present invention.

Detailed ways

The technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings in the embodiments of the present invention. Obviously, the described embodiments are only a part of the embodiments of the present invention, but not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those of ordinary skill in the art without creative efforts shall fall within the protection scope of the present invention.

Please refer to FIG. 1 , which is a frame diagram of a page processing system provided by an embodiment of the present invention, where the page processing system includes a browser module 10 and a rendering framework module 11 of a terminal device. The rendering and updating framework 11 is a combination framework of the angularJS framework developed by components and the reactJS framework of the virtual document object model (Document Object Model, DOM). The terminal device corresponding to the browser module 10 may specifically be a smart phone, a tablet computer, a notebook computer, a desktop computer, a vehicle-mounted intelligent terminal, etc., which is not limited in the embodiment of the present invention.

What needs to be understood is that the real DOM is a standard interface specification formulated by the W3C, which is a standard API for processing HTML and XML files. The real DOM tree treats the document as a tree structure, and each node of the real DOM tree represents an HTML tag or a text item within a tag. The real DOM tree structure accurately describes the interrelationship between the tags in the HTML document, and the processing of the HTML document can be realized by the operation of the real DOM tree. When rendering a real DOM tree, the JavaScript (JS for short) rendering engine can provide a real DOM exposure interface for JS to call, so as to facilitate JS to operate the real DOM. Due to the limitations of browser performance, the number of DOM manipulations should be reduced as much as possible. This solution uses virtual DOM (that is, using js objects to simulate DOM nodes), so that page updates can be reflected on the virtual DOM first, and after the virtual DOM is updated, the final virtual DOM is mapped into the real DOM to reduce browser complexity. Calculate the pressure and operate the virtual DOM in memory to improve the loading speed of updated data, thereby improving the efficiency of page update.

In some feasible implementations, the terminal device shows that the browser 10 receives a page update instruction for the target page, and updates the target page to be rendered according to the workflow in the rendering update framework 11 and the page update instruction, and obtains an updated The target page to be rendered, further, the terminal device may construct a first virtual DOM tree based on the updated target page to be rendered, wherein the first virtual DOM tree includes at least one first DOM element node, each first DOM element node One-to-one correspondence with each target component included in the updated target page to be rendered. Furthermore, the terminal device can use the diff algorithm of the reactJS framework to compare the first virtual DOM tree and the second virtual DOM tree, and determine the target DOM element node from the first DOM element node based on the comparison result, wherein the second virtual DOM tree is It is constructed based on the target page to be rendered, and the target page pre-rendered based on the target page to be rendered is updated according to the target DOM element node to obtain the updated target page. Using such a page processing method, the performance problem of the terminal device is alleviated by constructing a virtual DOM tree, and the data loading speed is improved through the comparison technology of the virtual DOM tree, thereby improving the efficiency of page rendering.

Please refer to FIG. 2, which is a schematic flowchart of a page processing method provided by an embodiment of the present invention. The method can be executed by a terminal device, and the page processing method includes the following steps:

S201: Receive a page update instruction for the target page to be rendered, and update the target page to be rendered based on the page update instruction to obtain an updated target page to be rendered.

The terminal device can display the development and editing page, the development and editing page includes the target page to be rendered, the terminal device receives the page update instruction for the target page to be rendered through the interactive device, and according to the page update instruction, on the development and editing page, the to-be-rendered page is updated. The rendering target page is updated to obtain the updated target page to be rendered. The interaction device may be a human-computer interaction device (such as a mouse, etc.), or a terminal (such as a computer, a mobile phone, a server, etc.) that performs data interaction with the target page to be rendered.

In one embodiment, before the terminal device receives the page update instruction for the target page to be rendered, the terminal device may further display a development and editing page, where the development and editing page includes a component list and a page editing area, wherein the component list includes at least one component . The terminal device determines at least one target component from the component list, and performs typesetting processing on each target component in the at least one target component in the page editing area to obtain a target page to be rendered. Further, the terminal device can perform two-way data binding between each target component and the data model, and obtain the application data corresponding to each target component in the data model, and based on the application data corresponding to each target component, component attributes and each target component. The hierarchical information between them generates a second virtual DOM model tree, and the second virtual DOM tree includes at least one second DOM element node, wherein the target component corresponds to the second DOM node one-to-one, and further, the terminal device can be based on the The second virtual DOM tree renders the target page to be rendered to obtain the target page.

It should be understood that the two-way data binding between each target component and the data model means that when the target component changes, it will be reflected in the data model accordingly, and the application data in the data model can also be mapped to the target component when it is updated. Component properties can be one or more of the component's shape, size, color, and position in the target page to be rendered. Application data can be one or more of content data, configuration data, or interaction data of a component.

Exemplarily, as shown in FIG. 3 , it includes a target page 3 a and a virtual DOM tree 3 b corresponding to the target page 3 a , and the target page 3 a includes three components, namely component 1 , component 2 and component 3 . The terminal device generates a virtual DOM tree 3b according to the target page 3a, and the attribute information and state information of the target page 3a are stored in the root element node of the virtual DOM tree 3b, that is, the target page 3a corresponds to the root DOM element node in the virtual DOM tree 3b, The DOM element node 1 , the DOM element node 2 , and the DOM element node 3 in the virtual DOM tree correspond to the component 1 , the component 2 , and the component 3 in the target page 3 a in one-to-one correspondence.

In one embodiment, the components in the above component list can be obtained by the developer through component development according to the function of the target component, and the component list can include various basic components, such as buttons, text input boxes, link symbols, drop-down boxes, and the like.

Optionally, at least one component can also be selected from the component list, combined and packaged into a combined functional component, and the combined functional component is added to the component list, so that the user can reuse the combined functional component next time. .

Optionally, the terminal device can obtain a template page (that is, other pages to be rendered that have been typeset), split the template page into at least one business function component module component according to the business function, and then add the business function module component to the component. list, so that the user can reuse the service function module component next time. In this way, the reusability of components can be improved, development efficiency and code quality can be improved, and later code maintenance can be facilitated.

S202: Build a first virtual DOM tree based on the updated target page to be rendered, where the first virtual DOM tree includes at least one first DOM element node, each of the first DOM element nodes and the updated target page to be rendered include each Target components correspond one-to-one.

The terminal device constructs a first virtual DOM tree according to application data corresponding to each target component in the updated target page to be rendered, component attributes, and hierarchical information between the various target components.

S203: Compare the first virtual DOM tree and the second virtual DOM tree, and determine the target DOM element node from the first DOM element node based on the comparison result, wherein the second virtual DOM model tree is constructed based on the target page to be rendered .

The terminal device can compare the application data and component attributes of the corresponding components contained in the DOM element nodes contained in the first virtual DOM tree with the application data and component attributes of the corresponding components contained in the DOM element nodes contained in the second virtual DOM tree species, from A target DOM element node (ie, a DOM element node corresponding to the updated component) that is different from the second DOM element node included in the second virtual DOM tree species is determined from the first DOM element node included in the first virtual DOM tree species.

Optionally, the terminal device can compare the first virtual DOM tree with the second virtual DOM tree at the same level, that is, according to the hierarchical relationship of the first virtual DOM tree and the hierarchical relationship of the second virtual DOM tree, the first virtual DOM tree is compared. The tree is compared with the second virtual DOM tree level by level, and a comparison result at the same level is obtained. Further, a DOM element node different from the second DOM element node, that is, a target DOM element node, can be determined from the first DOM element node according to the same-layer comparison result. By adopting such a method, the computational complexity of the comparison between the first virtual DOM tree and the second virtual DOM tree is reduced, the comparison efficiency is improved, and the page update efficiency is improved.

S204: Update the target page pre-rendered based on the target page to be rendered according to the target DOM element node to obtain the updated target page.

The terminal device maps the application state data and component attributes corresponding to the components in the target DOM element node to the corresponding element nodes in the real DOM tree corresponding to the target DOM element node in the target page, and operates the corresponding elements in the real DOM tree The node updates the target page pre-rendered based on the target page to be rendered to obtain the updated target page.

In this embodiment of the present application, the terminal device may receive a page update instruction for the target page to be rendered, and update the target page to be rendered based on the page update instruction to obtain the updated target page to be rendered. Further, the terminal device may be based on the page update instruction. The updated target page to be rendered builds a first virtual DOM tree, wherein the first virtual DOM tree includes at least one first DOM element node, each first DOM element node and each target component included in the updated target page to be rendered One-to-one correspondence. Further, the terminal device can compare the first virtual DOM tree and the second virtual DOM tree, and determine the target DOM element node from the first DOM element node based on the comparison result, wherein the second virtual DOM tree is constructed based on the target page to be rendered , and update the target page pre-rendered based on the target page to be rendered according to the target DOM element node to obtain the updated target page. Using such a page processing method, the performance problem of the terminal device is alleviated by constructing a virtual DOM tree, and the speed of data loading is improved through the same-layer comparison technology of the virtual DOM tree, thereby improving the efficiency of page rendering.

Please refer to FIG. 4 , which is a schematic flowchart of another page processing method provided by an embodiment of the present invention. The method can be executed by a terminal device, and the page processing method includes the following steps:

S401: Receive a page update instruction for the target page to be rendered, and based on the instruction of the page update instruction, determine the target component to be updated from the target page to be rendered, and determine from at least one subcomponent included in the target component to be updated Out of the subcomponent to be updated.

The terminal device receives a page update instruction for the target page to be rendered, and determines the target component to be updated from the multiple target components included in the target page to be rendered according to the page update instruction, wherein the number of target components to be updated is less than or equal to The number of target components included in the target page to be rendered is not specifically limited here. And, when the target component to be updated is a service function component merged by at least one component, the terminal device determines the subcomponent to be updated from the at least one component according to the page update instruction.

Exemplarily, the target component A to be updated is composed of a subcomponent a1 and a subcomponent a2, wherein the function of the subcomponent a1 is a link function of jumping to the specified page 1, and the function of the subcomponent a2 is a confirmation function of clicking to confirm. A page update instruction indicates that the function of the component A to be updated is updated to the link function of jumping to the specified page 2. Since the link function of the target component A to be updated to jump to the specified page is implemented by the component a1, in this case The terminal device determines the subcomponent a1 in the target component A to be updated as the subcomponent to be updated.

S402: Update the subcomponent to be updated in the target page to be rendered according to the page update instruction to obtain the updated target page to be rendered.

Exemplarily, as shown in FIG. 5 , according to the instruction of the page update instruction, the aforementioned component to be updated (that is, the parent component shown in FIG. 5 ) responds to the page update instruction, and the component to be updated indicated in the page update instruction is updated. Attributes and application data are passed to the sub-component to be updated (ie, the sub-component shown in Figure 5), and then, the sub-component to be updated performs the update of the component attributes and application data to be updated indicated in the page update instruction to obtain an update The target page to be rendered after.

S403: Build a first virtual DOM tree based on the updated target page to be rendered, where the first virtual DOM tree includes at least one first DOM element node, each of the first DOM element nodes and the updated target page to be rendered include each Target components correspond one-to-one.

S404: Compare the first virtual DOM tree and the second virtual DOM tree, and determine the target DOM element node from the first DOM element node based on the comparison result, wherein the second virtual DOM model tree is constructed based on the target page to be rendered .

S405: Update the target page pre-rendered based on the target page to be rendered according to the target DOM element node to obtain an updated target page.

For the specific implementation of steps S403-S405, reference may be made to the specific implementation of steps S202-S204 in the foregoing embodiment, which will not be repeated here.

In one embodiment, after obtaining the target page pre-rendered based on the target page to be rendered, the terminal device may also receive a component deletion instruction, and determine the to-be-deleted component from the to-be-rendered target page according to the component deletion instruction. Further, the terminal device can remove the to-be-deleted component from the to-be-rendered target page, and release the resources occupied by the to-be-deleted component. The occupied resources include one or more of memory occupied resources, network request resources, timer resources, and second DOM element nodes corresponding to the component to be deleted. In this way, the resources occupied by the component are released after the component is deleted, so as to avoid memory overflow caused by the deletion of the component.

The component deletion instruction may be sent by the user according to business requirements for the target component in the target page to be rendered.

Optionally, the component properties also include a life cycle. After rendering the target page to be rendered based on the second virtual document object model tree and obtaining the target page, the terminal device can also detect the life cycle of each target component and verify the life cycle. whether to arrive. If the aforementioned life cycle is reached, the target component corresponding to the life cycle is determined as the component to be deleted, the to-be-deleted component is removed from the target page to be rendered, and the resources occupied by the to-be-deleted component are released. The occupied resources include one or more of memory occupied resources, network request resources, timer resources, and second document object model element nodes corresponding to the components to be deleted.

Among them, the life cycle is set by the developer according to the functional role of the target component in the business requirements, and can be adjusted later according to the specific situation. The terminal device detects the life cycle of each target component and the effective duration of each target component. If the effective duration is equal to the life cycle, it is determined that the life cycle has arrived, and the target component corresponding to the life cycle is determined as the component to be deleted. It should be understood that the effective duration is the duration from the effective time of the component (or the running time or the working time) to the time when the terminal device is detected.

In one embodiment, the aforementioned component attributes further include function attributes. After performing a typesetting operation on each target component in the at least one target component in the page editing area, and after obtaining the target page to be rendered, the terminal device may also receive the target page for the components in the component list. and determine the component to be managed according to the functional attribute management operation, wherein the functional attribute management operation is one or more of a business function addition operation, a business function modification operation and a business function deletion operation, and further, The terminal device performs functional attribute management on the components to be managed in the component list, and performs synchronous functional attribute management on the target components in the target page to be rendered that match the to-be-managed components. Among them, business functions include but are not limited to links, jumps, pull-downs, and displays.

Exemplarily, as shown in FIG. 6 , it is a schematic diagram of developing an editing page. The terminal device determines from the component list that component 1 builds a page to be rendered 1 , a page to be rendered 2 , and a page to be rendered 3 for the target component. If the user adds a business link function to component 1 in the component list of the development and editing page, the terminal device will add the business link function synchronously to the component 1 included in the page to be rendered 1, the page to be rendered 2, and the page to be rendered 3.

In this embodiment of the present application, the terminal device receives a page update instruction for the target page to be rendered, and based on the instruction of the page update instruction, determines the target component to be updated from the target page to be rendered, and includes The sub-component to be updated is determined from at least one sub-component of . Further, the terminal device updates the subcomponent to be updated in the target page to be rendered according to the page update instruction, obtains the updated target page to be rendered, and builds a first virtual DOM tree based on the updated target page to be rendered, The first virtual DOM tree includes at least one first DOM element node, and each first DOM element node corresponds to each target component included in the updated target page to be rendered. Further, the terminal device can compare the first virtual DOM tree and the second virtual DOM tree, and determine the target DOM element node from the first DOM element node based on the comparison result, wherein the second virtual DOM tree is constructed based on the target page to be rendered , and update the target page pre-rendered based on the target page to be rendered according to the target DOM element node to obtain the updated target page. By adopting such a page processing method, the performance problem of the terminal device is alleviated by constructing a virtual DOM tree, and the attributes of the component to be updated and the application data indicated in the page update instruction are transmitted to the subcomponents in the component to be updated, and the related Attributes of components to be updated and application data are loaded and updated, thereby further improving the speed of data loading and the efficiency of page rendering.

Please refer to FIG. 7 , which is a schematic structural diagram of a page processing apparatus provided by an embodiment of the present application. The apparatus is configured on a terminal device, and the apparatus includes:

A data acquisition module 70, configured to receive a page update instruction for the target page to be rendered, and to update the target page to be rendered based on the page update instruction to obtain an updated target page to be rendered;

The data processing module 71 is configured to construct a first virtual DOM tree based on the updated target page to be rendered, the first virtual DOM tree includes at least one first DOM element node, each first DOM element node and the updated Each target component included in the target page to be rendered is in one-to-one correspondence;

The data processing module 71 is further configured to compare the first virtual document object model tree and the second virtual document object model tree, and determine the target document object model from the first document object model element node based on the comparison result. an element node, wherein the second virtual document object model tree is constructed based on the target page to be rendered;

The data processing module 71 is further configured to update the target page pre-rendered based on the target page to be rendered according to the target DOM element node to obtain the updated target page.

In one embodiment, the data processing unit 71 is further configured to display a development and editing page, the development and editing page includes a component list and a page editing area, and the component list includes at least one component; Determine at least one target component, and perform typesetting processing on each target component in the at least one target component in the page editing area to obtain a target page to be rendered; perform two-way data binding on each target component and the data model , and obtain the application data corresponding to each target component in the data model; generate the second virtual DOM tree based on the application data corresponding to each target component, component attributes and hierarchical information between the target components , the second virtual DOM tree includes at least one second DOM element node, and the target component is in one-to-one correspondence with the second DOM element node; the target page to be rendered is rendered based on the second virtual DOM tree , get the target page.

In one embodiment, the data processing unit 71 is specifically configured to compare the first virtual DOM tree and the second virtual DOM tree at the same layer to obtain a comparison result at the same layer; according to the comparison result at the same layer , and determine the target DOM element node from the first DOM element node.

In one embodiment, the data processing unit 71 is specifically configured to, based on the instruction of the page update instruction, determine the target component to be updated from the target page to be rendered, and select the target component to be updated from the target component to be updated. A sub-component to be updated is determined in at least one sub-component; in the target page to be rendered, the sub-component to be updated is updated according to the page update instruction to obtain an updated target page to be rendered.

In one embodiment, the data processing unit 71 is further configured to receive a component deletion instruction, and determine the to-be-deleted component from the to-be-rendered target page according to the component deletion instruction; The target page to be rendered is removed, and the resources occupied by the component to be deleted are released, and the occupied resources include memory occupied resources, network request resources, timer resources and the second DOM element corresponding to the component to be deleted. one or more of the nodes.

In one embodiment, the component attribute includes a life cycle, and the data processing unit 71 is further configured to detect the life cycle of each target component, and verify whether the life cycle has reached; if the life cycle has reached , the target component corresponding to the life cycle is determined as the component to be deleted, the component to be deleted is removed from the target page to be rendered, and the resources occupied by the component to be deleted are released. The resources include one or more of memory occupation resources, network request resources, timer resources, and second DOM element nodes corresponding to the component to be deleted.

In one embodiment, the component attribute further includes a function attribute, and the data processing unit 71 is further configured to receive a function attribute management operation for the component in the component list, and determine the to-be-to-be-used attribute according to the function attribute management operation. management component, the function attribute management operation is one or more of a business function addition operation, a business function modification operation, and a business function deletion operation; perform function attribute management on the components to be managed in the component list, and The target components in the target page to be rendered that match the components to be managed perform synchronization function attribute management.

It should be noted that the functions of each unit module of the page processing apparatus described in the embodiment of the present invention may be specifically implemented according to the method in the method embodiment described in FIG. 2 or FIG. 4 , and the specific implementation process may refer to FIG. 2 or FIG. 4 . The relevant description of the method embodiment of 4 is not repeated here.

Based on the descriptions of the foregoing method embodiments and apparatus item embodiments, an embodiment of the present invention further provides a terminal device. Referring to FIG. 8 , the terminal device may include at least a processor 801, an input device 802, an output device 803 and a memory 804; wherein, the processor 801, the input device 802, the output device 803 and the memory 804 may be connected through a bus or other connection methods. connect. The memory 804 may further include a computer-readable storage medium, and the computer-readable storage medium is used for storing a computer program, and the computer program includes program instructions, and the processor 801 is used for executing the program instructions stored in the memory 804. . The processor 801 (or called CPU (Central Processing Unit, central processing unit)) is the computing core and the control core of the terminal device, which is suitable for implementing one or more instructions, and is specifically suitable for loading and executing one or more instructions to achieve Corresponding method flows or corresponding functions in the above page processing method embodiments. The processor 801 is configured to invoke the program instruction to execute: receive a page update instruction for the target page to be rendered, and update the target page to be rendered based on the page update instruction to obtain the updated target page to be rendered ; Build a first virtual DOM tree based on the updated target page to be rendered, and the first virtual DOM tree includes at least one first DOM element node, each first DOM element node and the updated target page to be rendered. Each target component included corresponds to each other; compare the first virtual DOM tree and the second virtual DOM tree, and determine a target DOM element node from the first DOM element node based on the comparison result, wherein the second The virtual DOM tree is constructed based on the target page to be rendered; the target page pre-rendered based on the target page to be rendered is updated according to the target DOM element node to obtain an updated target page.

In one embodiment, the processor 801 is further configured to display a development editing page, the development editing page includes a component list and a page editing area, the component list includes at least one component; it is determined from the component list at least one target component, and perform typesetting processing on each target component in the at least one target component in the page editing area to obtain a target page to be rendered; perform two-way data binding on each target component and the data model, and obtain the application data corresponding to each target component in the data model; generate the second virtual DOM tree based on the application data corresponding to each target component, component attributes and hierarchical information between the target components, The second virtual DOM tree includes at least one second DOM element node, and the target component is in one-to-one correspondence with the second DOM element node; the target page to be rendered is rendered based on the second virtual DOM tree, Get the target page.

In one embodiment, the processor 801 is specifically configured to compare the first virtual DOM tree and the second virtual DOM tree at the same layer to obtain a comparison result at the same layer; according to the comparison result at the same layer, A target DOM element node is determined from the first DOM element nodes.

In one embodiment, the processor 801 is specifically configured to, based on the instruction of the page update instruction, determine the target component to be updated from the target page to be rendered, and select the target component to be updated from at least the target component to be updated. A sub-component to be updated is determined in a sub-component; the to-be-updated sub-component is updated in the to-be-rendered target page according to the page update instruction to obtain an updated to-be-rendered target page.

In one embodiment, the processor 801 is further configured to receive a component deletion instruction, and determine the to-be-deleted component from the to-be-rendered target page according to the component deletion instruction; Remove from the target page to be rendered, and release the resources occupied by the component to be deleted, the occupied resources include memory occupied resources, network request resources, timer resources and the second DOM element node corresponding to the component to be deleted. one or more of.

In one embodiment, the component attribute includes a life cycle, and the processor 801 is further configured to detect the life cycle of each target component, and verify whether the life cycle is reached; if the life cycle is reached, The target component corresponding to the life cycle is determined as the component to be deleted, the component to be deleted is removed from the target page to be rendered, and the resources occupied by the component to be deleted are released, and the occupied resources are released. It includes one or more of memory occupation resources, network request resources, timer resources, and second DOM element nodes corresponding to the component to be deleted.

In one embodiment, the component attribute further includes a function attribute, and the processor 801 is further configured to receive a function attribute management operation for the component in the component list, and determine the to-be-managed operation according to the function attribute management operation component, the function attribute management operation is one or more of a business function addition operation, a business function modification operation, and a business function deletion operation; the function attribute management is performed on the components to be managed in the component list, and The target component in the target page to be rendered that matches the component to be managed performs synchronization function attribute management.

It should be understood that, in this embodiment of the present invention, the processor 801 may be a central processing unit (Central Processing Unit, CPU), and the processor 801 may also be other general-purpose processors, digital signal processors (Digital Signal Processor, DSP), Application Specific Integrated Circuit (ASIC), off-the-shelf Programmable Gate Array (Field-Programmable Gate Array, FPGA) or other programmable logic devices, discrete gate or transistor logic devices, discrete a hardware components, etc. A general purpose processor may be a microprocessor or the processor may be any conventional processor or the like.

The memory 804 , which may include read-only memory and random access memory, provides instructions and data to the processor 801 . A portion of memory 804 may also include non-volatile random access memory. For example, memory 804 may also store device type information. The input device 802 may include a touchpad, a fingerprint sensor (for collecting user's fingerprint information), a microphone, a physical keyboard, etc., and the output device 803 may include a display (LCD, etc.), a speaker, and the like.

In specific implementation, the processor 801 , the memory 804 , the input device 802 , and the output device 803 described in this embodiment of the present invention may execute the implementation manner described in the method embodiment described in FIG. 2 or FIG. 4 provided in the embodiment of the present invention , the implementation method of the page processing apparatus described in FIG. 7 in the embodiment of the present invention can also be executed, and details are not described herein again.

In another embodiment of the present invention, a computer-readable storage medium is provided, and the computer-readable storage medium stores a computer program, the computer program includes program instructions, and the program instructions implement the present invention when executed by a processor The method described in FIG. 2 or FIG. 4 provided in this embodiment implements the described implementation manner, and the computer-readable storage medium may be an internal storage unit of the terminal device described in any of the foregoing embodiments, such as a hard disk of the terminal device or Memory. The computer-readable storage medium may also be an external storage device of the terminal device, such as a plug-in hard disk, a smart memory card (Smart Media Card, SMC), a secure digital (Secure Digital, SD) equipped on the terminal device ) card, flash card (Flash Card) and so on. Further, the computer-readable storage medium may also include both an internal storage unit of the terminal device and an external storage device. The computer-readable storage medium is used to store the computer program and other programs and data required by the terminal device. The computer-readable storage medium can also be used to temporarily store data that has been or will be output.

Those of ordinary skill in the art can understand that all or part of the processes in the methods of the above embodiments can be implemented by instructing relevant hardware through a computer program, and the program can be stored in a computer-readable storage medium, When the program is executed, it may include the flow of the embodiments of the above-mentioned methods.

The readable storage medium may be a magnetic disk, an optical disk, a read-only memory (Read-Only Memory, ROM), or a random access memory (Random Access Memory, RAM) or the like.

The above disclosure is only a part of the embodiments of the present invention, of course, the scope of the rights of the present invention cannot be limited by this. Those skilled in the art can understand all or part of the process of implementing the above embodiments, and follow the claims of the present invention. The equivalent changes made still belong to the scope covered by the present invention.

Claims (10)

1. A page processing method is applied to terminal equipment and comprises the following steps:

receiving a page updating instruction for a target page to be rendered, and updating the target page to be rendered based on the page updating instruction to obtain an updated target page to be rendered;

constructing a first virtual document object model tree based on the updated target page to be rendered, wherein the first virtual document object model tree comprises at least one first document object model element node, and each first document object model element node corresponds to each target component included in the updated target page to be rendered one by one;

comparing the first virtual document object model tree with a second virtual document object model tree, and determining target document object model element nodes from the first document object model element nodes based on a comparison result, wherein the second virtual document object model tree is constructed based on the target page to be rendered;

and updating the target page obtained based on the target page to be rendered through pre-rendering according to the target document object model element node to obtain an updated target page.

2. The method of claim 1, wherein comparing the first virtual document object model tree to the second virtual document object model tree and determining a target document object model element node from the first document object model element nodes based on the comparison comprises:

comparing the first virtual document object model tree with the second virtual document object model tree at the same layer to obtain a comparison result at the same layer;

and determining target document object model element nodes from the first document object model element nodes according to the same layer comparison result.

3. The method of claim 1, wherein the updating the target page to be rendered based on the page update instruction to obtain an updated target page to be rendered comprises:

based on the indication of the page updating instruction, determining a target component to be updated from the target page to be rendered, and determining a sub-component to be updated from at least one sub-component included in the target component to be updated;

and updating the sub-component to be updated in the target page to be rendered according to the page updating instruction to obtain an updated target page to be rendered.

4. The method according to any one of claims 1-3, before receiving the page update instruction for the target page to be rendered, further comprising:

displaying a development editing page, wherein the development editing page comprises a component list and a page editing area, and the component list comprises at least one component;

determining at least one target assembly from the assembly list, and performing typesetting processing on each target assembly in the at least one target assembly in the page editing area to obtain a target page to be rendered;

performing bidirectional data binding on each target assembly and a data model, and acquiring application data corresponding to each target assembly in the data model;

generating the second virtual document object model tree based on application data, component attributes and hierarchical information between the target components, wherein the application data, the component attributes and the hierarchical information correspond to the target components, the second virtual document object model tree comprises at least one second document object model element node, and the target components correspond to the second document object model element node in a one-to-one mode;

and rendering the target page to be rendered based on the second virtual document object model tree to obtain the target page.

5. The method according to claim 4, wherein after the target page to be rendered is rendered based on the second virtual document object model tree, the method further comprises:

receiving a component deleting instruction, and determining a component to be deleted from the target page to be rendered according to the component deleting instruction;

and removing the component to be deleted from the target page to be rendered, and releasing resources occupied by the component to be deleted, wherein the occupied resources comprise one or more of memory occupied resources, network request resources, timer resources and second document object model element nodes corresponding to the component to be deleted.

6. The method of claim 4, wherein the component attributes comprise a life cycle, and wherein after the target page is obtained by rendering the target page to be rendered based on the second virtual document object model tree, the method further comprises:

detecting the life cycle of each target assembly and verifying whether the life cycle is reached;

and if the life cycle is reached, determining the target component corresponding to the life cycle as a component to be deleted, removing the component to be deleted from the target page to be rendered, and releasing resources occupied by the component to be deleted, wherein the occupied resources comprise one or more of resources occupied by a memory, network request resources, timer resources and second document object model element nodes corresponding to the component to be deleted.

7. The method according to claim 4, wherein the component attributes further include functional attributes, and wherein after determining at least one target component from the component list and performing a layout operation on each target component in the at least one target component in the page editing area to obtain a target page to be rendered, the method further comprises:

receiving a function attribute management operation aiming at the components in the component list, and determining the components to be managed according to the function attribute management operation, wherein the function attribute management operation is one or more of a service function adding operation, a service function modifying operation and a service function deleting operation;

and performing functional attribute management on the component to be managed in the component list, and performing synchronous functional attribute management on a target component matched with the component to be managed in the target page to be rendered.

8. The page processing device is characterized in that the page processing device is configured on a terminal device. The page processing apparatus includes:

the data acquisition module is used for receiving a page updating instruction for a target page to be rendered, and updating the target page to be rendered based on the page updating instruction to obtain an updated target page to be rendered;

the data processing module is used for constructing a first virtual document object model tree based on the updated target page to be rendered, the first virtual document object model tree comprises at least one first document object model element node, and each first document object model element node corresponds to each target component included in the updated target page to be rendered one by one;

the data processing module is further configured to compare the first virtual document object model tree with a second virtual document object model tree, and determine a target document object model element node from the first document object model element node based on a comparison result, where the second virtual document object model tree is constructed based on the target page to be rendered;

and the data processing module is also used for updating the target page obtained by pre-rendering the target page to be rendered according to the target document object model element node to obtain the updated target page.

9. A terminal device comprising a processor and a memory, the processor and the memory being interconnected, wherein the memory is configured to store a computer program comprising program instructions, and wherein the processor is configured to invoke the program instructions to perform the method of any one of claims 1-7.

10. A computer-readable storage medium, characterized in that the computer-readable storage medium stores a computer program, which is executed by a processor to implement the method of any one of claims 1-7.

Images