CN112115396A

CN112115396A - Webpage rendering method, device, equipment and storage medium

Info

Publication number: CN112115396A
Application number: CN202010997744.0A
Authority: CN
Inventors: 杨凯
Original assignee: Beijing Dajia Internet Information Technology Co Ltd
Current assignee: Beijing Dajia Internet Information Technology Co Ltd
Priority date: 2020-09-21
Filing date: 2020-09-21
Publication date: 2020-12-22
Anticipated expiration: 2040-09-21
Also published as: CN112115396B

Abstract

The disclosure relates to a webpage rendering method, a webpage rendering device, equipment and a storage medium. The method is applied to the client and comprises the following steps: in the display process of a client interface, acquiring a webpage display request; when a webpage display request is acquired, starting data processing operations executed in series in webpage rendering in parallel; and rendering the webpage according to the content of the data processing operation and displaying the webpage. According to the method and the device, the scheme of opening the page by the H5 technology can be optimized by starting the original serially executed data processing operation in the webpage rendering in parallel, the opening time of the H5 page is shortened, the defects of an intelligent terminal are overcome, and the effect of user experience is improved.

Description

Webpage rendering method, device, equipment and storage medium

Technical Field

The present disclosure relates to communications technologies, and in particular, to a method, an apparatus, a device, and a storage medium for rendering a webpage.

Background

With the development of computer technology and communication technology, more and more services are implemented through web pages of intelligent terminals. For example, the web page of an Application (APP) is changed in real time, and the product demand is quickly responded.

In the related art, the quick presentation of a web page is realized by the hypertext 5.0(HTML5, H5) technology. However, because the communication network environment where the intelligent terminal is located is complex, the machine performance of the intelligent terminal is diversified, and the machine performance of some intelligent terminals is poor, for example, the web view kernel version of the mobile phone is low, the web page loading of the intelligent terminal is slow, and the user experience is seriously affected.

Therefore, it is urgently needed to optimize a scheme for opening a page by using the H5 technology, and reduce the opening time of the H5 page, so as to make up for the deficiency of a communication network or an intelligent terminal and improve user experience.

Disclosure of Invention

The embodiment of the disclosure provides a webpage rendering method, a webpage rendering device, equipment and a storage medium, and aims to at least solve the problems that in the related art, the opening time of a webpage through an H5 technology is long and the user experience is poor. The technical scheme of the embodiment of the disclosure is as follows:

according to a first aspect of the embodiments of the present disclosure, there is provided a method for rendering a webpage, which is applied to a client and includes:

in the display process of a client interface, acquiring a webpage display request;

when the webpage display request is acquired, starting data processing operations executed in series in webpage rendering in parallel;

and rendering the webpage according to the content of the data processing operation and displaying the webpage.

Optionally, the step of starting the data processing operation executed in series in the webpage rendering in parallel includes:

the data processing operation of at least two items of contents are started in parallel: the method comprises the steps of starting a webpage view, preloading a content document of the webpage, preloading an external script file of the webpage, preloading an application programming interface of the webpage and preloading a webpage picture.

Optionally, after the step of obtaining the webpage display request, the method further includes:

when the webpage data corresponding to the webpage display request exist in the local cache, and the webpage display request is acquired, the data processing operation of at least two contents is started in parallel: the method comprises the steps of starting a webpage view, preloading content documents of the webpage from a local cache, preloading external script files of the webpage from the local cache, preloading application programming interfaces of the webpage from the local cache and preloading webpage pictures from the local cache.

when the webpage data corresponding to the webpage display request do not exist in the local cache, and the webpage display request is acquired, the data processing operation of at least two contents is started in parallel: the method comprises the steps of starting a webpage view, preloading a content document of a webpage from a server through a network, preloading an external script file of the webpage from the server through the network, preloading an application programming interface of the webpage from the server through the network and preloading a webpage picture from the server through the network.

Optionally, the web page display request includes: the web page presents the requested uniform resource locator URL.

Optionally, the URL includes: the system comprises a fixed identification of the webpage resource and a wildcard character, wherein the wildcard character is used for identifying the client.

Optionally, the following data processing operations of at least two items of content are started in parallel: the steps of starting a webpage view, preloading a content document of a webpage, preloading an external script file of the webpage, preloading an application programming interface of the webpage and preloading a webpage picture comprise:

acquiring client identification information;

updating the wildcard characters into the client identification information, and generating a target URL of a webpage display request;

the data processing operation of at least two items of contents are started in parallel: starting a webpage view, preloading a content document of a webpage corresponding to the target URL, preloading an external script file of the webpage corresponding to the target URL, preloading an application programming interface of the webpage corresponding to the target URL, and preloading a webpage picture corresponding to the target URL.

Optionally, the step of starting the web page view includes:

and starting the initialized web page view from the web page view cache pool when the web page display request is acquired.

acquiring configuration information corresponding to the webpage display request, wherein the configuration information comprises a pre-cached main page, a sub-page corresponding to the main page, caching opportunity corresponding to the main page or the sub-page, and a caching address corresponding to the main page or the sub-page;

and caching at least one main page corresponding to the webpage display request, sub-pages corresponding to the main page at corresponding caching opportunities and corresponding caching addresses in advance according to the configuration information.

Optionally, the caching includes:

Optionally, the steps of preloading an external script file of a webpage, preloading an application programming interface of the webpage, and preloading a webpage picture include:

acquiring a preset preloading protocol; the preloading protocol comprises an external script file, an application programming interface and a picture corresponding to the webpage display request;

and according to the preloading protocol, preloading an external script file of the webpage, preloading an application programming interface of the webpage and preloading a webpage picture.

Optionally, in the displaying process of the client interface, the step of obtaining the webpage display request includes:

in the display process of a client interface, acquiring a webpage display request of a page to be displayed in the current client interface; alternatively, the first and second electrodes may be,

in the display process of the client interface, acquiring a webpage display request of a page to be displayed, which is jumped to enter based on the current client interface.

According to a second aspect of the embodiments of the present disclosure, there is provided a web page rendering apparatus applied to a client, including:

the first acquisition unit is configured to acquire a webpage display request in the display process of the client interface;

the starting unit is configured to execute data processing operation executed in series in the webpage rendering in a parallel mode when the webpage display request is acquired;

and the display unit is configured to render the webpage according to the content of the data processing operation and display the webpage.

Optionally, the starting unit includes:

the first starting subunit is used for starting data processing operations of at least two items of content in parallel: the method comprises the steps of starting a webpage view, preloading a content document of the webpage, preloading an external script file of the webpage, preloading an application programming interface of the webpage and preloading a webpage picture.

Optionally, the web page rendering apparatus further includes:

a second sub-promoter unit, configured to, after the step of obtaining the web page display request, execute, when web page data corresponding to the web page display request exists in a local cache, and when the web page display request is obtained, concurrently start data processing operations of at least two of the following contents: the method comprises the steps of starting a webpage view, preloading content documents of the webpage from a local cache, preloading external script files of the webpage from the local cache, preloading application programming interfaces of the webpage from the local cache and preloading webpage pictures from the local cache.

Optionally, the web page rendering apparatus further includes:

a third sub-promoter unit, configured to, after the step of obtaining the web page display request, execute, when there is no web page data corresponding to the web page display request in a local cache, and when the web page display request is obtained, concurrently start data processing operations of at least two of the following contents: the method comprises the steps of starting a webpage view, preloading a content document of a webpage from a server through a network, preloading an external script file of the webpage from the server through the network, preloading an application programming interface of the webpage from the server through the network and preloading a webpage picture from the server through the network.

Optionally, the first starting unit is specifically configured to perform:

the acquiring subunit is configured to acquire client identification information when acquiring the webpage display request;

acquiring client identification information;

Optionally, the first starting unit is specifically configured to perform:

Optionally, the webpage rendering apparatus further includes:

a second obtaining unit, configured to, after the step of obtaining a webpage display request, perform obtaining of configuration information corresponding to the webpage display request, where the configuration information includes a pre-cached main page, a sub-page corresponding to the main page, a caching opportunity corresponding to the main page or the sub-page, and a caching address corresponding to the main page or the sub-page;

and the caching unit is configured to cache at least one main page corresponding to the webpage display request, a sub-page corresponding to the main page at a corresponding caching opportunity and a corresponding caching address in advance according to the configuration information.

Optionally, the cache unit includes:

the cache subunit is configured to execute data processing operations for starting at least two of the following contents in parallel: the method comprises the steps of starting a webpage view, preloading a content document of the webpage, preloading an external script file of the webpage, preloading an application programming interface of the webpage and preloading a webpage picture.

Optionally, the first promoter unit is specifically configured to perform:

Optionally, the first obtaining unit includes:

the first obtaining subunit is configured to obtain a webpage display request of a page to be displayed in a current client interface in the display process of the client interface; alternatively, the first and second electrodes may be,

and the second acquiring subunit is configured to acquire a webpage display request of the page to be displayed, which is jumped to enter based on the current client interface, in the display process of the client interface.

According to a third aspect of the embodiments of the present disclosure, there is provided an electronic apparatus including:

a processor;

a memory for storing executable instructions of the processor;

wherein the processor is configured to execute the instructions to implement the web page rendering method according to any embodiment of the disclosure.

According to a fourth aspect of embodiments of the present disclosure, there is provided a storage medium, wherein instructions that, when executed by a processor of an electronic device, enable the electronic device to perform a web page rendering method according to any of the embodiments of the present disclosure.

According to a fifth aspect of embodiments of the present disclosure, there is provided a computer program product, wherein when the instructions of the computer program product are executed by a processor of an electronic device, the method for rendering a webpage according to any of the embodiments of the present disclosure is implemented.

The technical scheme provided by the embodiment of the disclosure at least brings the following beneficial effects:

by starting the data processing operation in the webpage rendering in parallel, the scheme of opening the webpage by the H5 technology can be optimized, the opening time of the H5 webpage is reduced, and the effect of user experience is improved.

It is to be understood that both the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the disclosure.

Drawings

The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the present disclosure and, together with the description, serve to explain the principles of the disclosure and are not to be construed as limiting the disclosure.

FIG. 1 is a flowchart illustrating a method of rendering a web page in accordance with an exemplary embodiment.

FIG. 2 is a flowchart illustrating yet another method of rendering a web page in accordance with an exemplary embodiment.

FIG. 3 is a flowchart illustrating yet another method of rendering a web page in accordance with an exemplary embodiment.

FIG. 4 is a flowchart illustrating a method of rendering a web page in accordance with an exemplary embodiment.

FIG. 5 is a block diagram illustrating an apparatus for rendering a web page according to an example embodiment.

Fig. 6 is a block diagram illustrating a structure of an electronic device according to an example embodiment.

Detailed Description

In order to make the technical solutions of the present disclosure better understood by those of ordinary skill in the art, the technical solutions in the embodiments of the present disclosure will be clearly and completely described below with reference to the accompanying drawings.

It should be noted that the terms "first," "second," and the like in the description and claims of the present disclosure and in the above-described drawings are used for distinguishing between similar elements and not necessarily for describing a particular sequential or chronological order. It is to be understood that the data so used is interchangeable under appropriate circumstances such that the embodiments of the disclosure described herein are capable of operation in sequences other than those illustrated or otherwise described herein. The implementations described in the exemplary embodiments below are not intended to represent all implementations consistent with the present disclosure. Rather, they are merely examples of apparatus and methods consistent with certain aspects of the present disclosure, as detailed in the appended claims.

Fig. 1 is a flowchart illustrating a web page rendering method according to an exemplary embodiment, where as shown in fig. 1, the web page rendering method is applied to a client, and includes the following steps:

in step 110, a web page display request is obtained during the display process of the client interface.

The client may be an application program in an intelligent terminal used by a user, for example, an APP in a smart phone. The smart terminal may be a mobile terminal such as a smart phone, a notebook computer, a PDA (personal digital assistant), a PAD (tablet computer), etc., and a stationary terminal such as a desktop computer, etc. A user may request a page resource from a server (e.g., a server) through an intelligent terminal to meet a user requirement, for example, a client may implement communication connection with the server through an HTTP (HyperText Transfer Protocol) or a Websocket Protocol.

The display process of the client interface can be a display process of an APP home page, for example, when a user enters an APP through an intelligent terminal, a display area can be fixed in the APP home page, for example, a shopping APP can have a home page display area, and a special price display area, an explosive money display area, a good recommendation display area, other activity display areas and the like can be arranged in the home page display area; for another example, the video APP may include a home page display area, a dynamic display area, a member display area, and my related content display area, where each display area may be subdivided into different display areas.

When a user enters an APP through an intelligent terminal such as a smart phone, the display process of the client interface can be the display process of each display area. The client interface can have a webpage display area, for example, the display area in the video APP can be a webpage display area related to real-time recommended news; the client interface may not have a web page display area, but may jump to the web page display area, for example, the display area in the shopping APP may also be some fixed activity display areas, and the client interface may jump to the web page display area by clicking the fixed activity display areas. The webpage display area is an area which can be changed in real time through a front-end page and meets product requirement display.

The web page display request may be a request for displaying a web page display area. May be a request for the presentation of one or more web pages. The acquiring of the webpage display request may be acquiring of the webpage display request for the webpage display area when the current client interface has the webpage display area in the display process of the client interface. For example, in response to a sliding operation instruction of a user, a webpage display area which needs to be changed in real time is embedded in the current client interface. The webpage display request can be acquired when the sliding operation instruction of the user is received; however, in order to reduce the opening duration of the webpage, the webpage display request may be obtained before the sliding operation instruction of the user, for example, the webpage display request may be obtained at a time when the client APP is started, or when the client interface is about to be displayed, or when the next display area of the current client interface is the webpage display area.

Or, the acquiring of the webpage display request may be that a webpage display area jumped to exists in the display process of the client interface, and the webpage display request is acquired. For example, in response to a user clicking a certain area, the current client interface needs to jump to an interface displayed through a web page. The webpage display request can be acquired when the user clicks; however, in order to reduce the open time of the web page, the web page display request may be obtained before the user clicks, for example, the web page display request may be obtained at a time when the client APP is started, or when the client interface is about to be displayed, or when the current client interface is about to jump to the interface for web page display.

In an embodiment of the present disclosure, in an optional implementation manner, in a display process of a client interface, the step of obtaining a webpage display request includes: in the display process of a client interface, acquiring a webpage display request of a page to be displayed in the current client interface; or, in the display process of the client interface, acquiring a webpage display request of a page to be displayed, which is jumped to enter based on the current client interface.

The page to be displayed in the current client interface refers to an embedded webpage display area in the current client interface, for example, one video display interface is divided into three display areas: the video comment processing system comprises a video playing area, a video introduction area and a video comment area. In the video display interface, the video comment area is a webpage display area and is embedded in the client interface, and in the client interface display process, a webpage display request of the video comment area needs to be acquired. The webpage display request can be synchronously acquired when the user triggers the client interface to display, so that the webpage opening time can be reduced, and the user experience is improved.

The page to be displayed, which is jumped to based on the current client interface, means that the current client interface may have a function key for jumping to other interfaces with web page display areas, for example, a plurality of news display areas may exist in a news display interface, and when a user clicks one of the news display areas, the user may jump to a news detail page corresponding to the news display area. The news detail page is a webpage display area, and can be a webpage to be displayed which is jumped to based on the current client interface. The webpage request can be acquired synchronously when the user triggers the current client interface to be displayed, or can be acquired when the user triggers a news display area in the current client interface to be displayed, so that the webpage opening time can be reduced, and the user experience can be improved.

In step 120, when the web page display request is obtained, the data processing operations executed serially in web page rendering are started in parallel.

The starting of the web page view, the content document, the external script file, the API (Application Programming Interface) Interface and the request of the web page picture are indispensable steps in opening the web page through the H5 technology. In the prior art, the execution sequence of these five steps is serial. Specifically, when a webpage display request is acquired, a webpage is called, and after the webpage is started and opened, a webpage view is initialized; after the webpage view is loaded, requesting a content document from a server; after the content document request is finished, analyzing the content in the content document, and identifying an external script file and an API (application program interface) interface required by webpage display; the method comprises the steps of obtaining information locally through an external script file, determining information associated with a client, organizing into a dynamic language, obtaining data in webpage display through a request API interface, rendering a webpage when the client receives the data, requesting a webpage picture and realizing webpage display. Therefore, the web page opened by the H5 technology is not optimized enough, the required opening time is long, and user experience is affected, especially when the communication network is poor or the performance of the client machine is poor, it is likely that the execution link of a certain step needs to wait for a long time, and the subsequent steps cannot be executed and can only wait.

In an optional implementation manner of this embodiment, the step of starting the data processing operation executed in series in the webpage rendering in parallel includes: the data processing operation of at least two items of contents are started in parallel: the method comprises the steps of starting a webpage view, preloading a content document of the webpage, preloading an external script file of the webpage, preloading an application programming interface of the webpage and preloading a webpage picture.

In order to reduce the time length for opening a webpage through the H5 technology and improve the user experience, the technical solution in the present disclosure may be to execute at least two steps of the starting of the webpage view, the content document, the external script file, the API interface, and the request of the webpage picture in parallel.

The webpage view can be webview, is a rendering kernel, and can be embedded in the client to realize the mixed development of the front-end webpage. The starting of the web page view may specifically be: when the webpage display request is acquired, the webpage view is directly started without waiting for the webpage to be called. For example, directly obtaining an initialized web page view; if the initialized web page view does not exist, the initialized web page view can be directly established when the web page display request is obtained, the web page view does not need to be initialized after the web page is opened, the web page opening time can be shortened, and particularly, the web page opening speed can be obviously improved when the communication network is poor or the performance of a client machine is poor.

In an optional implementation manner of the embodiment of the present disclosure, the step of starting the web page view includes: and starting the initialized web page view from the web page view cache pool when the web page display request is acquired.

If the current webpage is accessed or other webpages exist in the accessed state, the initialized webpage view exists in the webpage view cache pool, and the initialized webpage view can be directly started in the webpage view cache pool to realize webpage display without recreating the initialized webpage view. The first time 500 milliseconds are needed to create the webpage view, and the only 20 milliseconds are needed to directly start the initialized webpage view, so that the webpage opening time can be greatly reduced.

The content document may be an HTML (hypertext Markup Language) document, may be a document containing displayed web page data corresponding to a web page that a user needs to access, and may be a document containing how the web page is displayed and specific displayed content, for example. There may be external script files, API interfaces, and pictures that need to be used. The content document preloading can be that when a webpage display request is obtained, the content document is directly requested to be loaded according to the webpage display request, the webpage does not need to be opened, the webpage view does not need to be started, the webpage opening time can be shortened, and the user experience is improved. For example, the content document may be pre-loaded by requesting from the server in advance according to identification information of the web page in the web page presentation request, such as a URL (Uniform Resource Locator).

The external script file, the API interface and the webpage picture are information required by displaying the webpage, generally included in the content document, the content document needs to be analyzed, the required external script file, the API interface and the webpage picture are determined, and then loading is carried out, so that webpage display is realized. The external script file may be a JS (JavaScript, a programming language) file, for example, a JS file packaged in advance and capable of implementing an appointed function.

In order to improve and optimize the scheme for opening the webpage by the H5 technology, in the embodiment of the present disclosure, when a webpage display request is obtained, the content document may be preloaded, and the external script file, the API interface, and the webpage picture may be preloaded in parallel. For example, the external script file, the API interface and the web page picture may be matched with a web page, and when the web page display request is obtained, the required external script file, the API interface and the web page picture may be directly obtained according to the web page display request. Furthermore, the external script file, the API interface and the webpage picture can be preloaded, the content file does not need to be loaded after being analyzed and determined by the external script file, the API interface and the webpage picture after the content file is loaded, and the webpage opening time can be shortened.

Specifically, in an optional implementation manner of the embodiment of the present disclosure, the step of preloading an external script file of a web page, an application programming interface of the web page, and a web page picture includes: acquiring a preset preloading protocol; the pre-loading protocol comprises an external script file, an application programming interface and a picture corresponding to the webpage display request; and according to the preloading protocol, preloading an external script file of the webpage, preloading an application programming interface of the webpage and preloading a webpage picture.

The preloading protocol may be a protocol for instructing the client to preload the content required for the webpage presentation. The pre-loading protocol may include an external script file, an API interface, and a picture corresponding to the web page presentation request. According to the preloading protocol, the external script file, the API interface and the picture required by the webpage display request can be obtained before the content document of the webpage is analyzed, the external script file, the API interface and the picture can be preloaded, and the external script file, the API interface and the picture do not need to be loaded after the content document is analyzed. The preloading protocol may further include external script files, API interfaces, and preloading occasions of pictures, for example, when the client APP is started, or when a web page is called. And the specified external script file, the API interface and the picture can be preloaded at the specified time according to the preloading protocol. The time required by opening the webpage can be greatly shortened.

For example, when the client interface includes a webpage display area, the pre-loading opportunity may be when the client APP starts. Or the client interface does not contain a webpage display area, but can jump to a webpage through the client interface, and the preloading opportunity can be when the client APP is started. The webpage which can be jumped to through the client interface can be unique, or the webpage which can be jumped to can not be unique, but the number of the webpages is small, and too many network resources cannot be occupied due to preloading. Or, in order to avoid that network and storage resources are occupied due to the existence of a plurality of pre-loaded web pages and the current web page display is influenced, the pre-loading time may be when the web page is called. The webpage evoking can be in response to an operation instruction of a user, and a webpage display area exists in the client interface, or the webpage display interface is jumped to.

In step 130, the web page is rendered and presented according to the content of the data processing operation.

According to the data processing operation, the client can receive data required by webpage rendering and render the webpage, and the webpage rendering can be performed simultaneously with the display. It should be noted that, if the web page picture is not loaded completely, the frame and the text portion may be rendered first, a display area of the web page picture is reserved, and when the web page picture exists, the picture is rendered. In other words, the rendering of the web page and the preloading of the web page picture may also be processes performed in parallel. The problem that the time consumption for opening the webpage is long when the webpage picture is loaded can be avoided.

According to the technical scheme, a webpage display request is acquired in the display process of a client interface; when a webpage display request is acquired, starting data processing operations executed in series in webpage rendering in parallel; the webpage is rendered and displayed according to the content of the data processing operation, the problem of optimization of a scheme for opening the webpage through the H5 technology is solved, the webpage opening time is shortened, the webpage opening speed is increased, and the user experience effect is improved.

Fig. 2 is a flowchart illustrating a further webpage rendering method according to an exemplary embodiment, where the webpage rendering method is used in a client, as shown in fig. 2, and includes the following steps:

in step 210, a web page display request is obtained during the display process of the client interface.

In step 220, judging whether the local cache has webpage data corresponding to the webpage display request; if yes, go to step 230; if not, go to step 240.

The local cache may be a pre-cache in a memory of the intelligent terminal where the client is located. For example, the local cache may be a cache of web pages that have been accessed within a preset time period, or the local cache may be a pre-load of web pages that need to be accessed. Judging whether the webpage data corresponding to the webpage display request exists in the local cache or not can be judging whether the identification information corresponding to the webpage display request exists in the local cache or not, and if the identification information corresponding to the webpage display request exists, determining that the webpage data corresponding to the webpage display request exists in the local cache; if the identification information corresponding to the webpage display request does not exist in the local cache, it can be determined that the webpage data corresponding to the webpage display request does not exist in the local cache. The identification information corresponding to the webpage display request may be information used for representing a webpage to be displayed, for example, information such as a URL of the webpage.

In order to increase the accuracy of determining whether the webpage data corresponding to the webpage display request exists in the local cache, the size of the storage capacity of the file corresponding to the identification information in the local cache and/or the type of the file corresponding to the identification information in the local cache may be further determined on the basis of determining the identification information corresponding to the webpage display request. For example, when it is determined that files related to the URL corresponding to the web page display request exist in the local cache, it may be further determined whether each related file is greater than a preset capacity value, and if so, the type of the related file may be further determined, and it may be determined whether the related file includes various files required for web page display. If so, it may be determined that the web page data corresponding to the web page presentation request exists in the local cache. If not, determining that the webpage data corresponding to the webpage display request does not exist in the local cache.

To further illustrate that the local cache may be a pre-load of a web page that needs to be accessed, in an optional implementation manner of the embodiment of the present disclosure, after the step of obtaining a web page display request, the method further includes: acquiring configuration information corresponding to the webpage display request, wherein the configuration information comprises a pre-cached main page, a sub-page corresponding to the main page, caching opportunity corresponding to the main page or the sub-page, and a caching address corresponding to the main page or the sub-page; and caching at least one main page corresponding to the webpage display request, and the sub-page corresponding to the main page at the corresponding caching opportunity and the corresponding caching address in advance according to the configuration information.

Wherein caching comprises concurrently initiating data processing operations of at least two of the following: the method comprises the steps of starting a webpage view, preloading a content document of the webpage, preloading an external script file of the webpage, preloading an application programming interface of the webpage and preloading a webpage picture.

The obtaining timing of the configuration information may be when the client starts, for example, when the user clicks an APP open button. Namely, when the user clicks the APP, the content displayed by the webpage can be preloaded according to the configuration information, so that pre-caching is realized. The configuration information may include a pre-cached main page and a sub-page corresponding to the main page. The main page and the sub-page are relatively, for example, when the first page of the client is considered as the main page, the sub-page can be a secondary page jumped to by the first page; or, the home page of the client and the page displayed with the parallel function with the home page may be both main pages, and the secondary page further displayed or introduced to each main page is a sub-page corresponding to the main page.

Taking shopping APP as an example, the main page may be the home page, message page, shopping cart page, and account page of the shopping APP. The sub-page corresponding to the home page of the shopping APP may be a detail display page of each commodity or a detail display page of each activity. The detail display page for the commodity can also have sub-pages at the next level, such as a commodity purchase activity page or a commodity purchase detail page. The detail display page for the activity can also have sub-pages at the next level, such as a detail display page of goods in the activity.

The configuration information may further include cache opportunities of the main page and each corresponding sub-page, and taking the shopping APP as an example, when the user clicks the APP, the main pages of the shopping APP, such as the home page, the message page, the shopping cart page, and the account page, may be pre-cached. The sub-pages corresponding to the home page, such as the detail display pages of various commodities, can be pre-cached in the home page display process of clicking shopping APP by a user or after the display is finished. When the user enters the detail display pages of the commodities, the next-level sub-pages corresponding to the detail display pages of the commodities can be cached in advance. In short, the relevant data of the web page may be pre-cached before the user clicks or enters the web page according to the configuration information. The web page data associated with the web page presentation request may be made available in the local cache.

The configuration information may include cache addresses corresponding to the main pages or the sub-pages, so that each main page may correspond to a sub-page, and web page data related to the web page display request may be conveniently and accurately searched from the local cache in time. In the configuration information, the pre-caching opportunity and the caching address of the main page and the sub-page can be embodied in a resource list form, so that the lookup and the management are convenient.

The caching of the main page or the sub page can be similar, and the data processing operation of at least two of the following contents can be started in advance: the method comprises the steps of starting a webpage view, preloading a content document of a webpage, preloading an external script file of the webpage, preloading an API (application programming interface) interface of the webpage and preloading a webpage picture. The process of starting the web page view, preloading the content document of the web page, preloading the external script file of the web page, preloading the API interface of the web page, and preloading the web page picture may be similar to the above-mentioned processes.

Taking the web page display of the sub-page as an example, when the main page display request is obtained, the data processing operation of the sub-page corresponding to the main page can be cached in the local cache in parallel according to the configuration information, so that when the web page display request of the sub-page is obtained, the data processing operation of the sub-page can be requested from the local cache. The pre-caching may be a process of data requested by the client to the server in advance. The method and the device can realize that the relevant data displayed by the webpage are preloaded from the server and pre-cached in the local cache, and can directly request the relevant data displayed by the webpage in the local cache when the corresponding webpage is requested to be displayed, so that the time for opening the webpage is reduced, the operation of a user is quickly responded, and the user experience is improved.

In step 230, when the web page display request is acquired, the following data processing operations of at least two items of content are started in parallel: the method comprises the steps of starting a webpage view, preloading content documents of the webpage from a local cache, preloading external script files of the webpage from the local cache, preloading application programming interfaces of the webpage from the local cache and preloading webpage pictures from the local cache.

If the pre-cached webpage data related to the webpage display request exists in the local cache, the data can be directly requested in the local cache, the local cache can be a cache realized by pre-accessing the webpage, or the pre-caching of the webpage can be realized before the webpage display request is acquired. The data processing operation when the webpage display request is obtained may be similar to the execution process (the data processing operation of at least two contents, namely starting a webpage view, preloading a content document of a webpage, preloading an external script file of the webpage, preloading an application programming API interface of the webpage, and preloading a webpage picture, is started in parallel), and is not described again.

In step 240, when the web page display request is acquired, the following data processing operations of at least two items of content are started in parallel: the method comprises the steps of starting a webpage view, preloading a content document of a webpage from a server through a network, preloading an external script file of the webpage from the server through the network, preloading an application programming interface of the webpage from the server through the network and preloading a webpage picture from the server through the network.

If the local cache does not have the webpage data corresponding to the webpage display request, the client can request the server for the webpage data corresponding to the webpage display request, and the specific process can be that data processing operations of at least two of the following contents are started in parallel: the method comprises the steps of starting a webpage view, preloading a content document of a webpage from a server through a network, preloading an external script file of the webpage from the server through the network, preloading an API interface of the webpage from the server through the network and preloading a webpage picture from the server through the network. The execution time of each step may be similar to the corresponding content described above, and is not described herein again.

In step 250, the web page is rendered and presented according to the content of the data processing operation.

According to the technical scheme, a webpage display request is acquired in the display process of a client interface; judging whether the local cache has webpage data corresponding to the webpage display request; if yes, when the webpage display request is acquired, the data processing operation of at least two contents is started in parallel: starting a webpage view, preloading a content document of a webpage from a local cache, preloading an external script file of the webpage from the local cache, preloading an API (application programming interface) interface of the webpage from the local cache and preloading a webpage picture from the local cache; if not, when the webpage display request is acquired, the following data processing operations of at least two contents are started in parallel: starting a webpage view, preloading a content document of a webpage from a server through a network, preloading an external script file of the webpage from the server through the network, preloading an API (application programming interface) interface of the webpage from the server through the network and preloading a webpage picture from the server through the network; the webpage is rendered and displayed according to the content of the data processing operation, the problem of optimization of a scheme for opening the webpage through the H5 technology is solved, and the webpage data corresponding to the webpage display request can be requested in the local cache by judging whether the webpage data exist in the local cache, so that the webpage data request time is reduced, the webpage opening time is shortened, the webpage opening speed is increased, and the user experience is improved.

Fig. 3 is a flowchart illustrating a further webpage rendering method according to an exemplary embodiment, where the webpage rendering method is used in a client, as shown in fig. 3, and includes the following steps:

in step 310, a web page display request is obtained during the display process of the client interface.

In this embodiment, the webpage display request may include: the web page shows the requested URL. The URLs of different web pages are different and the URL of the web page presentation request may represent a unique web page. The matching between the web page display request and the corresponding web page data can be realized through the URL. In this embodiment, the URL may include a fixed identifier of the web page resource and a wildcard, and the wildcard may be used to identify the client.

The fixed identifier of the web page resource may be identifier information of a web page showing fixed content, for example, for a detailed introduction of a news, web page data is fixed between different intelligent terminals or different clients, and there is no difference. That is, the URL represented by the fixed identification of the web page resource is a static web page presentation. In the embodiment of the present disclosure, the URL may be represented by a fixed identifier of a web page resource and a wildcard, and the wildcard is used for identifying a client and is a dynamic web page display. For example, in shopping APP, the content presented by different client home pages is different, which may be caused by factors such as targeted recommendations for users or personal settings of users. Dynamic webpage display is carried out through the URL, data processing operation required by personalized webpage display can be provided for different users in advance, and static webpage display is not required to be restricted.

In step 320, when the web page display request is obtained, the client identification information is obtained.

The client identification information is information for indicating the client, and may be, for example, a device code of an intelligent terminal used by the user, or an ID (Identity) of the user. The client identification information may be pre-stored in a local memory, and the client identification information may be directly read from the local memory when the web page display request is obtained.

In step 330, the wildcard is updated to the client identification information, and the target URL of the web page display request is generated.

In the technical solution of the embodiment of the present disclosure, the URL may include two parts of a fixed identifier and a wildcard of a web resource, for example: the URL is api, abcde, com/did { did }, when the webpage display request and the client identification information are obtained, the { did } can be updated to the client identification information to generate a target URL of the webpage display request, and the webpage display related data processing operation is started in parallel through the target URL, so that the dynamic webpage can be preloaded, and the requirement of rapidly displaying personalized webpages on different clients can be met.

In step 340, data processing operations of at least two of the following are initiated in parallel: starting a webpage view, preloading a content document of a webpage corresponding to the target URL, preloading an external script file of the webpage corresponding to the target URL, preloading an application programming interface of the webpage corresponding to the target URL and preloading a webpage picture corresponding to the target URL.

The data processing operation process may be similar to the foregoing, and is not described herein again.

It should be noted that, in the foregoing pre-caching process, the pre-caching may be performed on a dynamic web page, that is, a web page corresponding to a URL that includes a fixed identifier of a web page resource and client identifier information. The above-mentioned process of determining whether the web page data corresponding to the web page display request exists in the local cache may also be determining whether the web page data corresponding to the URL including the fixed identifier of the web page resource and the client identifier information exists in the local cache.

In step 350, the web page is rendered and presented according to the content of the data processing operation.

According to the technical scheme of the embodiment of the disclosure, a webpage display request is obtained in the display process of a client interface, wherein the webpage display request comprises: URL of the webpage display request; when a webpage display request is acquired, acquiring client identification information; updating the wildcard characters into client identification information, and generating a target URL of a webpage display request; the data processing operation of at least two items of contents are started in parallel: starting a webpage view, preloading a content document of a webpage corresponding to a target URL, preloading an external script file of the webpage corresponding to the target URL, preloading an API (application programming interface) interface of the webpage corresponding to the target URL and preloading a webpage picture corresponding to the target URL; the webpage is rendered and displayed according to the content of the data processing operation, the problem of optimization of a scheme for opening the webpage through the H5 technology is solved, webpage data corresponding to a webpage display request of the dynamic webpage can be loaded in advance through a fixed identifier containing webpage resources and a universal URL, the webpage with dynamic property and certain relevance with a client side can be displayed quickly, the webpage opening time is shortened, and the user experience is improved.

Fig. 4 is a flowchart illustrating a method for rendering a webpage according to an exemplary embodiment, and as shown in fig. 4, in an embodiment of the present disclosure, a process of rendering a webpage may be: the client side starts the webview, requests the content document (HTML document), requests the external script file (JS file), requests the API interface, and requests the webpage picture in parallel. After the data is requested, the data can be received for webpage rendering.

The request of the data may be a request in the local cache, or a request to the server when the data does not exist in the local cache. For example, when the URL of the web page display request matches the URL of the local cache, data may be requested from the local cache and returned to the client for web page display.

Starting the webview can be directly used by starting the initialized webview from the webview cache pool; if the web view does not exist in the cache pool, the web view can be established when the web page display request is obtained, namely the web view is established simultaneously with the initialization of the web page, and the web view does not need to be established after the web page is opened.

The content document can be requested by constructing and sending a request in advance according to the webpage display request without waiting for the completion of the starting of the webpage and the completion of the loading of the webview. And requesting the JS file and the API interface, and informing the client and the JS file and the API interface required by the webpage page in advance at APP starting or other occasions through a preloading protocol. The client can send out the request in advance and cache without waiting for the end of the content document request, and after the needed JS file and the API interface are analyzed and determined for the content document, the request of the JS file and the API interface is sent out again. The process of requesting pictures may be similar to the process of requesting JS files and API interfaces, or may be requested and cached by the client in advance through a preloading protocol.

In the above process, when the client is started, the configuration information may be obtained in advance, and the web page and the resource list that need to be cached in advance are obtained, for example, at what time and at what cache address, which web page is cached. Related resources can be cached in advance at different occasions according to configuration information, and when a client is started, for example, a short video APP (application program), a user attention page, a user discovery recommendation page, a user city sharing page, a user personal setting page and a user search page can be cached. When the user enters one of the main pages, the sub-page corresponding to the main page may be cached, for example, the user enters the attention page of the user, and the short video page or the live broadcast page corresponding to the attention page of the user may be cached.

For different web pages, wildcards can be adopted during caching, and the wildcards are defined as fields filled by the client. For example, the user ID may be generated locally by the client, and the fast display request of the dynamic webpage may be satisfied.

Research shows that the search engine senses that the waiting time is reduced by 40%, and the flow and the number of registrants can be increased by 15%; every 1 second of increase in the loading time of the webpage, 10% of users can be lost; with a page load time of more than 3 seconds, 53% of the mobile network access activity will be discarded. Therefore, the opening speed of the webpage has very important influence on user experience and product data.

According to the technical scheme of the embodiment of the disclosure, the steps of opening the webpage by the H5 technology are parallelized, webpage data are cached in advance in a multi-trigger scene mode, and dynamic URL is adopted, so that the webpage opening scheme can be optimized to be extremely optimal, the opening time of the H5 page is greatly reduced, and the user experience is improved.

FIG. 5 is a block diagram illustrating an apparatus for rendering a web page according to an example embodiment. Referring to fig. 5, the apparatus may be used in a client, including. A first acquiring unit 510, a starting unit 520 and a presenting unit 530.

The first obtaining unit 510 is configured to obtain a webpage display request in a display process of a client interface;

the starting unit 520 is configured to execute data processing operations executed in series in the process of parallelly starting webpage rendering when the webpage display request is acquired;

a presentation unit 530 configured to perform rendering of the web page according to the contents of the data processing operation and to present the web page.

Optionally, the starting unit 520 includes:

Optionally, the web page rendering apparatus further includes:

the second sub-promoter unit is configured to execute, after the step of acquiring the web page display request, when web page data corresponding to the web page display request exists in the local cache, and when the web page display request is acquired, start data processing operations of at least two of the following contents in parallel: the method comprises the steps of starting a webpage view, preloading content documents of the webpage from a local cache, preloading external script files of the webpage from the local cache, preloading application programming interfaces of the webpage from the local cache and preloading webpage pictures from the local cache.

Optionally, the web page rendering apparatus further includes:

the third sub-promoter unit is configured to execute, after the step of acquiring the web page display request, when there is no web page data corresponding to the web page display request in the local cache, and when the web page display request is acquired, concurrently start data processing operations of at least two of the following contents: the method comprises the steps of starting a webpage view, preloading a content document of a webpage from a server through a network, preloading an external script file of the webpage from the server through the network, preloading an application programming interface of the webpage from the server through the network and preloading a webpage picture from the server through the network.

Optionally, the web page display request includes: the web page shows the requested URL.

Optionally, the URL includes: the fixed identification of the webpage resource and the wildcard character, wherein the wildcard character is used for identifying the client.

Optionally, the first promoter unit is specifically configured to perform:

acquiring client identification information;

updating the wildcard characters into client identification information, and generating a target URL of a webpage display request;

the data processing operation of at least two items of contents are started in parallel: starting a webpage view, preloading a content document of a webpage corresponding to the target URL, preloading an external script file of the webpage corresponding to the target URL, preloading an application programming interface of the webpage corresponding to the target URL and preloading a webpage picture corresponding to the target URL.

Optionally, the first promoter unit is specifically configured to perform:

Optionally, the web page rendering apparatus further includes:

the second obtaining unit is configured to execute obtaining of configuration information corresponding to the webpage display request after the webpage display request obtaining step, wherein the configuration information includes a pre-cached main page, a sub-page corresponding to the main page, a caching opportunity corresponding to the main page or the sub-page, and a caching address corresponding to the main page or the sub-page;

and the caching unit is configured to cache at least one main page corresponding to the webpage display request, and the sub-page corresponding to the main page at a corresponding caching opportunity and a corresponding caching address in advance according to the configuration information.

Optionally, the cache unit includes:

Optionally, the first promoter unit is specifically configured to perform:

acquiring a preset preloading protocol; the pre-loading protocol comprises an external script file, an application programming interface and a picture corresponding to the webpage display request;

Optionally, the first obtaining unit 510 includes:

With regard to the apparatus in the above-described embodiment, the specific manner in which each unit performs the operation has been described in detail in the embodiment related to the method, and will not be described in detail here.

Fig. 6 is a block diagram illustrating a structure of an electronic device according to an example embodiment. As shown in fig. 6, the server includes a processor 610; a Memory 620 for storing executable instructions for the processor 610, the Memory 620 may include a Random Access Memory (RAM) and a Read-Only Memory (ROM); wherein the processor 610 is configured to execute instructions to implement the above-described method.

In an exemplary embodiment, there is also provided a storage medium comprising instructions, such as a memory storing executable instructions, which are executable by a processor of an electronic device (smart terminal) to perform the above method. Alternatively, the storage medium may be a non-transitory computer readable storage medium, for example, the non-transitory computer readable storage medium may be a ROM, a Random Access Memory (RAM), a CD-ROM, a magnetic tape, a floppy disk, an optical data storage device, and the like.

In an exemplary embodiment, a computer program product is also provided, in which instructions, when executed by a processor of an electronic device (smart terminal), implement the above-described method.

Other embodiments of the disclosure will be apparent to those skilled in the art from consideration of the specification and practice of the disclosure disclosed herein. This application is intended to cover any variations, uses, or adaptations of the disclosure following, in general, the principles of the disclosure and including such departures from the present disclosure as come within known or customary practice within the art to which the disclosure pertains. It is intended that the specification and examples be considered as exemplary only, with a true scope and spirit of the disclosure being indicated by the following claims.

It will be understood that the present disclosure is not limited to the precise arrangements described above and shown in the drawings and that various modifications and changes may be made without departing from the scope thereof. The scope of the present disclosure is limited only by the appended claims.

Claims

1. A webpage rendering method is applied to a client side and comprises the following steps:

2. The web page rendering method of claim 1, wherein the step of starting the data processing operation executed serially in the web page rendering in parallel comprises:

3. The web page rendering method according to claim 2, further comprising, after the step of obtaining a web page display request:

4. The web page rendering method of claim 2, wherein the web page presentation request comprises: the web page presents the requested uniform resource locator URL.

5. The web page rendering method of claim 2, wherein the step of starting the web view comprises:

6. The web page rendering method according to claim 2, further comprising, after the step of obtaining a web page display request:

7. The method for rendering the webpage of claim 2, wherein the steps of preloading the external script file of the webpage, preloading the application programming interface of the webpage and preloading the webpage picture comprise:

acquiring a preset preloading protocol; the preloading protocol comprises an external script file, an application programming interface and a webpage picture corresponding to the webpage display request;

8. A webpage rendering device is applied to a client side and comprises the following components:

9. An electronic device, comprising:

a processor;

a memory for storing executable instructions of the processor;

wherein the processor is configured to execute the instructions to implement the web page rendering method of any of claims 1 to 7.

10. A storage medium, wherein instructions in the storage medium, when executed by a processor of an electronic device, enable the electronic device to perform a web page rendering method of any one of claims 1 to 7.