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 PDF

Info

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
Application number
CN201811404210.1A
Other languages
Chinese (zh)
Inventor
赵岘
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Tianjin ByteDance Technology Co Ltd
Original Assignee
Tianjin ByteDance Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Tianjin ByteDance Technology Co Ltd filed Critical Tianjin ByteDance Technology Co Ltd
Priority to CN201811404210.1A priority Critical patent/CN109375918A/en
Publication of CN109375918A publication Critical patent/CN109375918A/en
Pending legal-status Critical Current

Links

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/38Creation or generation of source code for implementing user interfaces
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/60Software deployment
    • G06F8/65Updates

Landscapes

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

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

Interface rendering method, device, electronic equipment and the storage medium of small routine
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.
CN201811404210.1A 2018-11-23 2018-11-23 Interface rendering method, device, electronic equipment and the storage medium of small routine Pending CN109375918A (en)

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)

* Cited by examiner, † Cited by third party
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
CN112394869A (en) * 2020-10-16 2021-02-23 腾讯科技(深圳)有限公司 Vehicle-mounted terminal based applet control method, device, equipment and storage medium
CN112395027A (en) * 2019-08-14 2021-02-23 腾讯科技(深圳)有限公司 Widget interface generation method and device, storage medium and electronic equipment
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
CN113360200A (en) * 2020-03-05 2021-09-07 北京沃东天骏信息技术有限公司 Method and device for running target program embedded page
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

Citations (9)

* Cited by examiner, † Cited by third party
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

Patent Citations (9)

* Cited by examiner, † Cited by third party
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 (35)

* Cited by examiner, † Cited by third party
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
CN110457038B (en) * 2019-08-14 2022-11-29 百度在线网络技术(北京)有限公司 Card display method, device and equipment of auxiliary application terminal and storage medium
CN110457038A (en) * 2019-08-14 2019-11-15 百度在线网络技术(北京)有限公司 Card display methods, device, equipment and the storage medium of attached application end
CN112395027B (en) * 2019-08-14 2024-04-19 腾讯科技(深圳)有限公司 Widget interface generation method and device, storage medium and electronic equipment
CN112395027A (en) * 2019-08-14 2021-02-23 腾讯科技(深圳)有限公司 Widget interface generation method and device, storage medium and electronic equipment
CN110750255B (en) * 2019-09-25 2022-08-02 支付宝(杭州)信息技术有限公司 Applet rendering method and device
CN110750255A (en) * 2019-09-25 2020-02-04 支付宝(杭州)信息技术有限公司 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
CN113051874B (en) * 2019-12-26 2023-12-26 阿里巴巴集团控股有限公司 User behavior data rendering method and device
CN113051874A (en) * 2019-12-26 2021-06-29 阿里巴巴集团控股有限公司 User behavior data rendering method and device
CN113360200A (en) * 2020-03-05 2021-09-07 北京沃东天骏信息技术有限公司 Method and device for running target program embedded page
CN111459584B (en) * 2020-03-12 2024-04-12 支付宝(杭州)信息技术有限公司 Page rendering method and device and electronic equipment
CN111459584A (en) * 2020-03-12 2020-07-28 支付宝(杭州)信息技术有限公司 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
CN112596729B (en) * 2020-12-28 2024-05-31 深圳市欢太科技有限公司 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
CN109299348B (en) Data query method and device, electronic equipment and storage medium
CN109871388A (en) Data cache method, device, whole electronic equipment and storage medium
CN109460233A (en) Primary interface display update method, device, terminal device and the medium of the page
CN109769141A (en) A kind of video generation method, device, electronic equipment and storage medium
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
CN109857486A (en) A kind of processing method, device, equipment and the medium of program page data
CN109857971A (en) Page rendering method and apparatus
CN109657174A (en) Method and apparatus for more new data
CN110704833A (en) Data permission configuration method, device, electronic device and storage medium
CN112199923A (en) Identification generation method, system, device and medium based on distributed system
CN110139118A (en) Function operation method, device, electronic equipment and the storage medium of application program
CN110545313B (en) Message push control method and device and electronic equipment
CN109710364A (en) Adjust method, apparatus, electronic equipment and the storage medium of layout type
EP4160439A1 (en) Zoom-adaptive data granularity to achieve a flexible high-performance interface for a geospatial mapping system
CN110333843B (en) Method and device for realizing high-precision timer of virtual machine and electronic equipment
CN112261176B (en) Method for acquiring actual network access relationship and related equipment
CN109947423A (en) Code generating method, device, terminal and medium
CN109669720B (en) Chain type asynchronous request processing method and device based on Promise and electronic equipment
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
CN109614089A (en) Automatic generation method, device, equipment and the storage medium of data access code
CN116775174A (en) Processing method, device, equipment and medium based on user interface frame

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