CN118227902A - Page loading method and device, electronic equipment and storage medium - Google Patents

Abstract

The disclosure relates to the technical field of computers, and discloses a page loading method, a page loading device, electronic equipment and a storage medium. The present disclosure may implement parallel requests by sending both preload requests and resource load requests to a server at the same time. The waiting time of the request can be reduced, and the page loading speed can be increased. By preloading the request, page data can be requested from the server in advance. The server may feed back page data according to the target configuration parameters after receiving the preload request. Therefore, the data can be loaded on the page immediately after the page is loaded, the waiting time of the interface request is reduced, and the rendering speed of the page is improved. In addition, the page loading time is reduced, so that the user can view the page content faster, and the experience of the user is improved. Acquiring page data in advance may also ensure that the page presents the page content before loading is complete.

Description

Page loading method and device, electronic equipment and storage medium

Technical Field

The disclosure relates to the technical field of computers, and in particular relates to a page loading method, a page loading device, electronic equipment and a storage medium.

Background

In front-end development, performance optimization is a very important task. Various contents such as HTML, CSS, javaScript are required to be optimized to improve the performance of the application. The optimization can enable the response speed of the application to be faster and the loading speed to be faster, and bring better use experience for users. Meanwhile, the front-end optimization can also reduce the number of page requests, reduce the occupation of broadband and effectively save resources.

A common optimization strategy is to place the interface request before the HTML request. For pages with separated front and back ends, the general loading mode is as follows: firstly requesting an HTML page, then analyzing the HTML by a browser, then requesting CSS and JS files, then JS executes a request API interface, then assembling the page according to returned data, and finally requesting pictures and displaying first screen content. However, the page loading method of the above scheme is serial, which results in long first screen time (i.e. the user needs to wait for a long time to see the content of the page) in the page loading process, and affects the page loading performance.

Disclosure of Invention

In view of the above, the present disclosure provides a method, an apparatus, an electronic device, and a storage medium for loading pages, so as to solve the problem in the prior art that a serial page loading mode results in a long first screen time of a page and affects page loading performance.

In a first aspect, an embodiment of the present disclosure provides a page loading method, the method including:

acquiring an HTML file sent by a server, wherein the HTML file is sent after the server receives a page loading request transmitted by a browser;

Analyzing the HTML file to obtain target resource parameters and target configuration parameters associated with the current loading target page;

generating a pre-loading request based on a target configuration parameter, generating a resource loading request based on the target resource parameter, and synchronously sending the resource loading request and the pre-loading request to a server, wherein the server is used for feeding back resource data to the browser according to the resource loading request and feeding back page data to the browser according to the target configuration parameter carried by the pre-loading request;

and acquiring page data and resource data fed back by the server, and loading the page data and the resource data to the target page.

The present disclosure may implement parallel requests by sending both preload requests and resource load requests to a server at the same time. The waiting time of the request can be reduced, and the page loading speed can be increased. By preloading the request, page data can be requested from the server in advance. The server may feed back page data according to the target configuration parameters after receiving the preload request. Therefore, the data can be loaded on the page immediately after the page is loaded, the waiting time of the interface request is reduced, and the rendering speed of the page is improved. In addition, the page loading time is reduced, so that the user can view the page content faster, and the experience of the user is improved. Acquiring page data in advance may also ensure that the page presents the page content before loading is complete.

In a second aspect, one embodiment of the present disclosure provides a page loading apparatus, the apparatus comprising:

the acquisition module is used for acquiring an HTML file sent by a server, wherein the HTML file is sent after the server receives a page loading request transmitted by a browser;

the analysis module is used for analyzing the HTML file to obtain target resource parameters and target configuration parameters associated with the current loading target page;

The processing module is used for generating a pre-loading request based on a target configuration parameter and a resource loading request based on the target resource parameter, and synchronously sending the resource loading request and the pre-loading request to a server, wherein the server is used for feeding back resource data to the browser according to the resource loading request and feeding back page data to the browser according to the target configuration parameter carried by the pre-loading request;

And the loading module is used for acquiring the page data and the resource data fed back by the server and loading the page data and the resource data to the target page.

In a third aspect, one embodiment of the present disclosure provides an electronic device, comprising: the memory and the processor are in communication connection, the memory stores computer instructions, and the processor executes the computer instructions to perform the method of the first aspect or any implementation manner corresponding to the first aspect.

In a fourth aspect, an embodiment of the present disclosure provides a computer-readable storage medium having stored thereon computer instructions for causing a computer to perform the method of the first aspect or any of its corresponding embodiments.

Drawings

In order to more clearly illustrate the embodiments of the present disclosure or the prior art, the drawings that are required in the detailed description or the prior art will be briefly described, it will be apparent that the drawings in the following description are some embodiments of the present disclosure, and other drawings may be obtained according to the drawings without inventive effort for a person of ordinary skill in the art.

FIG. 1 is a flow diagram of a page loading method according to some embodiments of the present disclosure;

FIG. 2 is a schematic diagram of a configuration process of an HTML file according to some embodiments of the present disclosure;

FIG. 3 is a schematic diagram of a preload request send effect in accordance with some embodiments of the present disclosure;

FIG. 4 is a flow diagram of a page loading method according to some embodiments of the present disclosure;

FIG. 5 is a block diagram of a page loading device according to one embodiment of the present disclosure;

Fig. 6 is a schematic diagram of a hardware structure of an electronic device according to an embodiment of the present disclosure.

Detailed Description

For the purpose of making the objects, technical solutions and advantages of one embodiment of the present disclosure more apparent, the technical solutions in one embodiment of the present disclosure will be clearly and completely described below with reference to the accompanying drawings in one embodiment of the present disclosure, and it is apparent that the described embodiments are some embodiments of the present disclosure, but not all embodiments. Based on the embodiments in this disclosure, all other embodiments that a person skilled in the art would obtain without making any inventive effort are within the scope of protection of this disclosure.

According to one embodiment of the present disclosure, a page loading method, apparatus, electronic device, and storage medium are provided, it being noted that the steps illustrated in the flowchart of the figures may be performed in a computer system, such as a set of computer executable instructions, and that, although a logical order is illustrated in the flowchart, in some cases, the steps illustrated or described may be performed in an order other than that illustrated herein.

In this embodiment, a page loading method is provided, which may be used in the above mobile terminal, such as a mobile phone, a tablet pc, etc. (the execution body is described in connection with the actual situation), and fig. 1 is a flowchart of a page loading method according to an embodiment of the present disclosure, as shown in fig. 1, where the flowchart includes the following steps:

Step S101, an HTML file sent by a server is obtained, wherein the HTML file is sent after the server receives a page loading request transmitted by a browser.

Specifically, the user inputs a website or clicks a link in the browser, and triggers the browser to send a page loading request to the server. The browser uses the HTTP protocol to send a page loading request to the server, and the server finds the corresponding HTML file according to the URL of the page loading request and sends the corresponding HTML file back to the browser as the response content. The HTML file is transmitted in text form. For example: when a user accesses the home page of an e-commerce website in a browser, the browser sends a page loading request to a server to request the HTML file of the home page. After receiving the request, the server finds the corresponding home page HTML file according to the URL of the request. The HTML file contains the main content of the web site, such as the presentation of goods, advertisement carousel, etc. The server sends this HTML file back to the browser as the content of the response. After receiving the response from the server, the browser starts to parse the HTML file.

Before implementing the method of the present disclosure, firstly, configuration of an HTML file is performed on a server side, a configuration process is shown in fig. 2, ① starts from an entry file 'prefectconfig.ts', and a dependency tree is constructed: and analyzing the dependency relationship in the file by analyzing the 'prefatconfig.ts' file, and finding out all the introduced dependency files. From these dependency files, a dependency tree is constructed representing the relationships between them. ② Cleaning, de-duplication and merging repeated files: in a dependency tree, there may be multiple entry files that introduce the same dependency file. To avoid repeated packaging and loading of the same resources, the incoming duplicate files need to be cleaned, deduplicated, and consolidated. Therefore, the volume of the packaged file can be reduced, and the loading time of the browser can be reduced. ③ TYPESCRIPT conversion: if TYPESCRIPT language is used in the project, TYPESCRIPT code needs to be converted into JavaScript code. The TYPESCRIPT file is converted into a JavaScript file by using a corresponding compiler or conversion tool. ④ Babel conversion: for a new feature or browser environment that is partially unsupported, babel may be used for transcoding. Babel can convert the newer version of JavaScript syntax into a lower version of code that is more compatible to run on more browsers. ⑤ And (3) file compression: in order to reduce the volume of the file and improve the loading speed, the file can be compressed. The commonly used compression tools have UglifyJS, terser and the like, can remove notes and spaces in codes, and perform code optimization and compression. ⑥ Packaging the preloading logic and the configuration files: and placing the converted and compressed pre-load logic and configuration file in the same JavaScript file, and packaging. Thus, the pre-loading logic and configuration can be integrated, and the management and maintenance are convenient. ⑦ Injected into the HTML file: injecting the packaged JavaScript file and the execution script into a preset HTML file, finding a designated position by analyzing the HTML file, and inserting the packaged JavaScript file path into the HTML file through the 'src' attribute of the 'script' tag. Thus, when the browser loads the HTML file, the pre-loading logic and the configuration file are loaded at the same time. In addition, the user can customize the request pre-request script according to specific requirements. Meanwhile, a plurality of entry files and configuration files are supported, and expansion and maintenance are convenient.

And S102, analyzing the HTML file to obtain the target resource parameters and the target configuration parameters associated with the current loading target page.

Specifically, when the browser parses the HTML file, the content in the file is read in sequence, and different HTML tags and attributes are identified. In this process, the browser will find the target resource parameters and target configuration parameters associated with the target page.

It is understood that the target resource parameter refers to information of an external resource associated with the target page. For example, the href attribute in the < link > tag specifies the URL of the style sheet, the src attribute in the < script > tag specifies the URL of the JavaScript file, and the src attribute in the < img > tag specifies the URL of the image file. The browser will parse the attribute values and obtain the corresponding resources.

The target configuration parameters refer to specific configuration information related to the target page. For example, < URL > represents the URL address of the request. < method > indicates the type of request. < params > optional function type, return an object containing the request parameters. < query > optional function type, accept a parameter 'params', return an object containing parameters that need to be fetched in the route or placed in the URL. < callback > indicates the processing operation that needs to be performed after the request returns. For example, when a request is successful or fails, it is invoked. The function may be used to perform some subsequent operations such as data processing, page updating, or embedding points, etc. In which the corresponding processing can be performed by passing information such as status codes.

Step S103, a pre-loading request is generated based on the target configuration parameters, a resource loading request is generated based on the target resource parameters, and the resource loading request and the pre-loading request are synchronously sent to a server, wherein the server is used for feeding back resource data to the browser according to the resource loading request, and feeding back page data to the browser according to the target configuration parameters carried by the pre-loading request.

Specifically, the browser generates a preload request according to the target configuration parameters. The target configuration parameters may include information such as the URL of the request and the request type. For example, the browser may determine the type of data that needs to be preloaded according to the target configuration parameters, and generate a corresponding preload request. And simultaneously, the browser generates a resource loading request according to the target resource parameter. The target resource parameter may be related information of resources such as CSS files, JS files, and the like. For example, the browser may parse the < link > tag and the < script > tag in the HTML file, obtain the resource paths therein, and then generate the resource load request according to the paths. The browser synchronously sends the generated resource loading request and the preloading request to the server. These requests will be encapsulated as HTTP requests, including request methods (e.g., GET or POST), request URLs, request headers, etc.

When the server receives the resource loading request, the corresponding resource file is found according to the URL and other parameters in the request, and the resource data is returned to the browser as a response. For example, if a CSS file is requested, the server may return the contents of the CSS file as part of the response. Meanwhile, the server can generate page data according to the target configuration parameters carried in the preloading request, and return the page data to the browser as a part of the response. The target configuration parameters in the preload request contain page specific configuration information. And the server generates corresponding page content according to the configuration parameters and returns the page content to the browser. After receiving the resource data and the page data returned by the server, the browser processes and loads the resource data and the page data. The resource data will be used to modify the style and behavior of the page and the page data will be used to update the content and structure of the target page.

As shown in fig. 3, one embodiment of the present disclosure may obtain the required interface data in advance by sending a preload request immediately after the HTML page is loaded, without waiting for the CSS and JS resource loading to be completed. This may reduce the time consuming loading of the entire page so that the interface request is "pre-pended" and the data is ready during the resource loading process. Secondly, while the pre-loading request is sent through the form request interface, the resource loading request can also be sent, including static resources such as CSS and JS. The preloading request and the resource request can be performed in parallel, and the loading speed of the whole page is accelerated by utilizing the concurrent request mechanism of the browser compared with the loading mode of the page serial in fig. 3. The server returns the required resource data, such as CSS and JS files, to the browser according to the resource loading request. And according to the target configuration parameters carried by the preloading request, the server can also return page data to the browser. Therefore, the browser can acquire page data while loading resources, and the page rendering efficiency is improved.

Based on the method, the page loading time can be reduced to the greatest extent, and the user experience is improved. Preloading interface data and loading resources in parallel can save at least 1 request time, making the page loading process more efficient. Meanwhile, the browser can render the page faster by returning the data in advance, so that the display speed of the page is improved.

The following is described in connection with one specific example:

When a user enters the home page of an e-commerce website, many resources, such as HTML files, CSS style sheets, javaScript scripts, pictures, etc., are typically loaded. In order to reduce page loading time to the maximum extent and improve user experience, a strategy of preloading interface data and loading resources in parallel can be adopted. First, the interface data may be preloaded at page loading. For example, before entering the first page, some asynchronous requests may be initiated to obtain some data related to the page, such as a commodity list, a carousel map, etc. After the data are acquired, the data can be stored in the browser window object, and after the page loading is completed, the data are directly acquired from the browser window object without sending a request to a server again. Therefore, the time consumption of at least 1 request can be saved, the waiting time of a user is reduced, and the page loading speed and the user experience are improved.

At the same time, resources may be loaded in parallel. In the conventional page loading manner, resources are generally loaded in a sequential manner, that is, HTML, CSS, javaScript and pictures are loaded sequentially. This can cause the entire page loading process to become more serial, resulting in longer page loading times. And the parallel loading of the resources can simultaneously request a plurality of resources, so that the loading process of the resources can be performed in parallel, thereby improving the page loading speed. Through reasonable resource loading sequence and parallel loading strategy, the page loading time can be reduced to the maximum extent, and the page rendering speed is accelerated.

Step S104, obtaining the page data and the resource data fed back by the server, and loading the page data and the resource data to the target page.

Specifically, the browser receives a response containing page data returned by the server. The page data may be a piece of HTML code, or may be data in other formats. The browser parses the data and generates a DOM tree based on the parsing result. The DOM tree represents the structure and content of the page. The browser will combine the DOM tree with the existing page, updating the content and layout of the page.

And the browser receives a response containing the resource data returned by the server. The resource data may be style sheets, javaScript files, images, etc. And the browser carries out corresponding processing on the data according to the type of the resource.

For example: style sheet: the browser parses the style sheet data and applies it to the elements on the page to modify the style and layout of the elements. JavaScript file: the browser executes code in the JavaScript file to implement the dynamic behavior and interactive functions of the page. Image: the browser will display the corresponding image according to the image data, embedding it into the relevant elements in the page. And the browser updates and loads page contents, styles and functions according to the page data and the resource data in the response.

According to the method and the device, the pre-loading request and the resource request are synchronously sent, so that data acquisition and resource downloading can be performed when the browser page is loaded, and the page loading speed is increased. Meanwhile, the interface data is obtained in advance through the preloading request, so that the data can be immediately loaded on the page after the page loading is completed, the waiting time of the request is reduced, the rendering speed of the page is improved, and meanwhile, the page loading time is reduced.

FIG. 4 is a flow chart of a page loading method according to one embodiment of the present disclosure, as shown in FIG. 4, the flow comprising the steps of:

Step S201, an HTML file sent by a server is obtained, wherein the HTML file is sent after the server receives a page loading request transmitted by a browser. The step S101 in the above embodiment is specifically described, and will not be described in detail herein.

Step S202, analyzing the HTML file to obtain the target resource parameters and the target configuration parameters associated with the current loading target page.

In one embodiment of the present disclosure, parsing the HTML file to obtain target resource parameters and target configuration parameters associated with the currently loaded target page includes the following steps a1-a3:

and a1, analyzing the HTML file to obtain a script file and a basic file.

When the browser parses the HTML file, it reads the HTML code line by line and identifies the < script > tags and other referenced files therein. By analyzing the labels and the files, the browser can acquire the related information of the script files and the basic files to be loaded.

And a2, analyzing the basic file to obtain the target resource parameters.

When the basic file is analyzed, the browser reads the tags and the attributes in the file to acquire the target resource parameters. For example, for a style sheet file (CSS file), the browser may parse information such as selectors, attributes, and values therein as target resource parameters. These parameters can be used to set the style and layout of the page.

And a3, inquiring the script file to obtain a target preloading rule matched with the target page, and obtaining a target configuration parameter matched with the target preloading rule.

The browser will query the script file for the target preloading rules defined therein. The preloading rules may be defined by code in a script file or an external configuration file. When the browser finds target pre-load rules that match the target page, it will obtain the target configuration parameters defined in these rules. These parameters may include specific page configuration information such as the type of resource that needs to be preloaded, specific resource paths, or other settings.

Specifically, querying the script file to obtain a target preloading rule matched with the target page includes: analyzing the script file to obtain a configuration file and a preloading script; and reading a plurality of preloading rules in the configuration file through the preloading script, and matching page parameters of the target page with the preloading rules to obtain a target preloading rule hit by the target page.

Wherein the content of the script file is read and converted into executable code. This may be accomplished through the use of a parser or compiler, depending on the format of the script file and the programming language used. And extracting the path or the content of the configuration file from the parsed script file. The configuration file typically contains information about definitions of the pre-load rules, parameter settings, etc.

And extracting the path or the content of the preloading script from the parsed script file. The preload script is code for reading a configuration file and executing a preload rule. And reading the configuration file by using the preloading script, and resolving a plurality of preloading rules in the configuration file. The preloading rules may include rules such as wild cards for matching target pages. The page parameters of the target page are compared or matched with each preloading rule. This may be achieved using a string matching algorithm. And determining whether the target page accords with a certain preloading rule according to the matching result, and marking the target page as a hit target preloading rule.

In one embodiment of the present disclosure, obtaining target configuration parameters that match target preload rules includes: and checking the configuration parameters carried by the configuration file through the preloading script, and if the configuration parameters pass the checking, reading the target configuration parameters corresponding to the preloading rule from the configuration file.

And analyzing the configuration file through the preloading script, and reading configuration parameters in the configuration file. And verifying the configuration parameters according to the parameter formats or specifications required by the preloading rules. Verification may include data type checking, scope verification, regular expression matching, and the like. If the verification is passed, continuing to execute the next step; if the verification is not passed, performing error processing according to specific requirements, such as throwing out an exception or recording an error log. Then, according to the target configuration parameters required by the preloading rules, the corresponding configuration values are found in the configuration files and obtained. This may be accomplished by methods provided by the profile parsing library or custom read functions, depending on the format and structure of the profile. Finally, the target configuration parameters which pass the verification and are read are returned as results.

Step S203, a pre-loading request is generated based on the target configuration parameters, a resource loading request is generated based on the target resource parameters, and the resource loading request and the pre-loading request are synchronously sent to a server, wherein the server is used for feeding back resource data to the browser according to the resource loading request, and feeding back page data to the browser according to the target configuration parameters carried by the pre-loading request.

In one embodiment of the present disclosure, generating a preload request based on target configuration parameters includes: acquiring a parameter type corresponding to the target configuration parameter, and detecting whether a bound parameter splicing rule exists in the parameter type; if the parameter types have the bound parameter splicing rules, splicing the target configuration parameters according to the parameter splicing rules to obtain spliced target configuration parameters; and generating a preloading request by using the spliced target configuration parameters.

Specifically, according to the target configuration parameters defined in the preloading rules, the corresponding parameter types are determined. The parameter type may be a routing parameter or a parameter placed in the URL, a query parameter of the GET request, etc., which needs to be spliced in the URL, which may be added to the requested URL by means of string splicing. For example, a URL with a corresponding value is generated from the routing parameters or dynamic parameters. The query parameters of the GET request may be stitched by stitching them into the query string of the URL. The parameter object may be converted into the form of a URL query string and added to the requested URL.

And searching whether a bound parameter splicing rule exists according to the parameter type of the target configuration parameter. The parameter splicing rules are determined according to the parameter type and are used to define how to splice the parameter values in the preload request. And if the bound parameter splicing rules exist, splicing the target configuration parameters according to the rules. The manner of splicing may include string splicing, formatting strings, URL parameter splicing, etc. And generating a preloading request by using the spliced target configuration parameters as parameter values of the request.

Step S204, obtaining the page data and the resource data fed back by the server, and loading the page data and the resource data to the target page. The step S101 in the above embodiment is specifically described, and will not be described in detail herein.

One embodiment of the present disclosure may implement parallel requests by sending both a preload request and a resource load request to a server at the same time. The waiting time of the request can be reduced, and the page loading speed can be increased. By preloading the request, page data can be requested from the server in advance. The server may feed back page data according to the target configuration parameters after receiving the preload request. Therefore, the data can be loaded on the page immediately after the page is loaded, the waiting time of the interface request is reduced, and the rendering speed of the page is improved. In addition, the page loading time is reduced, so that the user can view the page content faster, and the experience of the user is improved. Acquiring page data in advance may also ensure that the page presents the page content before loading is complete.

In general, the pre-loading request is generated based on the target configuration parameters, the resource loading request is generated based on the target resource parameters, and the pre-loading request and the resource loading request are synchronously transmitted to the server, so that the page loading performance can be effectively improved, the page rendering speed is increased, the pressure of the server is reduced, and the experience of a user is optimized.

In one embodiment of the present disclosure, after generating the preload request based on the target configuration parameters, the method further comprises the steps b1-b3 of:

Step b1, acquiring a browser window object of a browser, wherein the browser window object is used for storing page data associated with a preloading request.

And acquiring a window object of the current browser according to the programming language used and the API provided by the browser environment. For example, for JavaScript code, the window object of the current browser may be represented using a 'window' object.

And b2, mounting the preloading request to the browser window object.

A preload request object corresponding to the preload request is created and mounted on the browser window object. The preload request object may contain information of the URL of the request, the request mode, the request parameters, etc. for subsequent use.

And b3, if the page data returned by the server based on the preloading request is monitored, the page data is mounted to the browser window object.

Adding a monitor on the browser window object, wherein the monitor server returns page data based on the preloading request. This may be accomplished through browser-provided event mechanisms or asynchronous functions, depending on the development environment and technology stack. When the server returns the page data, the page data is mounted to the browser window object. In particular by saving page data in an attribute or method in the browser window object. For example, the page data is saved in a custom attribute of the 'window' object. Through the steps, the pre-loading request and the returned page data can be associated to the browser window object for subsequent use and processing. Thus, the information and page data of the preloading request can be conveniently obtained from the browser window object, and the operation and business logic related to preloading are realized.

The method and the device can conveniently store the page data associated with the preloading request by acquiring the browser window object. In this way, the data can be easily accessed and operated when needed, and the page loading speed and response performance are improved. The preload request is then mounted to the browser window object, and the encapsulation and management of the request can be achieved. The method has the advantages that after the page loading is completed, the data returned by the preloading request can be acquired and processed more conveniently, and the waiting time of the page loading is reduced. When the server is monitored to return page data based on the preloading request, the data is mounted to the browser window object. The page can quickly acquire the required data without sending a request to the server again, so that the response speed of the page is improved. And finally, more efficient page loading and data acquisition are realized.

In one embodiment of the present disclosure, the method further comprises: acquiring a page data use request; responding to the page data use request, and determining the data use requirement; and querying corresponding target page data from the browser window object by utilizing the data use requirement.

Where preloaded data is required, the corresponding request object is obtained by accessing windows. A particular request object may be accessed by its attribute name or other identifier. After the request object is obtained, the preloaded data may be accessed by the attributes or methods of the request object. The specific properties and methods depend on the type and internal implementation of the request object.

And according to actual requirements, carrying out corresponding operation by using the preloaded data. For example, data may be rendered onto a page or specific logic processing performed. Depending on the internal structure of the request object, the required data can be extracted from it. It should be noted that when accessing windows.preloadRequests to obtain preloaded data, it is necessary to ensure that the requested object already exists and that the data has been loaded successfully. Whether data is available may be determined by examining the status of the requesting object, whether the data is present, or other identifier.

The embodiment also provides a page loading device, which is used for implementing the above embodiment and the preferred implementation manner, and the description is omitted. As used below, the term "module" may be a combination of software and/or hardware that implements a predetermined function. While the means described in the following embodiments are preferably implemented in software, implementation in hardware, or a combination of software and hardware, is also possible and contemplated.

The present embodiment provides a page loading device, as shown in fig. 5, including:

The obtaining module 501 is configured to obtain an HTML file sent by a server, where the HTML file is sent after the server receives a page loading request transmitted by a browser;

The parsing module 502 is configured to parse the HTML file to obtain a target resource parameter and a target configuration parameter associated with the currently loaded target page;

A processing module 503, configured to generate a pre-load request based on the target configuration parameter and generate a resource loading request based on the target resource parameter, and send the resource loading request and the pre-load request to a server synchronously, where the server is configured to feed back resource data to the browser according to the resource loading request, and feed back page data to the browser according to the target configuration parameter carried by the pre-load request;

And the loading module 504 is configured to acquire the page data and the resource data fed back by the server, and load the page data and the resource data to the target page.

In one embodiment of the present disclosure, the parsing module 502 includes:

the first analysis submodule is used for analyzing the HTML file to obtain a script file and a basic file;

the second analysis submodule is used for analyzing the basic file to obtain target resource parameters;

And the inquiring sub-module is used for inquiring the script file to obtain a target preloading rule matched with the target page and obtaining a target configuration parameter matched with the target preloading rule.

In one embodiment of the disclosure, a query sub-module is configured to parse a script file to obtain a configuration file and a pre-load script; and reading a plurality of preloading rules in the configuration file through the preloading script, and matching page parameters of the target page with the preloading rules to obtain a target preloading rule hit by the target page.

In one embodiment of the disclosure, the query submodule is configured to verify configuration parameters carried by the configuration file through the preloading script, and if the configuration parameters pass the verification, the target configuration parameters corresponding to the preloading rule are read from the configuration file.

In one embodiment of the present disclosure, the processing module 503 is configured to obtain a parameter type corresponding to a target configuration parameter, and detect whether a bound parameter splicing rule exists in the parameter type; if the parameter types have the bound parameter splicing rules, splicing the target configuration parameters according to the parameter splicing rules to obtain spliced target configuration parameters; and generating a preloading request by using the spliced target configuration parameters.

In one embodiment of the present disclosure, the apparatus further comprises: the storage module is used for acquiring a browser window object of the browser, wherein the browser window object is used for storing page data associated with the preloading request; mounting the preloading request to a browser window object; and if the page data returned by the server based on the preloading request is monitored, the page data is mounted to the browser window object.

In one embodiment of the present disclosure, the method further comprises: acquiring a page data use request; responding to the page data use request, and determining the data use requirement; and querying corresponding target page data from the browser window object by utilizing the data use requirement.

Referring to fig. 6, fig. 6 is a schematic structural diagram of an electronic device according to an alternative embodiment of the disclosure, as shown in fig. 6, the electronic device includes: one or more processors 10, memory 20, and interfaces for connecting the various components, including high-speed interfaces and low-speed interfaces. The various components are communicatively coupled to each other using different buses and may be mounted on a common motherboard or in other manners as desired. The processor may process instructions executing within the electronic device, including instructions stored in or on memory to display graphical information of the GUI on an external input/output device, such as a display device coupled to the interface. In some alternative embodiments, multiple processors and/or multiple buses may be used, if desired, along with multiple memories and multiple memories. Also, multiple electronic devices may be connected, each providing a portion of the necessary operations (e.g., as a server array, a set of blade servers, or a multiprocessor system).

The processor 10 may be a central processor, a network processor, or a combination thereof. The processor 10 may further include a hardware chip, among others. The hardware chip may be an application specific integrated circuit, a programmable logic device, or a combination thereof. The programmable logic device may be a complex programmable logic device, a field programmable gate array, a general-purpose array logic, or any combination thereof.

Wherein the memory 20 stores instructions executable by the at least one processor 10 to cause the at least one processor 10 to perform the methods shown in implementing the above embodiments.

The memory 20 may include a storage program area that may store an operating system, at least one application program required for functions, and a storage data area; the storage data area may store data created from the use of the electronic device of the presentation of one applet landing page, and the like. In addition, the memory 20 may include high-speed random access memory, and may also include non-transitory memory, such as at least one magnetic disk storage device, flash memory device, or other non-transitory solid-state storage device. In some alternative embodiments, memory 20 may optionally include memory located remotely from processor 10, which may be connected to the electronic device via a network. Examples of such networks include, but are not limited to, the internet, intranets, local area networks, mobile communication networks, and combinations thereof.

Memory 20 may include volatile memory, such as random access memory; the memory may also include non-volatile memory, such as flash memory, hard disk, or solid state disk; the memory 20 may also comprise a combination of the above types of memories.

The electronic device also includes a communication interface 30 for the electronic device to communicate with other devices or communication networks.

An embodiment of the present disclosure also provides a computer-readable storage medium, and the method according to an embodiment of the present disclosure described above may be implemented in hardware, firmware, or as computer code which may be recorded on the storage medium, or which is originally stored in a remote storage medium or a non-transitory machine-readable storage medium and is to be stored in a local storage medium, downloaded over a network, so that the method described herein may be processed by such software on a storage medium using a general purpose computer, special purpose processor, or programmable or special purpose hardware. The storage medium can be a magnetic disk, an optical disk, a read-only memory, a random access memory, a flash memory, a hard disk, a solid state disk or the like; further, the storage medium may also comprise a combination of memories of the kind described above. It will be appreciated that a computer, processor, microprocessor controller or programmable hardware includes a storage element that can store or receive software or computer code that, when accessed and executed by the computer, processor or hardware, implements the methods illustrated by the above embodiments.

Although embodiments of the present disclosure have been described in connection with the accompanying drawings, various modifications and variations may be made by those skilled in the art without departing from the spirit and scope of the disclosure, and such modifications and variations are within the scope defined by the appended claims.

Claims (10)

1. A method of page loading, the method comprising:

acquiring an HTML file sent by a server, wherein the HTML file is sent after the server receives a page loading request transmitted by a browser;

Analyzing the HTML file to obtain target resource parameters and target configuration parameters associated with the current loading target page;

Generating a pre-loading request based on the target configuration parameters and a resource loading request based on the target resource parameters, and synchronously sending the resource loading request and the pre-loading request to a server, wherein the server is used for feeding back resource data to the browser according to the resource loading request and feeding back page data to the browser according to the target configuration parameters carried by the pre-loading request;

and acquiring page data and resource data fed back by the server, and loading the page data and the resource data to the target page.

2. The method of claim 1, wherein the parsing the HTML file to obtain the target resource parameter and the target configuration parameter associated with the currently loaded target page includes:

analyzing the HTML file to obtain a script file and a basic file;

analyzing the basic file to obtain target resource parameters;

inquiring the script file to obtain a target preloading rule matched with the target page, and obtaining a target configuration parameter matched with the target preloading rule.

3. The method of claim 2, wherein the querying the script file for the target pre-load rule for the target page match comprises:

analyzing the script file to obtain a configuration file and a preloading script;

And reading a plurality of preloading rules in the configuration file through the preloading script, and matching page parameters of the target page with the preloading rules to obtain a target preloading rule hit by the target page.

4. A method according to claim 3, wherein said obtaining target configuration parameters matched by said target preloading rules comprises:

and verifying the configuration parameters carried by the configuration file through the preloading script, and if the configuration parameters pass the verification, reading the target configuration parameters corresponding to the preloading rule from the configuration file.

5. The method of claim 2, wherein generating a preload request based on the target configuration parameters comprises:

Acquiring a parameter type corresponding to the target configuration parameter, and detecting whether a bound parameter splicing rule exists in the parameter type;

If the parameter type has a bound parameter splicing rule, splicing the target configuration parameters according to the parameter splicing rule to obtain spliced target configuration parameters;

and generating the preloading request by using the spliced target configuration parameters.

6. The method of claim 1, wherein after generating a preload request based on the target configuration parameters, the method further comprises:

Acquiring a browser window object of the browser, wherein the browser window object is used for storing page data associated with the preloading request;

Mounting the preloading request to the browser window object;

and if the page data returned by the server based on the preloading request is monitored, the page data is mounted to the browser window object.

7. The method of claim 6, wherein the method further comprises:

Acquiring a page data use request;

Responding to the page data use request, and determining a data use requirement;

And inquiring corresponding target page data from the browser window object by utilizing the data use requirement.

8. A page loading apparatus, the apparatus comprising:

the acquisition module is used for acquiring an HTML file sent by a server, wherein the HTML file is sent after the server receives a page loading request transmitted by a browser;

the analysis module is used for analyzing the HTML file to obtain target resource parameters and target configuration parameters associated with the current loading target page;

The processing module is used for generating a pre-loading request based on a target configuration parameter and a resource loading request based on the target resource parameter, and synchronously sending the resource loading request and the pre-loading request to a server, wherein the server is used for feeding back resource data to the browser according to the resource loading request and feeding back page data to the browser according to the target configuration parameter carried by the pre-loading request;

And the loading module is used for acquiring the page data and the resource data fed back by the server and loading the page data and the resource data to the target page.

9. An electronic device, comprising:

a memory and a processor in communication with each other, the memory having stored therein computer instructions which, upon execution, cause the processor to perform the method of any of claims 1 to 7.

10. A computer readable storage medium having stored thereon computer instructions for causing a computer to perform the method of any one of claims 1 to 7.