[ Invention ]
The embodiment of the specification provides a page rendering method, a page rendering device and electronic equipment, so that when data before and after setData are compared (diff), the performance consumption of diff is reduced, and the performance of an applet is improved.
In a first aspect, an embodiment of the present disclosure provides a page rendering method, including:
acquiring operation information of a user on a page displayed by an applet;
Generating new data of the applet according to the operation information and the original data of the applet; the original data and the new data of the applet are invariable data, and the data structures of the original data and the new data are tree structures;
performing depth comparison on the original data and the new data to obtain a comparison result;
rendering the page according to the comparison result, and displaying the rendered page; and the rendered page is a result page after the operation information is executed.
In the page rendering method, the original data and the new data are invariable data, and the data structures of the original data and the new data are tree structures, so that in most cases, the user operation only changes a certain node of the tree structures, other nodes without change can be directly skipped when depth comparison is performed due to shared reference of the invariable data, the time complexity of the depth comparison is reduced, the performance consumption of the setData before and after the data is compared (diff) is reduced, and the performance of the applet is improved.
In one possible implementation manner, before the obtaining the operation information of the user on the page displayed by the applet, the method further includes:
and converting the original data of the applet into immutable data.
In one possible implementation manner, the performing depth comparison on the original data and the new data to obtain a comparison result includes:
traversing the original data of the applet;
searching a value corresponding to a first keyword in the original data which is currently traversed in the new data of the applet;
If not, setting the value of the path corresponding to the first key word in the pre-established data object as the value corresponding to the first key word; the data object is used for storing a comparison result of the original data and the new data.
In one possible implementation manner, the method further includes:
after the original data of the applet is traversed, traversing new data of the applet;
If the value corresponding to the second keyword in the new data which is currently traversed is not equal to the value corresponding to the second keyword in the original data, setting the value of the path corresponding to the second keyword in the data object as the value corresponding to the second keyword in the new data which is currently traversed;
After the new data of the applet is traversed, if the data object is not a null object, the value of the data object is the comparison result of the original data and the new data.
In one possible implementation manner, before traversing the original data of the applet, the method further includes:
and creating a new data object, wherein the initial value of the data object is null, and the data object is used for storing the comparison result of the original data and the new data.
In a second aspect, embodiments of the present disclosure provide a page rendering apparatus, including:
The acquisition module is used for acquiring the operation information of the user on the page displayed by the applet;
The generation module is used for generating new data of the applet according to the operation information acquired by the acquisition module and the original data of the applet; the original data and the new data of the applet are invariable data, and the data structures of the original data and the new data are tree structures;
the comparison module is used for performing depth comparison on the original data and the new data to obtain a comparison result;
The rendering module is used for rendering the page according to the comparison result and displaying the page obtained by rendering; and the rendered page is a result page after the operation information is executed.
In one possible implementation manner, the apparatus further includes:
the conversion module is used for converting original data of the applet into invariable data before the acquisition module acquires the operation information of a user on a page displayed by the applet.
In one possible implementation manner, the comparing module includes:
the traversing submodule is used for traversing the original data of the applet;
the searching sub-module is used for searching a value corresponding to the first keyword in the original data which is currently traversed in the new data of the applet;
a setting submodule, configured to set a value of a path corresponding to a first keyword in a pre-established data object as a value corresponding to the first keyword when the value corresponding to the first keyword in the original data currently traversed is not found in the new data of the applet by the finding submodule; the data object is used for storing a comparison result of the original data and the new data.
In one possible implementation manner, the traversing submodule is further configured to traverse new data of the applet after traversing original data of the applet is completed;
The setting submodule is further used for setting the value of the path corresponding to the second key word in the data object as the value corresponding to the second key word in the new data which is currently traversed when the value corresponding to the second key word in the new data which is currently traversed is not equal to the value corresponding to the second key word in the original data;
After the traversing sub-module completes the traversing of the new data of the applet, if the data object is not an empty object, the value of the data object is the comparison result of the original data and the new data.
In one possible implementation manner, the comparing module further includes:
And the new building sub-module is used for building a data object before the traversing sub-module traverses the original data of the applet, wherein the initial value of the data object is empty, and the data object is used for storing the comparison result of the original data and the new data.
In a third aspect, embodiments of the present disclosure provide an electronic device, including:
At least one processor; and
At least one memory communicatively coupled to the processor, wherein:
The memory stores program instructions executable by the processor, the processor invoking the program instructions capable of performing the method provided in the first aspect.
In a fourth aspect, the present description embodiments provide a non-transitory computer-readable storage medium storing computer instructions that cause a computer to perform the method provided in the first aspect.
It should be understood that, the second to fourth aspects of the present disclosure are consistent with the technical solutions of the first aspect of the present disclosure, and the beneficial effects obtained by each aspect and the corresponding possible embodiments are similar, and are not repeated.
[ Detailed description ] of the invention
For a better understanding of the technical solutions of the present specification, embodiments of the present specification are described in detail below with reference to the accompanying drawings.
It should be understood that the described embodiments are only some, but not all, of the embodiments of the present description. All other embodiments, which can be made by one of ordinary skill in the art based on the embodiments herein without making any inventive effort, are intended to be within the scope of the present disclosure.
The terminology used in the embodiments of the description presented herein is for the purpose of describing particular embodiments only and is not intended to be limiting of the description presented herein. As used in this specification and the appended claims, the singular forms "a," "an," and "the" are intended to include the plural forms as well, unless the context clearly indicates otherwise.
When the worker transmits data to webview, it needs to compare the data before and after setData (diff) once, and transmits the changed data to webview. Two schemes for diff of data before and after setData are provided in the related art, namely "_ isEqual" and deepDiff schemes, respectively. The scheme of 'isEqual' can be used for depth comparison of two objects, but can only compare the two objects of the tree structure, the time complexity is higher, and after the two objects are compared, the scheme can not generate different parts of the two objects; while the deepDiff scheme can generate different parts of the two objects after comparison, the time complexity is equivalent to that of the "_. IsEqual" scheme, but the comparison result obtained by the deepDiff scheme is not applicable to the applet setData. Both of the above solutions have obvious drawbacks and are therefore not applicable to diff of applet setData.
The embodiment of the specification provides a page rendering method which can be suitable for diff of an applet setData, can reduce the performance consumption of the diff and improve the performance of the applet.
FIG. 1 is a flowchart of one embodiment of a page rendering method in the present specification, as shown in FIG. 1, the page rendering method may include:
step 102, obtaining operation information of a user on a page displayed by the applet.
The operation information may include operations such as clicking and/or inputting information on a page displayed by the applet by a user, for example: the user performs clicking operation on the mobile phone number input box on the recharging page, and inputs the mobile phone number in the input box after performing the clicking operation. The above are merely two examples of the operation information, and the present embodiment is not limited to the form of the operation information described above.
104, Generating new data of the applet according to the operation information and the original data of the applet; wherein, the original data and the new data of the applet are invariable data, and the data structures of the original data and the new data are tree structures.
And 106, performing depth comparison on the original data and the new data to obtain a comparison result.
Step 108, rendering the page according to the comparison result, and displaying the rendered page; the rendered page is a result page after executing the operation information.
Specifically, after the operation information is obtained, the worker may generate new data of the applet according to the operation information and original data of the applet, then perform depth comparison on the original data and the new data to obtain a comparison result, and then transmit the comparison result to webview, so that webview may render a page according to the comparison result and display the rendered page.
In the page rendering method, the original data and the new data are invariable data, and the data structures of the original data and the new data are tree structures, so that in most cases, the user operation only changes a certain node of the tree structures, other nodes without change can be directly skipped when depth comparison is performed due to shared reference of the invariable data, the time complexity of the depth comparison is reduced, the performance consumption of the setData before and after the data is compared (diff) is reduced, and the performance of the applet is improved.
Fig. 2 is a flowchart of another embodiment of the page rendering method of the present disclosure, as shown in fig. 2, in the embodiment of fig. 1 of the present disclosure, before step 102, the method may further include:
Step 202, converting original data of the applet into immutable data.
Thus, step 106 may include:
Step 204, traversing the original data of the applet.
Step 206, searching the value (value) corresponding to the first key in the original data currently traversed.
Step 208, if not, setting the value of the path corresponding to the first key in the pre-established data object as the value corresponding to the first key; the data object is used for storing the comparison result of the original data and the new data.
Further, after step 208, the method may further include:
Step 210, after traversing the original data of the applet, traversing the new data of the applet.
And 212, if the value corresponding to the second keyword in the new data currently traversed is not equal to the value corresponding to the second keyword in the original data, setting the value of the path corresponding to the second keyword in the data object as the value corresponding to the second keyword in the new data currently traversed.
Step 214, after traversing the new data of the applet, if the data object is not a null object, the value of the data object is a comparison result of the original data and the new data.
Further, before step 204, the method may further include:
In step 216, a new data object is created, where the initial value of the data object is null, and the data object is used to store the comparison result of the original data and the new data of the applet.
In a specific implementation, the original data of the applet may be wrapped through immer, so as to convert the original data of the applet into the immutable data. Wherein immer is a npm packet of a Massachusetts institute of technology (Massachusetts Institute of Technology; hereinafter abbreviated as MIT) open source protocol, npm is a packet management tool of JavaScript, and codes can be installed, shared or distributed through npm.
However, immer is an invariable data solution, and of course, the present embodiment is not limited thereto, and other invariable data solutions may be adopted, and the present embodiment is not limited thereto, and immer is taken as an example in the description of the embodiments below in this specification.
Fig. 3 is a schematic diagram of one embodiment of generating new data of an applet in the page rendering method of the present specification, as shown in fig. 3, after the original data (prevData) of the applet is wrapped by immer, after a user performs an operation on a page presented by the applet, the data of the applet changes (state.a=2), so as to generate new data nextData.
Depth comparison of the front and back data prevData and nextData may then be performed using FLATDEEPDIFF, in particular, it may be directly compared whether the values of prevData and nextData are equal for the base type, and for the reference type, since the same piece of data is shared inside immer, if the reference type is not operated on by the user, it will not change, or the same piece of reference is used, so the overall diff performance is high and shallow by an order of magnitude.
Fig. 4 is a schematic diagram of one embodiment of an implementation flow of FLATDEEPDIFF in the page rendering method of the present disclosure, as shown in fig. 4, in a specific implementation, the flow of FLATDEEPDIFF may include:
Step 1, newly creating a data object flatdiff, flatdiff with a default value of null for storing the contrast data required by the applet setData;
Step 2, traversing prevData, and if the value corresponding to the first key in prevData does not exist in nextData, setting the value of the path corresponding to the first key in flatdiff as the value;
Step 3, traversing nextData after traversing prevData, and setting the value of the path corresponding to the second key in flatdiff as value1 if value1 corresponding to the second key in nextData is not equal to value2 corresponding to the second key in prevData;
Step 4, after nextData is traversed, check flatdiff if it is empty, if yes, then the prevData and nextData descriptions are completely consistent, if flatdiff is not empty, then the prevData and nextData comparison results are returned.
The end result of this example, comparing the performance of several common diff schemes, is that ：shallowEqual>flatDeepDiff+immer>_.isEquals>Object.equals>flatDeepDiff>JSON.stringify. can see that FLATDEEPDIFF + immer performance and shallowEqual are an order of magnitude, minimizing the performance consumption of the applet setData after ensuring the high performance of FLATDEEPDIFF.
In this embodiment, FLATDEEPDIFF also compares two tree-structure objects in depth, but in most cases, the user's operation will only change a certain node of the tree structure, and other nodes without change will skip directly when compared because immer shares references, FLATDEEPDIFF, so the time complexity is lower. And at the same time of diff, a flatDiff structure available for applet setData is generated, facilitating applet optimization.
The foregoing describes specific embodiments of the present disclosure. Other embodiments are within the scope of the following claims. In some cases, the actions or steps recited in the claims can be performed in a different order than in the embodiments and still achieve desirable results. In addition, the processes depicted in the accompanying figures do not necessarily require the particular order shown, or sequential order, to achieve desirable results. In some embodiments, multitasking and parallel processing are also possible or may be advantageous.
Fig. 5 is a schematic structural diagram of an embodiment of a page rendering device according to the present disclosure, and as shown in fig. 5, the page rendering device may include: an acquisition module 51, a generation module 52, a comparison module 53 and a rendering module 54;
the acquiring module 51 is configured to acquire operation information of a user on a page displayed by the applet;
a generating module 52, configured to generate new data of the applet according to the operation information acquired by the acquiring module 51 and original data of the applet; wherein, the original data and the new data of the applet are invariable data, and the data structures of the original data and the new data are tree structures;
The comparison module 53 is configured to perform depth comparison on the original data and the new data to obtain a comparison result;
The rendering module 54 is configured to render a page according to the comparison result, and display the rendered page; the rendered page is a result page after executing the operation information.
The page rendering device provided in the embodiment shown in fig. 5 may be used to implement the technical solution of the method embodiment shown in fig. 1 in this specification, and the implementation principle and technical effects may be further described with reference to the related descriptions in the method embodiment.
Fig. 6 is a schematic structural diagram of another embodiment of the page rendering device of the present disclosure, and the page rendering device shown in fig. 6 may further include: a conversion module 55;
The conversion module 55 is configured to convert original data of the applet into immutable data before the obtaining module 51 obtains operation information of a user on a page presented by the applet.
In this embodiment, the comparing module 53 may include: a traversal sub-module 531, a search sub-module 532, and a setup sub-module 533;
a traversal sub-module 531, configured to traverse original data of the applet;
a searching sub-module 532, configured to search, in the new data of the applet, a value corresponding to the first keyword in the original data currently traversed;
A setting sub-module 533, configured to set, when the value corresponding to the first keyword in the original data currently traversed is not found in the new data of the applet by the finding sub-module 532, a value of a path corresponding to the first keyword in a pre-established data object to be a value corresponding to the first keyword; the data object is used for storing the comparison result of the original data and the new data.
Further, the traversing submodule 531 is further configured to traverse new data of the applet after traversing original data of the applet;
The setting submodule 533 is further configured to set, when a value corresponding to the second keyword in the new data currently traversed is not equal to a value corresponding to the second keyword in the original data, a value of a path corresponding to the second keyword in the data object as a value corresponding to the second keyword in the new data currently traversed;
After the traversing sub-module 531 traverses the new data of the applet, if the data object is not a null object, the value of the data object is a comparison result of the original data and the new data.
Further, the comparison module 53 may further include:
And a new sub-module 534, configured to newly create a data object before the traversing sub-module 531 traverses the original data of the applet, where an initial value of the data object is null, and the data object is used to store a comparison result between the original data and the new data.
The page rendering device provided in the embodiment shown in fig. 6 may be used to implement the technical solution of the method embodiment shown in fig. 1 to 2 of the present application, and the implementation principle and technical effects may be further described with reference to the related descriptions in the method embodiment.
FIG. 7 is a schematic diagram illustrating one embodiment of an electronic device of the present disclosure, as shown in FIG. 7, which may include at least one processor; and at least one memory communicatively coupled to the processor, wherein: the memory stores program instructions executable by the processor, and the processor invokes the program instructions to execute the page rendering method provided in the embodiments shown in fig. 1 to fig. 2 of the present specification.
The electronic device may be an intelligent device such as a smart phone, an intelligent watch, a wearable intelligent device, a tablet computer or a vehicle-mounted device, and the specific form of the electronic device is not limited in this embodiment.
Fig. 7 illustrates a block diagram of an exemplary electronic device suitable for use in implementing embodiments of the present description. The electronic device shown in fig. 7 is only an example and should not be construed as limiting the functionality and scope of use of the embodiments herein.
As shown in fig. 7, the electronic device is in the form of a general purpose computing device. Components of an electronic device may include, but are not limited to: one or more processors 410, a memory 430, and a communication bus 440 that connects the various system components (including the memory 430 and the processing unit 410).
The communication bus 440 represents one or more of any of several types of bus structures, including a memory bus or memory controller, a peripheral bus, an accelerated graphics port, a processor, or a local bus using any of a variety of bus architectures. By way of example, and not limitation, such architectures include industry Standard architecture (Industry Standard Architecture; hereinafter ISA) bus, micro channel architecture (Micro Channel Architecture; hereinafter MAC) bus, enhanced ISA bus, video electronics standards Association (Video Electronics Standards Association; hereinafter VESA) local bus, and peripheral component interconnect (PERIPHERAL COMPONENT INTERCONNECTION; hereinafter PCI) bus.
Electronic devices typically include a variety of computer system readable media. Such media can be any available media that can be accessed by the electronic device and includes both volatile and nonvolatile media, removable and non-removable media.
Memory 430 may include computer system readable media in the form of volatile memory, such as random access memory (Random Access Memory; hereinafter: RAM) and/or cache memory. The electronic device may further include other removable/non-removable, volatile/nonvolatile computer system storage media. Memory 430 may include at least one program product having a set (e.g., at least one) of program modules configured to carry out the functions of the embodiments of the present description.
A program/utility having a set (at least one) of program modules may be stored in the memory 430, such program modules including, but not limited to, an operating system, one or more application programs, other program modules, and program data, each or some combination of which may include an implementation of a network environment. Program modules typically carry out the functions and/or methods of the embodiments described herein.
The processor 410 executes programs stored in the memory 430 to perform various functional applications and data processing, for example, to implement the page rendering method provided in the embodiment shown in fig. 1 to 2 of the present specification.
Embodiments of the present disclosure provide a non-transitory computer readable storage medium storing computer instructions that cause a computer to execute the page rendering method provided by the embodiments shown in fig. 1-2 of the present disclosure.
The non-transitory computer readable storage media described above may employ any combination of one or more computer readable media. The computer readable medium may be a computer readable signal medium or a computer readable storage medium. The computer readable storage medium can be, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or a combination of any of the foregoing. More specific examples (a non-exhaustive list) of the computer-readable storage medium would include the following: an electrical connection having one or more wires, a portable computer diskette, a hard disk, a Random Access Memory (RAM), a Read-Only Memory (ROM), an erasable programmable Read-Only Memory (Erasable Programmable Read Only Memory; EPROM) or flash Memory, an optical fiber, a portable compact disc Read-Only Memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing. In this document, a computer readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device.
The computer readable signal medium may include a propagated data signal with computer readable program code embodied therein, either in baseband or as part of a carrier wave. Such a propagated data signal may take any of a variety of forms, including, but not limited to, electro-magnetic, optical, or any suitable combination of the foregoing. A computer readable signal medium may also be any computer readable medium that is not a computer readable storage medium and that can communicate, propagate, or transport a program for use by or in connection with an instruction execution system, apparatus, or device.
Program code embodied on a computer readable medium may be transmitted using any appropriate medium, including but not limited to wireless, wireline, optical fiber cable, RF, etc., or any suitable combination of the foregoing.
Computer program code for carrying out operations for the present specification may be written in one or more programming languages, including an object oriented programming language such as Java, smalltalk, C ++ and conventional procedural programming languages, such as the "C" programming language or similar programming languages. The program code may execute entirely on the user's computer, partly on the user's computer, as a stand-alone software package, partly on the user's computer and partly on a remote computer or entirely on the remote computer or server. In the case of a remote computer, the remote computer may be connected to the user's computer through any kind of network, including a local area network (Local Area Network; hereinafter: LAN) or a wide area network (Wide Area Network; hereinafter: WAN), or may be connected to an external computer (for example, through the Internet using an Internet service provider).
The foregoing describes specific embodiments of the present disclosure. Other embodiments are within the scope of the following claims. In some cases, the actions or steps recited in the claims can be performed in a different order than in the embodiments and still achieve desirable results. In addition, the processes depicted in the accompanying figures do not necessarily require the particular order shown, or sequential order, to achieve desirable results. In some embodiments, multitasking and parallel processing are also possible or may be advantageous.
In the description of the present specification, a description referring to terms "one embodiment," "some embodiments," "examples," "specific examples," or "some examples," etc., means that a particular feature, structure, material, or characteristic described in connection with the embodiment or example is included in at least one embodiment or example of the present specification. In this specification, schematic representations of the above terms are not necessarily directed to the same embodiment or example. Furthermore, the particular features, structures, materials, or characteristics described may be combined in any suitable manner in any one or more embodiments or examples. Furthermore, the different embodiments or examples described in this specification and the features of the different embodiments or examples may be combined and combined by those skilled in the art without contradiction.
Furthermore, the terms "first," "second," and the like, are used for descriptive purposes only and are not to be construed as indicating or implying a relative importance or implicitly indicating the number of technical features indicated. Thus, a feature defining "a first" or "a second" may explicitly or implicitly include at least one such feature. In the description of the present specification, the meaning of "plurality" means at least two, for example, two, three, etc., unless explicitly defined otherwise.
Any process or method descriptions in flow charts or otherwise described herein may be understood as representing modules, segments, or portions of code which include one or more executable instructions for implementing specific logical functions or steps of the process, and additional implementations are included within the scope of the preferred embodiment of the present specification in which functions may be executed out of order from that shown or discussed, including substantially concurrently or in reverse order, depending on the functionality involved, as would be understood by those reasonably skilled in the art of the embodiments of the present specification.
Depending on the context, the word "if" as used herein may be interpreted as "at … …" or "at … …" or "in response to a determination" or "in response to a detection". Similarly, the phrase "if determined" or "if detected (stated condition or event)" may be interpreted as "when determined" or "in response to determination" or "when detected (stated condition or event)" or "in response to detection (stated condition or event), depending on the context.
It should be noted that, the terminals in the embodiments of the present disclosure may include, but are not limited to, a Personal Computer (Personal Computer; hereinafter referred to as a PC), a Personal digital assistant (Personal DIGITAL ASSISTANT; hereinafter referred to as a PDA), a wireless handheld device, a Tablet Computer (Tablet Computer), a mobile phone, an MP3 player, an MP4 player, and the like.
In the several embodiments provided in this specification, it should be understood that the disclosed systems, apparatuses, and methods may be implemented in other ways. For example, the apparatus embodiments described above are merely illustrative, e.g., the division of the elements is merely a logical function division, and there may be additional divisions when actually implemented, e.g., multiple elements or components may be combined or integrated into another system, or some features may be omitted or not performed. Alternatively, the coupling or direct coupling or communication connection shown or discussed with each other may be an indirect coupling or communication connection via some interfaces, devices or units, which may be in electrical, mechanical or other form.
In addition, each functional unit in each embodiment of the present specification may be integrated in one processing unit, or each unit may exist alone physically, or two or more units may be integrated in one unit. The integrated units may be implemented in hardware or in hardware plus software functional units.
The integrated units implemented in the form of software functional units described above may be stored in a computer readable storage medium. The software functional unit is stored in a storage medium, and includes several instructions for causing a computer device (which may be a personal computer, a server, or a network device, etc.) or a Processor (Processor) to perform part of the steps of the methods described in the embodiments of the present specification. And the aforementioned storage medium includes: a usb disk, a removable hard disk, a Read-Only Memory (hereinafter referred to as ROM), a random access Memory (Random Access Memory hereinafter referred to as RAM), a magnetic disk, or an optical disk, etc., which can store program codes.
The foregoing description of the preferred embodiments is provided for the purpose of illustration only, and is not intended to limit the scope of the disclosure, since any modifications, equivalents, improvements, etc. that fall within the spirit and principles of the disclosure are intended to be included within the scope of the disclosure.