CN111723314A

CN111723314A - Webpage display method and device, electronic equipment and computer readable storage medium

Info

Publication number: CN111723314A
Application number: CN201910205294.4A
Authority: CN
Inventors: 唐美霞; 周绪南; 梁沁; 张裕钦; 郑国辉
Original assignee: Tencent Technology Shenzhen Co Ltd
Current assignee: Tencent Technology Shenzhen Co Ltd
Priority date: 2019-03-18
Filing date: 2019-03-18
Publication date: 2020-09-29
Anticipated expiration: 2039-03-18
Also published as: CN111723314B

Abstract

The application provides a webpage display method, a webpage display device, electronic equipment and a computer-readable storage medium. The method comprises the following steps: when a triggering instruction for a webpage is received, initializing a network view and simultaneously calling a client to generate the webpage; and calling the initialized network view, generating an interface image according to the page generated by the client and displaying the interface image. In the method, the initialization of the network view and the page generation of the client are executed simultaneously, the time for the network view to wait for the page is reduced, the time for the client to wait for the initialization process of the network view is reduced, the waiting or idle time in the traditional method is fully utilized, and the page generation is executed locally by the client, so that the interaction between the client and the server is simplified, the interaction time is saved, the page opening time is shortened integrally, and the user experience is improved.

Description

Webpage display method and device, electronic equipment and computer readable storage medium

Technical Field

The present invention relates to the field of network technologies, and in particular, to a method and an apparatus for displaying a web page, an electronic device, and a computer-readable storage medium.

Background

At present, electronic devices such as smart phones, tablet computers, and two-in-one computers have been widely popularized. Users typically browse web pages through these electronic devices.

An existing webpage display method includes that an electronic device receives a trigger instruction aiming at a certain webpage input by a user, calls a web browser view (web view) to search a real IP (Internet Protocol address) address of a server where the webpage is located through a Domain Name System (DNS), then sends a request meeting an HTTP (hyper text transfer Protocol) to an IP point, requests to obtain an HTML page of the webpage, after the electronic device and the server hold hands for a plurality of times, the server feeds back a requested HTML template, and at the moment, the WEBVIEW displays the HTML template (the content is blank); then, the WEBVIEW sends a content data acquisition request to the server through javascript (an interpreted scripting language) code, and after a series of handshaking, the server feeds back the requested content data, and the WEBVIEW renders the acquired content data to an HTML template, so that the content is displayed.

However, the inventor of the present application finds that the existing web presentation method takes a long time and is inefficient from receiving a web page trigger instruction to presenting a web page containing contents. That is, with the existing web presentation method, a long time (e.g., several seconds) is often required from the time when a user receives a trigger instruction for a web page to the time when the user actually sees the web page filled with content, resulting in a low user experience.

Disclosure of Invention

The application provides a webpage display method, a webpage display device, an electronic device and a computer-readable storage medium, which can solve the problem that in the prior art, the time consumption for displaying a webpage containing content is long. The technical scheme is as follows:

in a first aspect, a method for displaying a webpage is provided, which includes:

when a triggering instruction for a webpage is received, initializing a network view and simultaneously calling a client to generate the webpage;

and calling the initialized network view, generating an interface image according to the page generated by the client and displaying the interface image.

Optionally, initializing the web view and simultaneously invoking the client to generate the page includes:

starting to call a client to generate a page in the process of initializing the network view;

or, initializing the network view in the process of calling the client to generate the page;

or, the initialization of the network view is started, and the calling of the client-side generation page is started at the same time.

Optionally, invoking the client to generate a page, including:

when the client side generates the page for the first time, the client side obtains a prestored hypertext transfer protocol HTML template, a first JS file of the client side and a first JS library file; the first JS file and the first library JS file are respectively a business JS file and a process control JS file which support a client to generate a page;

acquiring common gateway interface CGI data of a webpage from server equipment according to the first JS file and the first JS file, and storing the CGI data;

generating an HTML fragment of a home page under a page generation environment of a client according to the first JS file, the first JS file and the CGI data;

and combining the HTML template with the HTML fragment of the home page to obtain a home page generated by the client, storing the home page and outputting the home page to the network view.

Optionally, storing CGI data includes: storing the CGI data in a non-volatile memory of the electronic device;

and, storing the home screen page, comprising: storing the first screen page into a volatile memory of the electronic equipment; the input/output interface speed of the volatile memory is higher than that of the non-volatile memory;

and after outputting to the network view, the method further comprises: and calling the network view to acquire a prestored network view JS file, acquiring CGI data from the network again by executing the network view JS file, and updating the stored CGI data.

Optionally, invoking the client to generate a page, including:

when the situation that the page is not generated for the first time is confirmed, the stored CGI data are directly read by calling the acquired JS file in the client;

generating HTML (hypertext markup language) fragments of other current pages under the page generation environment of the client according to the acquired first library JS file, the acquired first JS file and the acquired CGI data; the other pages are pages except the first screen page;

and combining the HTML template with HTML fragments of other current pages to obtain other current pages generated by the client, storing the other current pages and outputting the other current pages to the network view.

Optionally, the webpage display method of the first aspect further includes:

and when the initialization of the network view is finished and the current other pages of the client side are not generated, calling the network view to read the stored previous other pages to generate an interface image and displaying the interface image.

Optionally, according to the first JS file, and the CGI data, generating an HTML segment of the top page or the current other pages in the environment of the generated page at the client, including:

processing the CGI data according to the JS file in the first library and an vue function in a dependent file of the first JS file in the generated page environment to obtain a vue instance; generating a virtual node tree from the vue instance; and synchronously converting the virtual node tree into HTML fragments according to the render-to-string function in the dependent file.

Optionally, before invoking the client to generate the page, the method further includes:

removing the following items of the dependent file of the primary JS file to obtain the dependent file of the first JS file: data observation and observation module, remove asynchronous queues, and interface of virtual node tree to generate document nodes.

Optionally, the first JS file comprises a first JS file based on vue framework; and the first JS file based on the vue framework is pre-constructed by the following method:

converting the vue file containing the service code into a main file in a JS format;

splitting a client inlet construction file from the main file;

building a file at a client entrance by using a building tool, and compiling the file into an executable first JS file;

the build tool includes vue converter and vue style converter, vue converter includes binary code that supports client-generated pages, both inline CSS logic in vue style converter and binary code that inserts virtual node tree node operations are masked.

Optionally, converting the vue file containing the service code into a main file in JS format includes:

when a character string representing the non-client-side generated logic exists in the vue file, shielding a source code of a non-client-side generated page corresponding to the character string; the vue file which shields the source code of the page generated by the non-client side is converted into a main file in the JS format;

when no string characterizing the non-client generated logic is present in the vue file, the vue file is converted directly to the main file in JS format.

Optionally, before confirming that the page is generated for the first time by the client, the method further includes:

determining whether the client has a webpage generating environment, wherein the webpage generating environment comprises a JS (JavaScript) kernel, a software tool kit (SDK) and a Content Delivery Network (CDN) or an offline package containing a first JS file and a first database JS file; the JS kernel is generated as a JS kernel supporting the client to generate a page; generating an SDK to support the client to generate a page;

and when the client does not have the generated page environment, switching to the mode of sequentially requesting the HTML template and the CGI data corresponding to the webpage from the server equipment.

In a second aspect, there is provided a web page display apparatus, including:

and the processing module is used for initializing the network view and simultaneously calling the client to generate the page when receiving the triggering instruction aiming at the webpage.

And the display module is used for calling the initialized network view, generating an interface image according to the page generated by the client and displaying the interface image.

Optionally, the processing module is specifically configured to start to invoke the client to generate a page in the process of initializing the web view; or, initializing the network view in the process of calling the client to generate the page; or, the initialization of the network view is started, and the calling of the client-side generation page is started at the same time.

Optionally, in this embodiment of the present application, the processing module of the web page display apparatus includes: an initialization unit and a generation unit.

And the initialization unit is used for initializing the network view when receiving the triggering instruction aiming at the webpage.

And the generating unit is used for calling the client to generate the page when receiving the triggering instruction aiming at the webpage.

Optionally, the generating unit is specifically configured to, when it is determined that the client generates the page for the first time, the client acquires a pre-stored HTML template, a first JS file of the client, and a first JS library file; the first JS file and the first library JS file are respectively a business JS file and a process control JS file which support a client to generate a page; according to the first JS file and the first JS file, CGI data of a webpage are obtained from server-side equipment and the CGI data are stored; generating an HTML fragment of a home page under a page generation environment of a client according to the first JS file, the first JS file and the CGI data; and combining the HTML template with the HTML fragment of the home page to obtain a home page generated by the client, storing the home page and outputting the home page to the network view.

Optionally, the generating unit is specifically configured to store the CGI data in a nonvolatile memory of the electronic device; storing the first screen page into a volatile memory of the electronic equipment; the input/output interface speed of the volatile memory is higher than that of the non-volatile memory; and after the output to the network view, calling the network view to acquire a prestored network view JS file, acquiring CGI data from the network again by executing the network view JS file, and updating the stored CGI data.

Optionally, the generating unit is specifically configured to, when it is determined that the page is not generated for the first time by the client, invoke the acquired first library JS file in the client to directly read the stored CGI data; generating HTML (hypertext markup language) fragments of other current pages under the page generation environment of the client according to the acquired first library JS file, the acquired first JS file and the acquired CGI data; the other pages are pages except the first screen page; and combining the HTML template with HTML fragments of other current pages to obtain other current pages generated by the client, storing the other current pages and outputting the other current pages to the network view.

Optionally, the generating unit is further configured to, when the initialization of the network view is completed and the current other pages of the client have not yet generated a page, invoke the network view to read the stored previous other page to generate and display an interface image.

Optionally, the generating unit is specifically configured to process the CGI data according to the first library JS file and an vue function in the dependent file of the first JS file in the generated page environment, so as to obtain a vue instance; generating a virtual node tree from the vue instance; and synchronously converting the virtual node tree into HTML fragments according to the render-to-string function in the dependent file.

Optionally, in this embodiment of the application, the web page display apparatus further includes: and setting an optimization module.

The setting optimization module is used for removing the following items of the dependent file of the primary JS file before the client is called to generate the page, and obtaining the dependent file of the first JS file: data observation and observation module, remove asynchronous queues, and interface of virtual node tree to generate document nodes.

Optionally, the setting optimization module is further configured to pre-construct the first JS file based on the vue framework by: converting the vue file containing the service code into a main file in a JS format; splitting a client inlet construction file from the main file; building a file at a client entrance by using a building tool, and compiling the file into an executable first JS file; the build tool includes vue converter and vue style converter, vue converter includes binary code that supports client-generated pages, both inline CSS logic in vue style converter and binary code that inserts virtual node tree node operations are masked. The first JS file includes a first JS file based on the vue framework.

Optionally, the optimization module is specifically configured to, when a character string representing the non-client-side generated logic exists in the vue file, shield a source code of the non-client-side generated page corresponding to the character string; the vue file which shields the source code of the page generated by the non-client side is converted into a main file in the JS format; when no string characterizing the non-client generated logic is present in the vue file, the vue file is converted directly to the main file in JS format.

Optionally, the generating module is further configured to determine whether the client has a generated page environment before the client generates the page for the first time, where the generating of the page environment includes generating a JS kernel, generating an SDK, and generating a CDN or an offline package including the first JS file and the first JS library file; the JS kernel is generated as a JS kernel supporting the client to generate a page; generating an SDK to support the client to generate a page; and when the client does not have the generated page environment, switching to the mode of sequentially requesting the HTML template and the CGI data corresponding to the webpage from the server equipment.

In a third aspect, an electronic device is provided, including:

a processor, a memory, and a bus;

a bus for connecting the processor and the memory;

the memory comprises a nonvolatile memory and a volatile memory, wherein the nonvolatile memory is used for storing operation instructions;

and the processor is used for executing the webpage display method provided by any one of the first aspect by calling the operation instruction to the volatile memory.

In a fourth aspect, there is provided a computer readable storage medium storing at least one instruction, at least one program, a set of codes, or a set of instructions, which is loaded and executed by a processor to implement the web page presentation method as provided in any one of the first aspect.

The technical scheme provided by the embodiment of the application has the following beneficial effects:

in the embodiment of the application, the initialization of the network view and the generation of the page by the client are simultaneously executed, the time for waiting the generation of the page is greatly reduced for the network view, the time for waiting the initialization process of the network view is greatly reduced for the step of generating the page, the waiting or idle time in the traditional method is fully utilized, and the generation of the page is locally executed at the client, so that the steps of requesting the page and returning the page to a server device are saved, the interaction is simplified, the interaction time is saved, the time required by the whole process from the receiving of a trigger instruction aiming at the page to the displaying of an interface image containing the page is shortened, namely the page opening time is integrally shortened, particularly the opening time of a first screen page can be greatly shortened, the zero-white-screen experience can be approached or reached, and the experience of opening the page by a user is more approximate to the experience of directly generating and opening the page at the local client, the method is beneficial to improving the user experience and the user retention rate. The white screen is that the HTML frame is displayed but the content in the frame is blank.

In addition, in the embodiment of the application, the generation of the page is implemented locally at the client of the electronic device, so that the dependence on the server device and the network is reduced, the locally generated page at the client fully utilizes the native performance of the client in the electronic device (such as a mobile device), no additional server device is needed, no background server scheme is needed, the cost of the server device and the operation and maintenance cost are reduced, and the access cost is reduced. For developers, the cost of software modification on one end of the electronic equipment for generating the page by the client is low, and additional software development on a server is not needed.

Additional aspects and advantages of the present application will be set forth in part in the description which follows and, in part, will be obvious from the description, or may be learned by practice of the present application.

Drawings

In order to more clearly illustrate the technical solutions in the embodiments of the present application, the drawings used in the description of the embodiments of the present application will be briefly described below.

Fig. 1a is a schematic diagram illustrating an architecture of a web page display system according to an embodiment of the present application;

fig. 1b is a schematic diagram of a partial software architecture of an electronic device according to an embodiment of the present application;

fig. 2 is a schematic flowchart of a web page display method according to another embodiment of the present application;

FIG. 3 is a schematic diagram illustrating an example of a webpage displaying method according to another embodiment of the present application;

FIG. 4 is a schematic flow chart of Vue server side generating function renderToString in the prior art;

FIG. 5 is a schematic diagram of a method for constructing a client JS file and a network view JS file provided by another embodiment of the present application;

FIG. 6 is a schematic diagram illustrating a principle of distinguishing source codes of vue files for generating pages for clients by means of string annotation according to another embodiment of the present application;

FIG. 7 is a schematic overall architecture diagram illustrating an example of a webpage presenting method according to another embodiment of the present application;

fig. 8a and 8b are schematic diagrams of an example of a trigger page and a home screen page provided in yet another embodiment of the present application, respectively;

fig. 8c and 8d are schematic diagrams of still another example of a trigger page and a home screen page provided in yet another embodiment of the present application, respectively;

FIG. 9a is a schematic diagram illustrating the transition of multiple first screen time instances of a local client generated page that is not accessed according to yet another embodiment of the present application;

FIG. 9b is a schematic diagram illustrating the passage of multiple first screen time instances of accessing a local client generated page according to yet another embodiment of the present application;

fig. 10 is a schematic structural diagram of an electronic device according to still another embodiment of the present application.

Detailed Description

Reference will now be made in detail to embodiments of the present application, examples of which are illustrated in the accompanying drawings, wherein like or similar reference numerals refer to the same or similar elements or elements having the same or similar function throughout. The embodiments described below with reference to the drawings are exemplary only for the purpose of explaining the present application and are not to be construed as limiting the present invention.

As used herein, the singular forms "a", "an", "the" and "the" are intended to include the plural forms as well, unless the context clearly indicates otherwise. It will be further understood that the terms "comprises" and/or "comprising," when used in this specification, specify the presence of stated features, integers, steps, operations, elements, and/or components, but do not preclude the presence or addition of one or more other features, integers, steps, operations, elements, components, and/or groups thereof. It will be understood that when an element is referred to as being "connected" or "coupled" to another element, it can be directly connected or coupled to the other element or intervening elements may also be present. Further, "connected" or "coupled" as used herein may include wirelessly connected or wirelessly coupled. As used herein, the term "and/or" includes all or any element and all combinations of one or more of the associated listed items.

To make the objects, technical solutions and advantages of the present application more clear, embodiments of the present application will be described in further detail below with reference to the accompanying drawings.

The inventor of the present application notices that there is a web page display method based on a server-side generated page. The process of generating the page by the server is mainly that the server equipment requests page data and page resources, and the server equipment synthesizes and outputs a page (such as a first screen page) containing content data. The server side equipment is provided with a server side.

Specifically, when receiving a webpage triggering instruction input by a user, the electronic device starts a network view and then sends a page request to the server device; the server side equipment generates a page return according to the page request, the electronic equipment receives the page generated by the server side equipment and then displays the page in the network view, and at the moment, the page content is visible.

Then, the webpage display method based on the server-side generated page comprises one of the following defects:

1. the time waste of the network view initialization process and the server page generation process: on one hand, the page loading request is initiated after the network view is initialized, and the server side equipment and the network are in a waiting state in the initialization process, depend on the network and do not reasonably utilize the idleness of the network; on the other hand, in the process of generating and returning the page by the server, the network view of the electronic device is always waiting.

2. The reconstruction cost is too high: the generation of the page by the server not only needs to modify the service code, but also needs to develop and modify the server device (such as a server), and appoint a new request header and a new response header to ensure the normal operation of the cache policy.

3. The server-side generated page is inconvenient for caching page related data and cannot utilize offline packages of other software cached in the electronic equipment. The offline package is a resource file which can be downloaded to a local nonvolatile memory, such as an SD card, in advance and can be accessed at any time without accessing a network.

4. The operation and maintenance cost is high: the background of the server needs to be built, the problems of load, overhead and the like of the server equipment need to be considered, the access cost is high, and the maintenance cost is high.

The application provides a webpage display method, a webpage display device, electronic equipment and a computer-readable storage medium, and aims to solve the above technical problems in the prior art.

The following describes the technical solutions of the present application and how to solve the above technical problems with specific embodiments. The following several specific embodiments may be combined with each other, and details of the same or similar concepts or processes may not be repeated in some embodiments. Embodiments of the present application will be described below with reference to the accompanying drawings.

One embodiment of the present application provides a web page presentation system, as shown in fig. 1a, the system including: electronic equipment and server side equipment.

The electronic equipment is electrically connected with the server side equipment through a network. The network in the embodiment of the present application may include at least one of the internet and a mobile communication network; the internet may include a local area network.

The electronic device has functions of networking, input and output, displaying and the like, and can be a terminal device, for example, the electronic device can be a desktop computer, a smart phone, a tablet computer or the like.

The electronic device can access the network through a local area network or a mobile communication network. For example, the electronic device may access the internet via a WiFi (Wireless Fidelity) local area network. For another example, the electronic device may access the internet through a mobile communication network such as 3G (3rd-Generation wireless telephone technology, third Generation mobile communication technology), LTE (Long Term Evolution ), and the like.

The server device may be at least one of a single server, a server cluster, and a distributed server. The server-side device can access the network in a wired mode. For example, the server device accesses a wide area network or backbone network of the internet through an optical fiber.

Optionally, in the webpage display system according to the embodiment of the present application, the electronic devices may be single or multiple, and each electronic device is configured to implement the webpage display method provided subsequently in the embodiment of the present application, and the specific method is described in detail later, and is not described herein again; the electronic equipment is provided with a network view and a client. Optionally, as shown in fig. 1b, the client is an application program, and is mainly used for locally generating a page in the electronic device; the network view is an application program and is mainly used for generating an interface image according to a page generated by a client and displaying the interface image locally on the electronic equipment. For example, the electronic device may be a smart phone, the client may be an application a installed in the smart phone, and the web view may be a browser installed in the smart phone or a plug-in with a browsing function embedded in the application B.

The server device is installed with a server for providing resources supporting the electronic device to implement the web page display method, such as CGI (Common Gateway Interface) data, an offline package, or a CDN (Content Delivery Network) data file of a web page. The CDN is a content delivery network constructed on the network, and by means of edge servers deployed in various places, a user can obtain required content nearby through functional modules of a central platform, such as load balancing, content delivery, scheduling and the like, so that network congestion is reduced, and the access response speed and hit rate of the user are improved.

Another embodiment of the present application provides a method for displaying a webpage, a flowchart of the method is shown in fig. 2, and the method includes the following steps:

s201: and when a triggering instruction for the webpage is received, initializing the network view and simultaneously calling the client to generate the webpage.

Optionally, in the present application, a network view and a client are installed in the electronic device. When the electronic equipment receives a triggering instruction aiming at the webpage, the network view is initialized, and meanwhile, the client is called to generate the webpage.

Optionally, initializing the web view and simultaneously invoking the client to generate the page includes: starting to call a client to generate a page in the process of initializing the network view; or, initializing the network view in the process of calling the client to generate the page; or, the initialization of the network view is started, and the calling of the client-side generation page is started at the same time.

S202: and calling the initialized network view, generating an interface image according to the page generated by the client and displaying the interface image.

Specifically, the electronic device calls the network view in the running state after initialization, generates an interface image according to a page generated by the client, and displays the generated interface image.

In the embodiment of the application, the initialization of the network view and the page generation of the client are executed simultaneously, the time for waiting the page generation is greatly reduced for the network view, the time for waiting the initialization process of the network view is greatly reduced for the step of generating the page, the waiting or idle time in the traditional method is fully utilized, and the generation of the page is executed locally at the client, so that the steps of requesting the page from a server device and returning the page are saved, the interaction is simplified, the interaction time is saved, the time required by the whole process from the receiving of a trigger instruction aiming at the page to the displaying of an interface image containing the page is shortened, namely the page opening time is integrally shortened, particularly the opening time of a front screen page is greatly shortened, the zero-blank-screen experience can be approached or reached, and the experience of opening the page by a user is more approximate to the experience of directly generating and opening the page locally at the client, the method is beneficial to improving the user experience and the user retention rate. The white screen is that the HTML frame is displayed but the content in the frame is blank.

An example of the web page display method according to the embodiment of the present application is described below by taking an example of starting to perform web view initialization and generating a page by a client at the same time.

Specifically, as shown in fig. 3, after a user click a page entry, the electronic device receives a trigger instruction input by the user, sends a page request to the client while initializing a kernel of the webview, requests page data through a middle-layer parallel sub-thread of the client that generates a page environment, generates a first-screen html page including content data at the client, and directly generates a page (interface image) according to the first-screen html page generated by the client after the initialization of the webview kernel is completed, where page content is visible at this time. By starting to execute the network view initialization and the parallel loading mode of generating the page by the client, the time consumption for initializing the electronic equipment is shortened, and the total time consumption for loading the page is shortened.

Another possible implementation manner of the web page display method is provided in this embodiment. Specifically, a webpage display method based on a client-side generated page is provided.

Optionally, before executing the webpage displaying method based on the client-side generated page, a generated page environment supporting the client-side for page generation is provided.

Generating the page environment includes generating a JS kernel, generating an SDK (Software Development Kit), and a CDN or offline package containing the first JS file and the first library JS file. Generating a JS kernel as a JS kernel generated by a client; and generating the SDK to support the SDK generated by the client.

Optionally, a JSCore (JavaScript Core) generation environment in the client generation page environment is adapted.

Specifically, the client needs to provide a JS execution environment locally to generate the page, and the operation of the locally generated page logic is guaranteed. JSCore was subjected to several improvements:

1. the lower layer function (CallNative function) calling the client method at JSCore is provided based on the client, and the upper layer is adapted with a debug output function (console. log function), a timer (setTimeout function), and the like.

2. Based on the timer (setTimeout), a function (Promise) for asynchronous programming is adapted, and the callback nesting problem of asynchronous programming is solved. Promise is a function provided by the upper layer of the JavaScript programming language, and is a component for abstracting an asynchronous processing object and performing various operations on the object.

3. Asynchronous programming based functions (Promise) encapsulate functions of read-write cache, HTTP (hypertext transfer Protocol) request functions, and the like.

4. And the Cookie reading is stored in the global context after being acquired through the interface provided by the back-tuning client. Cookies are data that web sites store on an electronic device that is a local terminal of a user in order to discern the identity of the user.

Optionally, the framework layers in the environment to be generated are adapted.

For the page developed by using the native JS, the locally generated page of the client can be accessed without adapting the generation render conversion function. For pages developed using a framework, such as pages based on Vue (a set of progressive frameworks for building a user interface) or ReactJs (Javascript library for user interface building), the developer is required to adapt to generate a render conversion function by which the page instance is converted into html strings.

The utilization of offline packages involved in the client-generated page environment is described below.

Optionally, the off-line package of some software (such as mobile communication software) in the electronic equipment can be more fully utilized by the client-generated page. And issuing an off-line package by the server equipment, wherein the off-line package carries data such as a JS file and an HTML template file required by the client to generate the page, and storing the JS file and the HTML template file required by the client to generate the page in a local nonvolatile memory (such as an SD card) of the electronic equipment. After the offline packet is issued to the electronic device of the user, the electronic device can generate a page by acquiring the CGI data without acquiring a resource file from the server device.

Optionally, the client-generated page includes a client-first-time-generated page and a non-first-time-generated page. Non-first-time-generated pages may also be referred to as second-time-generated pages.

Optionally, before the electronic device confirms that the page is generated for the first time by the client, the method further includes: determining whether the client has a webpage generating environment, wherein the webpage generating environment comprises a JS (JavaScript) generating kernel, an SDK (software development kit) generating kernel and a CDN (content delivery network) or offline package containing a first JS file and a first JS library file; and when the client does not have the generated page environment, switching to the mode of sequentially requesting the HTML template and the CGI data corresponding to the webpage from the server equipment.

In addition, the generated page environment of the client of the present application supports demotion. For example, if the generated SDK in the page environment is not generated in the mobile version communication software, or the JS offline package is not generated in the electronic device of the user, the page is downgraded to a normal (i.e., non-client-generated) WEB page, and a conventional WEB page display method in the background art is executed, or a server generates a page generation interface image for display. Therefore, the problem of version conflict or offline package coverage rate can be avoided to cause page loading failure.

In the following, the electronic device calls the client to generate the content of the page when the triggering instruction for the web page is described in detail. The client-side generated page comprises a client-side first-time generated page and a non-first-time generated page. Non-first-time-generated pages may also be referred to as second-time-generated pages.

Optionally, the invoking, by the electronic device, the client generation page includes: when the electronic equipment confirms that the client generates a page for the first time, the client acquires a prestored HTML template, a first JS file of the client and a first JS library file; the first JS file and the first library JS file are respectively a business JS file and a process control JS file which support a client to generate a page.

The process control JS file comprises binary codes corresponding to a plurality of frame steps in the process of generating the page by the client; when the binary code of each framed step is executed, the service JS file containing the specific step content corresponding to the framed step is called. The process control JS file is similar to the main program, and the service JS file is similar to a subprogram linked to one step in the main program.

The service JS file includes a JS bundle (batch) file. The first library JS file includes a logic code of an execution process, and is used for processing the service JS file and the like.

And the client side in the electronic equipment acquires the CGI data of the webpage from the server side equipment according to the first JS file and stores the CGI data.

And the client side in the electronic equipment generates an HTML fragment of the home page under the page generation environment of the client side according to the first library JS file, the first JS file and the CGI data.

And the client in the electronic equipment combines the HTML template with the HTML fragment of the home page to obtain a home screen page generated by the client, stores the home screen page and outputs the home screen page to the network view.

Optionally, the electronic device invokes the client to generate the page, including: when the electronic equipment confirms that the client generates a page for the non-first time, the client in the electronic equipment calls the first library JS file acquired in the client to directly read the stored CGI data.

A client in the electronic equipment generates HTML (hypertext markup language) fragments of other current pages under the environment of the generated page of the client according to the acquired JS file in the first library, the first JS file and the read CGI data; the other pages are pages other than the first screen page.

And the client in the electronic equipment combines the HTML template with the HTML fragments of the current other pages to obtain the current other pages generated by the client, stores the current other pages and outputs the current other pages to the network view.

In the embodiment of the application, the difference from the first generation of the page by the client is that when the page is generated by the client for the second time, namely the page is not generated for the first time, the data is directly read from the cache of the electronic equipment, and the new data does not need to be acquired from the server equipment through the network, so that the time consumed by the network is greatly reduced, and the webpage display speed based on the second generation of the page by the client is greatly increased.

Optionally, a multi-level caching strategy is adopted in the embodiment of the present application. The client stores the CGI data into a nonvolatile memory of the electronic equipment, and stores pages (including a first screen page and a non-first screen page) generated by the client into a volatile memory of the electronic equipment. The input/output interface speed of the volatile memory is greater than the input/output interface speed of the non-volatile memory.

Optionally, the volatile memory may specifically be a memory, the memory includes a cache pool at a memory level, the non-volatile memory includes a flash memory, an external usb Disk, an SSD (Solid State Disk) or a mechanical hard Disk, and the flash memory includes an SD (Secure Digital memory) card.

Optionally, the electronic device invokes the client to store the CGI data, including: the client stores the CGI data into a nonvolatile memory; the electronic equipment calls a client storage first screen page, and the method comprises the following steps: the client stores the first screen page into a volatile memory; after the electronic device calls the client to output to the network view, the method further comprises the following steps: the electronic equipment calls the network view to acquire the prestored network view JS file, acquires the CGI data from the network again by executing the network view JS file, and updates the stored CGI data.

Specifically, 1) introduction of a storage manner of CGI data

When the electronic equipment calls the client to locally generate the page for the first time, the CGI data is acquired through a network request, and then the CGI data is stored in the SD card. And after the client generates the page, outputting the page to webview for interface image generation, re-acquiring the CGI for data updating of the page, and updating the data stored in the SD card.

When the client generates the page for the second time, the data is acquired from the SD card, and because the data is updated, the client can be ensured to be the latest to the maximum extent without re-requesting the data from the server device through the network.

2) Introduction storage mode of page generated by client

Pages generated by the client are stored in a cache pool of a memory level.

Optionally, the webpage display method based on the client-side generated page in the embodiment of the present application further includes: when the initialization of the network view is completed and the current other pages of the client side are not completely generated, the electronic equipment calls the network view to read the stored previous other pages to generate the interface image and display the interface image, so that the probability of white screen is greatly reduced.

Specifically, when the client generates the page for the second time, if the time consumed for generating the page by the client is longer than the initialization time of the webview, the webview can directly take the page in the cache pool to display without waiting for the completion of the page generation, and the white screen caused by the completion of the page generation can be avoided. And after the page is generated for the second time, updating the stored page.

Optionally, in the application, the package reduction optimization is performed on the dependence file package of the JS file.

Optionally, in this application, before invoking the client to generate the page, the method further includes: removing the following items of the dependent file of the primary JS file to obtain the dependent file of the first JS file: the data observation and observation module, the asynchronous queue and the virtual node tree generate an interface of the document node.

The adaptation of the framework layer in the client-side generated page environment is briefly described above. In the application, the webpage can be generated at the client by using the JS file of any web front end, namely webview, so that the primary JS file is supported to generate the webpage at the client, and the JS files of various frames are also supported to generate the webpage at the client. The JS frame of the Web front includes various types, including, for example, an Vue frame, an arttempete frame, or a ReactJS frame. Some improvements that support client-generated pages using pages developed by the framework are described below, taking pages based on the Vue framework as an example.

First, the modification of the core function renderToString of the client-generated page is introduced.

Optionally, renderToString functions of the Vue framework supporting the client-generated page migrate from the Vue core library functions of the server-generated page. Vue render ToString flow for the server to generate the page as shown in FIG. 4, the server in FIG. 4 uses rendering function _ render to convert Vue Instance into virtual node number vdom, uses virtual node tree conversion function patchNode to convert vdom into document fragment Html-string, then generates composite document Compound including head, style and script according to document Template Html Template and document fragment Html-string, and then outputs the result, OutputResult. The process of the patchNode function includes a process using a Node asynchronous API.

The inventor of the present Application finds, through research, that since the process of generating the page at the Vue server side strongly depends on the Node environment, a large number of Node-specific APIs (Application Programming interfaces) are called, for example, a bottom-layer file read-write Interface is called for processing the combination of the document fragment Html-string and the document Template Html Template, and a Node asynchronous API is used for processing the multi-Node virtual Dom.

In the process of generating the page by the client side of the application, the above processing is not needed. That is, in the present application, only the html string that is the result generated by the client needs to be obtained. The splicing of the document Template Html Template can be processed by a function encapsulated at the bottom layer. For CSS (streaming Style Sheets), since it is meaningless to process CSS in the process of generating a page by a client, a developer separates CSS from a JS file by a packaging tool, and when generating a document Template Html Template, the CSS of JS of a corresponding page is inline to Html Template, which can reduce the size of a first JS file. CSS is a computer language used to render file styles such as HTML or XML. HTML is one application of the standard universal markup language; XML is a subset of standard universal markup languages.

Next, the package reduction optimization of the dependence file package of the JS file based on the Vue framework is introduced.

Optionally, in this application, the JS file of the Vue framework, i.e., vue. The dependency file of the first JS file based on the vue framework is obtained by the following method: the electronic equipment removes the following items of the dependent file of the primary JS file to obtain the dependent file of the first JS file: data observation and observation module, remove asynchronous queues, and interface of virtual node tree to generate document nodes. Therefore, under the condition that the client side is not influenced to generate the page based on the vue frame, the number and the scale of the dependence files of the JS file are reduced, the page generating efficiency is improved, and the occupied storage space is reduced.

Specifically, 1) remove data observation (observer) and observer (watch): in the process of generating the page by the client, only a snapshot of data (the snapshot refers to the data of the webpage or the page at a certain moment) is needed, and the change of the data does not need to be detected, so that modules related to data observation are removed in the application, and the access of the data is modified into simple value taking and assignment operations.

2) And (3) removing the asynchronous queue: based on the same principle, since the page generated by the client is only a snapshot, only the final data (at a certain time) needs to be acquired. There is no need to pay attention to what changes occur to the intermediate process data, and therefore an asynchronous queue is not needed to process the data changes.

3) Remove vdom most interfaces: because renderToString is used for generating the html character string in the process of generating the page by the client, interfaces for generating document nodes through the virtual DOM are not applicable any more, and the part is not needed.

Optionally, the dependency file of the first JS file based on the vue framework in this application may include a system file at the bottom right in fig. 7, a binary file of a javascript execution environment, and other execution files, which are not described herein again.

Optionally, in this application, the electronic device generates, according to the first library JS file, the first JS file, and the CGI data, an HTML segment of the home page or other current pages in the generated page environment of the client, including: processing the CGI data by a client in the electronic equipment according to the first JS file library and the vue function in the dependency file of the first JS file in the generated page environment to obtain a vue instance; generating a virtual node tree from the vue instance; and synchronously converting the virtual node tree into HTML segments according to a renderTOSTRING function in the dependency file. Therefore, under the condition that the client side is not influenced to generate the page based on the vue frame, the step flow of converting the page into the HTML fragment is simplified, and the page generating efficiency of the client side is greatly improved.

Next, an improvement of the building package and the discrimination code of the first JS file based on the vue framework is introduced.

Optionally, in the present application, the first JS file comprises a first JS file based on an vue framework; and the first JS file based on the vue framework is pre-constructed by the following method: converting the vue file containing the service code into a main file in a JS format; splitting a client inlet construction file from the main file; building a file at a client entrance by using a building tool, and compiling the file into an executable first JS file; the build tool includes vue converter and vue style converter, vue converter includes binary code that supports client-generated pages, both inline CSS logic in vue style converter and binary code that inserts virtual node tree node operations are masked.

Optionally, as shown in fig. 5, the network view in fig. 5 is specifically a browser, and in order to support the mobile client to generate a page, when the code is compiled and constructed, two JS files, which are a JS file of the client and a JS file of the network view, need to be constructed by a construction tool. The client JS file comprises a first JS file of the client.

In the Source file Source box, the service Code Universal Application Code includes a route Router and component computers. Converting the component Components, namely, the vue file, into a main file app.JS, and splitting a client portal construction file Viola client entry and a Browser portal construction file Browser entry from the main file.

The core of the construction tool is two code compiling converters, namely vue-Viola-loader (vue converter) and vue-Viola-style-loader (vue style converter), which compile a client entry construction file and a Browser entry construction file from the. vue file into a client JS file Viola client bus and a Browser JS file Browser bus, respectively, and the client JS file and the Browser JS file are executable JS files.

According to the equipment, binary codes compiled into generated pages in vue-loader are transformed, inline CSS logic of vue-style-loader and binary codes operated by inserting DOM nodes are shielded, and rules of pattern hash values are unified, so that new vue-viola-loader and vue-viola-style-loader are generated. The DOM is a W3C document object model, a platform and language neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document. A hash value is a string of characters created by a hash function from any kind of data. A hash function is a method that can create a string from any kind of data.

Then, a JS file of the mobile client constructed by the construction tool Webpack build (compiled) is used for supporting the mobile client to generate a page. Specifically, the Client JS file belongs to a generated Client environment Viola Client, and the Client JS file includes an in-file rendering function Bundle Render for rendering an HTML page by the Render. And compiling the built browser JS file for managing Hydrate (fusion) and interaction of the HTML page document segment. The webpack is a front-end resource loading and packaging tool, and performs static analysis according to the dependency relationship of front-end modules, and then generates corresponding static resources according to specified rules by the modules.

Therefore, in order to support the method for generating the page by the client, for developers, the cost for modifying the code for generating the page by the client is low, extra server equipment and development of a server are not needed, the codes of the network view end and the codes of the client are distinguished, the same set of codes comprising each JS file can be operated on a plurality of electronic equipment, namely, the same set of codes can be operated at multiple ends, the transportability is enhanced, and the application range is wider.

Therefore, the client-side generated page is suitable for multi-end operation of the same set of codes, the performance of the page is improved, and meanwhile development, operation and maintenance costs are saved.

Specifically, when the packaging is constructed, the source code of the client-side generated page and the source code of the non-client-side generated page are distinguished in a character string annotation mode. For example, as shown in FIG. 6, in the same. vue file, the source code of whether to generate pages for mobile clients is differentiated by way of string annotations (/' not in viola { /) so that one. vue file can be used in both the client-generated page and non-client-generated page scenarios. The string annotation indicating that the block of source code is not generated by the client, but is executed by the web side, for example, the source code requesting data from the server device is included, and the requested data includes HTML template and CGI data, etc.). Optionally, when the build tool packages the build, the pre-loader is used to mask out unneeded native code by specifying the build variables.

Optionally, the JS file loading mode is further improved, and the JS file is dynamically loaded in a singleton mode.

Specifically, in the process of generating the page by the client, the bottom layer method and the method for generating the page by the client are extracted to form a static JS file, for example, a first library JS file in the application, and the static JS file is preloaded by the electronic device. For the JS file of the service, for example, the first JS file in this application, the client executes the JS file by dynamic loading, and destroys the current context by self-counting when the count reaches a threshold. When the JS file is executed under JSCore, there is a corresponding execution environment, and this execution environment is referred to as the context of the current JS. By using the mode, the file I/O (Input Output) and the initialization execution time of the core library JS can be reduced, and the problem of overlarge memory occupation can be avoided.

The overall architecture principle of an example of the web page presentation method according to the embodiment of the present invention will be described with reference to the accompanying drawings.

Optionally, as shown in fig. 7, the electronic device in the present application is provided with a WebView, a client, a verification module, and an adaptation module.

After receiving the click operation of a user for a certain webpage, the electronic equipment confirms that a trigger instruction for the webpage is received. The checking module checks the trigger instruction, and checks whether the current environment has the condition of generating the page by the client, namely, whether the current environment has the environment of generating the page by the client, for example, whether an executable file depended on the page generated by the client is complete, whether the current client has the capability of generating the page, and the like; and then, performing adaptation and preprocessing before the client generates the page through the adaptation module, for example, if the dependent executable file is incomplete, initiating a request to the server device to acquire the missing offline packet and the like, so that the electronic device locally has the generated page environment of the client, and stores the generated page environment in a nonvolatile memory, for example, an SD card.

When the checking module confirms that the page generation environment of the client exists, namely the checking is passed, on one hand, a Tools process is started, the webview is loaded, namely, the webview is initialized or a webview kernel is started, on the other hand, the client is called in parallel to generate a page, and a trigger instruction for the page is sent to the client.

And after receiving a triggering instruction aiming at the webpage, an access module in the client outputs a dynamic partial page segment generation starting instruction and outputs an integral page synthesis starting instruction to a synthesis module. And the synthesis module generates a first screen page fragment generation instruction and outputs the first screen page fragment generation instruction according to the whole page synthesis starting instruction.

The local generation module comprises a first JS File library, after receiving a first page fragment generation instruction and a dynamic partial page fragment generation start instruction through JNI (Java native interface, Java local interface), the local generation module acquires a page template and a first JS File from a locally stored offline package and File (which refers to page files and the like except the offline package), and executes the first JS File according to at least one of a binary File, a system File and other execution files of a javascript execution environment in a bottom generated page environment; by executing the first JS file, the local generation module initiates a request to obtain CGI data from the server device (this time, the page is generated for the first time). JNI is a programming framework that allows Java programs in a Java virtual machine to call native applications or libraries, as well as other programs.

And the local generation module extracts content data from the CGI data or takes the CGI data as the content data according to the page template, the first JS file and the requested CGI data, and generates a first screen HTML fragment filled with the content data as an execution result under the environment of the locally generated page. And after the local generation module obtains the execution result, outputting the execution result through JNI. The binary file of the javascript execution environment includes a JS execution engine, JSCore.

And after receiving the first screen page fragment, the synthesis module synthesizes the skeleton File acquired from at least one of the offline package or the File package with the first screen page fragment to obtain a first screen page, and outputs the first screen page as the first screen page generated by the client. For example, the synthesis module acquires an HTML template from an offline package or File, synthesizes the HTML template with the first-screen HTML fragment to obtain a first-screen HTML page, and outputs the first-screen HTML page as a first-screen HTML page generated by the client.

Similarly, the synthesis module can synthesize the second screen page and the third screen page in the subsequent page generation process. Namely, the synthesis module can synthesize the nth screen page, wherein N is a positive integer, and the first screen page is obtained when N is 1.

In addition, the synthesis module also sets corresponding page state information for each screen page, wherein the page state information comprises a page sequence number; for example, the first screen page is correspondingly provided with a page serial number 1, and the nth screen page is correspondingly provided with a page serial number N. And the synthesis module correspondingly outputs the pages and the serial numbers thereof, so that the Webview can splice, fuse and render and display the pages according to the corresponding pages and the corresponding page serial numbers.

And the result processing module processes and outputs the page generated by the client and output by the synthesis module. Specifically, the result processing module is a transition module between the page generated by the client and the interface image generated by the Webview according to the page. And after the result processing module acquires the cached information of the page generated by the client, the acquisition mode of the cached page is sent to Webview.

The cache module stores a page generated by the client, such as a first screen page, in the memory.

After the client outputs the generated page, the local generation module is called to continue to acquire subsequent CGI data and update the page segment, so that the stored generated page is updated.

And after the Webview initialization is finished, namely the Webview kernel is started, and the page is loaded. Loading the page comprises acquiring a page skeleton template, such as an HTML template, in the offline package; loading a page includes obtaining a newly generated page, or obtaining a cached page. The acquiring of the newly generated page may be acquiring of the newly generated page output by the client. Acquiring a cached page, including acquiring the cached page in a memory; optionally, after receiving the obtaining mode of the cached page sent by the result processing module, the Webview executes some preparation work, and when the page is obtained after the preparation work is finished, the page generated by the client is obtained from the storage module according to the obtaining mode.

And the Webview fills the acquired page generated by the client into the page skeleton template to obtain the generated interface image and then displays the interface image.

An example of a web page display method to which the embodiments of the present application are applied is described below with reference to the accompanying drawings.

For example, a "My favorites page" of a certain social software is a page based on the Vue frame, and a "content detail page" is a page based on the art-template frame. The art-template is a template engine that is simple and fast in processing. The method adopts a scope pre-declaration technology to optimize the template rendering speed, thereby obtaining the operation performance close to the limit of JavaScript, and simultaneously supporting NodeJS (Node JavaScript, Node transliteration scripting language) and a network view.

The "my favorite page" shown in fig. 8b is a collection page of the favorite contents of the user of the social software, the entry is in the personal center of the social software shown in fig. 8a, as shown in fig. 8b, the page is composed of a favorite card list, and covers three types of videos, articles and pictures and texts, the page can edit and delete the relevant favorite records, and an vue frame is adopted as a page component framework.

The electronic device comprises a mobile terminal, when the mobile terminal detects that the my favorite page in the graph 8a is clicked by using the webpage display method, the mobile terminal confirms that a trigger instruction for the my favorite page is received, calls a mobile client to generate and output an html page, and then generates and displays an interface image of a detail page of the my favorite page shown in the graph 8b by webview based on an Vue framework. In order to protect privacy, the applicant performs coding processing on part of information and the like in some drawings (for example, fig. 8a to 8d) in the present application.

As another example, the "content detail page" shown in FIG. 8d is a secondary page of the social software, entered from the socialized card of the feed stream of the social software home page shown in FIG. 8c, and is based on the Art-Template framework. feed is a content aggregator formed by combining several message sources actively subscribed by users, and helps users to continuously acquire the latest feed content. A feed stream is a stream of information that is continuously updated and presented to the user's content. The feeds stream of the present application can be understood as a content information stream.

When the mobile terminal detects that the summary information of a certain webpage in fig. 8c is clicked by using the webpage display method of the application, it is confirmed that a trigger instruction for the webpage is received, the mobile client is called to generate and output an html page, and then an interface image of the content detail page shown in fig. 8d is generated and displayed according to the html page by the webview based on the Art-Template frame.

The results of the comparative experiment using client generated pages versus no client generated pages are presented below.

According to the method and the device, the loading speed of the first screen page of the H5 page can be greatly improved, the page generated by a local client is used from the external network data statistics of certain social software, and the time for displaying the first screen interface image is greatly shortened. This is illustrated with the data presentation of the My favorites page as shown in FIGS. 8 a-8 b.

Fig. 9a is a schematic diagram showing the passage of time required for generating and displaying a plurality of first screens of a page generated without using a local client. The method is characterized in that a webpage display method generated based on a client-side is utilized for multiple times, namely, a traditional web side is used for providing a webpage, webpage loading is carried out, and a transition diagram formed by the time from the start of triggering loading to the display of an interface image of a first screen page in each loading process is recorded.

FIG. 9b is a schematic diagram showing the passage of time required to generate and display multiple first screens of a local client generated page. The method comprises the steps of loading the webpage by repeatedly using a webpage display method based on the webpage generated by the client, and recording a transition diagram formed by the time from the start of triggering and loading to the display of the first-screen page interface image in each loading process.

From the data in fig. 9a and 9b, it can be found that, after the page is generated by using the client, the time required for generating and displaying the first screen of "my favorite" is reduced from the original average value of 800-1000 ms (milliseconds) to the average value of 100-200 ms, which is reduced by three quarters.

Based on the same inventive concept, another embodiment of the present application provides a web page display apparatus, disposed in an electronic device of the present application, including: a processing module and a display module.

The web page display apparatus of this embodiment may perform the web page display method of any embodiment or any optional embodiment of the foregoing embodiments of the present application, and the implementation principle and the obtained beneficial technical effects are similar to those of the web page display method of the present application, and are not described herein again.

Based on the same inventive concept, in another embodiment, the present application provides an electronic device, including: a processor, a memory, and a bus;

a bus for connecting the processor and the memory;

a memory for a non-volatile memory and a volatile memory, the non-volatile memory for storing operating instructions;

and the processor is used for executing the webpage display method of any embodiment or optional embodiment of the foregoing embodiments of the present application by calling the operation instruction to the volatile memory.

Optionally, the electronic device platform in this embodiment includes an electronic device. As shown in fig. 10, the electronic device 1000 shown in fig. 10 includes: a processor 1001 and a memory 1003. The processor 1001 and the memory 1003 are electrically coupled, such as by a bus 1002. Optionally, the electronic device 1000 further comprises a network module 1004. It should be noted that the network module 1004 is not limited to one in practical application, and the structure of the electronic device 1000 is not limited to the embodiment of the present application.

The processor 1001 is applied to the embodiment of the present application and is used for the functions of the modules in the web page display apparatus described above in the present application.

The Processor 1001 may be a CPU (Central Processing Unit), a general-purpose Processor, a DSP (Digital Signal Processor), an ASIC (Application specific integrated Circuit), an FPGA (Field-Programmable Gate Array) or other Programmable logic device, a transistor logic device, a hardware component, or any combination thereof. Which may implement or perform the various illustrative logical blocks, modules, and circuits described in connection with the disclosure. The processor 1001 may also be a combination of computing functions, e.g., comprising one or more microprocessors, DSPs and microprocessors, and the like.

Bus 1002 may include a path that transfers information between the above components. The bus 1002 may be a PCI (Peripheral Component Interconnect) bus, an EISA (extended industry Standard Architecture) bus, or the like. The bus 1002 may be divided into an address bus, a data bus, a control bus, and the like. For ease of illustration, only one thick line is shown in FIG. 10, but this is not intended to represent only one bus or type of bus.

The Memory 1003 may be a ROM (Read-Only Memory) or other type of static storage device that can store static information and instructions, a RAM (random access Memory) or other type of dynamic storage device that can store information and instructions, an EEPROM (Electrically erasable programmable Read-Only Memory), a CD-ROM (Compact disk-Only Memory) or other optical disk storage, optical disk storage (including Compact disk, laser disk, optical disk, digital versatile disk, blu-ray disk, etc.), a magnetic disk storage medium or other magnetic storage device, or any other medium that can be used to carry or store desired program code in the form of instructions or data structures and that can be accessed by a computer, but is not limited to these.

Optionally, the memory 1003 is used for storing application program codes or operation instructions for executing the present invention, and is controlled by the processor 1001 to execute. The processor 1001 is configured to execute the application program codes or the operation instructions stored in the memory 1003, so as to implement the web page display method according to any one of the foregoing embodiments or any optional implementation manner of the present application; or, the implementation principle and the obtained beneficial technical effects of the method for displaying a webpage according to the above embodiment of the present application are similar to those of the method for displaying a webpage, and are not described herein again.

Based on the same inventive concept, another embodiment of the present application provides a computer-readable storage medium storing at least one instruction, at least one program, a code set, or a set of instructions, which is loaded and executed by a processor to implement the web page display method according to any one of the above embodiments or any optional implementation of the present application.

The embodiment of the present application provides a computer-readable storage medium suitable for the method embodiment, and the implementation principle and the obtained beneficial technical effects are similar to those of the webpage display method of the present application, and are not described herein again.

It should be understood that, although the steps in the flowcharts of the figures are shown in order as indicated by the arrows, the steps are not necessarily performed in order as indicated by the arrows. The steps are not performed in the exact order shown and may be performed in other orders unless explicitly stated herein. Moreover, at least a portion of the steps in the flow chart of the figure may include multiple sub-steps or multiple stages, which are not necessarily performed at the same time, but may be performed at different times, which are not necessarily performed in sequence, but may be performed alternately or alternately with other steps or at least a portion of the sub-steps or stages of other steps.

The foregoing is only a partial embodiment of the present application, and it should be noted that, for those skilled in the art, several modifications and decorations can be made without departing from the principle of the present application, and these modifications and decorations should also be regarded as the protection scope of the present application.

Claims

1. A webpage display method is characterized by comprising the following steps:

2. The method of claim 1, wherein initializing the web view and simultaneously invoking the client-generated page comprises:

3. The method of claim 1, wherein the invoking client generates a page comprising:

when the client side generates a page for the first time, the client side obtains a prestored hypertext transfer protocol (HTML) template, a first JS file of the client side and a first JS library file; the first JS file and the first library JS file are respectively a business JS file and a process control JS file which support the client to generate a page;

acquiring Common Gateway Interface (CGI) data of the webpage from server equipment according to the first JS file and the first JS file, and storing the CGI data;

generating an HTML fragment of a home page under a page generation environment of the client according to the first JS file, the first JS file and the CGI data;

and combining the HTML template with the HTML fragment of the home page to obtain a home screen page generated by the client, storing the home screen page and outputting the home screen page to the network view.

4. The method of claim 3, wherein the storing the CGI data comprises: storing the CGI data in a non-volatile memory of an electronic device;

and, storing the home screen page comprises: storing the first screen page into a volatile memory of the electronic equipment; the input/output interface speed of the volatile memory is greater than that of the non-volatile memory;

and after the outputting to the network view, further comprising: and calling the network view to acquire a prestored network view JS file, and executing the network view JS file to acquire CGI data again from the network and update the stored CGI data.

5. The method of claim 1, wherein the invoking client generates a page comprising:

generating HTML (hypertext markup language) fragments of other current pages under the page generation environment of the client according to the acquired JS file in the first library, the JS file and the read CGI data; the other pages are pages except the first screen page;

6. The method of claim 5, further comprising:

7. The method according to claim 3 or 5, wherein generating an HTML fragment of a home page or of a current other page in the context of the generated page of the client, according to the first library JS file, the first JS file, and the CGI data, comprises:

processing the CGI data according to the first JS file library and an vue function in the dependency file of the first JS file in the generated page environment to obtain a vue instance; generating a virtual node tree from the vue instance; and synchronously converting the virtual node tree into the HTML fragments according to the rendering-to-string function in the dependency file.

8. The method of claim 7, prior to the invoking client generating a page, further comprising:

removing the following items of the dependent file of the native JS file to obtain the dependent file of the first JS file: a data observation and observation module, a remove asynchronous queue, and an interface for the virtual node tree to generate document nodes.

9. The method of claim 7, wherein the first JS file comprises a first JS file that is based on an vue framework; and the first JS file based on the vue framework is constructed in advance by the following method:

splitting a client inlet construction file from the main file;

building a file for the client entrance by using a building tool, and compiling the file into the first JS file which can be executed;

the build tool includes vue converter and vue style converter, the vue converter includes binary code that supports the client-generated page, and the binary code of inline CSS logic and insert virtual node tree node operations in the vue style converter are both masked.

10. The method of claim 9, wherein converting the vue file containing the service code into the main file in the JS format comprises:

when a character string representing non-client generation logic exists in the vue file, shielding a source code of a non-client generation page corresponding to the character string; converting the vue file after shielding the source code of the non-client generated page into a main file in a JS format;

when the character string which characterizes the non-client-generated logic does not exist in the vue file, the vue file is directly converted into a main file in a JS format.

11. The method of claim 3, wherein before confirming that the page is generated for the first time by the client, further comprising:

determining whether the client side has the generated page environment, wherein the generated page environment comprises a JS kernel, a software tool kit (SDK) and a Content Delivery Network (CDN) or an offline package containing the first JS file and the first JS library file; the JS kernel is a JS kernel supporting the client to generate the page; the generated SDK is the SDK supporting the client to generate the page;

and when the client is confirmed not to have the generated page environment, switching to sequentially request the HTML template and the CGI data corresponding to the webpage from server equipment.

12. A web page presentation apparatus, comprising:

the processing module is used for initializing the network view and calling the client to generate a page when receiving a triggering instruction aiming at the webpage;

13. The web page presentation apparatus of claim 12,

the processing module is specifically used for starting to call the client to generate a page in the process of initializing the network view; or, initializing the network view in the process of calling the client to generate the page; or, the initialization of the network view is started, and the calling of the client-side generation page is started at the same time.

14. An electronic device, comprising:

a processor, a memory, and a bus;

the bus is used for connecting the processor and the memory;

the memory comprises a nonvolatile memory and a volatile memory, and the nonvolatile memory is used for storing operation instructions;

the processor is configured to execute the web page presentation method according to any one of claims 1 to 11 by calling the operation instruction to the volatile memory.

15. A computer readable storage medium, characterized in that it stores at least one instruction, at least one program, a set of codes, or a set of instructions, which is loaded and executed by a processor to implement the web page presentation method according to any one of claims 1 to 11.