CN109375918A - Interface rendering method, device, electronic equipment and the storage medium of small routine - Google Patents
Interface rendering method, device, electronic equipment and the storage medium of small routine Download PDFInfo
- Publication number
- CN109375918A CN109375918A CN201811404210.1A CN201811404210A CN109375918A CN 109375918 A CN109375918 A CN 109375918A CN 201811404210 A CN201811404210 A CN 201811404210A CN 109375918 A CN109375918 A CN 109375918A
- Authority
- CN
- China
- Prior art keywords
- data
- user interface
- interface
- dom tree
- virtual dom
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- 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
Abstract
The disclosure proposes interface rendering method, device, electronic equipment and the storage medium of a kind of small routine, wherein, method includes: the new page data of the user interface sent by JavaScript engine according to the history page data and server-side of user interface, generate target pages data, and according to target pages data, the node change data in the virtual DOM book of user interface are determined；Node change data are sent to interface render component, user interface are rendered so that interface render component changes data according to node, to obtain updated user interface.As a result, at refreshes user interface, without transmitting whole page datas of user interface, also, without constructing virtual dom tree by interface render component, the efficiency that shows of user interface is improved, and then improve the interactive experience degree of user.
Description
Technical field
This disclosure relates to which field of computer technology more particularly to a kind of interface rendering method of small routine, device, electronics are set
Standby and storage medium.
Background technique
Small routine refers to that a kind of developed based on certain programmed language is completed, without downloading and installation, so that it may the shifting used
Moved end APP.The maximum feature of small routine be it is easy to use, without being installed in the operating system of mobile terminal manually, usual little Cheng
Sequence rely on large-scale APP as carrier carry out using.
In the related technology, rendering applied to platform class App small routine user interface general process, be by
JavaScript engine, which connects, is sent to the page by the bridging functionality that system provides for the corresponding full page data of user interface
WebView component is rendered, then, WebView component generates new virtual Dom tree root according to new void according to full page data
Quasi- Dom tree and the virtual Dom tree of history render the user interface of small routine again.
However, inventor has found that above-mentioned rendering is applied to the small routine of platform class App during realizing the application
The mode of user interface is the prior art has at least the following problems: transmitting every time between (1) JavaScript engine and WebView component is
The full dose data of user interface, transmission page data takes a long time, in more new user interface, renewal time of user interface compared with
It is long；(2) when rendering user interface, WebView component needs to generate new virtual Dom tree corresponding with user interface, and needs
New virtual Dom tree and the virtual Dom tree of history compare to execute the operation of refresh page DOM.Therefore, it is used in user's use
The user interface render time of small routine is longer during the small routine of platform class App, show small routine user interface when
Between it is longer, affect the interaction between user and interface, the interactive experience degree of user is undesirable.
Summary of the invention
The disclosure provides interface rendering method, device, electronic equipment and the storage medium of a kind of small routine, is able to solve
Transmitted every time between JavaScript engine and WebView component be user interface full dose data, to cause user circle
The renewal time in face longer problem.
Disclosure first aspect embodiment proposes a kind of interface rendering method of small routine, comprising: receives server-side hair
The current page data for the user interface sent；Obtain the history page data for the user interface that last time saves；According to described
Current page data and the history page data generate target pages data；According to the target pages data, determine described in
Node in the virtual dom tree of user interface changes data；；Node change data are sent to interface render component, with
Make the interface render component change data according to the node to render the user interface, to obtain updated use
Family interface.
In one embodiment of the present disclosure, described according to the target pages data, determine the void of the user interface
Node in quasi- dom tree changes data, comprising: according to the target pages data, generates the new virtual of the user interface
Dom tree；Obtain the virtual dom tree of history for the user interface that last time saves；The new virtual dom tree and the history is empty
Quasi- dom tree carries out data difference comparison, to obtain the node change data.
In one embodiment of the present disclosure, it is described by the node change data be sent to interface render component it
Afterwards, the method also includes: update the history page data according to the target pages data；
The virtual dom tree of history is updated according to the new virtual dom tree.
In one embodiment of the present disclosure, when the current page data are incremental data, the method also includes: it connects
Receive the refreshes user interface event that the interface render component is sent.
The interface rendering method of the small routine of the embodiment of the present disclosure passes through JavaScript engine going through according to user interface
The new page data for the user interface that history page data and server-side are sent, generate target pages data, and according to page object
Face data determines the node change data in the virtual dom tree of user interface；Node change data are sent to interface wash with watercolours
Component is contaminated, the user interface is rendered so that the interface render component changes data according to the node, to obtain
Updated user interface.As a result, only transmitting the difference of user interface between JavaScript engine and interface render component
Alienation data (i.e. incremental data), without transmit user interface whole page datas, reduce JavaScript engine with
Time required for data between the render component of interface are transmitted, also, interface render component receives JavaScript engine
The node change data of transmission can directly operate true dom tree, empty without executing building by interface render component
Quasi- DOM tree operations can reduce the time required for rendering user interface, improve the efficiency that shows of user interface, and then can mention
The interactive experience degree of high user.
In order to achieve the above object, disclosure second aspect embodiment proposes a kind of interface rendering device of small routine, comprising:
First receiving module, the current page data of the user interface for receiving server-side transmission；First obtains module, for obtaining
The history page data for the user interface that last time saves；Generation module, for according to current page data and described
History page data generate target pages data；Determining module, for determining user circle according to the target pages data
Node in the virtual dom tree in face changes data；Sending module, for node change data to be sent to interface rendering group
Part renders the user interface so that the interface render component changes data according to the node, to be updated
User interface afterwards.
In one embodiment of the present disclosure, the determining module, is specifically used for: raw according to the target pages data
At the new virtual dom tree of the user interface；Obtain the virtual dom tree of history for the user interface that last time saves；It will be described
New virtual dom tree and the virtual dom tree of the history carry out data difference comparison, to obtain the node change data.
In one embodiment of the present disclosure, described device further include: the second update module is used for the section described
Point change data are sent to after the render component of interface, update the virtual dom tree of history according to the new virtual dom tree；The
One update module, for it is described by the node change data be sent to interface render component after, according to the page object
Face data updates the history page data.
In one embodiment of the present disclosure, the current page data are incremental data, described device further include: second
Receiving module, the refreshes user interface event sent for receiving the interface render component.
The interface rendering device of the small routine of the embodiment of the present disclosure passes through JavaScript engine going through according to user interface
The new page data for the user interface that history page data and server-side are sent, generate target pages data, and according to page object
Face data determines the node change data in the virtual DOM book of user interface；Node change data are sent to interface rendering group
Part renders the user interface so that the interface render component changes data according to the node, to be updated
User interface afterwards.As a result, only transmitting the differentiation of user interface between JavaScript engine and interface render component
Data (i.e. incremental data) reduce JavaScript engine and interface without transmitting whole page datas of user interface
Time required for data between render component are transmitted, also, interface render component receives JavaScript engine transmission
Node change data directly true dom tree can be operated, construct virtual DOM without being executed by interface render component
Tree operations can reduce the time required for rendering user interface, improve the efficiency that shows of user interface, and then user can be improved
Interactive experience degree.
In order to achieve the above object, disclosure third aspect embodiment proposes a kind of electronic equipment, including memory, processor
And it is stored in the computer program that can be run on the memory and on the processor, the processor executes the journey
Sequence, to be used for:
Receive the current page data for the user interface that server-side is sent；
Obtain the history page data for the user interface that last time saves；
Target pages data are generated according to the current page data and the history page data；
According to the target pages data, the node change data in the virtual dom tree of the user interface are determined；
Node change data are sent to interface render component, so that the interface render component is according to the node
Change data render the user interface, to obtain updated user interface.
In order to achieve the above object, disclosure fourth aspect embodiment proposes a kind of non-transitory computer-readable storage medium
Matter is stored thereon with computer program, which is executed by processor, to be used for:
Receive the current page data for the user interface that server-side is sent；
Obtain the history page data for the user interface that last time saves；
Target pages data are generated according to the current page data and the history page data；
According to the target pages data, the node change data in the virtual dom tree of the user interface are determined；
Node change data are sent to interface render component, so that the interface render component is according to the node
Change data render the user interface, to obtain updated user interface.
The additional aspect of the disclosure and advantage will be set forth in part in the description, and will partially become from the following description
It obtains obviously, or recognized by the practice of the disclosure.
Detailed description of the invention
The disclosure is above-mentioned and/or additional aspect and advantage will become from the following description of the accompanying drawings of embodiments
Obviously and it is readily appreciated that, in which:
Fig. 1 is a kind of flow diagram of the interface rendering method of small routine provided by the embodiment of the present disclosure；
Fig. 2 is the refinement flow diagram of step 104；
Fig. 3 be the embodiment of the present disclosure provided by between server-side, JavaScript engine and user's render component
Interactive process schematic diagram；
Fig. 4 is a kind of structural schematic diagram of the interface rendering device of small routine provided by the embodiment of the present disclosure；
Fig. 5 is the structural schematic diagram of the interface rendering device of another kind small routine provided by the embodiment of the present disclosure；
Fig. 6 is the structural schematic diagram of the interface rendering device of another kind small routine provided by the embodiment of the present disclosure；
Fig. 7 is the structural representation that the electronic equipment of interface rendering method of small routine is executed provided by the embodiment of the present disclosure
Figure.
Specific embodiment
Embodiment of the disclosure is described below in detail, the example of embodiment is shown in the accompanying drawings, wherein identical from beginning to end
Or similar label indicates same or similar element or element with the same or similar functions.It is retouched below with reference to attached drawing
The embodiment stated is exemplary, it is intended to for explaining the disclosure, and should not be understood as the limitation to the disclosure.
Below with reference to the accompanying drawings the interface rendering method of the small routine of the embodiment of the present disclosure, device, electronic equipment are described and is deposited
Storage media.
Fig. 1 is a kind of flow diagram of the interface rendering method of small routine provided by the embodiment of the present disclosure.
As shown in Figure 1, the interface rendering method of the small routine the following steps are included:
Step 101, the current page data for the user interface that server-side is sent are received.
Wherein, the executing subject of the interface rendering method of the small routine of the embodiment of the present disclosure is JavaScript engine,
JavaScript engine is located in electronic equipment, and electronic equipment can include but is not limited to personal computer, smart phone, just
Portable device etc. has the hardware device of various operating systems.
Wherein, above-mentioned user interface is the user interface of small routine.
Wherein, small routine is the small routine applied to platform class App.
Wherein, the current page data of user interface transmitted by server-side are that this refreshes small routine for responding user
User interface refresh requests transmitted by.
Wherein, it is to be understood that the current page data of user interface can be the total data of user interface, can also
To be the incremental data of user interface.
Wherein, it should be noted that the data format of the current page data of user interface transmitted by server-side with
The analysable data format of JavaScript engine is consistent.As an example, user interface transmitted by server-side is current
The data format of page data is JSON format, and JSON format is the data format that JavaScript engine is supported.
Wherein, it should be noted that user interface can include but is not limited to list element, date component, menu and set up
Equal components.
Step 102, the history page data for the user interface that last time saves are obtained.
Step 103, target pages data are generated according to current page data and history page data.
Step 104, according to target pages data, the node change data in the virtual dom tree of user interface are determined.
Wherein, it should be noted that virtual dom tree is the abstract tree constituted with JavaScript object.
Wherein, it is to be understood that the virtual dom tree of above-mentioned user interface can be user this using small routine
It is virtual to be also possible to the history cached when last time refreshes user interface for the virtual dom tree of the history saved when user interface
Dom tree.
It is that this uses small routine in user in the virtual dom tree of user interface as a kind of possible implementation
When the virtual dom tree of the history saved when user interface, according to target pages data, determine in the virtual dom tree of user interface
Node change data, may include: virtual architecture dom tree to be generated, then, by virtual architecture DOM according to target pages data
Tree, according to comparison result, determines the node updates data of user interface compared with the virtual dom tree of history carries out differentiation.
In order to improve the efficiency for improving user and obtaining updated user interface, the virtual dom tree of above-mentioned user interface can
To be the history virtual dom tree that is cached when last user refreshes, the mode of property as an example, as shown in Fig. 2, above-mentioned step
Rapid 104 may include:
Step 1041, according to target pages data, the new virtual dom tree of user interface is generated.
Specifically, after obtaining the corresponding target pages data of user interface, according to virtual Dom generating algorithm and page object
Face data generates the new virtual dom tree of user interface.
Step 1042, the virtual dom tree of history for the user interface that last time saves is obtained.
Step 1043, newly virtual dom tree and the virtual dom tree of history data difference comparison will be carried out, to obtain node change
Data.
Specifically, newly virtual dom tree and the virtual dom tree of history differentiation processing will be carried out, to obtain new virtual DOM tree
Node between the virtual dom tree of history changes data.
Wherein, node change data in new virtual dom tree including compared with the virtual dom tree of history, newly increasing node and going through
The relationship between other nodes in the virtual dom tree of history, the attribute information for newly increasing node, attribute modification nodal information, delete
Except the relationship between other nodes in node and the virtual dom tree of history.
Wherein, it should be noted that will newly virtual dom tree and the virtual dom tree of history carry out differentiation processing can be by existing
There is technology realization, which is no longer described in detail this.
Step 105, node change data are sent to interface render component, so that interface render component is changed according to node
Data render user interface, to obtain updated user interface.
Specifically, interface render component changes data in the node for the user interface for receiving JavaScript engine transmission
Afterwards, interface render component obtains the true dom tree of the corresponding history of user interface saved when last time reception number, and according to node
The update that data carry out node to the true dom tree of the history of user interface to user interface is changed, to obtain the new of user interface
True dom tree, and page rendering is carried out according to the new true dom tree of user interface, to obtain updated user interface.
Virtual dom tree is generated by interface render component relative in related art scheme, and is determined by interface render component
For the technical solution of node change data between new virtual dom tree and the virtual dom tree of history, the embodiment by by
JavaScript engine generates virtual dom tree, is determined between new virtual dom tree and the virtual DOM tree of history by interface render component
Node change data, also, JavaScript engine be not necessarily to interface render component transmission merge after full dose data available,
And it only needs to change data to interface render component transmission node.Accordingly, interface render component can change data according to node
The true dom tree of the page is operated, so that the page rendering efficiency of interface render component can be improved.
The user interface rendering method of the small routine of the embodiment of the present disclosure, by JavaScript engine according to user interface
History page data and the new page data of user interface that send of server-side, target pages data are generated, and according to mesh
Page data is marked, determines the node change data in the virtual DOM book of user interface；Node change data are sent to interface wash with watercolours
Component is contaminated, user interface is rendered so that interface render component changes data according to node, to obtain updated user
Interface.As a result, the differentiation data for only transmitting user interface between JavaScript engine and interface render component (increases
Measure data), without transmitting whole page datas of user interface, reduce JavaScript engine and interface render component it
Between data transmit required for the time, also, interface render component receive JavaScript engine transmission node change
Data can directly operate true dom tree, operate without executing the virtual dom tree of building by interface render component, can
The time required for rendering user interface is reduced, improves the efficiency that shows of user interface, and then the interaction body of user can be improved
Degree of testing.
It in embodiment of the disclosure, can be according to target after node change data are sent to interface render component
Page data updates history page data.
Specifically, it in order to enable subsequent accurately generate user interface, is rendered node change data are sent to interface
After component, history page data can be updated according to target pages data.
In embodiment of the disclosure, after node change data are sent to interface render component, according to new virtual
The virtual dom tree of DOM tree more new historical.
Wherein, it is to be understood that in order to reduce the volume of transmitted data between electronic equipment and server-side, reduce network money
Source consumption, the mode of property, receives the user interface of the update small routine of electronic equipment transmission in server-side as an example
Request when, server-side can according to update request, to electronic equipment send small routine user interface newly-increased data.Namely
It says, current page data can be incremental data.
Specifically, after the user interface for providing small routine for user, if receiving refreshes user circle of user's transmission
The request in face, at this point, interface render component generates refreshes user interface event according to the request at the refreshes user interface of user, and
Refreshes user interface event is sent to JavaScript engine by bridge interface.Accordingly, JavaScript engine is to clothes
Business end sends the refresh requests of the user interface of refurbishing procedure.Accordingly, server-side can be requested according to updating, and be sent out to electronic equipment
Send the newly-increased data of the user interface of small routine.
Then, electronic equipment sends the newly-increased data of user interface to JavaScript engine.JavaScript engine obtains
The history page data for the user interface for taking last time to save, and target pages number is generated according to newly-increased data and history page data
According to, then, according to target pages data, the new virtual dom tree of user interface is generated, and obtain the user interface of last time preservation
The virtual dom tree of history, and according to new virtual dom tree and the virtual dom tree of history, determine new virtual dom tree and the virtual DOM of history
Node between tree changes data.Finally, node change data are sent to by JavaScript engine by Data Bridge function
Interface render component renders user interface so that interface render component changes data according to node, after obtaining update
User interface.
Wherein, the interactive process schematic diagram between server-side, JavaScript engine and user's render component, such as Fig. 3
It is shown.
The embodiment of the present disclosure also proposes a kind of interface rendering device of small routine.
Fig. 4 is a kind of structural schematic diagram of the interface rendering device of small routine provided by the embodiment of the present disclosure.
Wherein, it should be noted that the interface rendering device of the small routine of the embodiment is located in JavaScript engine,
The JavaScript engine is located in electronic equipment.
Wherein, electronic equipment can include but is not limited to personal computer, smart phone, portable device etc. with various
The hardware device of operating system.
As shown in figure 4, the interface rendering device of the small routine may include that the first receiving module 110, first obtains module
120, generation module 130, determining module 140, sending module 150, in which:
First receiving module 110, the current page data of the user interface for receiving server-side transmission.
First obtains module 120, the history page data of the user interface for obtaining last time preservation.
Generation module 130, for generating target pages data according to current page data and history page data.
Determining module 140, for according to target pages data, determining the change of the node in the virtual dom tree of user interface
Data.
Sending module 150, for by node change data be sent to interface render component so that interface render component according to
Node change data render user interface, to obtain updated user interface.
In one embodiment of the present disclosure, above-mentioned determining module 140 is specifically used for: according to target pages data, generating
The new virtual dom tree of user interface；Obtain the virtual dom tree of history for the user interface that last time saves；Will newly virtual DOM tree with
The virtual dom tree of history carries out data difference comparison, to obtain node change data.
In one embodiment of the present disclosure, on the basis of shown in Fig. 4, as shown in figure 5, the device can also include:
First update module 160, for by node change data be sent to interface render component after, according to page object
Face data updates history page data.
Second update module 170, for after node change data are sent to interface render component, according to new virtual
The virtual dom tree of dom tree more new historical.
In one embodiment of the present disclosure, current page data are incremental data, on the basis of shown in Fig. 4, such as Fig. 6
Shown, which can also include:
Second receiving module 180, for determine terminal save user interface history page data before, reception interface
The refreshes user interface event that render component is sent.
Wherein, it should be noted that the explanation of the aforementioned interface rendering method embodiment to small routine is also applied for
The interface rendering device of the small routine of the embodiment, details are not described herein again.
The user interface rendering device of the small routine of the embodiment of the present disclosure, by JavaScript engine according to user interface
History page data and the new page data of user interface that send of server-side, target pages data are generated, and according to mesh
Mark page data determines that the node in the virtual DOM book of user interface changes data；Node change data are sent to interface wash with watercolours
Component is contaminated, user interface is rendered so that interface render component changes data according to node, to obtain updated user
Interface.As a result, the differentiation data for only transmitting user interface between JavaScript engine and interface render component (increases
Measure data), without transmitting whole page datas of user interface, reduce JavaScript engine and interface render component it
Between data transmit required for the time, also, interface render component receive JavaScript engine transmission node change
Data can directly operate true dom tree, operate without executing the virtual dom tree of building by interface render component, can
The time required for rendering user interface is reduced, improves the efficiency that shows of user interface, and then the interaction body of user can be improved
Degree of testing.
In order to realize above-described embodiment, the embodiment of the present disclosure also proposes a kind of electronic equipment, including memory, processor and
The computer program that can be run on a memory and on a processor is stored, processor executes program, to be used for:
Receive the current page data for the user interface that server-side is sent；
Obtain the history page data for the user interface that last time saves；
Target pages data are generated according to current page data and history page data；
According to target pages data, the node change data in the virtual dom tree of user interface are determined；
By node change data be sent to interface render component so that interface render component according to node change data to
Family interface is rendered, to obtain updated user interface.
Below with reference to Fig. 7, it illustrates the structural representations for the electronic equipment 1000 for being suitable for being used to realize the embodiment of the present disclosure
Figure.Electronic equipment in the embodiment of the present disclosure can include but is not limited to such as mobile phone, laptop, digital broadcasting and connect
Receive device, PDA (personal digital assistant), PAD (tablet computer), PMP (portable media player), car-mounted terminal (such as vehicle
Carry navigation terminal) etc. mobile terminal and such as number TV, desktop computer etc. fixed terminal.Electricity shown in Fig. 7
Sub- equipment is only an example, should not function to the embodiment of the present disclosure and use scope bring any restrictions.
As shown in fig. 7, electronic equipment 1000 may include processing unit (such as central processing unit, graphics processor etc.)
1001, it can be loaded at random according to the program being stored in read-only memory (ROM) 1002 or from storage device 1008
It accesses the program in memory (RAM) 1003 and executes various movements appropriate and processing.In RAM 1003, it is also stored with electricity
Sub- equipment 1000 operates required various programs and data.Processing unit 1001, ROM 1002 and RAM 1003 pass through bus
1004 are connected with each other.Input/output (I/O) interface 1005 is also connected to bus 1004.
In general, following device can connect to I/O interface 1005: including such as touch screen, touch tablet, keyboard, mouse, taking the photograph
As the input unit 1006 of head, microphone, accelerometer, gyroscope etc.；Including such as liquid crystal display (LCD), loudspeaker, vibration
The output device 1007 of dynamic device etc.；Storage device 1008 including such as tape, hard disk etc.；And communication device 1009.Communication
Device 1009 can permit electronic equipment 1000 and wirelessly or non-wirelessly be communicated with other equipment to exchange data.Although Fig. 7 shows
The electronic equipment 1000 with various devices is gone out, it should be understood that being not required for implementing or having all dresses shown
It sets.It can alternatively implement or have more or fewer devices.
Particularly, in accordance with an embodiment of the present disclosure, it may be implemented as computer above with reference to the process of flow chart description
Software program.For example, embodiment of the disclosure includes a kind of computer program product comprising be carried on computer-readable medium
On computer program, which includes the program code for method shown in execution flow chart.In such reality
It applies in example, which can be downloaded and installed from network by communication device 1009, or from storage device
1008 are mounted, or are mounted from ROM 1002.When the computer program is executed by processing unit 1001, this public affairs is executed
Open the above-mentioned function of limiting in the method for embodiment.
It should be noted that the above-mentioned computer-readable medium of the disclosure can be computer-readable signal media or meter
Calculation machine readable storage medium storing program for executing either the two any combination.Computer readable storage medium for example can be --- but not
Be limited to --- electricity, magnetic, optical, electromagnetic, infrared ray or semiconductor system, device or device, or any above combination.Meter
The more specific example of calculation machine readable storage medium storing program for executing can include but is not limited to: have the electrical connection, just of one or more conducting wires
Taking formula computer disk, hard disk, random access storage device (RAM), read-only memory (ROM), erasable type may be programmed read-only storage
Device (EPROM or flash memory), optical fiber, portable compact disc read-only memory (CD-ROM), light storage device, magnetic memory device,
Or above-mentioned any appropriate combination.In the disclosure, computer readable storage medium can be it is any include or storage journey
The tangible medium of sequence, the program can be commanded execution system, device or device use or in connection.And at this
In open, computer-readable signal media may include in a base band or as the data-signal that carrier wave a part is propagated,
In carry computer-readable program code.The data-signal of this propagation can take various forms, including but not limited to
Electromagnetic signal, optical signal or above-mentioned any appropriate combination.Computer-readable signal media can also be computer-readable and deposit
Any computer-readable medium other than storage media, the computer-readable signal media can send, propagate or transmit and be used for
By the use of instruction execution system, device or device or program in connection.Include on computer-readable medium
Program code can transmit with any suitable medium, including but not limited to: electric wire, optical cable, RF (radio frequency) etc., Huo Zheshang
Any appropriate combination stated.
Above-mentioned computer-readable medium can be included in above-mentioned electronic equipment；It is also possible to individualism, and not
It is fitted into the electronic equipment.
Above-mentioned computer-readable medium carries one or more program, when said one or multiple programs are by the electricity
When sub- equipment executes, so that the electronic equipment: obtaining at least two internet protocol addresses；Send to Node evaluation equipment includes extremely
The Node evaluation request of few two internet protocol addresses, wherein Node evaluation equipment is from least two internet protocol addresses, choosing
It takes internet protocol address and returns；The internet protocol address that receiving node valuator device returns；Wherein, acquired Internet protocol
Address indicates the fringe node in content distributing network.
Alternatively, above-mentioned computer-readable medium carries one or more program, when said one or multiple programs
When being executed by the electronic equipment, so that the electronic equipment: receiving the Node evaluation including at least two internet protocol addresses and request；
From at least two internet protocol addresses, internet protocol address is chosen；Return to the internet protocol address selected；Wherein, it receives
To internet protocol address instruction content distributing network in fringe node.
The calculating of the operation for executing the disclosure can be write with one or more programming languages or combinations thereof
Machine program code, above procedure design language include object oriented program language-such as Java, Smalltalk, C+
+, it further include conventional procedural programming language-such as " C " language or similar programming language.Program code can
Fully to execute, partly execute on the user computer on the user computer, be executed as an independent software package,
Part executes on the remote computer or executes on a remote computer or server completely on the user computer for part.
In situations involving remote computers, remote computer can pass through the network of any kind --- including local area network (LAN)
Or wide area network (WAN)-is connected to subscriber computer, or, it may be connected to outer computer (such as utilize Internet service
Provider is connected by internet).
Flow chart and block diagram in attached drawing are illustrated according to the system of the various embodiments of the disclosure, method and computer journey
The architecture, function and operation in the cards of sequence product.In this regard, each box in flowchart or block diagram can generation
A part of one module, program segment or code of table, a part of the module, program segment or code include one or more use
The executable instruction of the logic function as defined in realizing.It should also be noted that in some implementations as replacements, being marked in box
The function of note can also occur in a different order than that indicated in the drawings.For example, two boxes succeedingly indicated are actually
It can be basically executed in parallel, they can also be executed in the opposite order sometimes, and this depends on the function involved.Also it to infuse
Meaning, the combination of each box in block diagram and or flow chart and the box in block diagram and or flow chart can be with holding
The dedicated hardware based system of functions or operations as defined in row is realized, or can use specialized hardware and computer instruction
Combination realize.
Being described in unit involved in the embodiment of the present disclosure can be realized by way of software, can also be by hard
The mode of part is realized.Wherein, the title of unit does not constitute the restriction to the unit itself under certain conditions, for example, the
One acquiring unit is also described as " obtaining the unit of at least two internet protocol addresses ".
Claims (10)
1. a kind of interface rendering method of small routine characterized by comprising
Receive the current page data for the user interface that server-side is sent；
Obtain the history page data for the user interface that last time saves；
Target pages data are generated according to the current page data and the history page data；
According to the target pages data, the node change data in the virtual dom tree of the user interface are determined；
Node change data are sent to interface render component, so that the interface render component is changed according to the node
Data render the user interface, to obtain updated user interface.
2. the method as described in claim 1, which is characterized in that it is described according to the target pages data, determine the user
Node in the virtual dom tree at interface changes data, comprising:
According to the target pages data, the new virtual dom tree of the user interface is generated；
Obtain the virtual dom tree of history for the user interface that last time saves；
The new virtual dom tree and the virtual dom tree of the history are subjected to data difference comparison, to obtain the node change number
According to.
3. method according to claim 2, which is characterized in that node change data are sent to interface rendering described
After component, the method also includes:
The history page data are updated according to the target pages data；
The virtual dom tree of history is updated according to the new virtual dom tree.
4. the method as described in claim 1, which is characterized in that when the current page data are incremental data, the method
Further include:
Receive the refreshes user interface event that the interface render component is sent.
5. a kind of interface rendering device of small routine characterized by comprising
First receiving module, the current page data of the user interface for receiving server-side transmission；
First obtains module, the history page data of the user interface for obtaining last time preservation；
Generation module, for generating target pages data according to the current page data and the history page data；
Determining module, for according to the target pages data, determining the change of the node in the virtual dom tree of the user interface
Data；
Sending module, for node change data to be sent to interface render component, so that the interface render component root
The user interface is rendered according to node change data, to obtain updated user interface.
6. device as claimed in claim 5, which is characterized in that the determining module is specifically used for:
According to the target pages data, the new virtual dom tree of the user interface is generated；
Obtain the virtual dom tree of history for the user interface that last time saves；
The new virtual dom tree and the virtual dom tree of the history are subjected to data difference comparison, to obtain the node change number
According to.
7. device as claimed in claim 6, which is characterized in that described device further include:
Second update module, for it is described by the node change data be sent to interface render component after, according to described
New virtual dom tree updates the virtual dom tree of history；
First update module, for it is described by the node change data be sent to interface render component after, according to described
Target pages data update the history page data.
8. device as claimed in claim 5, which is characterized in that when the current page data are incremental data, described device
Further include:
Second receiving module, the refreshes user interface event sent for receiving the interface render component.
9. a kind of electronic equipment characterized by comprising
At least one processor；And the memory being connect at least one described processor communication；
Wherein, the memory is stored with the instruction that can be executed by least one described processor, and described instruction is arranged to use
In the interface rendering method for executing the described in any item small routines of the claims 1-4.
10. a kind of non-transient computer readable storage medium, which is characterized in that the non-transient computer readable storage medium is deposited
Computer instruction is stored up, the computer instruction is for making the computer perform claim require the described in any item small routines of 1-4
Interface rendering method.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811404210.1A CN109375918A (en) | 2018-11-23 | 2018-11-23 | Interface rendering method, device, electronic equipment and the storage medium of small routine |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811404210.1A CN109375918A (en) | 2018-11-23 | 2018-11-23 | Interface rendering method, device, electronic equipment and the storage medium of small routine |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN109375918A true CN109375918A (en) | 2019-02-22 |
Family
ID=65383126
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201811404210.1A Pending CN109375918A (en) | 2018-11-23 | 2018-11-23 | Interface rendering method, device, electronic equipment and the storage medium of small routine |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN109375918A (en) |
Cited By (25)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110187931A (en) * | 2019-05-17 | 2019-08-30 | 北京百度网讯科技有限公司 | The operation method and device of small routine |
| CN110286990A (en) * | 2019-06-28 | 2019-09-27 | 百度在线网络技术（北京）有限公司 | User interface presentation method, apparatus, equipment and storage medium |
| CN110427225A (en) * | 2019-07-29 | 2019-11-08 | 阿里巴巴集团控股有限公司 | A kind of method and apparatus starting small routine |
| CN110457038A (en) * | 2019-08-14 | 2019-11-15 | 百度在线网络技术（北京）有限公司 | Card display methods, device, equipment and the storage medium of attached application end |
| CN110704136A (en) * | 2019-09-27 | 2020-01-17 | 北京百度网讯科技有限公司 | Rendering method of small program assembly, client, electronic device and storage medium |
| CN110750255A (en) * | 2019-09-25 | 2020-02-04 | 支付宝(杭州)信息技术有限公司 | Applet rendering method and device |
| CN110865760A (en) * | 2019-11-18 | 2020-03-06 | 北京小米移动软件有限公司 | Electronic equipment operation method and device, electronic equipment and storage medium |
| CN111459584A (en) * | 2020-03-12 | 2020-07-28 | 支付宝(杭州)信息技术有限公司 | Page rendering method and device and electronic equipment |
| CN111651141A (en) * | 2020-05-25 | 2020-09-11 | 北京百度网讯科技有限公司 | Method and device for showing landing page of applet, electronic equipment and storage medium |
| CN111796819A (en) * | 2020-05-19 | 2020-10-20 | 北京三快在线科技有限公司 | Applet interface generation method and device, electronic equipment and readable storage medium |
| CN111880788A (en) * | 2020-06-12 | 2020-11-03 | 北京三快在线科技有限公司 | Page rendering method, device, client and computer readable storage medium |
| CN111880790A (en) * | 2020-06-12 | 2020-11-03 | 北京三快在线科技有限公司 | Page rendering method, page rendering system, and computer-readable storage medium |
| CN111930378A (en) * | 2020-08-11 | 2020-11-13 | 上海亿锎智能科技有限公司 | Method, device and system for realizing Web end project form designer |
| CN112231616A (en) * | 2020-09-29 | 2021-01-15 | 北京五八信息技术有限公司 | Page data refreshing method and device, electronic equipment and storage medium |
| CN112395027A (en) * | 2019-08-14 | 2021-02-23 | 腾讯科技（深圳）有限公司 | Widget interface generation method and device, storage medium and electronic equipment |
| CN112394869A (en) * | 2020-10-16 | 2021-02-23 | 腾讯科技（深圳）有限公司 | Vehicle-mounted terminal based applet control method, device, equipment and storage medium |
| CN112596729A (en) * | 2020-12-28 | 2021-04-02 | 深圳市欢太科技有限公司 | Target application interface generation method and device, readable medium and electronic equipment |
| CN113051874A (en) * | 2019-12-26 | 2021-06-29 | 阿里巴巴集团控股有限公司 | User behavior data rendering method and device |
| CN113467872A (en) * | 2021-06-28 | 2021-10-01 | 康键信息技术（深圳）有限公司 | Progressive rendering method, device and equipment of terminal page and storage medium |
| CN114969236A (en) * | 2022-07-25 | 2022-08-30 | 倍智智能数据运营有限公司 | Method for realizing user-defined map annotation based on React |
| CN115576623A (en) * | 2022-09-16 | 2023-01-06 | 花瓣云科技有限公司 | Application program starting method and device |
| WO2023245374A1 (en) * | 2022-06-20 | 2023-12-28 | 北京小米移动软件有限公司 | View display method and apparatus, electronic device, and storage medium |
| CN117348948A (en) * | 2023-12-04 | 2024-01-05 | 南京掌控网络科技有限公司 | Applet engine running on self-contained App |
| WO2024021743A1 (en) * | 2022-07-27 | 2024-02-01 | 腾讯科技（深圳）有限公司 | Data processing method and apparatus, device, and readable storage medium |
| CN112395027B (en) * | 2019-08-14 | 2024-04-19 | 腾讯科技（深圳）有限公司 | Widget interface generation method and device, storage medium and electronic equipment |
Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103699595A (en) * | 2013-12-11 | 2014-04-02 | 小米科技有限责任公司 | Method and device for webpage caching of terminal browser and terminal |
| US20140310588A1 (en) * | 2013-04-10 | 2014-10-16 | International Business Machines Corporation | Managing a display of results of a keyword search on a web page |
| CN105630902A (en) * | 2015-12-21 | 2016-06-01 | 明博教育科技股份有限公司 | Method for rendering and incrementally updating webpages |
| CN105808237A (en) * | 2016-02-25 | 2016-07-27 | 北京京东尚科信息技术有限公司 | Page rendering method and page rendering system |
| CN106202529A (en) * | 2016-07-22 | 2016-12-07 | 浪潮(北京)电子信息产业有限公司 | A kind of page rendering method and device |
| CN106570098A (en) * | 2016-10-31 | 2017-04-19 | 华为技术有限公司 | Page refreshing method and device |
| CN107656759A (en) * | 2017-09-04 | 2018-02-02 | 口碑(上海)信息技术有限公司 | A kind of rendering intent and device for user interface |
| CN108052539A (en) * | 2017-11-20 | 2018-05-18 | 烽火通信科技股份有限公司 | A kind of browser page switching method and browser |
| CN108572819A (en) * | 2017-12-21 | 2018-09-25 | 北京金山云网络技术有限公司 | Method for updating pages, device, terminal and computer readable storage medium |
-
2018
- 2018-11-23 CN CN201811404210.1A patent/CN109375918A/en active Pending
Patent Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20140310588A1 (en) * | 2013-04-10 | 2014-10-16 | International Business Machines Corporation | Managing a display of results of a keyword search on a web page |
| CN103699595A (en) * | 2013-12-11 | 2014-04-02 | 小米科技有限责任公司 | Method and device for webpage caching of terminal browser and terminal |
| CN105630902A (en) * | 2015-12-21 | 2016-06-01 | 明博教育科技股份有限公司 | Method for rendering and incrementally updating webpages |
| CN105808237A (en) * | 2016-02-25 | 2016-07-27 | 北京京东尚科信息技术有限公司 | Page rendering method and page rendering system |
| CN106202529A (en) * | 2016-07-22 | 2016-12-07 | 浪潮(北京)电子信息产业有限公司 | A kind of page rendering method and device |
| CN106570098A (en) * | 2016-10-31 | 2017-04-19 | 华为技术有限公司 | Page refreshing method and device |
| CN107656759A (en) * | 2017-09-04 | 2018-02-02 | 口碑(上海)信息技术有限公司 | A kind of rendering intent and device for user interface |
| CN108052539A (en) * | 2017-11-20 | 2018-05-18 | 烽火通信科技股份有限公司 | A kind of browser page switching method and browser |
| CN108572819A (en) * | 2017-12-21 | 2018-09-25 | 北京金山云网络技术有限公司 | Method for updating pages, device, terminal and computer readable storage medium |
Cited By (33)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110187931A (en) * | 2019-05-17 | 2019-08-30 | 北京百度网讯科技有限公司 | The operation method and device of small routine |
| CN110187931B (en) * | 2019-05-17 | 2022-05-17 | 北京百度网讯科技有限公司 | Method and device for running small program |
| CN110286990A (en) * | 2019-06-28 | 2019-09-27 | 百度在线网络技术（北京）有限公司 | User interface presentation method, apparatus, equipment and storage medium |
| CN110427225A (en) * | 2019-07-29 | 2019-11-08 | 阿里巴巴集团控股有限公司 | A kind of method and apparatus starting small routine |
| CN112395027B (en) * | 2019-08-14 | 2024-04-19 | 腾讯科技（深圳）有限公司 | Widget interface generation method and device, storage medium and electronic equipment |
| CN110457038B (en) * | 2019-08-14 | 2022-11-29 | 百度在线网络技术（北京）有限公司 | Card display method, device and equipment of auxiliary application terminal and storage medium |
| CN112395027A (en) * | 2019-08-14 | 2021-02-23 | 腾讯科技（深圳）有限公司 | Widget interface generation method and device, storage medium and electronic equipment |
| CN110457038A (en) * | 2019-08-14 | 2019-11-15 | 百度在线网络技术（北京）有限公司 | Card display methods, device, equipment and the storage medium of attached application end |
| CN110750255A (en) * | 2019-09-25 | 2020-02-04 | 支付宝(杭州)信息技术有限公司 | Applet rendering method and device |
| CN110750255B (en) * | 2019-09-25 | 2022-08-02 | 支付宝(杭州)信息技术有限公司 | Applet rendering method and device |
| CN110704136A (en) * | 2019-09-27 | 2020-01-17 | 北京百度网讯科技有限公司 | Rendering method of small program assembly, client, electronic device and storage medium |
| CN110865760A (en) * | 2019-11-18 | 2020-03-06 | 北京小米移动软件有限公司 | Electronic equipment operation method and device, electronic equipment and storage medium |
| CN113051874A (en) * | 2019-12-26 | 2021-06-29 | 阿里巴巴集团控股有限公司 | User behavior data rendering method and device |
| CN113051874B (en) * | 2019-12-26 | 2023-12-26 | 阿里巴巴集团控股有限公司 | User behavior data rendering method and device |
| CN111459584A (en) * | 2020-03-12 | 2020-07-28 | 支付宝(杭州)信息技术有限公司 | Page rendering method and device and electronic equipment |
| CN111459584B (en) * | 2020-03-12 | 2024-04-12 | 支付宝(杭州)信息技术有限公司 | Page rendering method and device and electronic equipment |
| CN111796819A (en) * | 2020-05-19 | 2020-10-20 | 北京三快在线科技有限公司 | Applet interface generation method and device, electronic equipment and readable storage medium |
| CN111651141B (en) * | 2020-05-25 | 2023-02-28 | 北京百度网讯科技有限公司 | Method and device for showing landing page of applet, electronic equipment and storage medium |
| CN111651141A (en) * | 2020-05-25 | 2020-09-11 | 北京百度网讯科技有限公司 | Method and device for showing landing page of applet, electronic equipment and storage medium |
| CN111880790A (en) * | 2020-06-12 | 2020-11-03 | 北京三快在线科技有限公司 | Page rendering method, page rendering system, and computer-readable storage medium |
| CN111880788A (en) * | 2020-06-12 | 2020-11-03 | 北京三快在线科技有限公司 | Page rendering method, device, client and computer readable storage medium |
| CN111930378A (en) * | 2020-08-11 | 2020-11-13 | 上海亿锎智能科技有限公司 | Method, device and system for realizing Web end project form designer |
| CN112231616A (en) * | 2020-09-29 | 2021-01-15 | 北京五八信息技术有限公司 | Page data refreshing method and device, electronic equipment and storage medium |
| CN112394869A (en) * | 2020-10-16 | 2021-02-23 | 腾讯科技（深圳）有限公司 | Vehicle-mounted terminal based applet control method, device, equipment and storage medium |
| CN112596729A (en) * | 2020-12-28 | 2021-04-02 | 深圳市欢太科技有限公司 | Target application interface generation method and device, readable medium and electronic equipment |
| CN113467872A (en) * | 2021-06-28 | 2021-10-01 | 康键信息技术（深圳）有限公司 | Progressive rendering method, device and equipment of terminal page and storage medium |
| WO2023245374A1 (en) * | 2022-06-20 | 2023-12-28 | 北京小米移动软件有限公司 | View display method and apparatus, electronic device, and storage medium |
| CN114969236A (en) * | 2022-07-25 | 2022-08-30 | 倍智智能数据运营有限公司 | Method for realizing user-defined map annotation based on React |
| WO2024021743A1 (en) * | 2022-07-27 | 2024-02-01 | 腾讯科技（深圳）有限公司 | Data processing method and apparatus, device, and readable storage medium |
| CN115576623B (en) * | 2022-09-16 | 2023-08-22 | 花瓣云科技有限公司 | Application program starting method and device |
| CN115576623A (en) * | 2022-09-16 | 2023-01-06 | 花瓣云科技有限公司 | Application program starting method and device |
| CN117348948A (en) * | 2023-12-04 | 2024-01-05 | 南京掌控网络科技有限公司 | Applet engine running on self-contained App |
| CN117348948B (en) * | 2023-12-04 | 2024-03-22 | 南京掌控网络科技有限公司 | Applet engine running on self-contained App |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109375918A (en) | Interface rendering method, device, electronic equipment and the storage medium of small routine | |
| CN109871388A (en) | Data cache method, device, whole electronic equipment and storage medium | |
| CN109299348A (en) | A kind of data query method, apparatus, electronic equipment and storage medium | |
| CN109769141A (en) | A kind of video generation method, device, electronic equipment and storage medium | |
| CN109460233A (en) | Primary interface display update method, device, terminal device and the medium of the page | |
| WO2020248745A1 (en) | Method and device for displaying characters in user interface, electronic device, and storage medium | |
| CN109947317A (en) | Application program page display method and device | |
| CN109359281A (en) | Dynamic list generation method and device | |
| CN109657174A (en) | Method and apparatus for more new data | |
| CN109117252A (en) | Method, system and the container cluster management system of task processing based on container | |
| CN109783101A (en) | The page layout method and device of browser automatic adaptation | |
| CN110139118A (en) | Function operation method, device, electronic equipment and the storage medium of application program | |
| CN109710364A (en) | Adjust method, apparatus, electronic equipment and the storage medium of layout type | |
| CN109460201A (en) | The methods of exhibiting of information, device, hardware device | |
| CN114625536A (en) | Video memory allocation method, device, medium and electronic equipment | |
| CN109697034A (en) | A kind of method for writing data, device, electronic equipment and storage medium | |
| CN112261176B (en) | Method for acquiring actual network access relationship and related equipment | |
| CN110223179A (en) | The data processing method of fund, device, system, medium | |
| CN110135903A (en) | Advertisement position ranks method, system, medium and electronic equipment | |
| CN110333843A (en) | Implementation method, device and the electronic equipment of virtual machine high-resolution timer | |
| CN110545313B (en) | Message push control method and device and electronic equipment | |
| CN112199923A (en) | Identification generation method, system, device and medium based on distributed system | |
| CN109684116B (en) | Data sharing method, device, equipment and medium | |
| CN109816455A (en) | Method and apparatus for handling information | |
| CN109558408A (en) | Update method, apparatus, electronic equipment and the readable storage medium storing program for executing of list |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |