CN106294658B - Webpage quick display method and device - Google Patents
Webpage quick display method and device Download PDFInfo
- Publication number
- CN106294658B CN106294658B CN201610633106.4A CN201610633106A CN106294658B CN 106294658 B CN106294658 B CN 106294658B CN 201610633106 A CN201610633106 A CN 201610633106A CN 106294658 B CN106294658 B CN 106294658B
- Authority
- CN
- China
- Prior art keywords
- file
- webpage
- dynamic data
- global
- loaded
- 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.)
- Active
Links
Images
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 invention relates to a method and a device for quickly displaying a webpage, wherein the method comprises the following steps: acquiring a webpage file; creating a global variable and a global callback function according to a first script code in the webpage file; loading dynamic data in an asynchronous loading mode according to a second script code in the webpage file, and calling back the global callback function after the dynamic data is loaded successfully; the global callback function is used for saving the loaded dynamic data to the global variable; loading the style files in parallel when the dynamic data is loaded in an asynchronous loading mode; and rendering the webpage according to the style file and the dynamic data saved by the global variable. The webpage quick display method and device improve webpage display efficiency.
Description
Technical Field
The invention relates to the technical field of internet, in particular to a method and a device for quickly displaying a webpage.
Background
The webpage is a webpage which is rendered according to a webpage file after the webpage file is acquired from a server. The data in the web page includes static data and dynamic data. The static data refers to data which directly exists in a webpage file and can be directly rendered and displayed, such as fixed text and images in a webpage. The dynamic data is data that needs to be dynamically generated, and usually a JavaScript script file needs to be pulled from a server according to a web page file, and then the dynamic data is obtained from the server through the JavaScript script file, and the web page is rendered by using the dynamic data.
However, in the process of rendering a web page including dynamic data, data needs to be acquired through a network frequently, and multiple network requests take much time, so that the web page rendering efficiency is low. For example, when a webpage is rendered, 1 network request is needed for loading a webpage file, 1-2 network requests are needed for loading 1-2 style files, 2-3 network requests are needed for loading 2-3 script files, 1 network request is needed for loading dynamic data by using the script files, and the time consumption of 5-7 network requests is needed in total.
Disclosure of Invention
Therefore, a method and an apparatus for quickly displaying a webpage are needed to solve the problem that the rendering efficiency of the webpage is low due to excessive network requests in the process of rendering the webpage including dynamic data.
A webpage quick display method comprises the following steps:
acquiring a webpage file;
creating a global variable and a global callback function according to a first script code in the webpage file;
loading dynamic data in an asynchronous loading mode according to a second script code in the webpage file, and calling back the global callback function after the dynamic data is loaded successfully; the global callback function is used for saving the loaded dynamic data to the global variable;
loading the style files in parallel when the dynamic data is loaded in an asynchronous loading mode;
and rendering the webpage according to the style file and the dynamic data saved by the global variable.
A quick webpage display device comprises:
the webpage file loading module is used for acquiring a webpage file;
the first script code processing module is used for creating a global variable and a global callback function according to the first script code in the webpage file;
the second script code processing module is used for loading dynamic data in an asynchronous loading mode according to second script codes in the webpage file and calling back the global callback function after the dynamic data is loaded successfully; the global callback function is used for saving the loaded dynamic data to the global variable;
the style file loading module is used for loading the style files in parallel when the dynamic data is loaded in an asynchronous loading mode;
and the webpage rendering module is used for rendering the webpage according to the style file and the dynamic data stored by the global variable.
According to the method and the device for quickly displaying the webpage, when the webpage file is acquired through the network, the network request needs 1 time, the first script code and the second script code exist in the webpage file, and the time consumed for additionally acquiring the network request of the script file is reduced; the dynamic data is loaded in an asynchronous mode and is processed in parallel with the loading of the style file, and the time consumption of the network request at the moment depends on 1 time of network request with larger time consumption in the loading of the dynamic data and the loading of the style file. Therefore, the webpage quick display method and device have the advantages that the time consumption of network requests is low, and the webpage display efficiency is improved.
Drawings
FIG. 1 is a diagram of an application environment of a web page interaction system in one embodiment;
fig. 2 is a schematic diagram of the internal structure of the terminal in one embodiment;
FIG. 3 is a diagram illustrating an internal architecture of a server according to an embodiment;
FIG. 4 is a flowchart illustrating a method for quickly displaying a web page in one embodiment;
FIG. 5 is a flowchart illustrating a method for quickly displaying a web page in another embodiment;
FIG. 6 is a block diagram of an embodiment of a device for quickly displaying a web page;
FIG. 7 is a block diagram of a fast webpage display apparatus according to another embodiment.
Detailed Description
In order to make the objects, technical solutions and advantages of the present invention more apparent, the present invention is described in further detail below with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative of the invention and are not intended to limit the invention.
FIG. 1 is a diagram of an application environment of the web page interaction system in one embodiment. As shown in fig. 1, the web page interacting system includes a terminal 110 and a server 120. Among other things, the server 120 may be used to store web page files and general gateway interface programs that provide dynamic data. The terminal 110 may be used to load a web page file from the server 120; according to a first script code in a webpage file, creating a global variable and a global callback function; loading dynamic data from the server 120 in an asynchronous loading mode according to a second script code in the webpage file, and calling back a global callback function after the dynamic data is specified to be loaded successfully; the global callback function is used for storing the loaded dynamic data to a global variable; loading the style file from the server 120 while loading the dynamic data in an asynchronous loading manner; and rendering the webpage according to the style file and the dynamic data saved by the global variable.
Fig. 2 is a schematic diagram of an internal structure of the terminal in one embodiment. As shown in fig. 2, the terminal includes a processor, a nonvolatile storage medium, an internal memory, a network interface, a display screen, and an input device, which are connected through a system bus. The terminal comprises a nonvolatile storage medium and a webpage quick display device, wherein the nonvolatile storage medium of the terminal stores an operating system, and the webpage quick display device is used for realizing a webpage quick display method. The processor of the terminal is used to provide computing and control capabilities to support the operation of the entire terminal. The internal memory in the terminal provides an environment for the operation of the webpage quick display device in the nonvolatile storage medium. The internal memory of the terminal may store computer readable instructions, and when the computer readable instructions are executed by the processor, the processor may execute a method for quickly displaying a webpage. The network interface is used for network communication with the server, such as acquiring a webpage file from the server, loading dynamic data from the server, loading a style file from the server and the like. The display screen of the terminal can be a liquid crystal display screen or an electronic ink display screen, and the input device can be a touch layer covered on the display screen, a key, a track ball or a touch pad arranged on a shell of the terminal, or an external keyboard, a touch pad or a mouse. The terminal can be a mobile phone, a tablet computer, a personal digital assistant or a wearable device. Those skilled in the art will appreciate that the configuration shown in fig. 2 is a block diagram of only a portion of the configuration associated with the present application and does not constitute a limitation on the terminal to which the present application is applied, and that a particular terminal may include more or less components than those shown, or may combine certain components, or have a different arrangement of components.
Fig. 3 is a schematic diagram of an internal structure of the server in one embodiment. As shown in fig. 3, the server includes a processor, a non-volatile storage medium, an internal memory, and a network interface connected through a system bus. The non-volatile storage medium of the server stores an operating system, a webpage file and a general gateway interface program, and the general gateway interface program can be used for providing dynamic data and a style file for the terminal. The processor of the server is used for providing calculation and control capacity and supporting the operation of the whole server. The internal memory of the server provides an environment for the running of the universal gateway interface program in the non-volatile storage medium. The network interface of the server is used for communicating with an external terminal through a network connection. The server may be implemented as a stand-alone server or as a server cluster consisting of a plurality of servers. Those skilled in the art will appreciate that the architecture shown in fig. 3 is a block diagram of only a portion of the architecture associated with the subject application, and does not constitute a limitation on the servers to which the subject application applies, as a particular server may include more or less components than those shown, or may combine certain components, or have a different arrangement of components.
FIG. 4 is a flowchart illustrating a method for quickly displaying a web page in one embodiment. Referring to fig. 4, the present embodiment is described by applying the method to a terminal, and the method specifically includes the following steps:
s402, acquiring the webpage file.
Among them, a web page file is a file for generating a web page, and the web page file includes HTML (hypertext markup language) code for rendering the web page. The terminal runs an application for displaying a webpage, so that a webpage file is obtained through the application, and the application can be a browser or other applications embedded with a browser kernel, such as an instant messaging application. The terminal can analyze the webpage files from beginning to end in the webpage files. The web page file may be a file with an html extension.
In an embodiment, the terminal may specifically initiate a web page access request to the server according to the web page address, and receive a web page file fed back by the server according to the web page access request. In one embodiment, the terminal may also cache the web page file locally, and directly read the cached web page file from the local when the web page needs to be rendered.
S404, creating a global variable and a global callback function according to the first script code in the webpage file.
Specifically, the terminal may parse the first script code, and create a global variable and a global callback function through semantics of the first script code. The first script code can be a JavaScript script code which is native supported by an application for displaying the webpage and does not need to depend on a third-party script file library. The global variable is a variable which can be referred to at each position in the webpage file, and the global callback function is a callback function which can be called at each position in the webpage file. The global callback function is used for assigning values to global variables.
S406, loading dynamic data in an asynchronous loading mode according to a second script code in the webpage file, and calling back a global callback function after the dynamic data is specified to be loaded successfully; the global callback function is used for saving the loaded dynamic data to the global variable.
Specifically, the second script code specifies the dynamic data to be loaded and specifies that the loading mode is an asynchronous loading mode. And after the terminal analyzes the first script code in the webpage file, the second script code is analyzed, so that the dynamic data specified by the second script code is loaded in an asynchronous loading mode specified by the second script code, and the global callback function is called back after the dynamic data is successfully loaded through the specification of the second script code. The dynamic data is data which needs to be dynamically generated and inserted into a webpage file for analysis and rendering. The global callback function may be one or more, and the corresponding second script code may be one or more.
S408, loading the style files in parallel when loading the dynamic data in an asynchronous loading mode.
Specifically, the dynamic data is loaded in an asynchronous loading mode, the terminal does not block the analysis of the webpage file in the process of waiting for loading the dynamic data, but continues to analyze the code used for loading the style file after the second script code in the webpage file, and the code designates the style file to be loaded, so that the style file is loaded in parallel when the dynamic data is loaded. The code for loading the style file can be a code format specially used for loading the style file and agreed by HTML, and can also be script code. The style file can be loaded in a synchronous loading mode or an asynchronous loading mode. The terminal is blocked when the style file is loaded in a synchronous loading mode, and the webpage file can be continuously analyzed after the style file is loaded successfully. The style file may be in the css format.
And S410, rendering the webpage according to the style file and the dynamic data saved by the global variable.
Specifically, after the dynamic data is successfully loaded, the terminal triggers a global callback function specified in step S406 to call back, and stores the loaded dynamic data to the global variable created in step S402. And after the terminal successfully loads the style file, rendering the dynamic data stored by the global variable by combining the loaded style file through a native JavaScript method, so that the webpage is displayed.
According to the webpage quick display method, when the webpage file is acquired through the network, 1-time network request is needed, the first script code and the second script code exist in the webpage file, and the time consumed by additionally acquiring the network request of the script file is reduced; the dynamic data is loaded in an asynchronous mode and is processed in parallel with the loading of the style file, the time consumption of the network request at the moment depends on 1 time of network requests with larger time consumption in the loading of the dynamic data and the loading of the style file, and the time consumption of the network request is greatly reduced.
Therefore, the webpage quick display method has the advantages that the time consumption of network requests is low, and the webpage display efficiency is improved; the dependence between network requests is weakened, the error probability is reduced, and the stability of webpage display is improved; the webpage can be displayed quickly, so that user experience is improved, and website retention rate is improved.
Fig. 5 is a flowchart illustrating a method for quickly displaying a web page in another embodiment. Referring to fig. 5, the method specifically includes the following steps:
and S502, acquiring a webpage file.
S504, according to the first script code in the webpage file, a custom function subordinate to the global object is created to serve as a global callback function, and a custom variable subordinate to the global object is created in the custom function to serve as a global variable; the custom function is used for assigning data input into the custom function to the custom variable.
Step S504 is a specific step of step S404. The first script code may be identified by a script tag. For example, the first script code may specifically be a script code as follows:
<script type＝"text/javascript">
window.jsonp1＝function(data){
window.data＝data；
}；
</script>
in the first script code, the < script > and the </script > are a pair of script tags for identifying the script code in between the pair of script tags. the type indicates that a JavaScript script is adopted. window is a global object, window. jsonnp 1 represents a custom function that is subordinate to the global object window, and can be called globally by means of window. jsonnp 1, which is a global callback function. The terminal may define the logical contents of the window.jsonnp 1 in the global callback function window.jsonnp 1 with a function naming function: data of a custom variable subordinate to the global object window is created, and data of an input custom function is assigned to the global argument window.
S506, loading dynamic data corresponding to the link address in the script label by adopting an asynchronous loading mode configured in the script label of the second script code.
And S508, calling back the global callback function after the dynamic data is successfully loaded according to the callback function name in the link address.
Step S506 and step S508 are specific steps of step S406. The second script code may specifically be a script code as follows:
<script type＝"text/javascript"async＝"async"src＝"http://xxx.com/data.cgi？call back＝jsonp1"></script>
in the second script code, the script tag < script > is provided with async ═ async, which indicates that the asynchronous loading method is adopted. The src attribute is used to set the link address of the loaded dynamic data to http:// xxx.com/data. cgi? callback is json 1, the link address indicating that data. cgi at the identified network location is called http:// xxx. Jsonp1 is a global callback function that needs to be returned after the dynamic data is successfully loaded, and is specified by the callback function name jsonp1 in the link address. The function name jsonp1 in the link address is the same as the function name of the global callback function window. jsonp1 defined above, to ensure that the specified global callback function is called after the dynamic data is loaded successfully.
S510, loading the dynamic data in an asynchronous loading mode and loading the pattern file in a synchronous loading mode.
Specifically, loading dynamic data and loading a style file are in parallel, and the style file is loaded in a synchronous loading manner. The code for loading the style file may be as follows:
<link rel＝"stylesheet"href＝"./index.css">
in the code, link is used for defining the relationship between the webpage file and the external resource; the "style" indicates that the link is a style file of the webpage file; cs "indicates that the link address of the loaded style file is"./index. The code does not specify a loading mode, and indicates that a default synchronous loading mode is adopted.
And S512, judging whether the dynamic data is loaded successfully or not after the style file is loaded successfully according to the third script code in the webpage file. If yes, go to step S514; if not, go to step S516.
Specifically, the third script code defines the contents of step S512 to step S516. The terminal can judge whether the dynamic data is loaded successfully according to whether the global variable is assigned, specifically, if the global variable is assigned, the dynamic data is judged to be loaded successfully, and if the global variable is not assigned, the dynamic data is judged to be loaded unsuccessfully.
For example, part of the content of the third script code may specifically be the script code shown as follows:
where the content behind "/" represents an annotation. if (window.data) represents that whether the global variable window.data is assigned or not is judged, if yes, the dynamic data is successfully loaded, and if not, the dynamic data is not successfully loaded.
And S514, rendering the webpage according to the style file and the dynamic data saved by the global variable.
Specifically, after the style file is successfully loaded, if it is determined that the dynamic data is successfully loaded, it is indicated that both the dynamic data and the style file required for rendering the webpage are ready, and webpage rendering can be directly performed. And the terminal inserts the dynamic data stored by the global variable into the specified position in the webpage file, and renders the webpage by combining the style sheet, so that the webpage is displayed. The terminal may specifically use a document body open function, a document body insert function, or a document body inliner html function to insert the saved dynamic data into the web page file.
S516, redefining the global callback function to render the webpage directly according to the successfully loaded dynamic data and the style file after the dynamic data is successfully loaded, and executing the redefined global callback function after the dynamic data is successfully loaded.
Specifically, after the style file is successfully loaded, if it is determined that the dynamic data is not successfully loaded, it indicates that the dynamic data required for rendering the webpage is not ready, and at this time, it is necessary to continue to wait for the dynamic data to be loaded until the loading is successful. Redefining the global callback function, so that when the redefined global callback function is executed, the terminal can directly render the webpage according to the successfully loaded dynamic data and the style file without temporarily storing the successfully loaded dynamic data into the global variable.
In this embodiment, since the page file is sequentially parsed from beginning to end, a global callback function for saving the dynamic data is defined first, and the loaded dynamic data is saved by using the global object for subsequent use. Because the loading of the dynamic data and the loading of the style file are asynchronous, which kind of first loading of the dynamic data and the style file is finished is unknown, and different solutions are respectively provided for two different situations: when the dynamic data is successfully loaded before the style file, the webpage can be rendered by using the dynamic data and the style file temporarily stored by the global variable; when the style file is successfully loaded before the dynamic data, the webpage rendering can be directly carried out by using the successfully loaded dynamic data and the style file, and the fault tolerance is realized.
In a specific application scenario, the content of the web page file may be partially as follows:
the first script code and the second script code are positioned at the head of the webpage file in sequence; the third script code is located in a body portion of the web page file. The tags < head > and </head > are used for identifying the head of the webpage file, and the tags < body > and </body > are used for identifying the body part of the webpage file. The header of the web page file describes various attributes and information of the web page file, such as a title and a relationship with other web pages, and the like. The content in the header in the web page file is typically not displayed in the rendered web page.
FIG. 6 is a block diagram of an apparatus 600 for quickly displaying a web page in one embodiment. Referring to fig. 6, the web page quick presentation apparatus 600 includes: a web page file loading module 610, a first script code processing module 620, a second script code processing module 630, a style file loading module 640, and a web page rendering module 650.
And the web page file loading module 610 is used for acquiring the web page file.
Among them, a web page file is a file for generating a web page, and the web page file includes HTML (hypertext markup language) code for rendering the web page. The web page file loading module 610 may obtain the web page file through an application for exposing the web page, which may be a browser or other application embedded in a browser kernel, such as an instant messaging application. The web page file loading module 610 may parse the web page files in the order from beginning to end of the web page files. The web page file may be a file with an html extension.
In an embodiment, the web page file loading module 610 is specifically configured to initiate a web page access request to a server according to a web page address, and receive a web page file fed back by the server according to the web page access request. In one embodiment, the web page file loading module 610 may also be configured to cache the web page file locally, and directly read the cached web page file from the local when the web page needs to be rendered.
And the first script code processing module 620 is configured to create a global variable and a global callback function according to the first script code in the web page file.
Specifically, the first script code processing module 620 may be configured to parse the first script code and create a global variable and a global callback function according to semantics of the first script code. The first script code can be a JavaScript script code which is native supported by an application for displaying the webpage and does not need to depend on a third-party script file library. The global variable is a variable which can be referred to at each position in the webpage file, and the global callback function is a callback function which can be called at each position in the webpage file. The global callback function is used for assigning values to global variables.
The second script code processing module 630 is configured to load dynamic data in an asynchronous loading manner according to a second script code in the web page file, and specify to call back the global callback function after the dynamic data is successfully loaded; the global callback function is used for saving the loaded dynamic data to the global variable.
Specifically, the second script code specifies the dynamic data to be loaded and specifies that the loading mode is an asynchronous loading mode. After the first script code processing module 620 parses the first script code in the web page file, the second script code processing module 630 parses the second script code, so as to load the dynamic data specified by the second script code in an asynchronous loading manner specified by the second script code, and call back the global callback function after the dynamic data is successfully loaded specified by the second script code. The dynamic data is data which needs to be dynamically generated and inserted into a webpage file for analysis and rendering.
And a style file loading module 640 for loading the style files in parallel when the dynamic data is loaded in an asynchronous loading manner.
Specifically, the dynamic data is loaded in an asynchronous loading mode, the asynchronous loading mode does not block the analysis of the webpage file in the process of loading the dynamic data, but continues to analyze a code for loading the style file after the second script code in the webpage file, and the code designates the style file to be loaded, so that the style file is loaded in parallel when the dynamic data is loaded. The code for loading the style file can be a code format specially used for loading the style file and agreed by HTML, and can also be script code. The style file can be loaded in a synchronous loading mode or an asynchronous loading mode. The style file loading module 640 is blocked when the style file is loaded in a synchronous loading manner, and the webpage file continues to be analyzed after the style file is loaded successfully. The style file may be in the css format.
And a web page rendering module 650 for rendering the web page according to the style file and the dynamic data saved by the global variable.
Specifically, after the dynamic data is successfully loaded, the web page rendering module 650 triggers a global callback function specified by the callback, and stores the loaded dynamic data in the global variable. After the style file is loaded successfully, the webpage rendering module 650 renders the dynamic data stored by the global variable in combination with the loaded style file, so that the webpage is displayed.
According to the webpage rapid display device, when the webpage file is acquired through the network, 1-time network request is needed, the first script code and the second script code exist in the webpage file, and the time consumed by additionally acquiring the network request of the script file is reduced; the dynamic data is loaded in an asynchronous mode and is processed in parallel with the loading of the style file, the time consumption of the network request at the moment depends on 1 time of network requests with larger time consumption in the loading of the dynamic data and the loading of the style file, and the time consumption of the network request is greatly reduced. Therefore, the webpage quick display method has the advantages that the time consumption of network requests is low, and the webpage display efficiency is improved; the dependence between network requests is weakened, the error probability is reduced, and the stability of webpage display is improved; the webpage can be displayed quickly, so that user experience is improved, and website retention rate is improved.
In one embodiment, the first script code processing module 620 is configured to create a custom function subordinate to the global object as a global callback function according to the first script code in the web page file, and create a custom variable subordinate to the global object in the custom function as a global variable; the custom function is used for assigning data input into the custom function to the custom variable.
The first script code may be identified by a script tag. For example, the first script code may specifically be a script code as follows:
<script type＝"text/javascript">
window.jsonp1＝function(data){
window.data＝data；
}；
</script>
in the first script code, the < script > and the </script > are a pair of script tags for identifying the script code in between the pair of script tags. the type indicates that a JavaScript script is adopted. window is a global object, window. jsonnp 1 represents a custom function that is subordinate to the global object window, and can be called globally by means of window. jsonnp 1, which is a global callback function. The first script code processing module 620 may define the logical contents of the window.jsonnp 1 with a function naming function in the global callback function window.jsonnp 1: data of a custom variable subordinate to the global object window is created, and data of an input custom function is assigned to the global argument window.
In this embodiment, since the page file is sequentially parsed from beginning to end, a global callback function for saving the dynamic data is defined first, and the loaded dynamic data is saved by using the global object for subsequent use.
In an embodiment, the second script code processing module 630 is configured to load dynamic data corresponding to a link address in a script tag by using an asynchronous loading mode configured in the script tag of the second script code; and calling back the global callback function after the dynamic data is successfully loaded according to the callback function name in the link address.
The second script code may specifically be a script code as follows:
<script type＝"text/javascript"async＝"async"src＝"http://xxx.com/data.cgi？callback＝jsonp1"></script>
in the second script code, the script tag < script > is provided with async ═ async, which indicates that the asynchronous loading method is adopted. The src attribute is used to set the link address of the loaded dynamic data to http:// xxx.com/data. cgi? callback is json 1, the link address indicating that data. cgi at the identified network location is called http:// xxx. Jsonp1 is a global callback function that needs to be returned after the dynamic data is successfully loaded, and is specified by the callback function name jsonp1 in the link address. The function name jsonp1 in the link address is the same as the function name of the global callback function window. jsonp1 defined above, to ensure that the specified global callback function is called after the dynamic data is loaded successfully.
In one embodiment, the style files are loaded in a synchronous loading manner. Referring to fig. 7, the apparatus for quickly displaying a web page 600 further includes: the third script code processing module 660 is configured to determine, according to the third script code in the web page file, whether the dynamic data is successfully loaded after the style file is successfully loaded; if so, notifying the webpage rendering module 650 to enable the webpage rendering module 650 to render the webpage according to the style file and the dynamic data stored by the global variable; if not, redefining the global callback function to render the webpage directly according to the successfully loaded dynamic data and the style file after the dynamic data is successfully loaded, and executing the redefined global callback function after the dynamic data is successfully loaded.
The third script code processing module 660 may specifically determine whether the dynamic data is successfully loaded according to whether the global variable is assigned, specifically determine that the dynamic data is successfully loaded if the global variable is assigned, and determine that the dynamic data is not successfully loaded if the global variable is not assigned.
After the style file is loaded successfully, if the dynamic data is judged to be loaded successfully, the dynamic data and the style file required by webpage rendering are both prepared, and webpage rendering can be directly carried out. The third script code processing module 660 may be configured to insert the dynamic data stored by the global variable into a specified position in the webpage file, and perform rendering on the webpage in combination with the style sheet, so that the webpage is displayed. The third script code processing module 660 may be specifically configured to insert the saved dynamic data into the web page file by using a document.
After the style file is successfully loaded, if it is determined that the dynamic data is not successfully loaded, it is indicated that the dynamic data required by the webpage is not ready to be rendered, and at this time, the dynamic data needs to be continuously loaded until the loading is successful. Redefining the global callback function so that when the redefined global callback function is executed, the third script code processing module 660 can directly render the webpage according to the successfully loaded dynamic data and the style file without temporarily storing the successfully loaded dynamic data into the global variable.
In this embodiment, because the loading of the dynamic data and the loading of the style file are asynchronous, which type of first loading of the dynamic data and the style file is completed is unknown, and different solutions are provided for two different situations: when the dynamic data is successfully loaded before the style file, the webpage can be rendered by using the dynamic data and the style file temporarily stored by the global variable; when the style file is successfully loaded before the dynamic data, the webpage rendering can be directly carried out by using the successfully loaded dynamic data and the style file, and the fault tolerance is realized.
In one embodiment, the first script code and the second script code are located at the head of the web page file in order; the third script code is located in a body portion of the web page file.
It will be understood by those skilled in the art that all or part of the processes of the methods of the embodiments described above can be implemented by a computer program, which can be stored in a non-volatile computer-readable storage medium, and can include the processes of the embodiments of the methods described above when the program is executed. The storage medium may be a magnetic disk, an optical disk, a Read-Only Memory (ROM), or the like.
The technical features of the above embodiments can be arbitrarily combined, and for the sake of brevity, all possible combinations of the technical features in the above embodiments are not described, but should be considered as the scope of the present specification as long as there is no contradiction between the combinations of the technical features.
The above examples only show some embodiments of the present invention, and the description thereof is more specific and detailed, but not construed as limiting the scope of the invention. It should be noted that, for a person skilled in the art, several variations and modifications can be made without departing from the inventive concept, which falls within the scope of the present invention. Therefore, the protection scope of the present patent shall be subject to the appended claims.
Claims (10)
1. A webpage quick display method comprises the following steps:
acquiring a webpage file;
creating a global variable and a global callback function according to a first script code in the webpage file;
loading dynamic data corresponding to a link address in the script tag according to an asynchronous loading mode configured in the script tag of a second script code in the webpage file, and calling back the global callback function after the dynamic data is successfully loaded according to the callback function name in the link address; the global callback function is used for saving the loaded dynamic data to the global variable;
loading the style files in parallel when the dynamic data is loaded in an asynchronous loading mode;
and rendering the webpage according to the style file and the dynamic data saved by the global variable.
2. The method of claim 1, wherein the step of creating a global variable and a global callback function from the first script code in the web page file comprises:
according to a first script code in the webpage file, creating a custom function subordinate to a global object as a global callback function, and creating a custom variable subordinate to the global object in the custom function as a global variable; the custom function is used for assigning data input into the custom function to the custom variable.
3. The method of claim 1, wherein the style file is loaded in a synchronous loading manner; the method further comprises the following steps:
according to a third script code in the webpage file, judging whether the dynamic data is loaded successfully or not after the style file is loaded successfully;
if yes, executing the step of rendering the webpage according to the style file and the dynamic data saved by the global variable;
if not, redefining the global callback function as rendering a webpage according to the dynamic data and the style file which are successfully loaded after the dynamic data are successfully loaded, and executing the redefined global callback function after the dynamic data are successfully loaded.
4. The method of claim 3, wherein the first script code and the second script code are located at a header of the web page file in order; the third script code is located in a body portion of the web page file.
5. A quick webpage display device is characterized by comprising:
the webpage file loading module is used for acquiring a webpage file;
the first script code processing module is used for creating a global variable and a global callback function according to the first script code in the webpage file;
the second script code processing module is used for loading dynamic data corresponding to a link address in the script tag according to an asynchronous loading mode configured in the script tag of the second script code in the webpage file, and calling back the global callback function after the dynamic data is successfully loaded according to the callback function name in the link address; the global callback function is used for saving the loaded dynamic data to the global variable;
the style file loading module is used for loading the style files in parallel when the dynamic data is loaded in an asynchronous loading mode;
and the webpage rendering module is used for rendering the webpage according to the style file and the dynamic data stored by the global variable.
6. The apparatus according to claim 5, wherein the first script code processing module is configured to create, according to the first script code in the web page file, a custom function that is subordinate to a global object as a global callback function, and create, in the custom function, a custom variable that is subordinate to the global object as a global variable; the custom function is used for assigning data input into the custom function to the custom variable.
7. The apparatus of claim 5, wherein the style file is loaded in a synchronous loading manner; the device further comprises:
the third script code processing module is used for judging whether the dynamic data is successfully loaded after the style file is successfully loaded according to the third script code in the webpage file; if so, informing the webpage rendering module to enable the webpage rendering module to render the webpage according to the style file and the dynamic data saved by the global variable; if not, redefining the global callback function as rendering a webpage according to the dynamic data and the style file which are successfully loaded after the dynamic data are successfully loaded, and executing the redefined global callback function after the dynamic data are successfully loaded.
8. The apparatus of claim 7, wherein the first script code and the second script code are located at a header of the web page file in order; the third script code is located in a body portion of the web page file.
9. A computer device comprising a memory, a processor and a computer program stored on the memory and executable on the processor, characterized in that the steps of the method of any of claims 1 to 4 are implemented by the processor when executing the computer program.
10. A computer-readable storage medium, on which a computer program is stored, which, when being executed by a processor, carries out the steps of the method of any one of claims 1 to 4.
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 CN106294658A (en) | 2017-01-04 |
| CN106294658B true 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) |
Families Citing this family (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 |
| CN108509228B (en) * | 2017-11-10 | 2021-04-30 | 平安普惠企业管理有限公司 | Page loading method, terminal equipment and computer readable storage medium |
| CN108334562A (en) * | 2018-01-09 | 2018-07-27 | 阿里巴巴集团控股有限公司 | A kind of page display method and device |
| CN109344351B (en) * | 2018-10-18 | 2021-01-05 | 网宿科技股份有限公司 | 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 |
| CN110851756A (en) * | 2019-10-12 | 2020-02-28 | 平安普惠企业管理有限公司 | Page loading method and device, computer readable storage medium and terminal equipment |
| US11055378B1 (en) * | 2020-08-21 | 2021-07-06 | 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 |
| 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 |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101291335A (en) * | 2008-06-13 | 2008-10-22 | 中兴通讯股份有限公司 | 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 |
| CN104484383A (en) * | 2014-12-10 | 2015-04-01 | 北京国双科技有限公司 | JS file processing method and device |
| CN105630524A (en) * | 2014-10-31 | 2016-06-01 | 广州市动景计算机科技有限公司 | Webpage text parsing method and device and mobile terminal |
-
2016
- 2016-08-04 CN CN201610633106.4A patent/CN106294658B/en active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101291335A (en) * | 2008-06-13 | 2008-10-22 | 中兴通讯股份有限公司 | 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 |
| CN105630524A (en) * | 2014-10-31 | 2016-06-01 | 广州市动景计算机科技有限公司 | Webpage text parsing method and device and mobile terminal |
| CN104484383A (en) * | 2014-12-10 | 2015-04-01 | 北京国双科技有限公司 | JS file processing method and device |
Non-Patent Citations (1)
| Title |
|---|
| 王成等.Web前端性能优化方案与实践.《计算机应用与软件》.2014,第31卷(第12期),89-95,147页. * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN106294658A (en) | 2017-01-04 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN106294658B (en) | Webpage quick display method and device | |
| CN106991154B (en) | Webpage rendering method and device, terminal and server | |
| US20190251143A1 (en) | Web page rendering method and related device | |
| US20160283606A1 (en) | Method for performing webpage loading, device and browser thereof | |
| US20160232252A1 (en) | Method for loading webpage, device and browser thereof | |
| US20140222947A1 (en) | Method and apparatus for browsings webpages, and storage medium | |
| CN110020329B (en) | Method, device and system for generating webpage | |
| CN108874922B (en) | Client device, webpage rendering method based on single page application and storage medium | |
| US8516041B1 (en) | Pre-fetching asynchronously requested content | |
| US20140040746A1 (en) | Methods and apparatus for voiced-enabling a web application | |
| US20140039885A1 (en) | Methods and apparatus for voice-enabling a web application | |
| TWI539302B (en) | Late resource localization binding for web services | |
| US9292252B2 (en) | Methods and apparatus for voiced-enabling a web application | |
| US11930096B2 (en) | Systems and methods for rendering interactive web pages | |
| CN113641924B (en) | Webpage interactive time point detection method and device, electronic equipment and storage medium | |
| TW201525740A (en) | Method and device for displaying web page and computer-readable storage medium | |
| CN117390326A (en) | Page management method, device, equipment and storage medium | |
| US20140331117A1 (en) | Application-based dependency graph | |
| US20140237133A1 (en) | Page download control method, system and program for ie core browser | |
| CN115098213A (en) | Data processing method and device, electronic equipment and storage medium | |
| CN114528510A (en) | Webpage data processing method and device, electronic equipment and medium | |
| CN114647411A (en) | Programming interface loading method and device, electronic equipment and storage medium | |
| CN113961298A (en) | Page switching method, device, equipment and medium | |
| CN113934954A (en) | Webpage first screen rendering method and device in application program | |
| CN111475748B (en) | Picture display method and device |
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 |