CN106294658A - The quick methods of exhibiting of webpage and device - Google Patents
The quick methods of exhibiting of webpage and device Download PDFInfo
- Publication number
- CN106294658A CN106294658A CN201610633106.4A CN201610633106A CN106294658A CN 106294658 A CN106294658 A CN 106294658A CN 201610633106 A CN201610633106 A CN 201610633106A CN 106294658 A CN106294658 A CN 106294658A
- Authority
- CN
- China
- Prior art keywords
- dynamic data
- web page
- loading
- page files
- webpage
- 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.)
- Granted
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Information Transfer Between Computers (AREA)
Abstract
The present invention relates to a kind of quick methods of exhibiting of webpage and device, the method includes: obtain web page files；According to the first scripted code in described web page files, create global variable and overall situation call back function；According to the second scripted code in described web page files, load dynamic data in Asynchronous loading mode, and adjust back described overall situation call back function after specifying loading described dynamic data success；Described overall situation call back function is for preserving the dynamic data of loading to described global variable；The loaded in parallel pattern file when loading described dynamic data in Asynchronous loading mode；Webpage is rendered according to described pattern file and the described dynamic data preserved by described global variable.The quick methods of exhibiting of webpage of the application offer and device, improve the efficiency of displayed web page.
Description
Technical field
The present invention relates to Internet technical field, particularly relate to a kind of quick methods of exhibiting of webpage and device.
Background technology
Webpage is after server gets web page files, the page rendered according to web page files.Data in webpage
Including static data and dynamic data.Wherein static data refers to be directly present in web page files and can directly render display
Text fixing in data, such as webpage and image etc..Dynamic data is the data needing dynamically to generate, it usually needs according to net
Page file is from server pull JavaScript script file, then is obtained dynamically from server by JavaScript script file
Data, and utilize dynamic data to carry out webpage to render.
But, at present during rendering the webpage including dynamic data, need time and again by Network Capture data, repeatedly
Network request is the most, causes webpage rendering efficiency low.Such as when rendering webpage, first loading web page files needs 1 network
Request, reloading 1～2 pattern file needs 1～2 network request, and reloading 2～3 script files needs 2～3 secondary nets
Network is asked, and recycling script file loads dynamic data needs 1 network request, needs the time-consuming of 5～7 network requests altogether.
Summary of the invention
Based on this, it is necessary to at present during rendering the webpage including dynamic data network request too much cause net
The problem that page rendering efficiency is low, it is provided that a kind of quick methods of exhibiting of webpage and device.
A kind of quick methods of exhibiting of webpage, including:
Obtain web page files；
According to the first scripted code in described web page files, create global variable and overall situation call back function；
According to the second scripted code in described web page files, load dynamic data in Asynchronous loading mode, and appointment adds
Described overall situation call back function is adjusted back after carrying the success of described dynamic data；Described overall situation call back function is for preserving the dynamic number of loading
According to described global variable；
The loaded in parallel pattern file when loading described dynamic data in Asynchronous loading mode；
Webpage is rendered according to described pattern file and the described dynamic data preserved by described global variable.
A kind of quick exhibiting device of webpage, including:
Web page files load-on module, is used for obtaining web page files；
First scripted code processing module, for according to the first scripted code in described web page files, creates the overall situation and becomes
Amount and overall situation call back function；
Second script codeword processing module, for according to the second scripted code in described web page files, with Asynchronous loading
Mode loads dynamic data, and adjusts back described overall situation call back function after specifying loading described dynamic data success；The described overall situation is returned
Letter of transfer number is for preserving the dynamic data of loading to described global variable；
Pattern file load module, for the literary composition of the loaded in parallel pattern when loading described dynamic data in Asynchronous loading mode
Part；
Webpage rendering module, for according to described pattern file and the described dynamic data that preserved by described global variable
Render webpage.
The quick methods of exhibiting of above-mentioned webpage and device, need 1 network request when by Network Capture web page files, the
One scripted code and the second script code book body are present in web page files, decrease the extra network request obtaining script file
Time-consumingly；Dynamic data uses Asynchronous loading mode, processes with style of loading file in parallel, and network request now time-consumingly depends on
Load 1 network request the biggest in dynamic data and style of loading file.Therefore, the webpage of the application quickly side of displaying
Method and plant network request are time-consuming few, improve the efficiency of displayed web page.
Accompanying drawing explanation
Fig. 1 is the applied environment figure of web page interactive system in an embodiment；
Fig. 2 is the internal structure schematic diagram of terminal in an embodiment；
Fig. 3 is the internal structure schematic diagram of server in an embodiment；
Fig. 4 is the schematic flow sheet of the quick methods of exhibiting of webpage in an embodiment；
Fig. 5 is the schematic flow sheet of the quick methods of exhibiting of webpage in another embodiment；
Fig. 6 is the structured flowchart of the quick exhibiting device of webpage in an embodiment；
Fig. 7 is the structured flowchart of the quick exhibiting device of webpage in another embodiment.
Detailed description of the invention
In order to make the purpose of the present invention, technical scheme and advantage clearer, below in conjunction with drawings and Examples, right
The present invention is further elaborated.Should be appreciated that specific embodiment described herein only in order to explain the present invention, and
It is not used in the restriction present invention.
Fig. 1 is the applied environment figure of web page interactive system in an embodiment.As it is shown in figure 1, this web page interactive system bag
Include terminal 110 and server 120.Wherein, server 120 can be used for storing web page files and providing the universal gateway of dynamic data
Interface routine.Terminal 110 can be used for loading web page files from server 120；According to the first scripted code in web page files, wound
Build global variable and overall situation call back function；According to the second scripted code in web page files, in Asynchronous loading mode from server
120 load dynamic data, and specify readjustment overall situation call back function after loading dynamic data success；Overall situation call back function is used for preserving
The dynamic data loaded is to global variable；When loading dynamic data in Asynchronous loading mode from server 120 style of loading literary composition
Part；Webpage is rendered according to pattern file and the dynamic data preserved by global variable.
Fig. 2 is the internal structure schematic diagram of terminal in an embodiment.As in figure 2 it is shown, this terminal includes by system total
Processor, non-volatile memory medium, built-in storage, network interface, display screen and the input equipment that line connects.Wherein, terminal
Non-volatile memory medium storage have operating system, also include a kind of quick exhibiting device of webpage, the quick exhibiting device of webpage
For realizing a kind of quick methods of exhibiting of webpage.The processor of terminal is used for providing calculating and control ability, supports whole terminal
Operation.The operation that built-in storage in terminal is the quick exhibiting device of the webpage in non-volatile memory medium provides environment.
Can store computer-readable instruction in the built-in storage of terminal, this computer-readable instruction is when executed by, and can make
Processor performs a kind of quick methods of exhibiting of webpage.Network interface is for carrying out network service with server, as obtained from server
Take web page files, load dynamic data from server and from server style of loading file etc..The display screen of terminal can be
LCDs or electric ink display screen etc., input equipment can be the touch layer covered on display screen, it is also possible to is eventually
Button, trace ball or the Trackpad arranged on end housing, it is also possible to be external keyboard, Trackpad or mouse etc..This terminal can
To be mobile phone, panel computer or personal digital assistant or Wearable etc..It will be understood by those skilled in the art that in Fig. 2
The structure illustrated, is only the block diagram of the part-structure relevant to the application scheme, is not intended that and is applied the application scheme
The restriction of terminal thereon, concrete terminal can include than shown in figure more or less of parts, or combine some
Parts, or there is different parts layouts.
Fig. 3 is the internal structure schematic diagram of server in an embodiment.As it is shown on figure 3, this server includes by being
Processor, non-volatile memory medium, built-in storage and the network interface that system bus connects.Wherein, this server is non-volatile
Property storage medium storage has operating system, web page files and CGI(Common gateway interface) program, and this CGI(Common gateway interface) program can be used for
Provide the terminal with dynamic data and pattern file.The processor of this server is used for providing calculating and control ability, supports whole
The operation of server.The built-in storage of this server is that the operation of the CGI(Common gateway interface) program in non-volatile memory medium carries
For environment.The network interface of server is connected communication with outside terminal by network for according to this.Server can be with independent
Server or multiple server composition server cluster realize.It will be understood by those skilled in the art that in Fig. 3 and show
The structure gone out, is only the block diagram of the part-structure relevant to the application scheme, is not intended that and is applied to the application scheme
The restriction of server thereon, concrete server can include than shown in figure more or less of parts, or combine certain
A little parts, or there is different parts layouts.
Fig. 4 is the schematic flow sheet of the quick methods of exhibiting of webpage in an embodiment.With reference to Fig. 4, the present embodiment is with the party
Method is applied to terminal and illustrates, and the method specifically includes following steps:
S402, obtains web page files.
Wherein, web page files is the file for generating webpage, and web page files includes that the HTML for rendering webpage is (super civilian
This markup language) code.Run in terminal and have the application for displayed web page, thus should be used for obtaining web page files by this,
This application can be other application of browser or embedded browser kernel, such as instant messaging application.Terminal can be according to net
Order analyzing web page file from the beginning to the end in page file.Web page files can be the file extending entitled html.
In one embodiment, terminal specifically can initiate web access requests according to web page address to server, receives clothes
The web page files that business device feeds back according to web access requests.In one embodiment, web page files can also be cached to by terminal
This locality, directly reads the web page files of caching when needing to render webpage from this locality.
S404, according to the first scripted code in web page files, creates global variable and overall situation call back function.
Specifically, terminal can resolve the first scripted code, by the semantic global variable that creates of the first scripted code with complete
Office's call back function.Wherein, the first scripted code can be JavaScript scripted code, and this scripted code is for displayed web page
Application primary support, it is not necessary to depend on third party's script file storehouse.Global variable is each position in web page files
Putting the most adducible variable, overall situation call back function is then the call back function that each position all can be called in web page files.
Overall situation call back function is used for as global variable assignment.
S406, according to the second scripted code in web page files, loads dynamic data in Asynchronous loading mode, and appointment adds
Carry readjustment overall situation call back function after dynamic data success；Overall situation call back function becomes to the overall situation for the dynamic data preserving loading
Amount.
Specifically, the second scripted code specifies the dynamic data of required loading, and to specify load mode be asynchronous adding
Load mode.After the first scripted code in terminal analyzing web page file, then resolve the second scripted code, thus use crus secunda
Asynchronous loading mode specified by this code, loads the dynamic data specified by the second scripted code, and by the second script generation
Code is specified and is adjusted back aforesaid overall situation call back function after loading dynamic data success.Wherein, dynamic data is to need dynamically to generate
And it is inserted in web page files the data carrying out resolving and render.Overall situation call back function can be one or more, corresponding the
Two scripted codes can be one or more.
S408, the loaded in parallel pattern file when loading dynamic data in Asynchronous loading mode.
Specifically, dynamic data loads in Asynchronous loading mode, and terminal is during waiting dynamic data to be loaded
Do not block the parsing of web page files, and be to continue with in analyzing web page file after the second scripted code for style of loading literary composition
The code of part, this code specifies the pattern file needing to load, thus realizes the loaded in parallel pattern when loading dynamic data
File.Wherein the code for style of loading file can be the code lattice being specifically designed to style of loading file of HTML agreement
Formula, it is also possible to be scripted code.Pattern file can load to use synchronization load mode or Asynchronous loading mode.Terminal
Using and synchronizing load mode style of loading file is to block, and just may proceed to analyzing web page file after the success of style of loading file.
Pattern file can use css form.
S410, renders webpage according to pattern file and the dynamic data preserved by global variable.
Specifically, terminal, after loading dynamic data success, can trigger the overall situation readjustment that readjustment is specified in step S406
Function, is saved in the global variable created in step S402 by the dynamic data of loading.Terminal becomes at style of loading file
After merit, by primary JavaScript method, the dynamic data preserved by global variable is combined the pattern file loaded and carry out
Render so that webpage is shown.
The quick methods of exhibiting of above-mentioned webpage, needs 1 network request, the first script when by Network Capture web page files
Code and the second script code book body are present in web page files, and the network request decreasing extra acquisition script file is time-consuming；
Dynamic data uses Asynchronous loading mode, processes with style of loading file in parallel, and network request now time-consumingly depends on loading
1 network request the biggest in dynamic data and style of loading file, drastically reduce the area network request time-consuming.
Then, the webpage quick methods of exhibiting network request of the present embodiment is time-consumingly few, improves the efficiency of displayed web page；Weak
Change the dependence between network request, reduced error probability, improve the stability of web page display；Webpage can quickly represent,
And then improve Consumer's Experience, improve website retention ratio.
Fig. 5 is the schematic flow sheet of the quick methods of exhibiting of webpage in another embodiment.With reference to Fig. 5, the method is specifically wrapped
Include following steps:
S502, obtains web page files.
S504, according to the first scripted code in web page files, creates the self-defining function conduct being subordinated to global object
Overall situation call back function, and establishment is subordinated to the custom variable of global object as global variable in self-defining function；Wherein,
Self-defining function is used for the data assignment of input self-defining function to custom variable.
Wherein, step S504 is the concrete steps of above-mentioned steps S404.First scripted code can be entered by script tag
Line identifier.Such as first scripted code can be specifically scripted code as follows:
<script type=" text/javascript ">
Window.jsonp1=function (data)
Window.data=data；
}；
</script>
In above-mentioned first scripted code,<script>with</script>it is a pair script tag, is used for identifying this pair
Scripted code in the middle of script tag.Type=" text/javascript " represents employing JavaScript script.Window is
One global object, window.jsonp1 represents the self-defining function being subordinated to global object window, and this self-defining function can
It is called in the overall situation in the way of by window.jsonp1, is overall situation call back function.Terminal is at overall situation call back function
The logic content of available functions name function definition window.jsonp1 in window.jsonp1: create and be subordinated to global object
The custom variable window.data of window, and by the data data assignment of input self-defining function to overall situation independent variable
window.data。
S506, uses the Asynchronous loading mode of configuration in the script tag of the second scripted code, loads in script tag
Dynamic data corresponding to chained address.
S508, specifies according to the call back function name in chained address and loads readjustment overall situation readjustment letter after dynamic data success
Number.
Wherein, step S506 and step S508 are the concrete steps of above-mentioned steps S406.Second scripted code is the most permissible
It is scripted code as follows:
< script type=" text/javascript " async=" async " src=" http://xxx.com/
data.cgi？Call back＝jsonp1"></script>
In above-mentioned second scripted code, script tag<script>is configured with async=" async ", represents and use
Asynchronous loading mode.Src attribute is used for the chained address setting the dynamic data loaded as http://xxx.com/
data.cgi？Callback=jsonp1, this chained address represents calls on the network site that http://xxx.com/ is identified
Data.cgi dynamically generate dynamic data.Call back function name jsonp1 in chained address specifies and is loading dynamic data
Needing, after data success, the overall call back function returned to is window.jsonp1.Call back function name jsonp1 in chained address
Identical with the function name of the overall call back function window.jsonp1 of aforementioned definitions, to guarantee to adjust after loading dynamic data success
With the overall call back function specified.
S510, is loading dynamic data parallel to synchronize load mode style of loading file in Asynchronous loading mode.
Specifically, load dynamic data and style of loading file is parallel, and pattern file is to synchronize load mode
Load.Wherein, the code for style of loading file can be as follows:
<link rel=" stylesheet " href=" ./index.css ">
In above-mentioned code, link is for defining web page files in the relation of external resource；Rel=" stylesheet " represents
Link is the pattern file of web page files；Href=" ./index.css " represents the chained address of the pattern file loaded
It is " ./index.css ".Above-mentioned code is not specified by load mode, represents the synchronization load mode using acquiescence.
S512, according to the third scenario code in web page files, judges that dynamic data is after the success of style of loading file
No it is successfully loaded.The most then perform step S514；If it is not, then perform step S516.
Specifically, the third scenario code definition step S512 content to step S516.Terminal can be according to global variable
Whether it is assigned and judges whether dynamic data is successfully loaded, if concrete global variable is assigned, judge that dynamic data is become
Merit loads, if global variable is not assigned, judges that dynamic data is not successfully loaded.
Illustrating, the partial content of third scenario code can be specifically scripted code as follows:
Wherein, " // " content representation below annotation.If (window.data) expression judges global variable
Whether window.data is assigned, if then representing that dynamic data is successfully loaded, if otherwise representing, dynamic data is not by success
Load.
S514, renders webpage according to pattern file and the dynamic data preserved by global variable.
Specifically, after the success of style of loading file, if it is determined that dynamic data is successfully loaded, needed for illustrating to render webpage
Dynamic data and pattern file be all ready for, can directly carry out webpage and render.Terminal is dynamic by preserved by global variable
State data, are inserted into the position specified in web page files, and combine CSS and carry out rendering of webpage so that webpage is opened up
Show.Terminal specifically can use document.body.appendChild function, document.body.insertBefore function
Or the dynamic data of preservation is inserted in web page files by document.body.innerHTML function etc..
S516, redefines overall situation call back function for direct according to loading successful dynamic number after loading dynamic data success
Render webpage according to pattern file, and after waiting that dynamic data is successfully loaded, perform the overall call back function redefined.
Specifically, after the success of style of loading file, if it is determined that dynamic data is not successfully loaded, illustrate the most offhand
Render well the dynamic data needed for webpage, now need to continue waiting for dynamic data and load until loading successfully.The overall situation is adjusted back
Function redefines so that when the overall call back function redefined is performed, and terminal can be directly according to loading successful dynamic number
Webpage is rendered, it is not necessary to again the dynamic data that success loads is kept in global variable according to pattern file.
In the present embodiment, owing to pagefile resolves the most in order, first definition is used for preserving dynamic data
Overall call back function, utilize global object to preserve the dynamic data of loading, for follow-up use.Due to adding of dynamic data
Carry and the loading of pattern file be asynchronous, dynamic data and pattern file which kind of first to have loaded be unknown, for two kinds
Different situations provides different settling modes respectively: when dynamic data loads successfully prior to pattern file, available by entirely
Dynamic data and pattern file that office's variable is temporary render webpage；When pattern file loads successfully prior to dynamic data, can
Directly utilize the successful dynamic data of loading and pattern file carries out webpage and renders, there is fault-tolerance.
In a concrete application scenarios, the partial content of web page files can be as follows shown in code:
Wherein, the first scripted code and the second scripted code are positioned at the head of web page files in order；Third scenario code
It is positioned at the main part of web page files.Label<head>with</head>for identifying the head of web page files, label<body>
With</body>for identifying the main part of web page files.The head of web page files describes each attribute of web page files
And information, such as title and the relation etc. with other webpages.The content in head in web page files typically will not show
In the webpage rendered.
Fig. 6 is the structured flowchart of the quick exhibiting device of webpage 600 in an embodiment.With reference to Fig. 6, webpage quickly shows dress
Put 600 to include: web page files load-on module the 610, first scripted code processing module the 620, second script codeword processing module
630, pattern file load module 640 and webpage rendering module 650.
Web page files load-on module 610, is used for obtaining web page files.
Wherein, web page files is the file for generating webpage, and web page files includes that the HTML for rendering webpage is (super civilian
This markup language) code.Web page files load-on module 610 can be by should be somebody's turn to do for obtaining web page files for displayed web page
Application can be other application of browser or embedded browser kernel, such as instant messaging application.Web page files loads mould
Block 610 can be according to order analyzing web page file from the beginning to the end in web page files.Web page files can be to extend entitled html
File.
In one embodiment, web page files load-on module 610 is particularly used in and initiates to server according to web page address
Web access requests, receives the web page files that server feeds back according to web access requests.In one embodiment, web page files
Load-on module 610 can be also used for web page files is cached to this locality, directly reads caching from this locality when needs render webpage
Web page files.
First scripted code processing module 620, for according to the first scripted code in web page files, creates global variable
With overall situation call back function.
Specifically, the first scripted code processing module 620 can be used for resolving the first scripted code, by the first scripted code
Semantic create global variable and overall situation call back function.Wherein, the first scripted code can be JavaScript scripted code, should
Scripted code be for displayed web page application primary support, it is not necessary to depend on third party's script file storehouse.The overall situation becomes
Amount is the most adducible variable in each position in web page files, and overall situation call back function is then each position in web page files
The call back function that all can call.Overall situation call back function is used for as global variable assignment.
Second script codeword processing module 630, for according to the second scripted code in web page files, with Asynchronous loading side
Formula loads dynamic data, and specifies readjustment overall situation call back function after loading dynamic data success；Overall situation call back function is used for preserving
The dynamic data loaded is to global variable.
Specifically, the second scripted code specifies the dynamic data of required loading, and to specify load mode be asynchronous adding
Load mode.After the first scripted code in the first scripted code processing module 620 analyzing web page file, the second scripted code
Processing module 630 resolves the second scripted code again, thus uses the Asynchronous loading mode specified by the second scripted code, loads the
Dynamic data specified by two scripted codes, and adjust back aforementioned after loading dynamic data success by the second scripted code appointment
Overall call back function.Wherein, dynamic data needs dynamically to be created and inserted in web page files resolving and rendering
Data.
Pattern file load module 640, for the literary composition of the loaded in parallel pattern when loading dynamic data in Asynchronous loading mode
Part.
Specifically, dynamic data loads in Asynchronous loading mode, and Asynchronous loading mode is loading the mistake of dynamic data
Journey do not blocks the parsing of web page files, and be to continue with in analyzing web page file after the second scripted code for adding load sample
The code of formula file, this code specifies the pattern file needing to load, thus realizes the loaded in parallel when loading dynamic data
Pattern file.Wherein the code for style of loading file can be the code being specifically designed to style of loading file of HTML agreement
Form, it is also possible to be scripted code.Pattern file can load to use synchronization load mode or Asynchronous loading mode.Sample
Formula file load module 640 uses and synchronizes load mode style of loading file is to block, just meeting after the success of style of loading file
Continue analyzing web page file.Pattern file can use css form.
Webpage rendering module 650, for rendering webpage according to pattern file and the dynamic data preserved by global variable.
Specifically, webpage rendering module 650, after loading dynamic data success, can trigger the overall situation readjustment letter that readjustment is specified
Number, is saved in global variable by the dynamic data of loading.Webpage rendering module 650, will be by entirely after the success of style of loading file
The dynamic data that office's variable is preserved combines the pattern file loaded and renders so that webpage is shown.
The quick exhibiting device of above-mentioned webpage, needs 1 network request, the first script when by Network Capture web page files
Code and the second script code book body are present in web page files, and the network request decreasing extra acquisition script file is time-consuming；
Dynamic data uses Asynchronous loading mode, processes with style of loading file in parallel, and network request now time-consumingly depends on loading
1 network request the biggest in dynamic data and style of loading file, drastically reduce the area network request time-consuming.Then,
The webpage quick methods of exhibiting network request of the present embodiment is time-consumingly few, improves the efficiency of displayed web page；Weaken network request
Between dependence, reduce error probability, improve the stability of web page display；Webpage can quickly represent, and then improves use
Family is experienced, and improves website retention ratio.
In one embodiment, the first scripted code processing module 620 is for according to the first script generation in web page files
Code, creates and is subordinated to the self-defining function of global object as overall situation call back function, and creates in self-defining function and be subordinated to
The custom variable of global object is as global variable；Wherein, self-defining function is for composing the data of input self-defining function
Value is to custom variable.
First scripted code can be identified by script tag.Such as first scripted code can be specifically following institute
Show scripted code:
<script type=" text/javascript ">
Window.jsonp1=function (data)
Window.data=data；
}；
</script>
In above-mentioned first scripted code,<script>with</script>it is a pair script tag, is used for identifying this pair
Scripted code in the middle of script tag.Type=" text/javascript " represents employing JavaScript script.Window is
One global object, window.jsonp1 represents the self-defining function being subordinated to global object window, and this self-defining function can
It is called in the overall situation in the way of by window.jsonp1, is overall situation call back function.First scripted code processing module 620
The logic content of available functions name function definition window.jsonp1 in overall situation call back function window.jsonp1: create
It is subordinated to the custom variable window.data of global object window, and by the data data assignment of input self-defining function
To overall situation independent variable window.data.
In the present embodiment, owing to pagefile resolves the most in order, first definition is used for preserving dynamic data
Overall call back function, utilize global object to preserve the dynamic data of loading, for follow-up use.
In one embodiment, the second script codeword processing module 630 is for using the script tag of the second scripted code
The Asynchronous loading mode of middle configuration, loads the dynamic data corresponding to chained address in script tag；According in chained address
Call back function name specify load dynamic data success after readjustment the overall situation call back function.
Second scripted code can be specifically scripted code as follows:
< script type=" text/javascript " async=" async " src=" http://xxx.com/
data.cgi？Callback＝jsonp1"></script>
In above-mentioned second scripted code, script tag<script>is configured with async=" async ", represents and use
Asynchronous loading mode.Src attribute is used for the chained address setting the dynamic data loaded as http://xxx.com/
data.cgi？Callback=jsonp1, this chained address represents calls on the network site that http://xxx.com/ is identified
Data.cgi dynamically generate dynamic data.Call back function name jsonp1 in chained address specifies and is loading dynamic data
Needing, after data success, the overall call back function returned to is window.jsonp1.Call back function name jsonp1 in chained address
Identical with the function name of the overall call back function window.jsonp1 of aforementioned definitions, to guarantee to adjust after loading dynamic data success
With the overall call back function specified.
In one embodiment, pattern file loads to synchronize load mode.With reference to Fig. 7, the quick exhibiting device of webpage 600
Also include: third scenario codeword processing module 660, for according to the third scenario code in web page files, at style of loading literary composition
Judge whether dynamic data is successfully loaded after part success；The most then notice webpage rendering module 650, makes webpage rendering module
650 render webpage according to pattern file and the dynamic data preserved by global variable；If it is not, then redefine overall situation call back function
For directly rendering webpage according to the successful dynamic data of loading and pattern file after loading dynamic data success and dynamic waiting
After state data are successfully loaded, perform the overall call back function redefined.
Whether third scenario codeword processing module 660 specifically can be assigned whether judge dynamic data according to global variable
It is successfully loaded, if concrete global variable is assigned, judges that dynamic data is successfully loaded, if global variable is not assigned,
Judge that dynamic data is not successfully loaded.
After the success of style of loading file, if it is determined that dynamic data is successfully loaded, illustrate to render needed for webpage is dynamic
Data and pattern file are all ready for, and can directly carry out webpage and render.Third scenario codeword processing module 660 can be used for by by
The dynamic data that global variable is preserved, is inserted into the position specified in web page files, and combines CSS and carry out webpage
Render so that webpage is shown.Third scenario codeword processing module 660 is particularly used in employing
Document.body.appendChild function, document.body.insertBefore function or
The dynamic data of preservation is inserted in web page files by document.body.innerHTML function etc..
After the success of style of loading file, if it is determined that dynamic data is not successfully loaded, illustrate to be not yet ready for rendering
Dynamic data needed for webpage, now needs to continue waiting for dynamic data and loads until loading successfully.By overall situation call back function weight
Definition so that when the overall call back function redefined is performed, third scenario codeword processing module 660 can be directly according to loading
Successfully dynamic data and pattern file render webpage, it is not necessary to again the dynamic data that success loads is kept in global variable.
In the present embodiment, owing to the loading of dynamic data and the loading of pattern file are asynchronous, dynamic data and pattern
File which kind of first to have loaded be unknown, provide different settling modes respectively for two kinds of different situations: work as dynamic number
According to when loading successfully prior to pattern file, the available dynamic data kept in by global variable and pattern file are to render webpage；
When pattern file loads successfully prior to dynamic data, the successful dynamic data of loading can be directly utilized and pattern file carries out net
Page renders, and has fault-tolerance.
In one embodiment, the first scripted code and the second scripted code are positioned at the head of web page files in order；The
Three scripted codes are positioned at the main part of web page files.
One of ordinary skill in the art will appreciate that all or part of flow process realizing in above-described embodiment method, be permissible
Instructing relevant hardware by computer program to complete, this program can be stored in a non-volatile computer and can read storage
In medium, this program is upon execution, it may include such as the flow process of the embodiment of above-mentioned each method.Wherein, this storage medium can be magnetic
Dish, CD, read-only store-memory body (Read-Only Memory, ROM) etc..
Each technical characteristic of above example can combine arbitrarily, for making description succinct, not to above-described embodiment
In all possible combination of each technical characteristic be all described, but, as long as there is not lance in the combination of these technical characteristics
Shield, is all considered to be the scope that this specification is recorded.
Above example only have expressed the several embodiments of the present invention, and it describes more concrete and detailed, but can not
Therefore it is construed as limiting the scope of the patent.It should be pointed out that, for the person of ordinary skill of the art,
On the premise of present inventive concept, it is also possible to make some deformation and improvement, these broadly fall into protection scope of the present invention.
Therefore, the protection domain of patent of the present invention should be as the criterion with claims.
Claims (10)
1. the quick methods of exhibiting of webpage, including:
Obtain web page files；
According to the first scripted code in described web page files, create global variable and overall situation call back function；
According to the second scripted code in described web page files, load dynamic data in Asynchronous loading mode, and specify loading institute
Described overall situation call back function is adjusted back after stating dynamic data success；Described overall situation call back function arrives for the dynamic data preserving loading
Described global variable；
The loaded in parallel pattern file when loading described dynamic data in Asynchronous loading mode；
Webpage is rendered according to described pattern file and the described dynamic data preserved by described global variable.
Method the most according to claim 1, it is characterised in that described according to the first script generation in described web page files
Code, the step creating global variable and overall situation call back function includes:
According to the first scripted code in described web page files, establishment is subordinated to the self-defining function of global object and returns as the overall situation
Letter of transfer number, and establishment is subordinated to the custom variable of described global object as global variable in described self-defining function；Its
In, described self-defining function is used for the data assignment by inputting described self-defining function to described custom variable.
Method the most according to claim 1, it is characterised in that described according to the second script generation in described web page files
Code, loads dynamic data in Asynchronous loading mode, and adjusts back described overall situation readjustment letter after specifying loading described dynamic data success
The step of number includes:
Use the Asynchronous loading mode of configuration in the script tag of the second scripted code, load the chain ground connection in described script tag
Dynamic data corresponding to location；
Specify according to the call back function name in described chained address and after loading the success of described dynamic data, adjust back described overall situation readjustment
Function.
Method the most according to claim 1, it is characterised in that described pattern file loads to synchronize load mode；Described
Method also includes:
According to the third scenario code in described web page files, after loading the success of described pattern file, judge described dynamic data
Whether it is successfully loaded；
The most then perform described to render net according to described pattern file and the described dynamic data preserved by described global variable
The step of page；
If it is not, then redefine described overall situation call back function for direct according to loading successfully after loading the success of described dynamic data
Described dynamic data and described pattern file render webpage, and after waiting that described dynamic data is successfully loaded, perform to reset
The described overall situation call back function of justice.
Method the most according to claim 4, it is characterised in that described first scripted code and described second scripted code are pressed
Order is positioned at the head of described web page files；Described third scenario code is positioned at the main part of described web page files.
6. the quick exhibiting device of webpage, it is characterised in that including:
Web page files load-on module, is used for obtaining web page files；
First scripted code processing module, for according to the first scripted code in described web page files, create global variable and
Overall situation call back function；
Second script codeword processing module, for according to the second scripted code in described web page files, in Asynchronous loading mode
Load dynamic data, and specify loading described dynamic data success after adjust back described the overall situation call back function；Described overall situation readjustment letter
Number is for preserving the dynamic data of loading to described global variable；
Pattern file load module, for the loaded in parallel pattern file when loading described dynamic data in Asynchronous loading mode；
Webpage rendering module, for rendering according to described pattern file and the described dynamic data preserved by described global variable
Webpage.
Device the most according to claim 6, it is characterised in that described first scripted code processing module is for according to described
The first scripted code in web page files, creates and is subordinated to the self-defining function of global object as overall situation call back function, and
Described self-defining function creates and is subordinated to the custom variable of described global object as global variable；Wherein, make by oneself described in
Justice function is used for the data assignment by inputting described self-defining function to described custom variable.
Device the most according to claim 6, it is characterised in that described second script codeword processing module is used for employing second
The Asynchronous loading mode of configuration in the script tag of scripted code, loads moving corresponding to the chained address in described script tag
State data；Adjust back the described overall situation after specifying loading described dynamic data success according to the call back function name in described chained address to return
Letter of transfer number.
Device the most according to claim 6, it is characterised in that described pattern file loads to synchronize load mode；Described
Device also includes:
Third scenario codeword processing module, for according to the third scenario code in described web page files, loading described pattern
Judge whether described dynamic data is successfully loaded after file success；The most then notify described webpage rendering module, make described net
Page rendering module renders webpage according to described pattern file and the described dynamic data preserved by described global variable；If it is not,
Then redefine described overall situation call back function for after loading the success of described dynamic data directly according to load successful described dynamically
Data and described pattern file render webpage, and after waiting that described dynamic data is successfully loaded, it is described that execution redefines
Overall situation call back function.
Device the most according to claim 9, it is characterised in that described first scripted code and described second scripted code
It is positioned at the head of described web page files in order；Described third scenario code is positioned at the main part of described web page files.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201610633106.4A CN106294658B (en) | 2016-08-04 | 2016-08-04 | Webpage quick display method and device |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201610633106.4A CN106294658B (en) | 2016-08-04 | 2016-08-04 | Webpage quick display method and device |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN106294658A true CN106294658A (en) | 2017-01-04 |
| CN106294658B CN106294658B (en) | 2020-09-04 |
Family
ID=57664728
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201610633106.4A Active CN106294658B (en) | 2016-08-04 | 2016-08-04 | Webpage quick display method and device |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN106294658B (en) |
Cited By (13)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107329785A (en) * | 2017-06-27 | 2017-11-07 | 郑州云海信息技术有限公司 | A kind of method and system of dynamic load JavaScript modules |
| CN107798088A (en) * | 2017-10-20 | 2018-03-13 | 江苏电力信息技术有限公司 | A kind of dynamic loading method for being used for micro- application data and the page |
| CN108334562A (en) * | 2018-01-09 | 2018-07-27 | 阿里巴巴集团控股有限公司 | A kind of page display method and device |
| CN108509228A (en) * | 2017-11-10 | 2018-09-07 | 平安普惠企业管理有限公司 | Method, terminal device and the computer readable storage medium of loading page |
| CN109344351A (en) * | 2018-10-18 | 2019-02-15 | 网宿科技股份有限公司 | Webpage loading method, intermediate server and webpage loading system |
| CN109582890A (en) * | 2018-10-25 | 2019-04-05 | 平安科技（深圳）有限公司 | Page loading method, device, computer equipment and storage medium |
| CN110362771A (en) * | 2019-07-26 | 2019-10-22 | 北京明略软件系统有限公司 | Method and device, storage medium and the electronic device of page cache |
| CN110750244A (en) * | 2019-09-25 | 2020-02-04 | 贝壳技术有限公司 | Code synchronization method and device, electronic equipment and storage medium |
| CN110851756A (en) * | 2019-10-12 | 2020-02-28 | 平安普惠企业管理有限公司 | Page loading method and device, computer readable storage medium and terminal equipment |
| CN112685674A (en) * | 2020-12-30 | 2021-04-20 | 百果园技术(新加坡)有限公司 | Feature evaluation method and device influencing user retention |
| KR20220026617A (en) * | 2020-08-21 | 2022-03-04 | 쿠팡 주식회사 | Systems and methods for loading websites with multiple items |
| CN114567623A (en) * | 2022-02-20 | 2022-05-31 | 中国银联股份有限公司 | Page display method and device |
| CN114741126A (en) * | 2022-03-15 | 2022-07-12 | 北京贝壳时代网络科技有限公司 | Applet running method, device, electronic equipment, storage medium and program product |
Family Cites Families (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101291335B (en) * | 2008-06-13 | 2011-05-11 | 中兴通讯股份有限公司 | Method and apparatus for acquiring dynamic data of server based on browser |
| US8713424B1 (en) * | 2009-11-04 | 2014-04-29 | Google Inc. | Asynchronous loading of scripts in web pages |
| CN104111836A (en) * | 2014-07-14 | 2014-10-22 | 浪潮软件集团有限公司 | Method for collecting and processing asynchronous loading data by network |
| CN105630524B (en) * | 2014-10-31 | 2019-04-12 | 广州市动景计算机科技有限公司 | Web page text analytic method, device and mobile terminal |
| CN104484383B (en) * | 2014-12-10 | 2017-11-14 | 北京国双科技有限公司 | JS document handling methods and device |
-
2016
- 2016-08-04 CN CN201610633106.4A patent/CN106294658B/en active Active
Cited By (17)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107329785A (en) * | 2017-06-27 | 2017-11-07 | 郑州云海信息技术有限公司 | A kind of method and system of dynamic load JavaScript modules |
| CN107798088A (en) * | 2017-10-20 | 2018-03-13 | 江苏电力信息技术有限公司 | A kind of dynamic loading method for being used for micro- application data and the page |
| CN108509228A (en) * | 2017-11-10 | 2018-09-07 | 平安普惠企业管理有限公司 | Method, terminal device and the computer readable storage medium of loading page |
| CN108334562A (en) * | 2018-01-09 | 2018-07-27 | 阿里巴巴集团控股有限公司 | A kind of page display method and device |
| CN109344351A (en) * | 2018-10-18 | 2019-02-15 | 网宿科技股份有限公司 | Webpage loading method, intermediate server and webpage loading system |
| CN109582890A (en) * | 2018-10-25 | 2019-04-05 | 平安科技（深圳）有限公司 | Page loading method, device, computer equipment and storage medium |
| CN110362771A (en) * | 2019-07-26 | 2019-10-22 | 北京明略软件系统有限公司 | Method and device, storage medium and the electronic device of page cache |
| CN110750244B (en) * | 2019-09-25 | 2023-09-29 | 贝壳技术有限公司 | Code synchronization method and device, electronic equipment and storage medium |
| CN110750244A (en) * | 2019-09-25 | 2020-02-04 | 贝壳技术有限公司 | Code synchronization method and device, electronic equipment and storage medium |
| CN110851756A (en) * | 2019-10-12 | 2020-02-28 | 平安普惠企业管理有限公司 | Page loading method and device, computer readable storage medium and terminal equipment |
| KR20220026617A (en) * | 2020-08-21 | 2022-03-04 | 쿠팡 주식회사 | Systems and methods for loading websites with multiple items |
| KR102396793B1 (en) | 2020-08-21 | 2022-05-13 | 쿠팡 주식회사 | Systems and methods for loading websites with multiple items |
| US11568017B2 (en) | 2020-08-21 | 2023-01-31 | Coupang Corp. | Systems and methods for loading websites with multiple items |
| CN112685674A (en) * | 2020-12-30 | 2021-04-20 | 百果园技术(新加坡)有限公司 | Feature evaluation method and device influencing user retention |
| CN114567623A (en) * | 2022-02-20 | 2022-05-31 | 中国银联股份有限公司 | Page display method and device |
| CN114567623B (en) * | 2022-02-20 | 2023-09-08 | 中国银联股份有限公司 | Page display method and device |
| CN114741126A (en) * | 2022-03-15 | 2022-07-12 | 北京贝壳时代网络科技有限公司 | Applet running method, device, electronic equipment, storage medium and program product |
Also Published As
| Publication number | Publication date |
|---|---|
| CN106294658B (en) | 2020-09-04 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN106294658A (en) | The quick methods of exhibiting of webpage and device | |
| CN108038134B (en) | Page display method and device, storage medium and electronic equipment | |
| US8527862B2 (en) | Methods for making ajax web applications bookmarkable and crawlable and devices thereof | |
| US12010165B2 (en) | Cross-platform module for loading across a plurality of device types | |
| CN110083383A (en) | Browser style compatibility method, device, computer equipment and storage medium | |
| US20150317042A1 (en) | System and Methods for Loading an Application and its Modules in a Client Device | |
| CN110309461B (en) | Page display method and device | |
| US20170315982A1 (en) | Method, device and mobile terminal for webpage text parsing | |
| US9426201B2 (en) | Transforming application cached template using personalized content | |
| JP7538948B2 (en) | Image processing method and apparatus, and computer-readable storage medium | |
| US10339204B2 (en) | Converting electronic documents having visible objects | |
| CN113382083A (en) | Webpage screenshot method and device | |
| CN110020242A (en) | A kind of document reading progress synchronous method and device based on Web | |
| CN113760276A (en) | Method and device for generating page code | |
| TW201525740A (en) | Method and device for displaying web page and computer-readable storage medium | |
| CN117390326A (en) | Page management method, device, equipment and storage medium | |
| RU2634221C2 (en) | Method and device for drawing presentation of electronic document on screen | |
| US20140331117A1 (en) | Application-based dependency graph | |
| KR101541089B1 (en) | Method, web-editor and computer-readable recording medium for image processing | |
| CN110020320A (en) | The method and apparatus for caching page pictures | |
| CN114528510A (en) | Webpage data processing method and device, electronic equipment and medium | |
| CN115186207A (en) | Method and device for loading page resources and electronic equipment | |
| CN113961298A (en) | Page switching method, device, equipment and medium | |
| CN110992131B (en) | Form processing method, form processing device and storage medium | |
| US9690783B2 (en) | Image conversion and method for converting text in an image into a targeted language |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |