CN111639287A - Page processing method and device, terminal equipment and readable storage medium - Google Patents
Page processing method and device, terminal equipment and readable storage medium Download PDFInfo
- Publication number
- CN111639287A CN111639287A CN202010359843.6A CN202010359843A CN111639287A CN 111639287 A CN111639287 A CN 111639287A CN 202010359843 A CN202010359843 A CN 202010359843A CN 111639287 A CN111639287 A CN 111639287A
- Authority
- CN
- China
- Prior art keywords
- page
- target
- component
- rendered
- object model
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
The embodiment of the invention provides a page processing method, a page processing device, terminal equipment and a readable storage medium, wherein the page processing method is applied to the terminal equipment and comprises the following steps: receiving a page updating instruction aiming at 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, comparing the first virtual document object model tree with a second virtual document object model tree constructed based on the target page to be rendered, and determining target document object model element nodes based on the comparison result; and updating the target page obtained based on the target page to be rendered according to the target document object model element node to obtain the updated target page. By adopting the page processing method, the loading speed of the updated data is increased, and the page updating efficiency is improved.
Description
Technical Field
The present invention relates to the field of computer applications, and in particular, to a page processing method and apparatus, a terminal device, and a readable storage medium.
Background
The system interface comprises a plurality of system objects, and the user can operate the system objects to update the system interface. In the existing system interface display, when the system object is operated, the complexity of data is increased along with the increase of the operable object in the system, so that the data display of the system interface is slow, and the synchronous display of the data in the system interface is not timely. Therefore, how to provide a page processing method to increase the loading speed of the updated data in the page, so as to increase the page rendering efficiency is an urgent problem to be solved.
Disclosure of Invention
The embodiment of the invention provides a page processing method, a page processing device, terminal equipment and a readable storage medium.
In a first aspect, an embodiment of the present invention provides a page processing method, where the method is applied to a terminal device, and the method includes:
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.
In a second aspect, an embodiment of the present invention provides a page processing apparatus, where the method is configured in a terminal device, and the 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.
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, and is adapted to implement one or more instructions, where the one or more instructions are adapted to be loaded by the processor and execute the page processing method according to the first aspect.
In a fourth aspect, an embodiment of the present invention provides a computer-readable storage medium, where instructions are stored, and when the instructions are executed on a computer, the instructions cause the computer to execute the page processing method according to the first aspect.
In the embodiment of the present invention, a terminal device receives a page update instruction for a target page to be rendered, and updates the target page to be rendered based on the page update instruction to obtain an updated target page to be rendered, and further, the terminal device may construct a first virtual document object model tree based on the updated target page to be rendered, where 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 corresponds to each target component included in the updated target page to be rendered one to one. Furthermore, the terminal device may 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 the comparison result, where the second virtual document object model tree is constructed based on the target page to be rendered, and update the target page obtained based on the target page to be rendered according to the target document object model element node, so as to obtain the updated target page. By adopting the page processing method, the performance problem of the terminal equipment is relieved by constructing the virtual document object model tree, and the loading speed of the updated data is increased by the comparison technology of the virtual document object model tree, so that the page rendering efficiency is improved.
Drawings
In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings used in the description of the embodiments or the prior art will be briefly described below, it is obvious that the drawings in the following description are only some embodiments of the present invention, and for those skilled in the art, other drawings can be obtained according to the drawings without creative efforts.
Fig. 1 is a schematic structural diagram of a page processing system according to an embodiment of the present invention;
fig. 2 is a schematic flowchart of a page processing method according to an embodiment of the present invention;
FIG. 3 is a diagram illustrating a target page corresponding to a virtual DOM tree according to an embodiment of the present invention;
fig. 4 is a schematic flowchart of another page processing method according to an embodiment of the present invention;
FIG. 5 is a schematic diagram illustrating a data flow between a component to be updated and a sub-component to be updated according to an embodiment of the present invention;
FIG. 6 is a diagram of a development editing page provided by an embodiment of the present invention;
fig. 7 is a schematic structural diagram of a page processing apparatus according to 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 Description
The technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the drawings in the embodiments of the present invention, and it is obvious that the described embodiments are only a part of the embodiments of the present invention, and not all of the embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present invention.
Referring to fig. 1, a frame diagram of a page processing system according to an embodiment of the present invention is shown, where the page processing system includes a browser module 10 and a rendering frame module 11 of a terminal device. Wherein: the rendering update frame 11 is a combined frame of angularJS frame using componentized development and a recactjs frame using a virtual Document Object Model (DOM). The terminal device corresponding to the browser module 10 may be a smart phone, a tablet computer, a notebook computer, a desktop computer, a vehicle-mounted intelligent terminal, and the like.
It should be understood that the real DOM is a standard interface specification made by W3C, a standard API for processing HTML and XML documents. The real DOM tree treats the document as a tree structure, with each node of the real DOM tree representing an HTML tag or text item within a tag. The real DOM tree structure accurately describes the correlation among the tags in the HTML document, and the HTML document can be processed by operating the real DOM tree. When the real DOM tree is rendered, a JavaScript (JS for short) rendering engine can provide a real DOM exposure interface for JS call, so that the JS is convenient to operate the real DOM. Due to the limitation of browser performance, the number of times the DOM is operated should be reduced as much as possible. The scheme adopts the virtual DOM (namely the js object is adopted to simulate the DOM node), so that the updating of the page can be reflected on the virtual DOM firstly, and the final virtual DOM is mapped into the real DOM after the virtual DOM is updated, so that the calculation pressure of the browser is reduced, the loading speed of the updated data is increased by operating the virtual DOM in the memory, and the updating efficiency of the page is improved.
In some possible embodiments, the terminal device displays the page update instruction received by the browser 10 for the target page, and updates the target page to be rendered according to the workflow in the rendering update frame 11 and the page update instruction to obtain the updated target page to be rendered, and further, the terminal device may construct 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, and each first DOM element node corresponds to each target component included in the updated target page to be rendered one to one. Furthermore, the terminal device may compare the first virtual DOM tree with the second virtual DOM tree by using a diff algorithm of the reactJS frame, and determine a target DOM element node from the first DOM element node based on a comparison result, where 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 the page processing method, the performance problem of the terminal equipment is relieved by constructing the virtual DOM tree, and the data loading speed is increased by the contrast technology of the virtual DOM tree, so that the page rendering efficiency is improved.
Fig. 2 is a schematic flow chart of a page processing method according to an embodiment of the present invention, where the method is executed by a terminal device, and the page processing method includes the following steps:
s201: and receiving a page updating instruction aiming at the 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 terminal device can display a development editing page, the development editing page comprises a target page to be rendered, the terminal device receives a page updating instruction aiming at the target page to be rendered through the interaction device, and updates the target page to be rendered on the development editing page according to the page updating instruction to obtain an updated target page to be rendered. The interactive device may be a human-computer interactive device (e.g., a mouse), or may be a terminal (e.g., 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 editing page, which includes a component list and a page editing area, wherein the component list includes at least one component. And the terminal equipment determines at least one target assembly from the assembly list, and typesets each target assembly in the at least one target assembly in the page editing area to obtain a target page to be rendered. Further, the terminal device may perform bidirectional data binding on each target component and the data model, acquire application data corresponding to each target component in the data model, and generate a second virtual DOM model tree based on the application data, the component attributes, and the hierarchical information between the target components corresponding to each target component, where the second virtual DOM tree includes at least one second DOM element node, where the target components are in one-to-one correspondence with the second DOM nodes, and further, the terminal device may render a target page to be rendered based on the second virtual DOM tree to obtain the target page.
It should be understood that each target component and the data model are bi-directionally data-bound, that is, when the target component changes, the target component will correspondingly react to the data model, and when the application data in the data model is updated, the application data can be mapped into the target component. The component properties may be one or more of a shape, size, color, and position of the component in the target page to be rendered. The application data may be one or more of content data, configuration data or interaction data of the component.
Illustratively, as shown in FIG. 3, including a target page 3a and a virtual DOM tree 3b to which the target page 3a corresponds, the target page 3a contains three components, component 1, component 2, and component 3. The terminal device generates a virtual DOM tree 3b according to the target page 3a, wherein the root element node of the virtual DOM tree 3b stores the attribute information and the state information of the target page 3a, namely the target page 3a corresponds to the root DOM element node in the virtual DOM tree 3b, and DOM element nodes 1, 2 and 3 in the virtual DOM tree correspond to components 1, 2 and 3 in the target page 3a one to one.
In one embodiment, the components in the component list may be developed by a developer according to the target component functions, and the component list may include a variety of basic components, such as buttons, text input boxes, links, drop-down boxes, and the like.
Optionally, at least one component may be selected from the component list, combined and encapsulated to form 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 may obtain a template page (that is, the already composed other pages to be rendered), split the template page into at least one service function module component according to the service function, and add the service function module component to the component list, so that the user can reuse the service function module component next time. By adopting the mode, the reusability of the components can be improved, the development efficiency and the code quality are improved, and the later code maintenance is facilitated.
S202: and constructing a first virtual DOM tree based on the updated target page to be rendered, wherein the first virtual DOM tree comprises 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 one by one.
And the terminal equipment constructs a first virtual DOM tree according to the updated application data and component attributes corresponding to each target component in the target page to be rendered and the hierarchy information among the target components.
S203: and comparing the first virtual DOM tree with the second virtual DOM tree, and determining a 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 may compare application data and component attributes of components included in DOM element nodes included in the first virtual DOM tree with application data and component attributes of components included in DOM element nodes included in the second virtual DOM tree, and determine, from the first DOM element nodes included in the first virtual DOM tree, a target DOM element node (i.e., a DOM element node corresponding to the updated component) different from a second DOM element node included in the second virtual DOM tree.
Optionally, the terminal device may perform peer comparison on the first virtual DOM tree and the second virtual DOM tree, that is, the first virtual DOM tree and the second virtual DOM tree are compared step by step according to the hierarchical relationship of the first virtual DOM tree and the hierarchical relationship of the second virtual DOM tree, so as to obtain a peer comparison result. And then, according to the same-layer comparison result, a DOM element node different from the second DOM element node, namely a target DOM element node, can be determined from the first DOM element node. By adopting the method, the complexity of comparison calculation of the first virtual DOM tree and the second virtual DOM tree is reduced, and the comparison efficiency is improved, so that the page updating efficiency is improved.
S204: and updating the target page obtained by pre-rendering the target page to be rendered according to the target DOM element node to obtain an updated target page.
And the terminal equipment maps the application state data and the component attribute corresponding to the component in the target DOM element node to the element node corresponding to the target DOM element node in the real DOM tree corresponding to the target page, and operates the element node corresponding to the real DOM tree to update the target page obtained by pre-rendering based on the target page to be rendered, so as to obtain the updated target page.
In this embodiment of the application, the terminal device may receive a page update instruction for a 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, and further, the terminal device may construct 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, and each first DOM element node corresponds to each target component included in the updated target page to be rendered one to one. Furthermore, the terminal device may compare the first virtual DOM tree with a second virtual DOM tree, and determine a target DOM element node from the first DOM element node based on the comparison result, where 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, so as to obtain an updated target page. By adopting the page processing method, the performance problem of the terminal equipment is relieved by constructing the virtual DOM tree, and the speed of data loading is increased by the same layer comparison technology of the virtual DOM tree, so that the page rendering efficiency is improved.
Referring to fig. 4, a schematic flowchart of another page processing method according to an embodiment of the present invention is shown, where the method is executable by a terminal device, and the page processing method includes the following steps:
s401: the method comprises the steps of receiving a page updating instruction aiming at a target page to be rendered, determining a target component to be updated from the target page to be rendered based on the indication of the page updating instruction, and determining a sub component to be updated from at least one sub component included in the target component to be updated.
The terminal device receives a page updating instruction for a target page to be rendered, and determines a target component to be updated from a plurality of target components included in the target page to be rendered according to the page updating instruction, wherein the number of the target components to be updated is less than or equal to the number of the target components included in the target page to be rendered, and is not particularly limited herein. And when the target component to be updated is a service function component combined by at least one component, the terminal equipment determines a sub-component to be updated from the at least one component according to the page updating instruction.
Illustratively, the target component A to be updated is composed of a sub-component a1 and a component a2, wherein the function of the sub-component a1 is a link function for jumping to the specified page 1, and the function of the sub-component a2 is a determined function for click determination. 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 jumping to the specified page in the target component a to be updated is performed by the component a1, in which case the terminal device determines the subcomponent a1 in the target component a to be updated as the subcomponent to be updated.
S402: 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.
Illustratively, as shown in fig. 5, according to the instruction of the page update instruction, the aforementioned component to be updated (i.e., the parent component shown in fig. 5) responds to the page update instruction, and transmits the component attribute to be updated and the application data indicated in the page update instruction to the sub-component to be updated (i.e., the sub-component shown in fig. 5), and then the sub-component to be updated updates the component attribute to be updated and the application data indicated in the page update instruction, so as to obtain an updated target page to be rendered.
S403: and constructing a first virtual DOM tree based on the updated target page to be rendered, wherein the first virtual DOM tree comprises 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 one by one.
S404: and comparing the first virtual DOM tree with the second virtual DOM tree, and determining a 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: and updating the target page obtained by pre-rendering the target page to be rendered according to the target DOM element node to obtain an updated target page.
The specific implementation of steps S403 to S405 may refer to the specific implementation of steps S202 to S204 in the foregoing embodiment, and will not be described in detail herein.
In an embodiment, after the terminal device obtains the target page obtained by prerendering the target page to be rendered, a component deleting instruction can be received, and the component to be deleted is determined from the target page to be rendered according to the component deleting instruction. Further, the terminal device may remove the component to be deleted from the target page to be rendered, and release resources occupied by the component to be deleted. The occupied resources comprise one or more of memory occupied resources, network request resources, timer resources and second DOM element nodes corresponding to the components to be deleted. By adopting the mode, the resource occupied by the component is released after the component is deleted, and the memory overflow caused by the deletion of the component is avoided.
The component deleting instruction can be sent by a user according to business requirements and aiming at a target component in a target page to be rendered.
Optionally, the component attribute further includes a life cycle, and after the target page to be rendered is rendered based on the second virtual document object model tree to obtain the target page, the terminal device may further detect the life cycle of each target component and verify whether the life cycle is reached. And if the life cycle is reached, determining the target component corresponding to the life cycle as the component to be deleted, removing the component to be deleted from the target page to be rendered, and releasing the resource occupied by the component to be deleted. 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 components to be deleted.
Wherein, the life cycle is set for the functional role of developer according to the target assembly in the business demand, and the later stage can be adjusted according to the particular situation. And the terminal equipment detects the life cycle of each target component and the effective time length of each target component, judges that the life cycle arrives if the effective time length is equal to the life cycle, and determines the target component corresponding to the life cycle as the component to be deleted. It should be understood that the effective time duration is the time duration from the effective start time (or the start running time, the start working time) to the detection of the terminal device.
In an embodiment, the component attributes further include function attributes, and after performing a composition operation on each target component in at least one target component in the page editing area to obtain a target page to be rendered, the terminal device may further receive a function attribute management operation for a component in the component list, and determine the component to be managed according to the function attribute management operation, where the function attribute management operation is one or more of a service function addition operation, a service function modification operation, and a service function deletion operation, and further, the terminal device performs function attribute management on the component to be managed in the component list, and performs synchronous function attribute management on the target component in the target page to be rendered, which is matched with the component to be managed. Wherein the business functions include, but are not limited to, links, jumps, pulls, shows, and the like.
Illustratively, as shown in fig. 6, a schematic diagram of a development editing page is shown. The terminal equipment determines that the component 1 constructs a page to be rendered 1, a page to be rendered 2 and a page to be rendered 3 for the target component from the component list. If the user adds a service link function to the component 1 in the component list of the development editing page, the terminal device will synchronously add the service link function 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 the embodiment of the application, the terminal device receives a page updating instruction for a target page to be rendered, determines a target component to be updated from the target page to be rendered based on an instruction of the page updating instruction, and determines a sub-component to be updated from at least one sub-component included in the target component to be updated. Further, the terminal device updates 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, and constructs a first virtual DOM tree based on the updated target page to be rendered, wherein the first virtual DOM tree comprises 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 one by one. Furthermore, the terminal device may compare the first virtual DOM tree with a second virtual DOM tree, and determine a target DOM element node from the first DOM element node based on the comparison result, where 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, so as to obtain an updated target page. By adopting the page processing method, the performance problem of the terminal equipment is relieved by constructing the virtual DOM tree, the attribute of the component to be updated and the application data indicated in the page updating instruction are transmitted to the sub-component in the component to be updated, and the sub-component loads and updates the related attribute of the component to be updated and the application data, so that the data loading speed is further increased, and the page rendering efficiency is improved.
Referring to fig. 7, a schematic structural diagram of a page processing apparatus provided in an embodiment of the present application is shown, where the apparatus is configured in a terminal device, and the apparatus includes:
the data obtaining module 70 is configured to receive a page update instruction for a 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;
a data processing module 71, configured to construct 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, and each first DOM element node corresponds to each target component included in the updated target page to be rendered one by one;
the data processing module 71 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 nodes based on a comparison result, where 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, according to the target DOM element node, a target page obtained based on the target page to be rendered by pre-rendering, so as to obtain an updated target page.
In an embodiment, the data processing unit 71 is further specifically configured to display a development editing page, where the development editing page includes a component list and a page editing area, and the component list includes 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 a second virtual DOM tree based on application data, component attributes and hierarchical information among the target components, wherein the application data and the component attributes correspond to the target components, the second virtual DOM tree comprises at least one second DOM element node, and the target components correspond to the second DOM element nodes in a one-to-one manner; and rendering the target page to be rendered based on the second virtual DOM tree to obtain a target page.
In an embodiment, the data processing unit 71 is specifically configured to perform peer-to-peer comparison on the first virtual DOM tree and the second virtual DOM tree to obtain a peer-to-peer comparison result; and determining a target DOM element node from the first DOM element nodes according to the same layer comparison result.
In an embodiment, the data processing unit 71 is specifically configured to determine, based on the indication of the page update instruction, a target component to be updated from the target page to be rendered, and determine 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.
In an embodiment, the data processing unit 71 is further specifically configured to receive a component deletion instruction, and determine a component to be deleted from the target page to be rendered according to the component deletion 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 DOM element nodes corresponding to the component to be deleted.
In one embodiment, the component attributes include 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 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 memory occupied resources, network request resources, timer resources and second DOM element nodes corresponding to the component to be deleted.
In an embodiment, the component attributes further include function attributes, and the data processing unit 71 is specifically configured to receive a function attribute management operation for a component in the component list, and determine a component to be managed according to the function attribute management operation, where the function attribute management operation is one or more of a service function addition operation, a service function modification operation, and a service function deletion 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.
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 the description related to the method embodiment of fig. 2 or fig. 4, which is not described herein again.
Based on the description of the method embodiment and the apparatus item embodiment, the 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; the processor 801, the input device 802, the output device 803, and the memory 804 may be connected by a bus or other connection means. The memory 804 may also include a computer-readable storage medium for storing a computer program comprising program instructions, the processor 801 being configured to execute the program instructions stored by the memory 804. The processor 801 (or CPU) is a computing core and a control core of the terminal device, and is adapted to implement one or more instructions, and specifically, adapted to load and execute the one or more instructions so as to implement the corresponding method flow or the corresponding function in the above-mentioned page Processing method embodiment. Wherein the processor 801 is configured to call the program instructions to perform: 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 DOM tree based on the updated target page to be rendered, wherein the first virtual DOM tree comprises 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 one by one; comparing the first virtual DOM tree with a second virtual DOM tree, and determining a target DOM element node from the first DOM element node based on a comparison result, wherein the second virtual DOM tree is constructed based on the target page to be rendered; and updating the target page obtained based on the pre-rendering of the target page to be rendered according to the target DOM element node to obtain an updated target page.
In an embodiment, the processor 801 is further specifically configured to display a development editing page, where the development editing page includes a component list and a page editing area, and the component list includes 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 a second virtual DOM tree based on application data, component attributes and hierarchical information among the target components, wherein the application data and the component attributes correspond to the target components, the second virtual DOM tree comprises at least one second DOM element node, and the target components correspond to the second DOM element nodes in a one-to-one manner; and rendering the target page to be rendered based on the second virtual DOM tree to obtain a target page.
In an embodiment, the processor 801 is specifically configured to perform peer comparison on the first virtual DOM tree and the second virtual DOM tree to obtain a peer comparison result; and determining a target DOM element node from the first DOM element nodes according to the same layer comparison result.
In an embodiment, the processor 801 is specifically configured to determine, based on the indication of the page update instruction, a target component to be updated from the target page to be rendered, and determine 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.
In an embodiment, the processor 801 is further specifically configured to receive a component deletion instruction, and determine a component to be deleted from the target page to be rendered according to the component deletion 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 DOM element nodes corresponding to the component to be deleted.
In one embodiment, the component attributes include 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; 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 memory occupied resources, network request resources, timer resources and second DOM element nodes corresponding to the component to be deleted.
In an embodiment, the component attributes further include function attributes, and the processor 801 is specifically further configured to receive a function attribute management operation for a component in the component list, and determine a component to be managed according to the function attribute management operation, where the function attribute management operation is one or more of a service function addition operation, a service function modification operation, and a service function deletion 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.
It should be understood that, in the embodiment of the present invention, the Processor 801 may be a Central Processing Unit (CPU), and the Processor 801 may also be other general purpose processors, Digital Signal Processors (DSPs), Application Specific Integrated Circuits (ASICs), Field Programmable Gate Arrays (FPGAs) 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 may include both read-only memory and random access memory, and provides instructions and data to the processor 801. A portion of the memory 804 may also include non-volatile random access memory. For example, the memory 804 may also store device type information. The input device 802 may include a touch pad, a fingerprint sensor (for collecting fingerprint information of a user), a microphone, a physical keyboard, etc., and the output device 803 may include a display (LCD, etc.), a speaker, etc.
In a 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 described in the method embodiment shown in fig. 2 or fig. 4 provided in this embodiment of the present invention, or may execute the implementation method of the page processing apparatus described in fig. 7 in this embodiment of the present invention, which is not described herein again.
In another embodiment of the present invention, a computer-readable storage medium is provided, where a computer program is stored, where the computer program includes program instructions, and the program instructions, when executed by a processor, implement the implementation described in the method implementation in fig. 2 or fig. 4 provided in the embodiment of the present invention, and the computer-readable storage medium may be an internal storage unit of a terminal device, such as a hard disk or a memory of the terminal device, in any one of the foregoing embodiments. 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 Media Card (SMC), a Secure Digital (SD) Card, a Flash memory Card (Flash Card), and the like provided on the terminal device. Further, the computer-readable storage medium may also include both an internal storage unit and an external storage device of the terminal device. The computer-readable storage medium is used for storing the computer program and other programs and data required by the terminal device. The computer readable storage medium may also be used to temporarily store data that has been output or is to be output.
It will be understood by those skilled in the art that all or part of the processes of the methods of the embodiments described above can be implemented by a computer program, which can be stored in a computer readable storage medium, and when executed, can include the processes of the embodiments of the methods described above.
The readable storage medium may be a magnetic disk, an optical disk, a Read-Only Memory (ROM), a Random Access Memory (RAM), or the like.
While the invention has been described with reference to a number of embodiments, it will be understood by those skilled in the art that various changes in form and details may be made therein without departing from the spirit and scope of the invention as defined by the appended claims.
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.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010359843.6A CN111639287A (en) | 2020-04-29 | 2020-04-29 | Page processing method and device, terminal equipment and readable storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010359843.6A CN111639287A (en) | 2020-04-29 | 2020-04-29 | Page processing method and device, terminal equipment and readable storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN111639287A true CN111639287A (en) | 2020-09-08 |
Family
ID=72328803
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010359843.6A Pending CN111639287A (en) | 2020-04-29 | 2020-04-29 | Page processing method and device, terminal equipment and readable storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111639287A (en) |
Cited By (17)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112100546A (en) * | 2020-09-11 | 2020-12-18 | 东软集团股份有限公司 | Form loading method and device, storage medium and electronic equipment |
| CN112395483A (en) * | 2020-11-13 | 2021-02-23 | 郑州阿帕斯数云信息科技有限公司 | Page rendering method and device based on tree structure |
| CN112540816A (en) * | 2020-11-30 | 2021-03-23 | 北京飞漫软件技术有限公司 | Remote page rendering method, device and equipment and computer storage medium |
| CN112650435A (en) * | 2020-12-23 | 2021-04-13 | 平安普惠企业管理有限公司 | Page content rolling processing method and device, computer equipment and storage medium |
| CN112667330A (en) * | 2020-12-18 | 2021-04-16 | 中国平安人寿保险股份有限公司 | Page display method and computer equipment |
| CN112905922A (en) * | 2021-01-26 | 2021-06-04 | 北京达佳互联信息技术有限公司 | Page loading method and device, electronic equipment, storage medium and program product |
| CN112905279A (en) * | 2021-02-03 | 2021-06-04 | 广州虎牙科技有限公司 | Page component rendering method and device, electronic equipment and storage medium |
| CN113051507A (en) * | 2021-03-29 | 2021-06-29 | 北京智慧星光信息技术有限公司 | Method and system for constructing bidirectional binding web page front end display based on json data |
| CN113761431A (en) * | 2020-09-24 | 2021-12-07 | 北京沃东天骏信息技术有限公司 | Method and device for checking integrity of page |
| CN114217877A (en) * | 2021-12-17 | 2022-03-22 | 杉数科技(北京)有限公司 | Operation processing method, device, equipment and medium based on page interaction component |
| CN114218052A (en) * | 2021-11-11 | 2022-03-22 | 深圳前海微众银行股份有限公司 | Service interaction graph generation method, device, equipment and storage medium |
| CN114764360A (en) * | 2021-01-14 | 2022-07-19 | 钉钉控股（开曼）有限公司 | Virtual card generation method and interactive realization method and device thereof |
| CN114942814A (en) * | 2022-06-01 | 2022-08-26 | 咪咕视讯科技有限公司 | Page component focusing method, system, terminal device and medium |
| CN114969236A (en) * | 2022-07-25 | 2022-08-30 | 倍智智能数据运营有限公司 | Method for realizing user-defined map annotation based on React |
| CN115756449A (en) * | 2022-12-02 | 2023-03-07 | 之江实验室 | Page multiplexing method and device, storage medium and electronic equipment |
| WO2023065707A1 (en) * | 2021-10-21 | 2023-04-27 | 深圳前海微众银行股份有限公司 | Method and apparatus for page display |
| CN117648914A (en) * | 2024-01-30 | 2024-03-05 | 深圳云集智造系统技术有限公司 | File generation method and device and terminal equipment |
-
2020
- 2020-04-29 CN CN202010359843.6A patent/CN111639287A/en active Pending
Cited By (24)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112100546A (en) * | 2020-09-11 | 2020-12-18 | 东软集团股份有限公司 | Form loading method and device, storage medium and electronic equipment |
| CN112100546B (en) * | 2020-09-11 | 2024-05-07 | 东软集团股份有限公司 | Form loading method and device, storage medium and electronic equipment |
| CN113761431A (en) * | 2020-09-24 | 2021-12-07 | 北京沃东天骏信息技术有限公司 | Method and device for checking integrity of page |
| CN112395483A (en) * | 2020-11-13 | 2021-02-23 | 郑州阿帕斯数云信息科技有限公司 | Page rendering method and device based on tree structure |
| CN112395483B (en) * | 2020-11-13 | 2024-03-01 | 郑州阿帕斯数云信息科技有限公司 | Page rendering method and device based on tree structure |
| CN112540816A (en) * | 2020-11-30 | 2021-03-23 | 北京飞漫软件技术有限公司 | Remote page rendering method, device and equipment and computer storage medium |
| CN112667330A (en) * | 2020-12-18 | 2021-04-16 | 中国平安人寿保险股份有限公司 | Page display method and computer equipment |
| CN112667330B (en) * | 2020-12-18 | 2024-02-09 | 中国平安人寿保险股份有限公司 | Page display method and computer equipment |
| CN112650435A (en) * | 2020-12-23 | 2021-04-13 | 平安普惠企业管理有限公司 | Page content rolling processing method and device, computer equipment and storage medium |
| CN114764360A (en) * | 2021-01-14 | 2022-07-19 | 钉钉控股（开曼）有限公司 | Virtual card generation method and interactive realization method and device thereof |
| CN112905922A (en) * | 2021-01-26 | 2021-06-04 | 北京达佳互联信息技术有限公司 | Page loading method and device, electronic equipment, storage medium and program product |
| CN112905279A (en) * | 2021-02-03 | 2021-06-04 | 广州虎牙科技有限公司 | Page component rendering method and device, electronic equipment and storage medium |
| CN113051507B (en) * | 2021-03-29 | 2023-11-21 | 北京智慧星光信息技术有限公司 | Method and system for constructing bidirectional binding web page front-end display based on json data |
| CN113051507A (en) * | 2021-03-29 | 2021-06-29 | 北京智慧星光信息技术有限公司 | Method and system for constructing bidirectional binding web page front end display based on json data |
| WO2023065707A1 (en) * | 2021-10-21 | 2023-04-27 | 深圳前海微众银行股份有限公司 | Method and apparatus for page display |
| CN114218052B (en) * | 2021-11-11 | 2023-08-29 | 深圳前海微众银行股份有限公司 | Service interaction diagram generation method, device, equipment and storage medium |
| CN114218052A (en) * | 2021-11-11 | 2022-03-22 | 深圳前海微众银行股份有限公司 | Service interaction graph generation method, device, equipment and storage medium |
| CN114217877A (en) * | 2021-12-17 | 2022-03-22 | 杉数科技(北京)有限公司 | Operation processing method, device, equipment and medium based on page interaction component |
| CN114942814B (en) * | 2022-06-01 | 2023-07-11 | 咪咕视讯科技有限公司 | Page component focusing method, system, terminal equipment and medium |
| CN114942814A (en) * | 2022-06-01 | 2022-08-26 | 咪咕视讯科技有限公司 | Page component focusing method, system, terminal device and medium |
| CN114969236A (en) * | 2022-07-25 | 2022-08-30 | 倍智智能数据运营有限公司 | Method for realizing user-defined map annotation based on React |
| CN115756449A (en) * | 2022-12-02 | 2023-03-07 | 之江实验室 | Page multiplexing method and device, storage medium and electronic equipment |
| CN117648914A (en) * | 2024-01-30 | 2024-03-05 | 深圳云集智造系统技术有限公司 | File generation method and device and terminal equipment |
| CN117648914B (en) * | 2024-01-30 | 2024-05-17 | 深圳云集智造系统技术有限公司 | File generation method and device and terminal equipment |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN111639287A (en) | Page processing method and device, terminal equipment and readable storage medium | |
| KR101999409B1 (en) | Formatting data by example | |
| US10565293B2 (en) | Synchronizing DOM element references | |
| CN109814866B (en) | Processing method and device for converting page application into native application | |
| CN113095995B (en) | Webpage watermark adding method and device, electronic equipment and storage medium | |
| US20110022943A1 (en) | Document object model (dom) application framework | |
| CN110262783B (en) | Interface generation method and device and terminal equipment | |
| CN105683957A (en) | Style sheet speculative preloading | |
| CN114996619A (en) | Page display method and device, computer equipment and storage medium | |
| CN111857720B (en) | User interface state information generation method and device, electronic equipment and medium | |
| CN114048415A (en) | Form generation method and device, electronic equipment and computer readable storage medium | |
| CN114297700A (en) | Dynamic and static combined mobile application privacy protocol extraction method and related equipment | |
| CN111158777B (en) | Component calling method, device and computer readable storage medium | |
| CN117033249A (en) | Test case generation method and device, computer equipment and storage medium | |
| CN117111909A (en) | Code automatic generation method, system, computer equipment and storage medium | |
| CN114911541B (en) | Processing method and device of configuration information, electronic equipment and storage medium | |
| CN111610908B (en) | Method for generating frame diagram, computer equipment and readable storage medium | |
| CN109725932B (en) | Method and device for generating description document of application component | |
| CN113239670A (en) | Method and device for uploading service template, computer equipment and storage medium | |
| CN113986322B (en) | Method, device and storage medium for dynamically modifying page codes | |
| CN113741900B (en) | Development method and device of front-end page application and related equipment | |
| CN115129363A (en) | Method for constructing metadata model of micro service interface facing service adaptation | |
| CN116719525A (en) | Configuration information generation method and device, electronic equipment and computer storage medium | |
| CN116450976A (en) | Font display method and device | |
| CN117421233A (en) | Annotation-based code generation method, annotation-based code generation device, computer equipment and storage medium |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |