Page rendering method and device, storage medium and electronic equipment

Abstract

The invention discloses a page rendering method and device, a storage medium and electronic equipment. The method comprises the steps that in response to a refreshing instruction of a current page, attributes of data objects corresponding to all user interface components in the current page are determined; when it is monitored that data change occurs to the attribute value corresponding to any attribute, determining a package component corresponding to any attribute; the package component corresponds to one or more user interface components; and calling the package component to re-render the target user interface component corresponding to any attribute based on the change data corresponding to the attribute value of any attribute. According to the method and the device, the technical problems of computing resource waste, relatively poor page rendering fluency and poor user experience caused by displaying the changed data on the page view in related technologies are solved.

Description

Technical Field

[0001] The present invention relates to the field of Internet technologies, and in particular, to a page rendering method, an apparatus, a storage medium, and an electronic device. Background Art

[0002] Flutter is an application development framework open-sourced by Google. During the software development process using Flutter, when the rendering mechanism provided by the Flutter system changes data, if you want to display the changed data on the view, you need to refresh the entire page to achieve the corresponding effect. Therefore, it will cause waste of system computing resources, poor fluency of page rendering, and poor user experience. Summary of the Invention

[0003] Embodiments of the present application provide a page rendering method, an apparatus, a storage medium, and an electronic device to at least solve the technical problems of waste of computing resources, poor fluency of page rendering, and poor user experience caused by displaying changed data on the view in the related art.

[0004] According to one aspect of the embodiments of the present application, a page rendering method is provided, including: in response to a refresh instruction of the current page, determining attributes of data objects corresponding to each user interface component in the current page; when it is monitored that a data change occurs in the attribute value corresponding to any one of the attributes, determining a wrapping component corresponding to any one of the attributes; the wrapping component corresponds to one or more user interface components; based on the change data corresponding to the attribute value of any one of the attributes, calling the wrapping component to re-render the target user interface component corresponding to any one of the attributes.

[0005] According to another aspect of the embodiments of the present application, a page rendering apparatus is further provided, including: a first determination unit, configured to determine attributes of data objects corresponding to each user interface component in the current page in response to a refresh instruction of the current page; a second determination unit, configured to determine a wrapping component corresponding to any one of the attributes when it is monitored that a data change occurs in the attribute value corresponding to any one of the attributes; the wrapping component corresponds to one or more user interface components; a refresh and rendering unit, configured to call the wrapping component to re-render the target user interface component corresponding to any one of the attributes based on the change data corresponding to the attribute value of any one of the attributes.

[0006] According to still another aspect of the embodiments of the present application, an electronic device is further provided, including a memory and a processor, where a computer program is stored in the memory, and the processor is configured to execute the above page rendering method through the computer program.

[0007] According to another aspect of the embodiments of the present application, there is also provided a computer-readable storage medium storing a computer program, wherein the computer program is configured to execute the above-mentioned page rendering method when running.

[0008] In the embodiments of the present application, in response to a refresh instruction of the current page, the attributes of the data objects corresponding to the user interface components in the current page are determined; in the case where a data change occurs in the attribute value corresponding to any one of the attributes, the wrapping component corresponding to any one of the attributes is determined; the wrapping component corresponds to one or more user interface components; based on the change data corresponding to the attribute value of any one of the attributes, the method of calling the wrapping component to re-render the target user interface component corresponding to any one of the attributes is adopted. In the above method, by listening to the change of the attribute value corresponding to the data object, only the user interface components corresponding to the changed data can be refreshed, which can not only achieve autonomous control of the custom rendering range, but also improve the page rendering efficiency, reduce the consumption of computing resources, and improve the fluency of the view and the user experience. BRIEF DESCRIPTION OF THE DRAWINGS

[0009] The drawings described herein are used to provide a further understanding of the present invention, and constitute a part of the present application. The illustrative embodiments of the present invention and their descriptions are used to explain the present invention and do not constitute an improper limitation to the present invention. In the drawings:

[0010] Figure 1 is a schematic diagram of an application environment of an optional page rendering method according to an embodiment of the present application;

[0011] Figure 2 is a schematic diagram of an application environment of another optional page rendering method according to an embodiment of the present application;

[0012] Figure 3 is a schematic flowchart of an optional page rendering method according to an embodiment of the present application;

[0013] Figure 4 is a schematic flowchart of another optional page rendering method according to an embodiment of the present application;

[0014] Figure 5 is a schematic flowchart of an adding listening process of another optional page rendering method according to an embodiment of the present application;

[0015] Figure 6 is a schematic flowchart of a sending listening process of another optional page rendering method according to an embodiment of the present application;

[0016] Figure 7 is a schematic structural diagram of an optional page rendering device according to an embodiment of the present application;

[0017] Figure 8 It is a schematic structural diagram of an optional electronic device according to an embodiment of the present application. Detailed implementation manners

[0018] In order to enable those skilled in the art of the present technology to better understand the solution of the present invention, the technical solutions in the embodiments of the present application will be clearly and completely described below in conjunction with the accompanying drawings in the embodiments of the present application. Obviously, the described embodiments are only a part of the embodiments of the present invention, rather than all the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those of ordinary skill in the art without creative efforts shall fall within the protection scope of the present invention.

[0019] It should be noted that the terms "first", "second", etc. in the description and claims of the present invention and the above-mentioned drawings are used to distinguish similar objects, and do not necessarily need to be used to describe a specific order or sequence. It should be understood that such data can be interchanged under appropriate circumstances so that the embodiments of the present invention described here can be implemented in an order different from those illustrated or described here. In addition, the terms "including" and "having" and any variations thereof are intended to cover non-exclusive inclusion. For example, a process, method, system, product or device that includes a series of steps or units does not necessarily need to be limited to those clearly listed steps or units, but may include other steps or units not clearly listed or inherent to these processes, methods, products or devices.

[0020] According to one aspect of the embodiments of the present application, a page rendering method is provided. Optionally, as an optional implementation manner, the above page rendering method can be but is not limited to being applied to an Figure 1 application environment as shown. The application environment includes: a terminal device 102 for human-computer interaction with the user, a network 104, and a server 106. Human-computer interaction can be carried out between the user 108 and the terminal device 102. A page rendering application client is running in the terminal device 102, and the client includes a client with various display functions. The above terminal device 102 includes a human-computer interaction screen 1022, a processor 1024, and a memory 1026. The human-computer interaction screen 1022 is used to display each user interface component included in the view component; the processor 1024 is used to obtain the change parameters of the attribute values of the data objects input by the user. The memory 1026 is used to store the attributes of the data objects corresponding to each user interface component in the current page, and the attribute values corresponding to the attributes.

[0021] In addition, the server 106 includes a database 1062 and a processing engine 1064. The database 1062 is used to store the attributes of the data objects corresponding to the user interface components on the current page. The processing engine 1064 is configured to determine the attributes of the data objects corresponding to the user interface components on the current page in response to a refresh instruction for the current page; in the case where a data change occurs in the attribute value corresponding to any one of the attributes, determine the wrapper component corresponding to any one of the attributes; the wrapper component corresponds to one or more user interface components, and send the change data corresponding to the attribute value of any one of the attributes to the terminal device 102; the terminal device 102 re - renders the target user interface component corresponding to any one of the attributes by invoking the wrapper component based on the change data corresponding to the attribute value of any one of the attributes.

[0022] In one or more embodiments, the above - described page rendering method of the present application can be applied to Figure 2 the application environment shown. As Figure 2 shown, a human - machine interaction can be performed between the user 202 and the user device 204. The user device 204 includes a memory 206 and a processor 208. In this embodiment, the user device 204 can, but is not limited to, perform the operations performed by the above - mentioned terminal device 102 to refresh and re - render the target user interface component on the current page.

[0023] Optionally, the above - mentioned terminal device 102 and user device 204 include, but are not limited to, terminals such as mobile phones, tablet computers, laptop computers, PCs, in - vehicle electronic devices, wearable devices, etc. The above - mentioned network 104 can include, but is not limited to, a wireless network or a wired network. Among them, the wireless network includes: WIFI and other networks that implement wireless communication. The above - mentioned wired network can include, but is not limited to: wide - area network, metropolitan - area network, local - area network. The above - mentioned server 106 can include, but is not limited to, any hardware device capable of performing calculations. The above - mentioned server can be a single server, or a server cluster composed of multiple servers, or a cloud server. The above is only an example, and no limitation is made in this embodiment.

[0024] As an optional implementation manner, as Figure 3 shown, the embodiment of the present application provides a page rendering method, including the following steps:

[0025] S302, in response to a refresh instruction for the current page, determine the attributes of the data objects corresponding to the user interface components on the current page;

[0026] S304, in the case where a data change occurs in the attribute value corresponding to any one of the attributes, determine the wrapper component corresponding to any one of the attributes; the wrapper component corresponds to one or more user interface components;

[0027] S306. Based on the change data corresponding to the attribute value of any one of the attributes, call the wrapper component to re-render the target user interface component corresponding to any one of the attributes.

[0028] Specifically, in the embodiments of the present application, when a refresh instruction for the current page is received, such as a manual page refresh by the user or a page refresh operation triggered by a timing refresh mechanism, the system will traverse all the user interface components on the current page. For each user interface component, it will find and determine the attributes of the corresponding data object. For example, in a user information page, the data object corresponding to the name display component is the user information data object, and its attributes may include four attributes: name, age, gender, and driver's license.

[0029] The system will continuously monitor the attribute values of the data object. When it is found that the attribute value of a certain attribute has changed, it will find the wrapper component corresponding to this attribute. Here, the wrapper component includes the identifier of the User Interface (UI) component to achieve the purpose of including one or more UI components. For example, a form component can be a wrapper component, which contains multiple input boxes (user interface components), and these input boxes respectively correspond to different attributes of the form data object.

[0030] After determining the wrapper component, the system will pass the data with the changed attribute value to the wrapper component. After receiving the change data, the wrapper component will call the corresponding target user interface component inside according to its own rendering logic and component structure for re-rendering. For example, if the name attribute value changes from "Zhang San" to "Zhang San X", the wrapper component will call the name box component to update its display content to "Zhang San X".

[0031] In the embodiments of the present application, a method is adopted in which, in response to a refresh instruction for the current page, the attributes of the data objects corresponding to the user interface components on the current page are determined; when it is monitored that the attribute value corresponding to any one of the attributes has data changes, the wrapper component corresponding to any one of the attributes is determined; the wrapper component corresponds to one or more user interface components; based on the change data corresponding to the attribute value of any one of the attributes, the wrapper component is called to re-render the target user interface component corresponding to any one of the attributes. In the above method, by listening to the change of the attribute value corresponding to the data object, only the user interface components corresponding to the changed data can be refreshed, which can not only achieve autonomous control of the custom rendering range, but also improve the page rendering efficiency and reduce the consumption of computing resources, and improve the fluency of the view and the user experience.

[0032] In one or more embodiments, before determining the data objects corresponding to the user interface components included in the view components on the current page, it further includes:

[0033] Define a wrapping component corresponding to the rendering requirement according to the rendering requirement of the current page, where the wrapping component corresponding to the rendering requirement is used to wrap one or more user interface components to be rendered;

[0034] Obtain the initialization instruction of the current page, and call each wrapping component corresponding to the current page to identify all user interface components to be rendered in the current page, and identify the corresponding relationship between the user interface components to be rendered and the attributes of each data object;

[0035] Render the user interface components to be rendered according to the attribute values of each of the attributes.

[0036] Specifically, in the implementation of this application, as shown in Figure 4 For example, in a Flutter application, when a page or component is created, for example, according to the rendering requirement of the page, the rendering requirement, for example, needs to display data in different ways such as text, buttons, or lists, and then create a wrapping component corresponding to the rendering requirement. The wrapping component corresponding to the rendering requirement can wrap one or more user interface components to be rendered (such as display components such as text, buttons, lists, etc.); the rendering requirement can also be to divide different-sized areas for display on the same page; after defining the wrapping component corresponding to the rendering requirement, the system will obtain the initialization instruction, and the initialization instruction contains operations to be performed when the page is loaded, such as creating a state management object, setting initial data, etc. During the page initialization process, the system will call each wrapping component corresponding to the current page to identify all user interface components that need to be rendered. These user interface components can be display components such as text, buttons, lists, etc. For each user interface component to be rendered, the system first determines the attributes of the data object they are bound to, and then renders the user interface components according to the attribute values corresponding to these attributes. To achieve data-driven UI updates, each data object is added to a preset listening queue. When the state of these data objects changes, the attribute assignment functions in the listening queue trigger the update of the UI.

[0037] In one or more embodiments, the page rendering method further includes:

[0038] Obtain each user interface component to be rendered in the current page;

[0039] Determine whether there is a target user interface component among the user interface components to be rendered that has not established a corresponding relationship with the attributes of the data object;

[0040] If there is, establish the corresponding relationship between the attribute corresponding to the target user interface component and the target user interface component.

[0041] Specifically, in the embodiments of the present application, there is a one-to-one correspondence between each user interface component in the view component set and the attributes of the data object. For example, there is a correspondence between the user interface component Widget1 and the first attribute (name) of the data object; the user interface component Widget2 has a correspondence with the second attribute (age) of the data object. As Figure 5 shown, when it is found that there is a target user interface component for which no correspondence has been established, the system will establish a correspondence between the target user interface component and the attributes of the data object. For example, if it is found that a user name display component is not related to the name attribute of the user information, the system will automatically establish such a correspondence so that the name display component can be rendered according to the user's name data.

[0042] In one or more embodiments, the above page rendering method further includes:

[0043] Create assignment functions corresponding to each attribute of the data object;

[0044] Obtain the refreshed data corresponding to the attribute value of the target attribute, determine the original data corresponding to the attribute value of the target attribute, and call the assignment function corresponding to the target attribute to determine whether the refreshed data and the original data are consistent; the target attribute is the attribute that generates the refreshed data;

[0045] In the case where the refreshed data and the original data are inconsistent, determine that the attribute value of the target attribute has undergone a data change.

[0046] Specifically, in the embodiments of the present application, the set Figure 6 shown, the system will traverse all the attributes of the data object. The data object creates an assignment function for each attribute according to the attribute. The assignment function is responsible for detecting changes in the attribute value and assigning the new data value to the attribute. When new data needs to be updated to a certain attribute (target attribute) of the data object, first obtain this new data value (refreshed data). Then, obtain the current value (original data) of the target attribute from the data object. Next, call the assignment function corresponding to the target attribute and pass the refreshed data and the original data as parameters to the assignment function. Inside the assignment function, these two data values will be compared to determine whether they are consistent.

[0047] If the assignment function determines that the refreshed data and the original data are inconsistent, then it can be determined that the attribute value of the target attribute has undergone a data change. At this time, the system will send a change instruction for the data change to the corresponding user interface component according to the steps in the foregoing embodiments and re-render these components.

[0048] In one or more embodiments, when it is monitored that the attribute value corresponding to any of the attributes undergoes data change, determining the package component corresponding to any of the attributes includes:

[0049] When it is monitored that the target attribute undergoes data change, obtaining the target package component corresponding to the target attribute from the listening queue according to the attribute identifier of the target attribute; the listening queue includes a plurality of sub-listening queues, and each sub-listening queue is used to store the attribute identifier of the attribute whose data has changed, and the association relationship between the attribute whose data has changed and the corresponding package component.

[0050] Specifically, in the embodiments of the present application, when the system monitors that the target attribute (i.e., the attribute whose data has changed) changes, it will use the attribute identifier of the target attribute (such as the attribute name, the ID of the attribute, etc.) as a keyword to search in the listening queue. It should be noted that the listening queue here is a data structure specifically used to store attribute change information, and it contains a plurality of sub-listening queues. Each sub-listening queue is responsible for storing the change information of a specific attribute, including the attribute identifier and the association relationship between the attribute and the corresponding package component. By matching the attribute identifier in the sub-listening queue, the target package component corresponding to the target attribute can be obtained. For example, when it is monitored that the "user name" attribute in the user data object changes, according to the attribute identifier of "user name", search in the corresponding sub-listening queue of the listening queue to find the package component associated with the "user name" attribute, such as the package component of the user information display area.

[0051] In one or more embodiments, the above page rendering method further includes:

[0052] When the assignment function corresponding to the target attribute is called, creating a sub-listening queue corresponding to the target attribute;

[0053] Adding the sub-listening queue to the listening queue.

[0054] Specifically, in the embodiments of the present application, when the system calls the assignment function of the target attribute, it will create a new sub-listening queue. This sub-listening queue will be specifically used to store the change information related to the target attribute. For example, when calling the assignment function setname(newname) of the "name" attribute of the user data object, the system will create a sub-listening queue for the "name" attribute. After creating the sub-listening queue, the system will add it to the main listening queue. The main listening queue is a set containing all sub-listening queues, and it is responsible for coordinating and managing each sub-listening queue. By adding the sub-listening queue to the main listening queue, the system can conveniently traverse and query the change information of all attributes.

[0055] In one or more embodiments, the above page rendering method further includes:

[0056] Obtain a deletion request sent by the user for a target user interface component in the current page, where the component identifier of the target user interface component is carried in the deletion request;

[0057] Determine the target package component corresponding to the target user interface component according to the component identifier of the target user interface component;

[0058] Determine the target sub-listening queue corresponding to the target package component according to the target package component, and remove the target sub-listening queue from the listening queue.

[0059] Specifically, in the embodiments of the present application, in the embodiments of the present application, in combination Figure 4 As shown, the process of removing the listening is as follows: The system continuously monitors the user's operations. When the user initiates a request to delete a certain user interface component in a specific manner (such as clicking the delete button, selecting the delete option, etc.), the request will contain the component identifier of the target user interface component, and this identifier is used to uniquely determine the component to be deleted. For example, when the user clicks the button to delete a "text input box" component on a form page of an application, the deletion request will carry the identifier of the "text input box" component.

[0060] After receiving the deletion request, the system determines the target package component corresponding to the target user interface component according to the component identifier of the target user interface component, and further determines the target sub-listening queue corresponding to the target package component, and searches for the corresponding target sub-listening queue in the listening queue. After finding the target sub-listening queue, remove it from the main listening queue. In this way, even if the properties of the data object associated with this component change subsequently, no interface update operation will be triggered anymore. For example, for the above-mentioned "text input box" component to be deleted, the system finds the corresponding sub-listening queue according to its identifier and removes this sub-listening queue from the main listening queue of the page.

[0061] Based on the above embodiments, the present application provides a method for improving page rendering efficiency based on the Flutter development framework. By changing the rendering mechanism, scope, and timing of Flutter, the performance and resource consumption are minimized. It allows users to control the scope that needs to be rendered when the data changes, avoiding resource waste and lag caused by uncontrollable rendering brought by the system diff algorithm. Specifically, the above method for improving page rendering efficiency includes the following steps:

[0062] S1, Custom Data Model Class, CustomDataClass, which is used for data management during the development process. This class realizes the functions of adding, sending, and removing listeners for data objects by listening to objects. It also has the functions of adding and removing observers. An observer refers to an object that receives data changes.

[0063] S2, Custom Component Wrapping Component, CustomContainerClass. The component supports passing in a function for dynamically creating sub-view components, and users can wrap one or more sub-view components according to their needs. CustomContainerClass is a wrapping layer that listens to data changes in CustomDataClass. This component can contain one or more UI components, and the UI components depend on a certain data in CustomDataClass. When this data is updated, the UI components in this wrapping component will be refreshed.

[0064] S3, Use the CustomContainerClass object to wrap sub-view components (for displaying UI content). The sub-view components use the data in the CustomDataClass object to display various data, such as name, age, etc. (supporting binding multiple data). CustomDataClass internally realizes the binding of each data to the wrapping component object (CustomContainerClass).

[0065] S4, After the user performs relevant operations (such as modifying the name), and changes the corresponding property value of the CustomDataClass object in the logic layer. When the CustomDataClass object detects data changes through the property assignment function, it sends a notification to the corresponding wrapping component CustomContainerClass of the data. This triggers the refresh of the sub-view components in CustomContainerClass, achieving the effect of precisely controlling the rendering granularity, thereby making the view operation smoother and consuming fewer resources.

[0066] In related technologies, for example, when developing a Flutter page, this page is used to display and modify four types of information of the user, namely name, age, gender, and driver's license.

[0067] At this time, after the user modifies their name information, if the Flutter's own rendering mechanism is adopted, after the user finishes modifying the name, the entire page needs to be rendered to correctly display the modified name, that is, the UI components corresponding to name, age, gender, and driving information will all be re-rendered.

[0068] However, by adopting the solution of the embodiment of the present application, the UI components corresponding to name, age, gender, and driving information are respectively wrapped and assembled using the CustomContainerClass component, the four types of data such as name, age, gender, and driver's license are extracted into the custom data class CustomDataClass, and the corresponding assignment functions are established;

[0069] After the user finishes modifying the name, the system triggers the assignment function of the name in CustomDataClass. In this function, the wrapping component CustomContainerClass corresponding to the name data is queried; after finding the corresponding wrapping component, the UI refreshing method of the wrapping component is called to complete the rendering of the UI component corresponding to the name. At this time, the UI components corresponding to the three types of information of age, gender, and driver's license remain in their original states and do not participate in the rendering.

[0070] It should be noted that for the foregoing method embodiments, for the sake of simple description, they are all expressed as a series of action combinations. However, those skilled in the art should know that the present invention is not limited by the described action sequence, because according to the present invention, certain steps can be performed in other sequences or simultaneously. Secondly, those skilled in the art should also know that the embodiments described in the specification are all preferred embodiments, and the actions and modules involved are not necessarily essential to the present invention.

[0071] According to another aspect of the embodiment of the present application, there is also provided a page rendering device for implementing the above page rendering method, as Figure 7 shown. The device includes:

[0072] A first determination unit 702, configured to determine the attributes of the data objects corresponding to the user interface components in the current page in response to a refresh instruction of the current page;

[0073] A second determination unit 704, configured to determine the wrapping component corresponding to any one of the attributes when it is monitored that a data change occurs in the attribute value corresponding to any one of the attributes; the wrapping component corresponds to one or more user interface components;

[0074] A refresh rendering unit 706, configured to call the wrapping component to re-render the target user interface component corresponding to any one of the attributes based on the change data corresponding to the attribute value of any one of the attributes.

[0075] In the embodiments of the present application, in response to a refresh instruction of the current page, the attributes of the data objects corresponding to the user interface components in the current page are determined; in the case where a data change occurs in the attribute value corresponding to any one of the attributes, the wrapping component corresponding to any one of the attributes is determined; the wrapping component corresponds to one or more user interface components; based on the change data corresponding to the attribute value of any one of the attributes, the method of calling the wrapping component to re-render the target user interface component corresponding to any one of the attributes is used. In the above method, by listening to the change of the attribute value corresponding to the data object, only the user interface components corresponding to the changed data can be refreshed, which can not only achieve autonomous control of the custom rendering range, but also improve the page rendering efficiency and reduce the consumption of computing resources, and improve the fluency of the view and the user experience.

[0076] In one or more embodiments, the page rendering device further includes:

[0077] A definition unit, configured to define a wrapping component corresponding to the rendering requirement according to the rendering requirement of the current page, where the wrapping component corresponding to the rendering requirement is used to wrap one or more user interface components to be rendered;

[0078] A first acquisition unit, configured to acquire an initialization instruction of the current page, call each wrapping component corresponding to the current page to identify all user interface components to be rendered in the current page, and identify the corresponding relationship between the user interface components to be rendered and the attributes of each data object;

[0079] A rendering unit, configured to render the user interface components to be rendered according to the attribute values of the respective attributes.

[0080] In one or more embodiments, the page rendering device further includes:

[0081] A second acquisition unit, configured to acquire each user interface component to be rendered in the current page;

[0082] A judgment unit, configured to judge whether there is a target user interface component among the user interface components to be rendered that has not established a corresponding relationship with the attribute of the data object;

[0083] An establishment unit, configured to establish the corresponding relationship between the attribute corresponding to the target user interface component and the target user interface component.

[0084] In one or more embodiments, the page rendering device further includes:

[0085] A first creation unit, configured to create assignment functions corresponding to the respective attributes of the data object;

[0086] A third acquisition unit, configured to acquire refresh data corresponding to an attribute value of a target attribute, determine original data corresponding to the attribute value of the target attribute, and call an assignment function corresponding to the target attribute to determine whether the refresh data is consistent with the original data; the target attribute is an attribute that generates refresh data.

[0087] A third determination unit, configured to determine that a data change has occurred in the attribute value of the target attribute when the refresh data is inconsistent with the original data.

[0088] In one or more embodiments, the page rendering device further includes:

[0089] A fourth acquisition unit, configured to, when it is monitored that a data change has occurred in the target attribute, acquire a target wrapper component corresponding to the target attribute from a listening queue according to an attribute identifier of the target attribute; the listening queue includes a plurality of sub-listening queues, and each sub-listening queue is used to store an attribute identifier of an attribute in which a data change has occurred, and an association relationship between the attribute in which the data change has occurred and the corresponding wrapper component.

[0090] In one or more embodiments, the page rendering device further includes:

[0091] A first creation unit, configured to create a sub-listening queue corresponding to the target attribute when an assignment function corresponding to the target attribute is called.

[0092] An addition unit, configured to add the sub-listening queue to the listening queue.

[0093] In one or more embodiments, the page rendering device further includes:

[0094] A fifth acquisition unit, configured to acquire a deletion request sent by a user for a target user interface component in the current page, where the deletion request carries a component identifier of the target user interface component.

[0095] A fourth determination unit, configured to determine a target wrapper component corresponding to the target user interface component according to the component identifier of the target user interface component.

[0096] A removal unit, configured to determine a target sub-listening queue corresponding to the target wrapper component according to the target wrapper component, and remove the target sub-listening queue from the listening queue.

[0097] According to another aspect of the embodiments of the present application, there is also provided an electronic device for implementing the above page rendering method, and the electronic device may be Figure 8 the terminal device or server shown in the figure. This embodiment takes the electronic device as a server as an example for illustration. As Figure 8As shown, the electronic device includes a memory 802 and a processor 804. A computer program is stored in the memory 802, and the processor 804 is configured to execute the steps in any of the above method embodiments through the computer program.

[0098] Optionally, in this embodiment, the above electronic device may be at least one network device among multiple network devices in a computer network.

[0099] Optionally, in this embodiment, the above processor may be configured to execute the following steps through a computer program:

[0100] S1. In response to a refresh instruction of the current page, determine the attributes of the data objects corresponding to the user interface components in the current page;

[0101] S2. When it is detected that a data change occurs in the attribute value corresponding to any one of the attributes, determine the package component corresponding to any one of the attributes; the package component corresponds to one or more user interface components;

[0102] S3. Based on the change data corresponding to the attribute value of any one of the attributes, call the package component to re-render the target user interface component corresponding to any one of the attributes.

[0103] Optionally, those of ordinary skill in the art can understand that Figure 8 The structure shown is only schematic. The electronic device can also be a smart phone (such as an Android phone, an iOS phone, etc.), a tablet computer, a handheld computer, and terminal devices such as Mobile Internet Devices (MID), PAD, etc. Figure 8 It does not limit the structure of the above electronic device. For example, the electronic device may further include more or fewer components (such as a network interface, etc.) than those shown Figure 8 herein, or have a different configuration from that shown Figure 8 herein.

[0104] Among them, the memory 802 can be used to store software programs and modules, such as the program instructions / modules corresponding to the page rendering method and device in the embodiments of the present application. The processor 804 executes various functional applications and data processing by running the software programs and modules stored in the memory 802, that is, implements the above-mentioned page rendering method. The memory 802 may include a high-speed random access memory, and may also include a non-volatile memory, such as one or more magnetic storage devices, flash memories, or other non-volatile solid-state memories. In some instances, the memory 802 may further include a memory remotely disposed relative to the processor 804, and these remote memories can be connected to the terminal through a network. Examples of the above network include but are not limited to the Internet, enterprise intranet, local area network, mobile communication network, and combinations thereof. Among them, the memory 802 can specifically but not limitedly be used to store the data change parameters input by the user. As an example, as Figure 8 shown, the above memory 802 may include, but is not limited to, the first determination unit 702, the second determination unit 704, and the refresh rendering unit 706 in the above page rendering device. In addition, it may also include, but is not limited to, other module units in the above page rendering device, which will not be elaborated in this example.

[0105] Optionally, the above transmission device 806 is used to receive or send data via a network. Specific examples of the above network may include a wired network and a wireless network. In one instance, the transmission device 808 includes a network adapter (Network Interface Controller, NIC), which can be connected to other network devices and routers through a network cable, so as to communicate with the Internet or a local area network. In one instance, the transmission device 806 is a radio frequency (RF) module, which is used to communicate with the Internet wirelessly.

[0106] In addition, the above electronic device further includes: a display 808, which is used to display the refreshed page; and a connection bus 810, which is used to connect each module component in the above electronic device.

[0107] In other embodiments, the above terminal device or server may be a node in a distributed system. Among them, the distributed system may be a blockchain system, and the blockchain system may be a distributed system formed by connecting the multiple nodes through network communication. Among them, the nodes can form a peer-to-peer (P2P, Peer To Peer) network, and any form of computing device, such as an electronic device such as a server or a terminal, can become a node in the blockchain system by joining the peer-to-peer network.

[0108] According to one aspect of the present application, there is provided a computer program product or a computer program, which includes computer instructions stored in a computer-readable storage medium. The processor of the computer device reads the computer instructions from the computer-readable storage medium, and the processor executes the computer instructions, so that the computer device executes the above page rendering method, wherein the computer program is configured to execute the steps in any of the above method embodiments when running.

[0109] Optionally, in this embodiment, the above computer-readable storage medium may be configured to store a computer program for executing the following steps:

[0110] S1. In response to a refresh instruction of the current page, determine the attributes of the data objects corresponding to the user interface components in the current page;

[0111] S2. When it is detected that a data change occurs in the attribute value corresponding to any one of the attributes, determine the wrapping component corresponding to any one of the attributes; the wrapping component corresponds to one or more user interface components;

[0112] S3. Based on the change data corresponding to the attribute value of any one of the attributes, call the wrapping component to re-render the target user interface component corresponding to any one of the attributes.

[0113] Optionally, in this embodiment, those of ordinary skill in the art can understand that all or part of the steps in the above various methods can be completed by a program instructing the relevant hardware of the terminal device. The program can be stored in a computer-readable storage medium, and the storage medium can include: a flash drive, a read-only memory (ROM), a random access memory (RAM), a magnetic disk or an optical disc, etc.

[0114] The serial numbers of the above embodiments of the present application are only for description and do not represent the advantages and disadvantages of the embodiments.

[0115] If the integrated unit in the above embodiments is implemented in the form of a software function unit and sold or used as an independent product, it can be stored in the above computer-readable storage medium. Based on such an understanding, the technical solution of the present invention, in essence, or the part that contributes to the prior art, or all or part of the technical solution, can be embodied in the form of a software product. The computer software product is stored in a storage medium and includes several instructions for causing one or more computer devices (which may be personal computers, servers, or network devices, etc.) to execute all or part of the steps of the methods in the various embodiments of the present invention.

[0116] In the above embodiments of the present invention, the descriptions of the respective embodiments each have their own emphasis. For parts not detailed in a certain embodiment, reference may be made to the relevant descriptions of other embodiments.

[0117] In several embodiments provided by the present application, it should be understood that the disclosed client can be implemented in other ways. Among them, the device embodiments described above are merely illustrative. For example, the division of units is only a logical function division. In actual implementation, there may be other division methods. For example, multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the displayed or discussed coupling or direct coupling or communication connection between each other can be through some interfaces. The indirect coupling or communication connection of units or modules can be in an electrical or other form.

[0118] The units described as separate components may or may not be physically separated. The components displayed as units may or may not be physical units, that is, they can be located in one place or distributed to multiple network units. Some or all of the units can be selected according to actual needs to achieve the purpose of the solution of this embodiment.

[0119] In addition, in each embodiment of the present invention, the functional units can be integrated in a processing unit, or each unit can exist physically alone, or two or more units can be integrated in one unit. The above integrated units can be implemented in the form of hardware or in the form of software functional units.

[0120] The above are only the preferred embodiments of the present invention. It should be noted that for those of ordinary skill in the art, without departing from the principle of the present invention, several improvements and refinements can be made, and these improvements and refinements should also be regarded as the protection scope of the present invention.

Claims

1. A page rendering method, characterized in that, Including: In response to a refresh instruction of the current page, determine the attributes of the data objects corresponding to each user interface component in the current page; When it is detected that the attribute value corresponding to any one of the attributes undergoes a data change, determine the wrapping component corresponding to any one of the attributes; The wrapping component corresponds to one or more user interface components; Based on the change data corresponding to the attribute value of any one of the attributes, call the wrapping component to re-render the target user interface component corresponding to any one of the attributes.

2. The method according to claim 1, wherein Before determining the attributes of the data objects corresponding to each user interface component in the current page, it further includes: According to the rendering requirements of the current page, define the wrapping component corresponding to the rendering requirements, and the wrapping component corresponding to the rendering requirements is used to wrap one or more user interface components to be rendered; Obtain the initialization instruction of the current page, and call each wrapping component corresponding to the current page to identify all the user interface components to be rendered in the current page, and identify the corresponding relationship between the user interface components to be rendered and the attributes of each data object; Render the user interface components to be rendered according to the attribute values of each of the attributes.

3. The method according to claim 2, characterized in that, The method further includes: Obtain each user interface component to be rendered in the current page; Judge whether there is a target user interface component among the user interface components to be rendered that has not established a corresponding relationship with the attribute of the data object; If so, establish the corresponding relationship between the attribute corresponding to the target user interface component and the target user interface component.

4. The method according to any one of claims 1 to 3, characterized in that The method further includes: Create assignment functions corresponding to the attributes of the data object; Obtain the refresh data corresponding to the attribute value of the target attribute, determine the original data corresponding to the attribute value of the target attribute, and call the assignment function corresponding to the target attribute to determine whether the refresh data is consistent with the original data; the target attribute is the attribute that generates the refresh data; ​ 5. The method according to claim 4, wherein ​ ​ 6. The method according to claim 4, characterized in that, ​ ​ ​ 7. The method according to claim 5, characterized in that, ​ ​ ​ Determine a target sub-monitoring queue corresponding to the target package component according to the target package component, and remove the target sub-monitoring queue from the monitoring queue.

8. A page rendering device, characterized in that, Including: A first determination unit, configured to determine attributes of data objects corresponding to user interface components in the current page in response to a refresh instruction of the current page; A second determination unit, configured to determine a package component corresponding to any one of the attributes when it is detected that a data change occurs in the attribute value corresponding to any one of the attributes; The package component corresponds to one or more user interface components; A refresh rendering unit, configured to call the package component to re-render a target user interface component corresponding to any one of the attributes based on change data corresponding to the attribute value of any one of the attributes.

9. An electronic device, comprising a memory and a processor, characterized in that, A computer program is stored in the memory, and the processor is configured to execute the method described in any one of claims 1 to 7 through the computer program.

10. A computer-readable storage medium, characterized in that, The computer-readable storage medium includes a stored program, wherein the program executes the method described in any one of claims 1 to 7 when running.

Images