WO2024000955A1 - 页面热更新方法、装置、设备及存储介质 - Google Patents

页面热更新方法、装置、设备及存储介质 Download PDF

Info

Publication number
WO2024000955A1
WO2024000955A1 PCT/CN2022/127651 CN2022127651W WO2024000955A1 WO 2024000955 A1 WO2024000955 A1 WO 2024000955A1 CN 2022127651 W CN2022127651 W CN 2022127651W WO 2024000955 A1 WO2024000955 A1 WO 2024000955A1
Authority
WO
WIPO (PCT)
Prior art keywords
target
configuration information
page
sub
rendered
Prior art date
Application number
PCT/CN2022/127651
Other languages
English (en)
French (fr)
Inventor
方启涵
梁沛聪
李琪
Original Assignee
深圳前海微众银行股份有限公司
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by 深圳前海微众银行股份有限公司 filed Critical 深圳前海微众银行股份有限公司
Publication of WO2024000955A1 publication Critical patent/WO2024000955A1/zh

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/60—Software deployment
    • G06F8/65—Updates
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces

Definitions

  • This application relates to the technical field of financial technology, and in particular to a page hot updating method, device, equipment and storage medium.
  • Page hot updating is a technology widely used in Internet banking applications. It is often used in abnormal scenarios such as front-end code defects, related system defects or service failures, marketing or operation accidents, etc. It can reduce financial losses and customer complaints. the goal of.
  • page hot update currently obtains configuration information from a remote back-end server through a terminal device.
  • the page hot update logic is triggered to find the application that needs to use page hot update.
  • component uses the interface modified by the application Document Object Model (DOM) to perform local updates and modifications based on the configuration information within the component, and finally re-updates the modified results to the page, thereby performing page hot updates on the page.
  • DOM Document Object Model
  • This application provides a page hot update method, device, equipment and storage medium to solve the problems of low page hot update efficiency, application lag and poor user experience.
  • embodiments of the present application provide a page hot update method, including:
  • the target tag and target style class name of the pre-established virtual DOM determine whether the target sub-configuration information corresponding to the target route, target tag and target style class name can be obtained from the configuration information.
  • the target sub-configuration information When the target sub-configuration information can be obtained, configure the virtual DOM according to the target sub-configuration information, and obtain the configured virtual DOM;
  • the route is used as a first-layer sub-node
  • the label is used as a second-layer sub-node
  • the style class name is used as a third-level sub-node
  • the style attribute value is used as a fourth-level sub-node.
  • the initial configuration information is processed in a tree structure to obtain the configuration information.
  • the target tag and target style class name of the pre-established virtual DOM determine whether the target route, target tag and target style class name can be obtained from the configuration information.
  • the corresponding target sub-configuration information includes:
  • the target route, the target label, and the target style class name, the first-layer sub-nodes, the second-layer sub-nodes, and the third-layer sub-nodes in the configuration information are sequentially traversed to determine whether the target exists
  • the target style attribute value corresponding to the route, the target label, and the target style class name, and the target sub-configuration information includes the target route, the target label, the target style class name, and the target style attribute value.
  • the virtual DOM is created according to the type of the pure function component and the context information of the pure function component.
  • the target route of the page to be rendered is determined.
  • the method determines whether the target can be obtained from the configuration information based on the target route of the page to be rendered, the target tag of the pre-established virtual DOM, and the target style class name. After the target sub-configuration information corresponding to the route, target label and target style class name, the method also includes:
  • the page to be rendered is rendered according to the virtual DOM.
  • a page hot updating device which includes:
  • An acquisition module is used to obtain configuration information, which is used to hot update the page to be rendered in the target application;
  • the acquisition module is also configured to configure the virtual DOM according to the target sub-configuration information when the target sub-configuration information can be obtained, and obtain the configured virtual DOM;
  • the acquisition module is specifically used for:
  • processing module is specifically used for:
  • the target route, the target label, and the target style class name, the first-layer sub-nodes, the second-layer sub-nodes, and the third-layer sub-nodes in the configuration information are sequentially traversed to determine whether the target exists
  • the target style attribute value corresponding to the route, the target label, and the target style class name, and the target sub-configuration information includes the target route, the target label, the target style class name, and the target style attribute value.
  • the device also includes:
  • a sending module configured to send an asynchronous request to the server, where the asynchronous request is used to obtain the initial configuration information
  • the processing module is also configured to register a pure function component according to a preset plug-in preloaded in the target application, and the preset plug-in is used to detect whether the initial configuration information returned by the server is received;
  • the processing module is also configured to create the virtual DOM according to the type of the pure function component and the context information of the pure function component.
  • the acquisition module is specifically used for:
  • the obtaining module is also used to obtain the URL and basic domain name of the page to be rendered;
  • the processing module is also configured to determine the target route of the page to be rendered based on the URL and the basic domain name.
  • the processing module is also used to:
  • the page to be rendered is rendered according to the virtual DOM.
  • embodiments of the present application provide a terminal device, including: a processor, a memory, and computer program instructions stored on the memory and executable on the processor.
  • a terminal device including: a processor, a memory, and computer program instructions stored on the memory and executable on the processor.
  • the processor executes the computer program instructions, Methods provided for implementing the first aspect and possible designs.
  • embodiments of the present application can provide a computer-readable storage medium, which stores computer-executable instructions. When executed by a processor, the computer-executable instructions are used to implement the first aspect and each aspect. Possible design methods provided.
  • an embodiment of the present invention provides a program product, including: a computer program, which when the program product is run on a computer, causes the computer to perform the page hot update method described in any one of the above first aspects.
  • embodiments of the present invention provide a computer program, which when the computer program is executed by a processor, is used to perform the page hot update method described in any one of the above first aspects.
  • the terminal device determines whether it can obtain configuration information based on the target route of the page to be rendered, the target tag and target style class name of the pre-established virtual DOM. Obtain the target sub-configuration information corresponding to the target route, target label and target style class name from the configuration information.
  • the target sub-configuration information can be obtained, configure the virtual DOM according to the target sub-configuration information, obtain the configured virtual DOM, and Render the page to be rendered according to the configured virtual DOM.
  • Figure 1 is a schematic flow chart of a page hot update method in the prior art
  • FIG. 2 is a schematic flow chart of Embodiment 1 of the page hot update method provided by the embodiment of the present application;
  • Figure 3 is a schematic structural diagram of configuration information provided by an embodiment of the present application.
  • Figure 4 is a schematic flowchart of Embodiment 2 of the page hot update method provided by the embodiment of the present application;
  • Figure 5 is a schematic flow chart of Embodiment 3 of the page hot update method provided by the embodiment of the present application.
  • FIG. 6 is a schematic flowchart of Embodiment 4 of the page hot update method provided by the embodiment of the present application.
  • Figure 7 is a schematic flowchart of Embodiment 5 of the page hot update method provided by the embodiment of the present application.
  • Figure 8 is a schematic structural diagram of a page hot updating device provided by an embodiment of the present application.
  • Figure 9 is a schematic structural diagram of a terminal device provided by an embodiment of the present application.
  • HTML HyperText Markup Language
  • XML Extensible Markup Language
  • the DOM parses a document into a structured collection of nodes and objects (objects that contain properties and methods). In short, it connects World Wide Web (World Wide Web, web) pages with scripts or programming languages.
  • Virtual DOM refers to a programming concept, which means that the user interface (UI) required by the target is "virtually" represented through a data structure, stored in memory, and synchronized with the real DOM. Since the attributes of the real DOM are very large, there will be performance loss problems in the calculation and operation process. Using virtual DOM in memory to replace part of the calculation and operation of the DOM can effectively improve the performance of the application.
  • UI user interface
  • Page hot update refers to a method of remotely delivering configuration information that does not rely on releasing a new version or modifying the source code to modify the text, attributes, styles or event handles on a specific page or element. , thereby changing the page presentation effect or user interaction technology.
  • Figure 1 is a flow chart of the page hot update method in the prior art.
  • the JavaScript (JS for short) process and the rendering process run on the terminal device, and the terminal device communicates and interacts with the server wirelessly.
  • the JS process is used to obtain and store configuration information from the server, and the rendering process is used to render the page based on the configuration information to achieve the purpose of hot updating the page.
  • the page hot update method in the prior art mainly includes the following steps:
  • Step 1 The rendering process parses the HTML page.
  • Step 2 The rendering process loads the JS script to run the JS process.
  • Step 3 The JS process synchronously pulls the configuration information of the HTML page from the server.
  • Step 4 The JS process stores the configuration information in memory.
  • Step 5 The rendering process obtains the configuration information from the memory and renders the HTML page.
  • Step 6 When the HTML page is rendered, the rendering process triggers the page hot update logic.
  • Step 7 The JS process obtains the first content that needs to be modified based on the hot update logic.
  • Step 8 The JS process modifies the first DOM of the HTML page based on the first content and configuration information.
  • Step 9 The rendering process re-renders the HTML page according to the first DOM to achieve the purpose of hot updating the HTML page.
  • steps 6 to 9 need to be re-executed, and the content that needs to be partially updated needs to be modified again to meet expectations.
  • the process of triggering re-rendering can be implemented through the following steps:
  • Step 10 The rendering process renders the HTML page.
  • Step 11 Trigger re-rendering when the JS process is running.
  • Step 14 The JS process modifies the second DOM of the HTML page based on the second content and configuration information.
  • Step 15 The rendering process re-renders the HTML page according to the second DOM.
  • the inventive concept of this application is as follows: in the prior art, the page needs to be rendered first, and then the modification process of the real DOM is triggered, which means that there are at least two rendering processes in the prior art.
  • the Vue framework will call the render function in the component and obtain the virtual DOM from the return value of the render function, so that the Vue framework can convert the virtual DOM into a real DOM. and rendered to the page. Therefore, before the view is updated (that is, before the page is rendered), the virtual DOM is configured according to the configuration information, and the page is rendered according to the configured virtual DOM. Since the configuration information is intercepted before the view is updated, the DOM of the page has not changed at this time, thus reducing the number of page renderings, solving the problem of application lag, improving the efficiency of page hot update, and ensuring the user experience. .
  • the execution subject of this embodiment is a terminal device, and the terminal device and the server interact with each other wirelessly.
  • Configuration information is stored in the server, which is used to hot update the page to be rendered of the target application running in the terminal device.
  • the configuration information includes routing, labels, style class names, and style attribute values. Among them, the route is the unique identifier of the page.
  • the configuration information can be represented by Table 1.
  • the configuration information may include multiple sub-configuration information.
  • one of the sub-configuration information may be route 1, label 10, style class name 10, and style attribute value 10.
  • the configuration information may also include other contents and expression forms, which may be determined according to the actual situation. This is not specifically limited in the embodiments of the present application.
  • FIG. 3 is a schematic structural diagram of configuration information provided by an embodiment of the present application.
  • the configuration information can also be a tree structure, in which the route is the first-level sub-node, the label is the second-level sub-node, the style class name is the third-level sub-node, and the style attribute value is the fourth-level sub-node. node.
  • the configuration information includes multiple sub-configuration information. For example, one of the sub-configuration information may be route 3, label 30, style class name 30, and style attribute value 30.
  • the terminal device can send a configuration information acquisition request to the server based on the initialized interface, so that the configuration information can be obtained from the response information returned by the server through the interface.
  • the configuration information acquisition request can be an asynchronous request or a synchronous request.
  • the response information may also include a status code, which is used to indicate whether the response information carries configuration information.
  • the target application can be an application based on the Vue framework installed in the terminal device.
  • the main function entry of the target application is pre-loaded with a preset plug-in, which is used to detect whether the terminal device obtains configuration information.
  • a private variable (such as requestResult) can be predefined in the default plug-in, and the private variable has an initial assignment (such as false).
  • the assignment of the above-mentioned private variable is modified from the initial assignment to a successful enumeration value (such as true), so as to achieve the purpose of detecting whether the terminal device has obtained the configuration information.
  • the target tag and the target style class name of the pre-established virtual DOM determine whether the target sub-configuration information corresponding to the target route, target tag and target style class name can be obtained from the configuration information.
  • the configuration information structure is a table
  • query whether there is a corresponding target style attribute value in the above table based on the target route, target label, and target style class name If it exists, it means that the target sub-configuration information can be obtained from the configuration information.
  • the target sub-configuration information includes the target route, target label, target style class name and target style attribute value; if not, it means that the target sub-configuration information cannot be obtained from the configuration information.
  • Configuration information when the configuration information structure is a table, query whether there is a corresponding target style attribute value in the above table based on the target route, target label, and target style class name. If it exists, it means that the target sub-configuration information can be obtained from the configuration information.
  • the target sub-configuration information includes the target route, target label, target style class name and target style attribute value; if not, it means that the target sub-configuration information cannot be obtained from the configuration information.
  • Configuration information when the configuration information structure is a table, query whether there is a corresponding target
  • the configuration information structure is a tree structure
  • the first-level sub-nodes, second-level sub-nodes and third-level sub-nodes in the configuration information are traversed in sequence according to the target route, target label and target style class name.
  • the three-layer sub-node determines whether there is a target style attribute value corresponding to the target route, target label, and target style class name.
  • the first-layer sub-node of the configuration information is traversed according to the target route. If the first-layer sub-node is inconsistent with the target route, it will be skipped directly. If the first-layer sub-node is consistent with the target route, the first-layer sub-node will be skipped.
  • the one-level sub-node is determined as the first-level sub-node of the target. Further, according to the target label, the second-level sub-nodes corresponding to the target first-level sub-nodes are traversed, and the target second-level sub-nodes are determined from the above-mentioned second-level sub-nodes.
  • the target style class name traverse the third-level sub-nodes corresponding to the target second-level sub-nodes, determine the target third-level sub-nodes from the above-mentioned third-level sub-nodes, and obtain the target corresponding to the target third-level sub-nodes.
  • the fourth-level sub-node of the target is the target style attribute value.
  • the configuration information has an obvious parent-child relationship, for example, one route can correspond to multiple tags, and each tag corresponds to multiple style class names. Therefore, by utilizing the above parent-child relationship, there is no need to traverse all the data in the configuration information, which effectively saves processing time and improves processing efficiency.
  • the virtual DOM is pre-created based on preset plug-ins.
  • a pure function component can be registered in advance according to the preset plug-in, and the virtual DOM can be created according to the type of the pure function component and the context information (also called context-related options) of the pure function component.
  • the routes, labels, and class names of each purely functional component are fixed.
  • the creation process of the virtual DOM can refer to the embodiment shown in Figure 4 and will not be described again here.
  • the number of virtual DOMs may be one or multiple. This embodiment of the present application does not limit the number of virtual DOMs.
  • the configuration method after obtaining the target sub-configuration information, determine the configuration method according to the type of the target style attribute value, and configure the context information of the virtual DOM according to the configuration method, thereby obtaining the configured virtual DOM. .
  • the method of configuring the context information is determined, thereby improving the accuracy of the configuration and thereby improving the rendering effect of the page.
  • the type of the target style attribute value is a text type
  • the target style attribute value includes the target text and the replacement text. Then use the characteristics of the virtual DOM as a tree structure to judge the type of each context sub-node in the context information. If the context sub-node type is a text type, and the text in the context sub-node is the target text, use text replacement The processor replaces the target text within the context child node with the replacement text, thereby achieving the text replacement effect.
  • the target style attribute value can be interface hot target text and update text, etc.
  • the attribute to be replaced is deeply merged with the original attribute object in the context information.
  • the attribute to be replaced is used first, and the merged style attribute value is set back to the context information.
  • the type of the target style attribute value is an event type
  • the target style attribute value includes the interception event name
  • the handle corresponding to the event is deleted, and a new illogical empty function is created and mounted on the handle of the event.
  • the corresponding handle There is no actual logic execution within the function to achieve the event interception effect.
  • Example 1 Take the type field (target style attribute value) from the target sub-configuration information and record it as type. If the type type contains text type (it means that the type of the target style attribute value is text type), and the target in the target sub-configuration information If the text and replacement text are "test” and "after replacement” respectively, then find all texts containing "test” in the context information and modify them to "after replacement".
  • the configured context information can be expressed as follows:
  • createElement virtual DOM creation method
  • Example 2 In the same way, assume that the type type contains an attribute type, and the "attribute to be replaced" in the target style attribute value can be expressed as follows:
  • Example 3 If the type type contains an event type, and the interception event in the target style attribute value is a "click" click event, access the listeners object under the context information. This object is used to store the event listener object of the component. Delete the key-value pair of "click” in this object, and create an empty function to mount it to achieve the interception effect of click events.
  • the configured virtual DOM is determined as the content to be rendered, and then the Vue rendering engine is used to render the content to be rendered into the page to be rendered.
  • the preset frequency can be once every 5 minutes, once every 30 minutes, or once every hour, etc., which can be limited according to the actual situation. This is not specifically limited in the embodiments of this application.
  • the configured context information is the following data:
  • the terminal device obtains the configuration information and determines whether the target route can be obtained from the configuration information based on the target route of the page to be rendered, the target tag of the pre-established virtual DOM, and the target style class name. , the target sub-configuration information corresponding to the target tag and the target style class name.
  • the target sub-configuration information can be obtained, configure the virtual DOM according to the target sub-configuration information, obtain the configured virtual DOM, and treat it according to the configured virtual DOM. Render the page to render.
  • the initial configuration information is processed in a tree structure to obtain the configuration information.
  • the configuration center is initialized according to the initial configuration information.
  • the initialization process can be: obtain the routing field from the initial configuration information, use the routing field as the key of the object, and the value value is the initial configuration information set with the same routing field; further, traverse the initial configuration information set and use the label field as the object.
  • the key and value values are the set of initial configuration information with the same label field; further, the initial configuration information set is traversed, and the style class name field is used as the key of the object, and the value value is the set of initial configuration information with the same style class name field.
  • the configuration center is an object with a three-layer nested structure, including routing, labels, and style class names.
  • the queried target sub-configuration information can be:
  • the initial configuration information is the following data structure (some configuration information fields are omitted in the example):
  • the initial configuration information is an array structure. It is traversed and the routing field is taken out. After deduplication, it is stored as a key value classification.
  • the configuration content will get the following objects:
  • the configuration information includes multiple sub-configuration information
  • the sub-configuration information corresponding to the component is mainly determined through the unique identifier of the component.
  • defining identity values in source code is an unsafe operation. Since the identification value is not dynamically generated, there may be duplication issues, resulting in the same unique identification being used multiple times.
  • each component needs to embed an attribute, which also increases the developer's cost.
  • multiple filter condition matching can also be used instead of unique identification matching.
  • such an operation is generally rarely performed because it relies on accessing DOM elements, and the internal attribute values of each DOM element need to be accessed multiple times. Reading and writing DOM elements requires more performance and takes up more memory than reading and writing regular objects.
  • routes, labels, style class names, and style attribute values are dimensions with obvious parent-child relationships, and the routes, labels, and class names of pure function components are all determined, therefore, pure function components can be
  • the routes, labels, and class names are used to determine the accurate sub-configuration information from the configuration information.
  • this method of matching an unknown parameter through three known and certain parameters does not require major modifications before accessing related functions, and can avoid embedding additional information in the source code that has nothing to do with business logic.
  • the identification value reduces the workload caused by pre-embedding and avoids the problem of duplication of unique identification.
  • FIG. 4 is a schematic flowchart of Embodiment 2 of the page hot update method provided by the embodiment of the present application.
  • the page hot update method may also include the following steps:
  • the asynchronous request is used to obtain the initial configuration information, which is the configuration information acquisition request mentioned above.
  • API Application Programming Interface
  • a custom attribute for the initial component which is used to store the type value of the initial component.
  • the initial component is set to a pure functional component based on the value of the functional parameter. This definition attribute is used to store the type value of the pure functional component.
  • the preset plug-in is used to detect whether the initial configuration information returned by the server is received.
  • the default plug-in has predefined private variables that are responsive (which can be implemented by passing the private variable as an input parameter to the Vue.observable instance method).
  • the assignment of the private variable is a successful enumeration value, it will be notified. All purely functional components that depend on this private variable.
  • custom attributes can also be used to verify the validity of the incoming value.
  • the verification logic is to determine whether the incoming value is a real tag on the DOM.
  • the Vue framework will provide an additional option for the pure function component, the render function, which can be used to modify or customize the rendered content.
  • the type of a purely functional component can be determined via custom properties.
  • the target tag of the virtual DOM is determined based on custom attributes.
  • the first parameter of the render function (virtual DOM creation method) named createElement
  • the second parameter (context information) is the object structure named context, where data is the entire data object expected to be passed to the pure function component.
  • children are child nodes; if the user of the component defines an align attribute as "center”, the class name is "test”, and the child node is the text "test text”, the Vue framework will set the context to the following data structure:
  • FIG. 5 is a schematic flowchart of Embodiment 3 of the page hot update method provided by the embodiment of the present application. As shown in Figure 5, based on any of the above embodiments, after obtaining the configuration information, the page hot update method may also include the following steps:
  • the Location global object of the target application can be obtained, and the uniform resource locator (URL) and basic domain name of the page to be rendered can be obtained from the Location global object.
  • URL uniform resource locator
  • the base domain name is truncated from the URL to obtain the target route of the page to be rendered (which can also be called a route hash).
  • the routing hash is a unique identifier that distinguishes each page and is automatically spliced into the URL.
  • origin is the basic domain name
  • href is the URL of the page to be rendered.
  • the target route of the page to be rendered is determined based on the URL and the basic domain name of the page to be rendered, thereby ensuring the accuracy of subsequent rendering processing of the page to be rendered.
  • the page hot update method can also include the following steps:
  • the page to be rendered is rendered according to the virtual DOM.
  • the page to be rendered is directly rendered according to the virtual DOM.
  • the rendered page will have the effect of not using interface hot update, so that the component can achieve no side effects after processing. Effect.
  • FIG. 6 is a schematic flowchart of Embodiment 4 of the page hot update method provided by the embodiment of the present application. Among them, the framework layer and the target application are deployed in the terminal device. As shown in Figure 6, based on any of the above embodiments, the page hot update method may include the following steps:
  • the framework layer introduces and loads the preset plug-in at the main function entrance of the target application.
  • the framework layer creates responsive variables based on the preset plug-in.
  • the responsive variable is a private variable in the above embodiment.
  • the framework layer sends an asynchronous request to the server.
  • the framework layer dynamically creates pure function components.
  • the framework layer receives the configuration information returned by the server and triggers the execution of the render function in the pure function component.
  • the framework layer obtains the configured virtual DOM and pushes the configured virtual DOM to the rendering thread of the target application.
  • the execution of the render function in a pure function component can also be triggered through other rendering tasks.
  • FIG. 7 is a schematic flowchart of Embodiment 5 of the page hot update method provided by the embodiment of the present application. As shown in Figure 7, based on the above embodiment, S606 may include the following steps:
  • step S702. Determine whether the response information carries configuration information. If not, perform step S707; if yes, perform S703.
  • S705. Determine whether the target sub-configuration information corresponding to the target route, target label and target style class name can be obtained from the configuration information. If so, execute S706; if not, execute S707.
  • S708 Perform initialization operations on the configuration center, and then perform S704.
  • FIG 8 is a schematic structural diagram of a page hot updating device provided by an embodiment of the present application. As shown in Figure 8, the page hot update device includes:
  • the acquisition module 801 is used to obtain configuration information, and the configuration information is used to hot update the page to be rendered in the target application;
  • the processing module 802 is used to determine, based on the target route of the page to be rendered, the target tag and the target style class name of the pre-established virtual DOM, whether the target subroutine corresponding to the target route, the target tag and the target style class name can be obtained from the configuration information.
  • configuration information ;
  • the acquisition module 801 is also used to configure the virtual DOM according to the target sub-configuration information when the target sub-configuration information can be obtained, and obtain the configured virtual DOM;
  • the processing module 802 is also used to render the page to be rendered according to the configured virtual DOM.
  • the acquisition module 801 is specifically used for:
  • the route is used as the first-level sub-node
  • the label is used as the second-level sub-node
  • the style class name is used as the third-level sub-node.
  • Node use the style attribute value as the fourth-level child node, process the initial configuration information in a tree structure, and obtain the configuration information.
  • processing module 802 is specifically used to:
  • the target route, target label, and target style class name traverse the first-level sub-nodes, second-level sub-nodes, and third-level sub-nodes in the configuration information in order to determine whether there is a corresponding target route, target label, and target style class name.
  • the target style attribute value, the target sub-configuration information includes the target route, target label, target style class name and target style attribute value.
  • the device also includes:
  • the sending module is used to send asynchronous requests to the server, and the asynchronous requests are used to obtain initial configuration information
  • the processing module 802 is also used to register pure function components according to the preset plug-in preloaded in the target application.
  • the preset plug-in is used to detect whether the initial configuration information returned by the server is received;
  • the processing module 802 is also used to create a virtual DOM according to the type of the pure function component and the context information of the pure function component.
  • obtain module 801 specifically used for:
  • the processing module 802 is also used to:
  • the page to be rendered is rendered according to the virtual DOM.
  • the page hot updating device provided by the embodiments of the present application can be used to perform the page hot updating method in any of the above embodiments. Its implementation principles and technical effects are similar and will not be described again here.
  • each module of the above device is only a division of logical functions. In actual implementation, they can be fully or partially integrated into a physical entity, or they can also be physically separated. And these modules can all be implemented in the form of software calling through processing components; they can also all be implemented in the form of hardware; some modules can also be implemented in the form of software calling through processing components, and some modules can be implemented in the form of hardware. In addition, all or part of these modules can be integrated together or implemented independently.
  • the processing element described here may be an integrated circuit with signal processing capabilities. During the implementation process, each step of the above method or each of the above modules can be completed by instructions in the form of hardware integrated logic circuits or software in the processor element.
  • Figure 9 is a schematic structural diagram of a terminal device provided by an embodiment of the present application.
  • the terminal device may include: a processor 901, a memory 902, and computer program instructions stored on the memory 902 and executable on the processor 901.
  • the processor 901 executes the computer program instructions.
  • the page hot update method provided by any of the foregoing embodiments is implemented.
  • the above-mentioned components of the terminal device can be connected through a system bus.
  • the memory 902 may be a separate storage unit or a storage unit integrated in the processor.
  • the number of processors is one or more.
  • the terminal device may also include an interface for interacting with other devices.
  • the processor 901 can be a central processing unit (Central Processing Unit, CPU), or other general-purpose processor, digital signal processor (Digital Signal Processor, DSP), application specific integrated circuit (Application Specific Integrated Circuit, ASIC) wait.
  • a general-purpose processor may be a microprocessor or the processor may be any conventional processor, etc. The steps of the method disclosed in this application can be directly implemented by a hardware processor, or executed by a combination of hardware and software modules in the processor.
  • the system bus can be a peripheral component interconnect (PCI) bus or an extended industry standard architecture (EISA) bus, etc.
  • PCI peripheral component interconnect
  • EISA extended industry standard architecture
  • the system bus can be divided into address bus, data bus, control bus, etc. For ease of presentation, only one thick line is used in the figure, but it does not mean that there is only one bus or one type of bus.
  • the memory may include random access memory (RAM) and may also include non-volatile memory (NVM), such as at least one disk memory.
  • the aforementioned program can be stored in a readable memory.
  • the steps including the above method embodiments are executed; and the aforementioned memory (storage medium) includes: read-only memory (ROM), RAM, flash memory, hard disk, solid state hard disk, tape (English: magnetic tape), floppy disk (English: floppy disk), optical disk (English: optical disc) and any combination thereof.
  • the terminal device provided by the embodiments of the present application can be used to perform the page hot update method provided by any of the above method embodiments.
  • the implementation principles and technical effects are similar and will not be described again here.
  • Embodiments of the present application provide a computer-readable storage medium.
  • the computer-readable storage medium stores computer instructions. When the computer instructions are run on a computer, they cause the computer to perform the above page hot update method.
  • the above-mentioned computer-readable storage medium can be implemented by any type of volatile or non-volatile storage device or their combination, such as static random access memory, electrically erasable programmable read-only memory Memory, erasable programmable read-only memory, programmable read-only memory, read-only memory, magnetic memory, flash memory, magnetic or optical disk.
  • Readable storage media can be any available media that can be accessed by a general purpose or special purpose computer.
  • a readable storage medium is coupled to the processor such that the processor can read information from the readable storage medium and write information to the readable storage medium.
  • the readable storage medium may also be an integral part of the processor.
  • the processor and readable storage medium may be located in Application Specific Integrated Circuits (ASICs).
  • ASICs Application Specific Integrated Circuits
  • the processor and the readable storage medium may also exist as discrete components in the device.
  • Embodiments of the present application also provide a computer program product.
  • the computer program product includes a computer program.
  • the computer program is stored in a computer-readable storage medium.
  • At least one processor can read the computer program from the computer-readable storage medium. , when the at least one processor executes the computer program, the above page hot update method can be implemented.
  • This embodiment also provides a chip.
  • the chip includes a memory and a processor. Codes and data are stored in the memory.
  • the memory is coupled to the processor.
  • the processor runs the program in the memory so that the The chip is used to execute the page hot update method provided by the above various embodiments.
  • This embodiment also provides a computer program, which when the computer program is executed by a processor, is used to perform the page hot update method provided by the various embodiments.

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Computer Security & Cryptography (AREA)
  • Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
  • Stored Programmes (AREA)

Abstract

一种页面热更新方法、装置、设备及存储介质，方法包括：终端设备通过获取配置信息，根据待渲染页面的目标路由、预先建立的虚拟DOM的目标标签和目标样式类名，判断是否能够从配置信息中获取目标路由、目标标签和目标样式类名对应的目标子配置信息，在能够获取目标子配置信息时，根据目标子配置信息对虚拟DOM进行配置，获取配置后的虚拟DOM，并根据配置后的虚拟DOM对待渲染页面进行渲染。通过对虚拟DOM进行配置，并将配置后的虚拟DOM直接渲染到页面中，代替了现有技术组中先渲染页面后再触发真实DOM修改的方式，提高了页面热更新效率，解决了应用程序在热更新时存在的应用卡顿、白屏时间较长的问题。

Description

页面热更新方法、装置、设备及存储介质
本申请要求于2022年06月29日提交中国专利局、申请号为202210753752.X、申请名称为“页面热更新方法、装置、设备及存储介质”的中国专利申请的优先权，其全部内容通过引用结合在本申请中。
技术领域
本申请涉及金融科技技术领域，尤其涉及一种页面热更新方法、装置、设备及存储介质。
背景技术
近年来，随着金融科技的推广与蓬勃发展，用户日常生活中越来越多的线下银行业务均可以通过互联网银行应用实现，有效的提高了用户处理银行业务的效率和便捷性。而页面热更新是一项在互联网银行应用中运用广泛的技术，常运用于前端代码存在缺陷、关联系统存在缺陷或服务故障、营销或运营发生事故等异常场景，可达到降低资金损失以及客户投诉的目的。
现有技术中，目前页面热更新是通过终端设备从远程后端服务器中获取配置信息，当运行在终端设备的应用程序页面渲染时触发页面热更新逻辑，寻找应用程序中需要运用页面热更新的组件，并利用应用文档对象模型(Document Object Model，DOM)修改的接口在该组件内部根据配置信息进行局部更新修改，最终将修改后的结果重新更新到页面上，从而对页面进行页面热更新的目的。
然而，在根据修改后的结果修改真实DOM，以使将修改后的结果重新更新到页面上时，会触发页面的重新渲染，在重新渲染的过程中应用会对节点大小和位置进行重新计算，需要占用大量的计算资源，存在页面热更新效率低、应用卡顿以及用户使用体验较差的问题。
发明内容
本申请提供一种页面热更新方法、装置、设备及存储介质，以解决页面热更新效率低、应用卡顿以及用户使用体验较差的问题。
第一方面，本申请实施例提供一种页面热更新方法，包括：
获取配置信息，所述配置信息用于对目标应用程序中的待渲染页面进行热更新；
根据所述待渲染页面的目标路由、预先建立的虚拟DOM的目标标签和目标样式类名，判断是否能够从所述配置信息中获取目标路由、目标标签和目标样式类名对应的目标子配置信息；
在能够获取目标子配置信息时，根据所述目标子配置信息对所述虚拟DOM进行配置，获取配置后的虚拟DOM；
根据所述配置后的虚拟DOM对所述待渲染页面进行渲染。
在第一方面的一种可能设计中，所述获取配置信息，包括：
从服务器获取初始配置信息；
根据所述初始配置信息中的路由、标签、样式类名以及样式属性值四者的对应关系，将所述路由作为第一层子节点、将所述标签作为第二层子节点、将所述样式类名作为第三 层子节点、将所述样式属性值作为第四层子节点，对所述初始配置信息进行树状结构处理，获取所述配置信息。
可选的，所述根据所述待渲染页面的目标路由、预先建立的虚拟DOM的目标标签和目标样式类名，判断是否能够从所述配置信息中获取目标路由、目标标签和目标样式类名对应的目标子配置信息，包括：
根据所述目标路由、所述目标标签以及所述目标样式类名，依次遍历所述配置信息中的第一层子节点、第二层子节点以及第三层子节点，判断是否存在所述目标路由、所述目标标签以及所述目标样式类名对应的目标样式属性值，所述目标子配置信息包括目标路由、目标标签、目标样式类名以及目标样式属性值。
可选的，所述从服务器获取初始配置信息之前，所述方法还包括：
向所述服务器发送异步请求，所述异步请求用于获取所述初始配置信息；
根据所述目标应用程序中预先加载的预设插件，注册纯函数组件，所述预设插件用于检测是否接收到所述服务器返回的所述初始配置信息；
根据所述纯函数组件的类型以及所述纯函数组件的上下文信息，创建所述虚拟DOM。
可选的，所述根据所述目标子配置信息对所述虚拟DOM进行配置，获取配置后的虚拟DOM，包括：
根据所述目标子配置信息，对所述虚拟DOM的上下文信息进行配置，获取所述配置后的虚拟DOM。
在第一方面的另一种可能设计中，在所述获取配置信息之后，所述方法还包括：
获取所述待渲染页面的URL与基础域名；
根据所述URL与所述基础域名，确定所述待渲染页面的目标路由。
在第一方面的再一种可能设计中，在所述根据所述待渲染页面的目标路由、预先建立的虚拟DOM的目标标签和目标样式类名，判断是否能够从所述配置信息中获取目标路由、目标标签和目标样式类名对应的目标子配置信息之后，所述方法还包括：
在不能获取所述目标子配置信息时，根据所述虚拟DOM对所述待渲染页面进行渲染。
第二方面，本申请实施例提供一种页面热更新装置，包括：
获取模块，用于获取配置信息，所述配置信息用于对目标应用程序中的待渲染页面进行热更新；
处理模块，用于根据所述待渲染页面的目标路由、预先建立的虚拟DOM的目标标签和目标样式类名，判断是否能够从所述配置信息中获取目标路由、目标标签和目标样式类名对应的目标子配置信息；
所述获取模块，还用于在能够获取目标子配置信息时，根据所述目标子配置信息对所述虚拟DOM进行配置，获取配置后的虚拟DOM；
所述处理模块，还用于根据所述配置后的虚拟DOM对所述待渲染页面进行渲染。
在第二方面的一种可能设计中，所述获取模块，具体用于：
从服务器获取初始配置信息；
根据所述初始配置信息中的路由、标签、样式类名以及样式属性值四者的对应关系，将所述路由作为第一层子节点、将所述标签作为第二层子节点、将所述样式类名作为第三层子节点、将所述样式属性值作为第四层子节点，对所述初始配置信息进行树状结构处理，获取所述配置信息。
可选的，处理模块具体用于：
根据所述目标路由、所述目标标签以及所述目标样式类名，依次遍历所述配置信息中的第一层子节点、第二层子节点以及第三层子节点，判断是否存在所述目标路由、所述目标标签以及所述目标样式类名对应的目标样式属性值，所述目标子配置信息包括目标路由、目标标签、目标样式类名以及目标样式属性值。
可选的，该装置还包括：
发送模块，用于向所述服务器发送异步请求，所述异步请求用于获取所述初始配置信息；
所述处理模块，还用于根据所述目标应用程序中预先加载的预设插件，注册纯函数组件，所述预设插件用于检测是否接收到所述服务器返回的所述初始配置信息；
所述处理模块，还用于根据所述纯函数组件的类型以及所述纯函数组件的上下文信息，创建所述虚拟DOM。
可选的，所述获取模块，具体用于：
根据所述目标子配置信息，对所述虚拟DOM的上下文信息进行配置，获取所述配置后的虚拟DOM。
在第二方面的另一种可能设计中，在所述获取配置信息之后，所述获取模块，还用于获取所述待渲染页面的URL与基础域名；
所述处理模块，还用于根据所述URL与所述基础域名，确定所述待渲染页面的目标路由。
在第二方面的再一种可能设计中，在所述根据所述待渲染页面的目标路由、预先建立的虚拟DOM的目标标签和目标样式类名，判断是否能够从所述配置信息中获取目标路由、目标标签和目标样式类名对应的目标子配置信息之后，所述处理模块，还用于：
在不能获取所述目标子配置信息时，根据所述虚拟DOM对所述待渲染页面进行渲染。
第三方面，本申请实施例提供一种终端设备，包括：处理器、存储器及存储在所述存储器上并可在处理器上运行的计算机程序指令，所述处理器执行所述计算机程序指令时用于实现第一方面以及各可能设计提供的方法。
第四方面，本申请实施例可提供一种计算机可读存储介质，所述计算机可读存储介质中存储有计算机执行指令，所述计算机执行指令被处理器执行时用于实现第一方面以及各可能设计提供的方法。
第五方面，本发明实施例提供一种芯片，所述芯片包括存储器、处理器，所述存储器中存储代码和数据，所述存储器与所述处理器耦合，所述处理器运行所述存储器中的程序使得所述芯片用于执行上述第一方面任一项所述的页面热更新方法。
第六方面，本发明实施例提供一种程序产品，包括：计算机程序，当所述程序产品在计算机上运行时，使得所述计算机执行上述第一方面任一项所述的页面热更新方法。
第七方面，本发明实施例提供一种计算机程序，当所述计算机程序被处理器执行时，用于执行上述第一方面任一项所述的页面热更新方法。
本申请实施例提供的页面热更新方法、装置、设备及存储介质，终端设备通过获取配置信息，根据待渲染页面的目标路由、预先建立的虚拟DOM的目标标签和目标样式类名，判断是否能够从配置信息中获取目标路由、目标标签和目标样式类名对应的目标子配置信息，在能够获取目标子配置信息时，根据目标子配置信息对虚拟DOM进行配置，获取配置后的虚拟DOM，并根据配置后的虚拟DOM对待渲染页面进行渲染。在本技术方案中，通过对虚拟DOM进行配置，并将配置后的虚拟DOM直接渲染到页面中，代替了现有技术组中先渲染页面后再触发真实DOM修改的方式，减少了渲染任务的次数，进而减少了应用程序的回流，提高了页面热更新效率，解决了应用程序在热更新时存在的应用卡顿、白屏时间较长的问题。用户在使用目标应用程序时，与没有接入页面热更新技术的应用程序无异，接近于无感，从而提升了用户体验。同时，本方案在上下文信息的判断逻辑，也可有效降低因方案改造所带来的代码测试覆盖率风险，可提升在金融科技领域所要求的系统稳定性。
附图说明
此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本申请的实施例，并与说明书一起用于解释本申请的原理。
图1为现有技术中页面热更新方法的流程示意图；
图2为本申请实施例提供的页面热更新方法实施例一的流程示意图；
图3为本申请实施例提供的配置信息的结构示意图；
图4为本申请实施例提供的页面热更新方法实施例二的流程示意图；
图5为本申请实施例提供的页面热更新方法实施例三的流程示意图；
图6为本申请实施例提供的页面热更新方法实施例四的流程示意图；
图7为本申请实施例提供的页面热更新方法实施例五的流程示意图；
图8为本申请实施例提供的页面热更新装置的结构示意图；
图9为本申请实施例提供的终端设备的结构示意图。
通过上述附图，已示出本公开明确的实施例，后文中将有更详细的描述。这些附图和文字描述并不是为了通过任何方式限制本公开构思的范围，而是通过参考特定实施例为本领域技术人员说明本公开的概念。
具体实施方式
为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。
在介绍本申请的实施例之前，首先对本申请实施例所涉及的名词进行解释：
DOM：是超文本标记语言(Hyper Text Markup Language，HTML)和可扩展标记语言(Extensible Markup Language，XML)文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从应用程序中对该结构进行访问，从而改变文档的结构、样式和内容。DOM将文档解析为一个由节点和对象(包含属性和方法的对象)组成的结构集合。简言之，它会将全球广域网(World Wide Web，web)页面和脚本或程序语言连接起来。
虚拟DOM：指一种编程概念，意为将目标所需的用户界面(User Interface，UI)通过数据结构“虚拟”地表示出来，保存在内存中，并与真实的DOM保持同步。由于真实的DOM的属性十分庞大，计算和操作的过程会存在性能损耗问题，使用内存中的虚拟DOM替代部分DOM的计算和操作可以有效提升应用的性能。
页面热更新：指一种不依赖于发布新的版本、或在不修改源代码的情况下，通过远程下发配置信息的方式，修改特定页面、特定元素上的文本、属性、样式或事件句柄，从而改变页面呈现效果或用户交互的技术。
回流：在整个渲染过程中，对节点大小和位置进行重新计算。
本申请具体的应用场景如下：图1为现有技术中页面热更新方法的流程示意图。其中，JavaScript(简称：JS)进程与渲染进程运行于终端设备，该终端设备与服务器通过无线方式进行通信交互。JS进程用于从服务器中获取并存储配置信息，渲染进程用于根据该配置信息对页面进行渲染，以达到对页面进行热更新的目的。
如图1所示，现有技术中页面热更新方法主要包括以下步骤：
步骤1、渲染进程解析HTML页面。
步骤2、渲染进程加载JS脚本，以使运行JS进程。
步骤3、JS进程从服务器中同步拉取HTML页面的配置信息。
步骤4、JS进程将该配置信息存储至内存中。
步骤5、渲染进程从内存中获取该配置信息，并对HTML页面进行渲染。
步骤6、在HTML页面渲染时，渲染进程触发页面热更新逻辑。
步骤7、JS进程根据该热更新逻辑，获取需要修改的第一内容。
步骤8、JS进程根据该第一内容以及配置信息，修改HTML页面的第一DOM。
步骤9、渲染进程根据该第一DOM，对HTML页面进行重新渲染，以实现对HTML页面进行热更新的目的。
当HTML页面每次触发重新渲染时，都需要重新执行步骤6-步骤9，对需要局部更新的内容进行再次修改以达到预期。示例性的，触发重新渲染的流程可以通过下述步骤实现：
步骤10、渲染进程对HTML页面进行渲染。
步骤11、JS进程运行时触发重新渲染。
步骤12、渲染进程触发页面热更新逻辑。
步骤13、JS进程根据该热更新逻辑，获取需要修改的第二内容。
步骤14、JS进程根据该第二内容以及配置信息，修改HTML页面的第二DOM。
步骤15、渲染进程根据该第二DOM，对HTML页面进行重新渲染。
然而，在修改DOM时，会触发页面的重新渲染，而重新渲染页面的行为会引起应用程序的回流，导致存在如占用内存、占用中央处理器(Central Processing Unit，CPU)运算能力等的问题。同时，若有多个组件同时执行更新流程，则会多次触发回流，致使在短时间内会产生大量的计算数据，存在性能瓶颈、应用卡顿以及页面热更新效率低的问题，严重影响正常场景下的用户体验。
针对上述问题，本申请的发明构思如下：由于现有技术中需要先对页面进行渲染，之后再触发真实DOM的修改过程，也就是说现有技术中存在至少两次渲染过程。基于此，发明人发现，由于Vue框架在对组件进行渲染前，都会调用该组件内的render函数，并从render函数的返回值中获取虚拟DOM，以使Vue框架将该虚拟DOM转化为真实DOM并渲染到页面上。因此，在视图更新前(也就是页面渲染前)，根据配置信息对虚拟DOM进行配置，并根据配置后的虚拟DOM对页面进行渲染。由于在视图更新前先对配置信息进行拦截，此时页面的DOM还没有发生变更，从而减少了页面渲染次数，解决了应用卡顿的问题，提高了页面热更新效率，保证了用户的使用体验。
下面，通过具体实施例对本申请的技术方案进行详细说明。
需要说明的是，下面这几个具体的实施例可以相互结合，对于相同或相似的概念或过程可能在某些实施例中不再赘述。
图2为本申请实施例提供的页面热更新方法实施例一的流程示意图。如图2所示，该页面热更新方法可以包括如下步骤：
S201、获取配置信息。
本实施例的执行主体为终端设备，终端设备与服务器通过无线方式进行数据交互。服务器中存储有配置信息，该配置信息用于对运行在终端设备中的目标应用程序的待渲染页面进行热更新，该配置信息包括路由、标签、样式类名以及样式属性值。其中，路由为页面的唯一标识。
示例性的，配置信息可以通过表1进行表示。
表1
Figure PCTCN2022127651-appb-000001
由表1所示，配置信息可以包括多个子配置信息，如其中一个子配置信息可以为路由1、标签10、样式类名10以及样式属性值10。应理解，配置信息还可以包括其他内容和 表现形式，可以根据实际情况进行确定，本申请实施例对此不进行具体限制。
在另一种示例中，图3为本申请实施例提供的配置信息的结构示意图。如图3所示，配置信息还可以为树状结构，其中路由为第一层子节点、标签为第二层子节点、样式类名为第三层子节点、样式属性值为第四层子节点。该配置信息包括多个子配置信息，如其中一个子配置信息可以为路由3、标签30、样式类名30以及样式属性值30。
在一种可能的实现方式中，终端设备可以基于初始化的接口向服务器发送配置信息获取请求，以使通过该接口从服务器返回的响应信息中获取配置信息。
可选的，该配置信息获取请求可以为异步请求，也可以为同步请求。该响应信息还可以包括状态码，该状态码用于指示该响应信息中是否携带有配置信息。
可选的，目标应用程序可以为安装在终端设备中的基于Vue框架的应用程序。该目标应用程序的主函数入口预先加载有预设插件，该预设插件用于检测终端设备是否获取到配置信息。举例来说，该预设插件中可以预先定义有私有变量(如：requestResult)，该私有变量具有初始赋值(如：false)。在状态码指示响应信息中携带有配置信息时，将上述私有变量的赋值由初始赋值修改为成功的枚举值(如true)，以使实现检测终端设备是否获取到配置信息的目的。
S202、根据待渲染页面的目标路由、预先建立的虚拟DOM的目标标签和目标样式类名，判断是否能够从配置信息中获取目标路由、目标标签和目标样式类名对应的目标子配置信息。
在一种可能的实现方式中，在配置信息结构为表格时，则根据目标路由、目标标签和目标样式类名在上述表格中查询是否存在对应的目标样式属性值。若存在，则代表能够从配置信息中获取目标子配置信息，目标子配置信息包括目标路由、目标标签、目标样式类名以及目标样式属性值；若不能，则代表不能从配置信息中获取目标子配置信息。
在一种可能的实现方式中，在配置信息结构为树状结构时，根据目标路由、目标标签以及目标样式类名，依次遍历配置信息中的第一层子节点、第二层子节点以及第三层子节点，判断是否存在目标路由、目标标签以及目标样式类名对应的目标样式属性值。
示例性的，根据目标路由遍历配置信息的第一层子节点，在第一层子节点与目标路由不一致时，则直接跳过，在第一层子节点与目标路由一致时，则将该第一层子节点确定为目标第一层子节点。进一步的，根据目标标签遍历目标第一层子节点对应的第二层子节点，从上述第二层子节点中确定出目标第二层子节点。进一步的，根据目标样式类名遍历目标第二层子节点对应的第三层子节点，从上述第三层子节点中确定出目标第三层子节点，获取目标第三层子节点对应的目标第四层子节点，该目标第四层子节点即为目标样式属性值。
在上述方法中，由于配置信息具有明显的父子级关系，示例性的，一个路由可以对应多个标签，每个标签对应多个样式类名。因此，通过利用上述父子级关系，无需遍历配置信息中的全部数据，有效的节约了处理时间，提高了处理效率。
可选的，虚拟DOM是预先根据预设插件创建的。示例性的，可以预先根据该预设插件注册纯函数组件，并根据该纯函数组件的类型以及该纯函数组件的上下文信息(也可以称为上下文相关选项)创建该虚拟DOM。每个纯函数组件的路由、标签以及类名都是固定的。虚拟DOM的创建过程可以参照图4所示的实施例，此处不再赘述。
可选的，虚拟DOM的数量可以为1个，也可以为多个，本申请实施例不对虚拟DOM的数量进行限定。
S203、在能够获取目标子配置信息时，根据目标子配置信息对虚拟DOM进行配置，获取配置后的虚拟DOM。
在一种可能的实现方式中，在获取目标子配置信息后，根据目标样式属性值的类型，确定配置方式，并根据该配置方式对虚拟DOM的上下文信息进行配置，从而获取配置后的虚拟DOM。根据目标样式属性值的类型，确定对上下文信息进行配置的方式，从而提 高了配置的准确度，进而提高页面的渲染效果。
示例性的，假设目标样式属性值的类型为文本类型，该目标样式属性值包括目标文本和替换文本。则利用虚拟DOM为树状结构的特点，对上下文信息中的各上下文子节点类型进行判断，若该上下文子节点类型为文本类型，且该上下文子节点内的文本为目标文本，则使用文本替换器将该上下文子节点内的目标文本替换为替换文本，从而实现文本的替换效果。可选的，目标样式属性值可以为界面热目标文本以及更新文本等。
示例性的，假设目标样式属性值的类型为属性类型，该目标样式属性值包括待替换属性，将待替换属性与上下文信息中的原属性对象进行深度对象合并。可选的，在目标样式类名与原属性对象对应的样式类名相同时，则优先使用待替换属性，并将合并后的样式属性值设置回上下文信息。
示例性的，假设目标样式属性值的类型为事件类型，该目标样式属性值包括拦截事件名，则查看上下文信息中的“事件监听器对象”。当“事件监听器对象”中存在拦截事件名时，则删除该事件对应的句柄，并创建一个新的无逻辑的空函数挂载到该事件的句柄上，当该拦截事件触发时，对应句柄的函数内并没有实际逻辑执行，从而实现事件的拦截效果。
进一步的，接下来通过三个具体的示例对本步骤进行具体说明。
示例1、从目标子配置信息中取出类型字段(目标样式属性值)记为type，若type类型含有文本类型(则说明目标样式属性值的类型为文本类型)，并且目标子配置信息中的目标文本、替换文本分别为“测试”、“替换后”，则查找上下文信息中所有包含“测试”的文本，并修改为“替换后”，配置后的上下文信息可以如下表示：
Figure PCTCN2022127651-appb-000002
进一步的，将配置后的上下文信息传入到createElement(虚拟DOM的创建方法)作为入参，获取配置后的虚拟DOM，根据配置后的虚拟DOM对待渲染页面进行渲染的预期效果将会是：
<div class＝"test"align＝"center">替换后文本</div>
示例二、同理，假设type类型含有属性类型，且目标样式属性值里“待替换属性”可以如下表示：
{align:"left"}
将上下文信息中attrs原属性对象与待替换属性进行对象合并，获取的配置后的上下文信息可以如下表示：
Figure PCTCN2022127651-appb-000003
进一步的，将配置后的上下文信息传入到createElement作为入参，获取配置后的虚拟DOM，根据配置后的虚拟DOM对待渲染页面进行渲染的预期效果将会是：
<div class＝"test"align＝"left">替换后文本</div>
示例三、若type类型含有事件类型，且目标样式属性值里的拦截事件为“click”点击事件，则访问该上下文信息下的listeners对象，该对象是用于存放组件的事件监听器对象，将该对象中的“click”的键值对删除，并创建一个空函数挂载上去，可实现点击事件的拦截效果。
S204、根据配置后的虚拟DOM对待渲染页面进行渲染。
在一种可能的实现方式中，将该配置后的虚拟DOM确定为待渲染的内容，之后利用 Vue渲染引擎将该待渲染的内容渲染至待渲染页面中。可选的，为了进一步节约计算资源，在生成配置后的虚拟DOM后可以暂时将其进行存储，按照预设频率对暂时存储的多个配置后的虚拟DOM进行合并，并根据合并后的虚拟DOM对待渲染页面进行渲染。
可选的，预设频率可以为5分钟1次，30分钟1次或1小时1次等，可以根据实际情况进行限定，本申请实施例对此不进行具体限定。
示例性的，假设配置后的上下文信息为以下数据时：
Figure PCTCN2022127651-appb-000004
根据该配置后的上下文信息对应的配置后的虚拟DOM对待渲染页面进行渲染后的结果将是：
<div class＝"test"align＝"left">替换后文本</div>
本申请实施例提供的页面热更新方法，终端设备通过获取配置信息，根据待渲染页面的目标路由、预先建立的虚拟DOM的目标标签和目标样式类名，判断是否能够从配置信息中获取目标路由、目标标签和目标样式类名对应的目标子配置信息，在能够获取目标子配置信息时，根据目标子配置信息对虚拟DOM进行配置，获取配置后的虚拟DOM，并根据配置后的虚拟DOM对待渲染页面进行渲染。在本技术方案中，通过对虚拟DOM进行配置，并将配置后的虚拟DOM直接渲染到页面中，代替了现有技术组中先渲染页面后再触发真实DOM修改的方式，减少了渲染任务的次数，进而减少了应用程序的回流，提高了页面热更新效率，解决了应用程序在热更新时存在的应用卡顿、白屏时间较长的问题。用户在使用目标应用程序时，与没有接入页面热更新技术的应用程序无异，接近于无感，从而提升了用户体验。同时，本方案在上下文信息的判断逻辑，也可有效降低因方案改造所带来的代码测试覆盖率风险，可提升在金融科技领域所要求的系统稳定性。
可选的，在一些实施例中，基于上述任一实施例，S201可以通过如下步骤实现：
从服务器获取初始配置信息，根据初始配置信息中的路由、标签、样式类名以及样式属性值四者的对应关系，将路由作为第一层子节点、将标签作为第二层子节点、将样式类名作为第三层子节点、将样式属性值作为第四层子节点，对初始配置信息进行树状结构处理，获取配置信息。
示例性的，从服务器获取初始配置信息后，可以判断预设插件内部的配置中心是否已经初始化，若未初始化，则根据初始配置信息对配置中心进行初始化处理。初始化过程可以为：从初始配置信息中获取路由字段，将路由字段作为对象的key，value值为路由字段相同的初始配置信息集合；进一步，对该初始配置信息集合进行遍历，将标签字段作为对象的key，value值为标签字段相同的初始配置信息集合；进一步，对该初始配置信息集合进行遍历，将样式类名字段作为对象的key，value值为样式类名字段相同的初始配置信息集合，这样配置中心即为一个三层嵌套结构的对象，分别是路由、标签、样式类名三个层级。
在该方式下，针对于S202来说，可以将目标路由、目标标签和目标样式类名作为各个层级的key值，采用前序遍历的方式遍历各层级节点，当样式类名层级有查询到对应的目标样式属性值时即结束遍历，将目标路由、目标标签、目标样式类名以及目标样式属性值作为目标子配置信息返回。
示例性的，假设目标路由、目标标签和目标样式分别为“main/home”、“div”、“test”，则通过初始化后的配置中心以main/home”为key查看是否存在对应的值，若存在则在该值中以“div”为key查找是否存在对应的值，若存在则在该值中以“test”为key查找是否存在对应的值，若存在则将该值确定为目标样式属性值，在无法获取对应的值时直接结 束计算。
在又一示例中，查询到的目标子配置信息可以为：
{
"page":"main/home","element":"div","className":"test"，......
进一步的，接下来通过一个具体的示例对初始化过程进行具体说明。
在初始化配置中心时，假设初始配置信息为以下数据结构(示例中省略了部分配置信息的字段)：
Figure PCTCN2022127651-appb-000005
可以看到，初始配置信息为数组结构，对其进行遍历并取出路由字段，去重后作为key值分类存放，配置内容将会得到以下对象：
{"main/home":{},"main/other":{}}
同时，以同样的方式取出标签字段(element)，去重后分类存放，可以得到：
{
"main/home":{"div":{},"p":{}},
"main/other":{"div":{}}
进一步的，以同样的方式取出样式类名字段(className)，将全部提取出的数据存入配置中心，最终获取的配置信息可以如下表示：
Figure PCTCN2022127651-appb-000006
由于配置信息中包括多个子配置信息，在现有技术中，主要是通过组件的唯一标识确定组件对应的子配置信息。然而，在源码中定义标识值是一个不安全的操作。由于标识值不是动态生成的，可能会有重复的问题，导致同一个唯一标识可能被多次运用。且，在代码中编写标识值，每个组件都需要预埋一个属性，也增加了开发人员的使用成本。在现有技术中，还可以多个筛选条件匹配的方式，替代唯一标识匹配的方式。但一般较少进行这样的操作，原因是其需要依赖于对DOM元素进行访问，每个DOM元素的内部属性值都需要被访问多次。DOM元素的读写相对于常规对象的读写需要耗费更多性能，同时占用的内存也更多，在render函数中使用虚拟DOM完成该步骤可以带来效率和性能上的提升。同时，因许多属性值是动态绑定的、具有逻辑控制的，也有可能是Vue框架上私有变量，不一定能在实际渲染的DOM元素上通过接口访问得到，在可操作的配置项数量上十分有限，无法实现全部覆盖。
而上述实施例中，由于路由、标签、样式类名、样式属性值为具有明显父子级关系的维度，而纯函数组件的路由、标签、类名都是确定的，因此，可以通过纯函数组件的路由、 标签、类名从配置信息中确定出准确的子配置信息。且，这种通过三种已知的、确定的参数匹配某个未知的参数的方式，在接入相关功能前不需要进行大幅度改造，可避免在源码预埋入额外的、与业务逻辑无关的标识值，减少预埋所带来的工作量，也避免了唯一标识重复的问题。
可选的，图4为本申请实施例提供的页面热更新方法实施例二的流程示意图。如图4所示，基于上述任一实施例，从服务器获取初始配置信息之前，该页面热更新方法还可以包括如下步骤：
S401、向服务器发送异步请求。
其中，异步请求用于获取初始配置信息，该异步请求也就是上文中的配置信息获取请求。
S402、根据目标应用程序中预先加载的预设插件，注册纯函数组件。
在一种可能的实现方式中，可以使用Vue.extend应用程序接口(Application Programming Interface，API)动态创建初始组件，并将该初始组件的功能性(functional)参数设置为真值(也可以称为正值)。同时，为初始组件定义一个自定义属性，该自定义属性用于存放初始组件的类型值。之后，通过Vue框架创建组件时，根据该functional参数的值将初始组件设置为纯函数组件，该定义属性用于存放纯函数组件的类型值。
其中，预设插件用于检测是否接收到服务器返回的初始配置信息。
可选的，预设插件中预先定义有私有变量具备响应式(可以通过将私有变量作为入参传入Vue.observable实例方法实现)，在私有变量的赋值为成功的枚举值时，则通知所有依赖与该私有变量的纯函数组件。
可选的，自定义属性还可以用于对传入的值做有效性校验，校验的逻辑是判断传入值是否是DOM上真实存在的标签。
应理解，注册纯函数组件的目的是Vue框架会额外为纯函数组件提供一个选项为render函数，可用于修改或自定义渲染的内容。
S403、根据纯函数组件的类型以及纯函数组件的上下文信息，创建虚拟DOM。
通过Vue框架为纯函数组件传入纯函数组件的上下文信息以及虚拟DOM的创建方法，根据虚拟DOM的创建方法以及纯函数组件的类型创建一个原生DOM，并从上下文信息中解构得到所有事件和属性值，不做任何修改地透传到创建好的原生DOM中，得到虚拟DOM。
可选的，纯函数组件的类型可以通过自定义属性确定。
可选的，虚拟DOM的目标标签是根据自定义属性确定的。
示例性的，加入render函数第一个参数(虚拟DOM的创建方法)名为createElement，第二个参数(上下文信息)为对象结构名为context，其中data为预期传递给纯函数组件的整个数据对象、children为子节点；若组件的使用方定义了一个align属性为“center”、class类名为“test”、子节点为文本“测试文本”，Vue框架会将context设置为以下数据结构：
Figure PCTCN2022127651-appb-000007
若当前组件传入的类型值是“div”，首先调用createElement，并将字符串“div”、变量context分别传入作为createElement的入参，可获得一个HTML DIV标签的虚拟DOM，该虚拟DOM在页面上的渲染结果预期将会是：
<div class＝"test"align＝"center">测试文本</div>
由于应用程序引擎单线程的设计，在同步请求的过程中会阻塞掉其他JS和渲染进程的执行；因接口请求的耗时是取决于终端的网络情况，应用在这个时间段内会有白屏效果且时间不固定，导致用户体验不佳；若不等待接口返回，先执行页面初始渲染，页面热更新逻辑只能等待下一次框架有渲染任务时才能触发，相当于在这段时间内有益效果无法生效；而渲染任务什么时候再次触发是无法预测的，也使得这种方式变得不可靠。在本申请实施例中，通过使用异步请求，有效解决同步请求存在的问题，并在发送异步请求之后创建虚拟DOM，有效地利用了发送异步请求与接收服务器返回的初始配置信息的时间，提高了页面热更新的效率。
可选的，还可以通过目标应用程序的其他业务逻辑触发页面热更新，从而获取配置信息，比如其他响应式数据的修改或发生了交互行为等。
示例性的，在目标应用程序运行过程中，存在用户交互或是其他逻辑处理。以将纯函数组件的文本渲染内容改成“测试文本2”为例，此时由于发生了重新渲染的行为，上下文信息会被重新设置为：
Figure PCTCN2022127651-appb-000008
上述数据在待渲染页面上会被渲染的结果是：
<div class＝"test"align＝"center">测试文本2</div>
由于在render函数执行过程中，会再次将上下文信息修改为运用界面热更新后的内容，使得最终在页面上的实际渲染的内容还是：
<div class＝"test"align＝"left">替换后文本2</div>
这使得，本方案不会因再次触发渲染而导致界面热更新失效，在不同场景下，发生重新渲染后本方案的有益效果仍能体现。
可选的，图5为本申请实施例提供的页面热更新方法实施例三的流程示意图。如图5所示，基于上述任一实施例，在获取配置信息之后，该页面热更新方法还可以包括如下步骤：
S501、获取待渲染页面的URL与基础域名。
在一种可能的实现方式中，可以获取目标应用程序的Location全局对象，从该Location全局对象获取待渲染页面的统一资源定位系统(uniform resource locator，URL)与基础域名。
S502、根据URL与基础域名，确定待渲染页面的目标路由。
在一种可能的实现方式中，将URL截去基础域名得到待渲染页面的目标路由(也可以称为路由哈希)。在基于Vue框架的应用程序里，路由哈希是区分每个页面的唯一标识，会自动拼接到URL上。
示例性的，假设待渲染页面是位于“www.webank.com”域下、路由为“main/home”， 访问页面的Location对象，将会得到以下对象：
Figure PCTCN2022127651-appb-000009
其中，origin为基础域名、href为待渲染页面的URL，由href截去origin的部分与“#”号连接的部分，便可以确定待渲染页面的目标路由为“main/home”。
在上述实施例中，根据待渲染页面的URL与基础域名确定待渲染页面的目标路由，保证了后续对待渲染页面进行渲染处理的准确性。
可选的，在一些实施例中，基于上述实施例，在根据待渲染页面的目标路由、预先建立的虚拟DOM的目标标签和目标样式类名，判断是否能够从配置信息中获取目标路由、目标标签和目标样式类名对应的目标子配置信息之后，该页面热更新方法还可以包括如下步骤：
在不能获取目标子配置信息时，根据虚拟DOM对待渲染页面进行渲染。
在该实施例中，在不能获取目标子配置信息时，直接根据虚拟DOM对待渲染页面进行渲染，渲染后的页面将会是未运用界面热更新的效果，这样处理后该组件可达到无副作用的效果。
示例性的，此时纯函数组件在页面上的渲染结果将会是：
<div class＝"test"align＝"center">测试文本</div>
其中，无副作用可使得相关工作人员在接入该类注册纯函数组件的时候没有引入额外新增的DOM元素、用户的交互事件和属性也可以得以保留，对于没有配置界面热更新的注册纯函数组件，最终引擎将其渲染到页面上的内容，跟接入前的内容是一致的，也可以理解是一种侵入性较小的方案。
图6为本申请实施例提供的页面热更新方法实施例四的流程示意图。其中，框架层以及目标应用程序部署于终端设备中。如图6所示，基于上述任一实施例的基础上，该页面热更新方法可以包括如下步骤：
S601、框架层在目标应用程序的主函数入口引入并加载预设插件。
S602、框架层根据预设插件创建响应式变量。
其中，该响应式变量为上述实施例中的私有变量。
S603、框架层向服务器发送异步请求。
S604、框架层动态创建纯函数组件。
S605、框架层接收服务器返回的配置信息，触发纯函数组件中的render函数的执行。
S606、框架层在render函数执行后，获取配置后的虚拟DOM，并将配置后的虚拟DOM推送至目标应用程序的渲染线程。
同时，还可以通过其他渲染任务触发纯函数组件中的render函数的执行。
图7为本申请实施例提供的页面热更新方法实施例五的流程示意图。如图7所示，基于上述实施例的基础上，S606可以包括通过如下步骤实现：
S701、根据目标应用程序中预先加载的预设插件，注册纯函数组件，并根据纯函数组件的类型以及纯函数组件的上下文信息，创建虚拟DOM。
S702、判断响应信息中是否携带有配置信息。若否，则执行步骤S707；若是，则执行S703。
S703、判断纯函数组件中的配置中心是否初始化，若是，则执行S704，若否，则执行S708，
S704、获取待渲染页面的目标路由，虚拟DOM的目标标签和目标样式。
S705、判断是否能够从配置信息中获取目标路由、目标标签和目标样式类名对应的目 标子配置信息，若是则执行S706，若否则执行S707。
S706、根据目标子配置信息对虚拟DOM进行配置。
S707、将当前的虚拟DOM确定为目标虚拟DOM，以使根据该目标虚拟DOM对待渲染页面进行渲染。S707执行后结束流程。
S708、对配置中心执行初始化操作，之后执行S704。
下述为本申请装置实施例，可以用于执行本申请方法实施例。对于本申请装置实施例中未披露的细节，请参照本申请方法实施例。
图8为本申请实施例提供的页面热更新装置的结构示意图。如图8所示，该页面热更新装置包括：
获取模块801，用于获取配置信息，配置信息用于对目标应用程序中的待渲染页面进行热更新；
处理模块802，用于根据待渲染页面的目标路由、预先建立的虚拟DOM的目标标签和目标样式类名，判断是否能够从配置信息中获取目标路由、目标标签和目标样式类名对应的目标子配置信息；
获取模块801，还用于在能够获取目标子配置信息时，根据目标子配置信息对虚拟DOM进行配置，获取配置后的虚拟DOM；
处理模块802，还用于根据配置后的虚拟DOM对待渲染页面进行渲染。
在本申请实施例的一种可能设计中，获取模块801，具体用于：
从服务器获取初始配置信息；
根据初始配置信息中的路由、标签、样式类名以及样式属性值四者的对应关系，将路由作为第一层子节点、将标签作为第二层子节点、将样式类名作为第三层子节点、将样式属性值作为第四层子节点，对初始配置信息进行树状结构处理，获取配置信息。
可选的，处理模块802具体用于：
根据目标路由、目标标签以及目标样式类名，依次遍历配置信息中的第一层子节点、第二层子节点以及第三层子节点，判断是否存在目标路由、目标标签以及目标样式类名对应的目标样式属性值，目标子配置信息包括目标路由、目标标签、目标样式类名以及目标样式属性值。
可选的，该装置还包括：
发送模块，用于向服务器发送异步请求，异步请求用于获取初始配置信息；
处理模块802，还用于根据目标应用程序中预先加载的预设插件，注册纯函数组件，预设插件用于检测是否接收到服务器返回的初始配置信息；
处理模块802，还用于根据纯函数组件的类型以及纯函数组件的上下文信息，创建虚拟DOM。
可选的，获取模块801，具体用于：
根据目标子配置信息，对虚拟DOM的上下文信息进行配置，获取配置后的虚拟DOM。
在本申请实施例的另一种可能设计中，在获取配置信息之后，获取模块801，还用于获取待渲染页面的URL与基础域名；
处理模块802，还用于根据URL与基础域名，确定待渲染页面的目标路由。
在本申请实施例的再一种可能设计中，在根据待渲染页面的目标路由、预先建立的虚拟DOM的目标标签和目标样式类名，判断是否能够从配置信息中获取目标路由、目标标签和目标样式类名对应的目标子配置信息之后，处理模块802，还用于：
在不能获取目标子配置信息时，根据虚拟DOM对待渲染页面进行渲染。
本申请实施例提供的页面热更新装置，可用于执行上述任一实施例中的页面热更新方法，其实现原理和技术效果类似，在此不再赘述。
需要说明的是，应理解以上装置的各个模块的划分仅仅是一种逻辑功能的划分，实际 实现时可以全部或部分集成到一个物理实体上，也可以物理上分开。且这些模块可以全部以软件通过处理元件调用的形式实现；也可以全部以硬件的形式实现；还可以部分模块通过处理元件调用软件的形式实现，部分模块通过硬件的形式实现。此外，这些模块全部或部分可以集成在一起，也可以独立实现。这里所述的处理元件可以是一种集成电路，具有信号的处理能力。在实现过程中，上述方法的各步骤或以上各个模块可以通过处理器元件中的硬件的集成逻辑电路或者软件形式的指令完成。
图9为本申请实施例提供的终端设备的结构示意图。如图9所示，该终端设备可以包括：处理器901、存储器902及存储在所述存储器902上并可在处理器901上运行的计算机程序指令，所述处理器901执行所述计算机程序指令时实现前述任一实施例提供的页面热更新方法。
可选的，该终端设备的上述各个器件之间可以通过系统总线连接。
存储器902可以是单独的存储单元，也可以是集成在处理器中的存储单元。处理器的数量为一个或者多个。
可选的，终端设备还可以包括与其他设备进行交互的接口。
应理解，处理器901可以是中央处理单元(Central Processing Unit，CPU)，还可以是其他通用处理器、数字信号处理器(Digital Signal Processor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。结合本申请所公开的方法的步骤可以直接体现为硬件处理器执行完成，或者用处理器中的硬件及软件模块组合执行完成。
系统总线可以是外设部件互连标准(peripheral component interconnect，PCI)总线或扩展工业标准结构(extended industry standard architecture，EISA)总线等。系统总线可以分为地址总线、数据总线、控制总线等。为便于表示，图中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。存储器可能包括随机存取存储器(random access memory，RAM)，也可能还包括非易失性存储器(non-volatile memory，NVM)，例如至少一个磁盘存储器。
实现上述各方法实施例的全部或部分步骤可以通过程序指令相关的硬件来完成。前述的程序可以存储于一可读取存储器中。该程序在执行时，执行包括上述各方法实施例的步骤；而前述的存储器(存储介质)包括：只读存储器(read-only memory，ROM)、RAM、快闪存储器、硬盘、固态硬盘、磁带(英文：magnetic tape)、软盘(英文：floppy disk)、光盘(英文：optical disc)及其任意组合。
本申请实施例提供的终端设备，可用于执行上述任一方法实施例提供的页面热更新方法，其实现原理和技术效果类似，在此不再赘述。
本申请实施例提供一种计算机可读存储介质，该计算机可读存储介质中存储有计算机指令，当该计算机指令在计算机上运行时，使得计算机执行上述页面热更新方法。
上述的计算机可读存储介质，上述可读存储介质可以是由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器，电可擦除可编程只读存储器，可擦除可编程只读存储器，可编程只读存储器，只读存储器，磁存储器，快闪存储器，磁盘或光盘。可读存储介质可以是通用或专用计算机能够存取的任何可用介质。
可选的，将可读存储介质耦合至处理器，从而使处理器能够从该可读存储介质读取信息，且可向该可读存储介质写入信息。当然，可读存储介质也可以是处理器的组成部分。处理器和可读存储介质可以位于专用集成电路(Application Specific Integrated Circuits，ASIC)中。当然，处理器和可读存储介质也可以作为分立组件存在于设备中。
本申请实施例还提供一种计算机程序产品，该计算机程序产品包括计算机程序，该计算机程序存储在计算机可读存储介质中，至少一个处理器可以从该计算机可读存储介质中读取该计算机程序，所述至少一个处理器执行所述计算机程序时可实现上述页面热更新方 法。
本实施例还提供一种芯片，所述芯片包括存储器、处理器，所述存储器中存储代码和数据，所述存储器与所述处理器耦合，所述处理器运行所述存储器中的程序使得所述芯片用于执行上述各种实施方式提供的页面热更新方法。
本实施例还提供一种计算机程序，当所述计算机程序被处理器执行时，用于执行前述各种实施方式提供的页面热更新方法。
应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求书来限制。

Claims (13)

  1. 一种页面热更新方法，其特征在于，包括：
    获取配置信息，所述配置信息用于对目标应用程序中的待渲染页面进行热更新；
    根据所述待渲染页面的目标路由、预先建立的虚拟应用文档对象模型DOM的目标标签和目标样式类名，判断是否能够从所述配置信息中获取目标路由、目标标签和目标样式类名对应的目标子配置信息；
    在能够获取目标子配置信息时，根据所述目标子配置信息对所述虚拟DOM进行配置，获取配置后的虚拟DOM；
    根据所述配置后的虚拟DOM对所述待渲染页面进行渲染。
  2. 根据权利要求1所述的方法，其特征在于，所述获取配置信息，包括：
    从服务器获取初始配置信息；
    根据所述初始配置信息中的路由、标签、样式类名以及样式属性值四者的对应关系，将所述路由作为第一层子节点、将所述标签作为第二层子节点、将所述样式类名作为第三层子节点、将所述样式属性值作为第四层子节点，对所述初始配置信息进行树状结构处理，获取所述配置信息。
  3. 根据权利要求1或2所述的方法，其特征在于，所述根据所述待渲染页面的目标路由、预先建立的虚拟DOM的目标标签和目标样式类名，判断是否能够从所述配置信息中获取目标路由、目标标签和目标样式类名对应的目标子配置信息，包括：
    根据所述目标路由、所述目标标签以及所述目标样式类名，依次遍历所述配置信息中的第一层子节点、第二层子节点以及第三层子节点，判断是否存在所述目标路由、所述目标标签以及所述目标样式类名对应的目标样式属性值，所述目标子配置信息包括目标路由、目标标签、目标样式类名以及目标样式属性值。
  4. 根据权利要求2或3所述的方法，其特征在于，所述从服务器获取初始配置信息之前，所述方法还包括：
    向所述服务器发送异步请求，所述异步请求用于获取所述初始配置信息；
    根据所述目标应用程序中预先加载的预设插件，注册纯函数组件，所述预设插件用于检测是否接收到所述服务器返回的所述初始配置信息；
    根据所述纯函数组件的类型以及所述纯函数组件的上下文信息，创建所述虚拟DOM。
  5. 根据权利要求1至4任一项所述的方法，其特征在于，所述根据所述目标子配置信息对所述虚拟DOM进行配置，获取配置后的虚拟DOM，包括：
    根据所述目标子配置信息，对所述虚拟DOM的上下文信息进行配置，获取所述配置后的虚拟DOM。
  6. 根据权利要求1至5任一项所述的方法，其特征在于，在所述获取配置信息之后，所述方法还包括：
    获取所述待渲染页面的页面统一资源定位系统URL与基础域名；
    根据所述URL与所述基础域名，确定所述待渲染页面的目标路由。
  7. 根据权利要求1至6任一项所述的方法，其特征在于，在所述根据所述待渲染页面的目标路由、预先建立的虚拟DOM的目标标签和目标样式类名，判断是否能够从所述配置信息中获取目标路由、目标标签和目标样式类名对应的目标子配置信息之后，所述方法还包括：
    在不能获取所述目标子配置信息时，根据所述虚拟DOM对所述待渲染页面进行渲染。
  8. 一种页面热更新装置，其特征在于，包括：
    获取模块，用于获取配置信息，所述配置信息用于对目标应用程序中的待渲染页面进行热更新；
    处理模块，用于根据所述待渲染页面的目标路由、预先建立的虚拟应用文档对象模型DOM的目标标签和目标样式类名，判断是否能够从所述配置信息中获取目标路由、目标标签和目标样式类名对应的目标子配置信息；
    所述获取模块，还用于在能够获取目标子配置信息时，根据所述目标子配置信息对所述虚拟DOM进行配置，获取配置后的虚拟DOM；
    所述处理模块，还用于根据所述配置后的虚拟DOM对所述待渲染页面进行渲染。
  9. 一种终端设备，包括：处理器、存储器及存储在所述存储器上并可在处理器上运行的计算机程序指令，其特征在于，所述处理器执行所述计算机程序指令时用于实现如权利要求1至7任一项所述的页面热更新方法。
  10. 一种计算机可读存储介质，其特征在于，所述计算机可读存储介质中存储有计算机执行指令，所述计算机执行指令被处理器执行时用于实现如权利要求1至7任一项所述的页面热更新方法。
  11. 一种芯片，其特征在于，所述芯片包括存储器、处理器，所述存储器中存储代码和数据，所述存储器与所述处理器耦合，所述处理器运行所述存储器中的程序使得所述芯片用于执行上述权利要求1至7任一项所述的页面热更新方法。
  12. 一种程序产品，其特征在于，包括：计算机程序，当所述程序产品在计算机上运行时，使得所述计算机执行上述权利要求1至7任一项所述的页面热更新方法。
  13. 一种计算机程序，其特征在于，当所述计算机程序被处理器执行时，用于执行上述权利要求1至7任一项所述的页面热更新方法。
PCT/CN2022/127651 2022-06-29 2022-10-26 页面热更新方法、装置、设备及存储介质 WO2024000955A1 (zh)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN202210753752.X 2022-06-29
CN202210753752.XA CN114995859A (zh) 2022-06-29 2022-06-29 页面热更新方法、装置、设备及存储介质

Publications (1)

Publication Number Publication Date
WO2024000955A1 true WO2024000955A1 (zh) 2024-01-04

Family

ID=83020010

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2022/127651 WO2024000955A1 (zh) 2022-06-29 2022-10-26 页面热更新方法、装置、设备及存储介质

Country Status (2)

Country Link
CN (1) CN114995859A (zh)
WO (1) WO2024000955A1 (zh)

Families Citing this family (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114995859A (zh) * 2022-06-29 2022-09-02 深圳前海微众银行股份有限公司 页面热更新方法、装置、设备及存储介质
CN116795405B (zh) * 2023-08-25 2023-11-21 苏州盈天地资讯科技有限公司 千人千面场景前端页面快速渲染方法、服务器及前端设备

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108572819A (zh) * 2017-12-21 2018-09-25 北京金山云网络技术有限公司 页面更新方法、装置、终端及计算机可读存储介质
US20210191993A1 (en) * 2018-09-29 2021-06-24 Guangdong Oppo Mobile Telecommunications Corp., Ltd. Processing Method for Structured Data, Storage Medium and Electronic Device
CN114443108A (zh) * 2022-01-28 2022-05-06 中国建设银行股份有限公司 页面更新方法、装置、设备、介质及计算机程序产品
CN114995859A (zh) * 2022-06-29 2022-09-02 深圳前海微众银行股份有限公司 页面热更新方法、装置、设备及存储介质

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108572819A (zh) * 2017-12-21 2018-09-25 北京金山云网络技术有限公司 页面更新方法、装置、终端及计算机可读存储介质
US20210191993A1 (en) * 2018-09-29 2021-06-24 Guangdong Oppo Mobile Telecommunications Corp., Ltd. Processing Method for Structured Data, Storage Medium and Electronic Device
CN114443108A (zh) * 2022-01-28 2022-05-06 中国建设银行股份有限公司 页面更新方法、装置、设备、介质及计算机程序产品
CN114995859A (zh) * 2022-06-29 2022-09-02 深圳前海微众银行股份有限公司 页面热更新方法、装置、设备及存储介质

Also Published As

Publication number Publication date
CN114995859A (zh) 2022-09-02

Similar Documents

Publication Publication Date Title
WO2024000955A1 (zh) 页面热更新方法、装置、设备及存储介质
US10942708B2 (en) Generating web API specification from online documentation
US10394552B2 (en) Interface description language for application programming interfaces
US10409897B2 (en) Inheritance of rules across hierarchical level
WO2020248849A1 (zh) 一种网页语言的切换方法、装置及终端设备
WO2021184725A1 (zh) 用户界面测试方法、装置、存储介质及计算机设备
US20120166984A1 (en) System and method for modifying user interface elements
US20120110437A1 (en) Style and layout caching of web content
US8676808B2 (en) Data store interface that facilitates distribution of application functionality across a multi-tier client-server architecture
US9547633B2 (en) Methods for extending a selector application programming interface and devices thereof
TW201409273A (zh) 網頁訪問請求的響應方法和裝置
US20220350857A1 (en) Methods and systems for browser extension used to generate relative xpath, absolute xpath and/or css selectors
CN115934855A (zh) 一种全链路字段级血缘解析方法、系统、设备及存储介质
WO2021051624A1 (zh) 数据获取方法、装置、电子设备及存储介质
US10417058B1 (en) Method and system for executing application programming interface (API) requests based on parent-child object relationships
CN111966692A (zh) 针对数据仓库的数据处理方法、介质、装置和计算设备
WO2023109074A1 (zh) 一种实现联动功能的方法、装置、设备、存储介质和程序
CN111563218A (zh) 一种页面的修复方法及装置
US10372760B2 (en) Building queries directed to objects hosted on clouds
US11687613B2 (en) Generating lossless static object models of dynamic webpages
CN111142863A (zh) 一种页面生成的方法及装置
US11531525B2 (en) System and method for packaging standalone application modules into re-usable application and infrastructure resources
US20220236968A1 (en) Optimized data resolution for web components
US9524307B2 (en) Asynchronous error checking in structured documents
US11467860B2 (en) Optimized data resolution for web components

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 22949040

Country of ref document: EP

Kind code of ref document: A1