Page display processing method, device, and terminal device

By preloading page public resources and querying cache files in the network view component of the mobile operating system, the problem of slow page display is solved, and faster page loading speed and higher usage efficiency are achieved.

CN112306587BActive Publication Date: 2025-03-04TENCENT TECHNOLOGY (SHENZHEN) CO LTD
View PDF 2 Cites 0 Cited by

Patent Information

Application Number
CN201910637444.9
Authority / Receiving Office
CN · China
Patent Type
Patents(China)
Current Assignee / Owner
Filing Date
2019-07-15
Publication Date
2025-03-04
Estimated Expiration
2039-07-15

AI Technical Summary

Technical Problem

In mobile operating systems, page display speed is slow and usage efficiency is low, mainly due to the long time-consuming process of data resource acquisition and rendering.

Method used

Create a network view component through the client and preload page public resources in the component. When the page is triggered, query the preloaded components and cache files and render it in the components. At the same time, request the updated version file of the page from the server and update the cache file.

Benefits of technology

Optimizes the time-consuming loading of Webview components on the page, improves the page loading speed, and reduces the subsequent loading time through local cache and server rendering, and improves the first-time user loading speed.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN112306587B_ABST
    Figure CN112306587B_ABST
Patent Text Reader

Abstract

The present invention provides a method, device, terminal equipment and storage medium for displaying and processing a page; the method comprises: creating at least one network view component through a client, and preloading page common resources in the at least one network view component; when the page of the client is triggered, querying the network view component preloaded with the page common resources corresponding to the page, and querying the cache file corresponding to the address of the page, and sending it to the queried network view component for rendering to display the content of the page; requesting the updated version file of the page from the server, and updating the cache file of the page. Through the present invention, the loading speed of the page can be improved.
Need to check novelty before this filing date? Find Prior Art

Description

Technical Field

[0001] The present invention relates to the field of Internet technology, and in particular to a method, device, terminal equipment and storage medium for displaying and processing a page. Background Art

[0002] The mobile operating system has a built-in web view (Webview) component, which can be called by the client installed on the terminal to display the page. When the client requests to access the page, the Webview component is first created, and a data resource acquisition request is sent to the server to obtain all the data resources required to display the target page. The acquired data resources are rendered in the Webview component created above to display the page. When displaying the page in the above way, the entire process of data resource acquisition and rendering takes a long time, resulting in slow page display and low efficiency. Summary of the invention

[0003] The embodiments of the present invention provide a method, an apparatus, a terminal device and a storage medium for displaying a page, which can optimize the time consumed by a page to load a Webview component, thereby improving the speed of loading the page.

[0004] The technical solution of the embodiment of the present invention is achieved as follows:

[0005] An embodiment of the present invention provides a method for displaying a page, comprising:

[0006] Creating at least one web view component through a client, and preloading page common resources in the at least one web view component;

[0007] When the page of the client is triggered, querying the network view component preloaded with the page common resources corresponding to the page, and

[0008] Querying a cache file corresponding to the address of the page, and sending the cache file to the queried network view component for rendering to display the content of the page;

[0009] Request the server for an updated version of the page and update the cached file of the page.

[0010] An embodiment of the present invention provides a page display processing device, comprising:

[0011] A creation module, used to create at least one network view component through a client, and preload page common resources in the at least one network view component;

[0012] a query module, for querying a network view component preloaded with a page common resource corresponding to the page when the page of the client is triggered, and

[0013] Used to query the cache file corresponding to the address of the page, and send it to the queried network view component for rendering to display the content of the page;

[0014] The update request module is used to request the updated version file of the page from the server and update the cache file of the page.

[0015] In the above scheme, the creation module is also used to pre-create a network view component pool including at least one network view component through the client when the client is started, the client switches from the background to the foreground, or the client jumps to the set interface, and load the page template file of the page common resources in each network view component in the network view component pool.

[0016] In the above scheme, the creation module is also used to load a fixed link of a public hypertext markup language file corresponding to the page public resources, or to load a local file in the form of an offline package corresponding to the page public resources, wherein the local file includes a public hypertext markup language file, a public cascading style sheet and a public scripting language.

[0017] In the above scheme, the request update module is also used to send a page request to the server, wherein the page request includes the template version number and data version number of the cache file of the page; when the template version number of the cache file of the page is inconsistent with the template version number in the server, the updated page template file and page data file sent by the server are received; when the template version number of the cache file of the page is consistent with the template version number in the server, and the data version number of the cache file of the page is inconsistent with the data version number in the server, the updated page data file sent by the server is received.

[0018] In the above scheme, the page display processing device also includes creating a loading module, which is used to create a new network view component and load the page common resources corresponding to the page in the new network view component when a network view component pre-loaded with the page common resources corresponding to the page is not queried; query the cache file corresponding to the address of the page and send it to the new network view component for rendering to display the content of the page.

[0019] In the above scheme, the page display processing device also includes a trigger request module, which is used to trigger the front-end code to perform a page loading operation when the cache file corresponding to the address of the page is not queried, so that the front-end code requests the file corresponding to the page address from the server, and sends the file corresponding to the page address to the queried network view component for rendering to display the content of the page.

[0020] An embodiment of the present invention provides a terminal device, including:

[0021] A memory for storing executable instructions;

[0022] The processor is used to implement the method provided by the embodiment of the present invention when executing the executable instructions stored in the memory.

[0023] An embodiment of the present invention provides a storage medium storing executable instructions for causing a processor to execute the instructions to implement a page display processing method provided by the embodiment of the present invention.

[0024] The embodiments of the present invention have the following beneficial effects:

[0025] The embodiment of the present invention queries the cache file corresponding to the address of the page and sends it to the queried network view component for rendering to display the content of the page, thereby improving the page loading speed; and by using the client local cache and rendering in the network view component before updating the page, the loading speed can be further increased when the page is loaded for the second time, while also improving the loading speed for first-time users. BRIEF DESCRIPTION OF THE DRAWINGS

[0026] Figure 1 This is a schematic diagram of an optional application scenario of the page display processing method provided by an embodiment of the present invention;

[0027] Figure 2 It is an optional structural diagram of a page display processing device provided by an embodiment of the present invention;

[0028] Figure 3 It is an optional framework diagram of a terminal implementing page display provided by an embodiment of the present invention;

[0029] Figure 4 It is an optional flow chart of a method for displaying and processing a page according to an embodiment of the present invention;

[0030] Figure 5 It is an optional flow chart of a method for displaying and processing a page according to an embodiment of the present invention;

[0031] Figure 6 It is an optional flow chart of a method for displaying and processing a page according to an embodiment of the present invention;

[0032] Figure 7 It is an optional flow chart of a method for displaying and processing a page according to an embodiment of the present invention;

[0033] Figure 8It is an optional flow chart of a method for displaying and processing a page according to an embodiment of the present invention;

[0034] Fig.9A This is a schematic diagram of an optional application scenario for implementing the page display processing method of an embodiment of the present invention;

[0035] Fig. 9B It is a schematic diagram of an optional application scenario for implementing the page display processing method of the embodiment of the present invention. DETAILED DESCRIPTION

[0036] In order to make the purpose, technical solutions and advantages of the present invention clearer, the present invention will be further described in detail below in conjunction with the accompanying drawings. The described embodiments should not be regarded as limiting the present invention. All other embodiments obtained by ordinary technicians in the field without making creative work are within the scope of protection of the present invention.

[0037] In the following description, reference is made to “some embodiments”, which describe a subset of all possible embodiments, but it will be understood that “some embodiments” may be the same subset or different subsets of all possible embodiments and may be combined with each other without conflict.

[0038] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as those commonly understood by those skilled in the art to which the present invention belongs. The terms used herein are only for the purpose of describing the embodiments of the present invention and are not intended to limit the present invention.

[0039] Before further describing the embodiments of the present invention in detail, the nouns and terms involved in the embodiments of the present invention are described. The nouns and terms involved in the embodiments of the present invention are subject to the following interpretations.

[0040] 1) Client, which is the native application (APP) in the terminal device, such as a hybrid mobile application (HybridApp).

[0041] 2) The front end is the front-end code (such as JavaScript code) in the page loaded by the client, which is responsible for implementing page rendering and business logic related to interaction, and can interact with the client.

[0042] 3) The web view component is a container built into the operating system of the terminal device for displaying pages.

[0043] 4) H5 page is a network page (abbreviated as web page).

[0044] 5) Direct output, that is, server rendering (SSR, Server Side Render), specifically, the server splices the page template file and the page data file, and returns them to the client after rendering is completed.

[0045] The embodiment of the present invention provides a method, apparatus, terminal device and storage medium for displaying a page. The following describes an exemplary application of the display processing device for a page provided by the embodiment of the present invention. The terminal device provided by the embodiment of the present invention can be implemented as various types of user terminals such as a laptop computer, a tablet computer, a desktop computer, a set-top box, a mobile device (e.g., a mobile phone, a portable music player, a personal digital assistant, a dedicated messaging device, a portable gaming device). The following describes an exemplary application of the terminal device (hereinafter also referred to as a terminal).

[0046] See also Figure 1 , Figure 1 It is an optional architecture diagram of the page display processing system 100 provided by an embodiment of the present invention. The page display processing system 100 includes: a server 200, a network 300, a terminal 400, and a client 410 in the terminal 400. Based on the page display processing system 100, when a user triggers a page of the client 410 through the terminal 400, the client 410 first queries the network view component preloaded with the page public resources corresponding to the page and the cache file corresponding to the address of the page, and requests the updated version file of the page from the server 200 through the network 300, and updates the cache file of the page according to the updated version file of the page, and then sends the cache file corresponding to the address of the page to the network view component for rendering, so that the page triggered by the user is displayed on the client 410.

[0047] See also Figure 2 , Figure 2 is a schematic diagram of the structure of a terminal 400 provided in an embodiment of the present invention, Figure 2 The terminal 400 shown includes: at least one processor 460, a memory 450, at least one network interface 420 and a user interface 430. The various components in the terminal 400 are coupled together via a bus system 440. It is understood that the bus system 440 is used to achieve connection and communication between these components. In addition to the data bus, the bus system 440 also includes a power bus, a control bus and a status signal bus. However, for the sake of clarity, the bus system 440 is not shown in FIG. Figure 2 Various buses are labeled as bus system 440 .

[0048] Processor 460 can be an integrated circuit chip with signal processing capabilities, such as a general-purpose processor, a digital signal processor (DSP), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc., where the general-purpose processor can be a microprocessor or any conventional processor, etc.

[0049] The user interface 430 includes one or more output devices 431 that enable presentation of media content, including one or more speakers and / or one or more visual display screens. The user interface 430 also includes one or more input devices 432, including user interface components that facilitate user input, such as a keyboard, mouse, microphone, touch screen display, camera, other input buttons and controls.

[0050] The memory 450 may be removable, non-removable, or a combination thereof. Exemplary hardware devices include solid-state memory, hard drives, optical drives, etc. The memory 450 may optionally include one or more storage devices that are physically remote from the processor 460.

[0051] The memory 450 includes a volatile memory or a nonvolatile memory, and may also include both volatile and nonvolatile memories. The nonvolatile memory may be a read-only memory (ROM), and the volatile memory may be a random access memory (RAM). The memory 450 described in the embodiment of the present invention is intended to include any suitable type of memory.

[0052] In some embodiments, memory 450 can store data to support various operations, examples of which include programs, modules, and data structures, or a subset or superset thereof, as exemplarily described below.

[0053] Operating system 451, including system programs for processing various basic system services and performing hardware-related tasks, such as a framework layer, a core library layer, a driver layer, etc., for implementing various basic services and processing hardware-based tasks;

[0054] A network communication module 452, for reaching other computing devices via one or more (wired or wireless) network interfaces 420, exemplary network interfaces 420 include: Bluetooth, Wireless Compatibility Authentication (WiFi), and Universal Serial Bus (USB);

[0055] a presentation module 453 for enabling presentation of information via one or more output devices 431 (e.g., display screen, speaker, etc.) associated with the user interface 430 (e.g., a user interface for operating peripherals and displaying content and information);

[0056] The input processing module 454 is used to detect one or more user inputs or interactions from one of the one or more input devices 432 and translate the detected inputs or interactions.

[0057] In some embodiments, the page display processing device provided by the embodiment of the present invention can be implemented in a software manner. Figure 2 The display processing device 455 of the page stored in the memory 450 is shown, which can be software in the form of a program and a plug-in, etc., and includes the following software modules: a creation module 4551, a query module 4552 and a request update module 4553. These modules can be logical function modules, so they can be arbitrarily combined or further split according to the functions implemented. The functions of each module will be explained below.

[0058] In other embodiments, the page display processing device provided by the embodiment of the present invention can be implemented in hardware. As an example, the page display processing device provided by the embodiment of the present invention can be a processor in the form of a hardware decoding processor, which is programmed to execute the page display processing method provided by the embodiment of the present invention. For example, the processor in the form of a hardware decoding processor can adopt one or more application specific integrated circuits (ASICs), DSPs, programmable logic devices (PLDs), complex programmable logic devices (CPLDs), field programmable gate arrays (FPGAs) or other electronic components.

[0059] The page display processing method provided by the embodiment of the present invention will be described in conjunction with an exemplary application and implementation of a terminal provided by the embodiment of the present invention.

[0060] See also Figure 3 , Figure 3This is an optional principle diagram of a terminal implementing page display provided by an embodiment of the present invention. In some embodiments, the client may be a third-party application installed on the terminal. The client may request relevant files of the page from the server and display a page that complies with the Hyper Text Markup Language (HTML) standard (e.g., HTML5). The code in the page, i.e., the front-end code (e.g., JavaScript code), is responsible for the business logic of the page. The client may call the front-end code to implement the logic related to user interaction in the page. At the same time, the native functions encapsulated in the client may be encapsulated in the form of an application programming interface (API) for the front-end code to call, thereby implementing the native functions of the client in the page. The client and the front-end code establish communication using the Webview component as a medium, so that the client has both the speed advantage of page development and powerful native capabilities.

[0061] Continue to see Figure 4 , Figure 4 This is an optional flow chart of a method for displaying a page, taking the above client in the terminal as an example. Figure 4 The steps shown are described in detail.

[0062] In step S101 , the client creates at least one web view component and preloads page common resources in the at least one web view component.

[0063] In some embodiments, when the client is started, the client switches from the background to the foreground, or the client jumps to a set interface, the client pre-creates a Webview component pool including at least one Webview component, and loads a page template file of the page common resources in each Webview component in the Webview component pool, wherein the above-mentioned Webview component is a network view component.

[0064] In other embodiments, the page template file for loading the common resources of the page can be a fixed link of a common HTML file corresponding to the common resources of the loading page; or it can be a local file in the form of an offline package corresponding to the common resources of the loading page, wherein the local file includes a common HTML file, a common cascading style sheet (CSS) and a common scripting language (JS, JavaScript).

[0065] As an example of obtaining page common resources, the page common resources corresponding to the client can be stored in the client's installation file. When the client is installed on the terminal, the client will release the page common resources to the client's file in the terminal. When the client is run, the corresponding page common resources can be directly retrieved from the file.

[0066] As another example of obtaining the common resources of a page, the common resources of the page may also be stored in a server. When the client runs in a terminal, the common resources of the page are obtained from the server.

[0067] As another example of obtaining the common resources of a page, the common resources of the page may also be stored in a server corresponding to the client, and the client automatically obtains the common resources of the page from the server and caches them when running.

[0068] It is understandable that the page public resources corresponding to the client may also be obtained in other ways, and the present invention does not limit the specific way of obtaining the page public resources corresponding to the client.

[0069] As an example, see Figure 5 , Figure 5 It is an optional flow chart of the method for displaying and processing a page of an embodiment of the present invention. When the client is triggered, one or more Webview components are first pre-created, and then the public HTML file corresponding to the public resources of the page is loaded in each Webview component. The public HTML file can be a fixed link online or a local file in the form of an offline package, which contains the public HTML, public CSS and public JS code of the page. The above public HTML file is the public part of the client page. Different public HTML files can be established according to different clients, or the same public HTML file can be established according to different clients.

[0070] In step S102, when a page of a client is triggered, the client queries a network view component preloaded with page common resources corresponding to the page.

[0071] In some embodiments, when a page of a client is triggered, the client can query the Webview component corresponding to the page and having loaded the page common resources from the Webview component pool established in step S101.

[0072] As an example, see Figure 6 , Figure 6It is an optional flow chart of the method for displaying and processing a page of an embodiment of the present invention. When a client page is triggered, and there is a Webview component corresponding to the client page and loaded with common resources of the page in the above-mentioned Webview component pool, the client takes out a Webview component loaded with common resources of the page from the above-mentioned Webview component pool and uses it.

[0073] In step S103, the client searches for a cache file corresponding to the address of the page, and sends it to the searched network view component for rendering to display the content of the page.

[0074] In some embodiments, the client queries the cache file corresponding to the address of the page from the terminal, sends the cache file corresponding to the address of the page to the queried Webview component for rendering, and displays the content of the page.

[0075] For example, rendering can be performed in the above-mentioned Webview component through the following process: first, the Webview component is used to load and parse the public HTML file in the page public resources, then the public JS code in the page public resources is parsed, compiled and executed, the public CSS file in the page public resources is parsed, and the Document Object Model (DOM) tree and the rendering tree are constructed. Finally, the data of the cache file corresponding to the address of the page is parsed to complete the rendering process.

[0076] As an example, see Figure 6 When there is a local cache (Cache) corresponding to the address of the page in the terminal, the client directly reads the cache file corresponding to the address of the page and sends it to the queried Webview component for rendering, thereby displaying the content of the page in the client.

[0077] In step S104, the client requests the server for a file of an updated version of the page, and in step S105, the client updates the cache file of the client's page according to the file returned by the server.

[0078] In some embodiments, a page request is sent to a server, wherein the page request includes a template version number and a data version number of a cache file of the page; when the template version number of the cache file of the page is inconsistent with the template version number in the server, an updated page template file and a page data file sent by the server are received; when the template version number of the cache file of the page is consistent with the template version number in the server, and the data version number of the cache file of the page is inconsistent with the data version number in the server, an updated page data file sent by the server is received. The cache file of the client page is updated according to the file returned by the server.

[0079] As an example, see Figure 7 , the client sends a page request to the server, and attaches the template version number and data version number of the current page cache in the request. The server needs to access directly, and compare the version number of the current page cache file in the request with the file version number in the server to determine the content returned to the client. ① When the template version number of the cache file of the page is inconsistent with the template version number in the server, the template needs to be updated, and the server re-renders the page template file and the page data file and returns it to the front-end code, and the front-end code updates the entire page; ② When the template version number of the cache file of the page is consistent with the template version number in the server, and the data version number of the cache file of the page is inconsistent with the data version number in the server, the data needs to be updated, and the server only returns the page data file to the front-end code, and the front-end code only uses the data to asynchronously update the data part of the page content; ③ When the template version number of the cache file of the page is consistent with the template version number in the server, and the data version number of the cache file of the page is consistent with the data version number in the server, no update is required, the server does not return new content to the front-end code, and the front-end code does not need to be updated.

[0080] The page loading speed is improved by querying the cache file corresponding to the address of the page and sending it to the queried network view component for rendering to display the content of the page.

[0081] See also Figure 8 , Figure 8 An optional flow chart of a method for displaying a page provided in an embodiment of the present application is provided. Figure 8 It is shown that steps S102 to S103 can be implemented through steps S201 to S202, and each step will be described in combination.

[0082] In step 201, when the client's page is triggered and no web view component preloaded with common resources corresponding to the page is found, the client creates a new web view component and loads the common resources corresponding to the page in the new web view component.

[0083] In some embodiments, when the client's page is triggered and the Webview component pool established in step S101 does not find a Webview component that has loaded the page's common resources corresponding to the page, the client creates a new Webview component and loads the page's common resources corresponding to the page in the new Webview component.

[0084] As an example, see Figure 6When the client page is triggered, and there is no Webview component corresponding to the client page in the above-mentioned Webview component pool that has loaded the page common resources, a new Webview component is created, and the page common resources corresponding to the page are loaded in the new Webview component. The process of querying whether there is a Webview component that has loaded the page common resources in the Webview component pool and the process of creating a new Webview component and loading the page common resources in the new Webview component can be executed in parallel.

[0085] In step 202, the client searches for a cache file corresponding to the address of the page and sends it to the new network view component for rendering to display the content of the page.

[0086] In some embodiments, step S103 can also be implemented in the following manner: when the cache file corresponding to the address of the page is not found, the client triggers the front-end code to perform a page loading operation, so that the front-end code requests the server for the file corresponding to the page address, and sends the file corresponding to the page address to the queried network view component for rendering to display the content of the page (step S301).

[0087] As an example, see Figure 6 When there is no local cache corresponding to the address of the page in the terminal, the client calls the front-end code to notify the front-end code to start loading the page, and then makes the front-end code initiate an asynchronous JavaScript and XML (Ajax) request to request the address of the page and send it to the Webview component to load the page to display the content of the page. By making the front-end code initiate an asynchronous Ajax request, the newly acquired data can be displayed without updating the entire page.

[0088] Next, we will combine Figure 6 An exemplary application of an embodiment of the present invention in a practical application scenario is described.

[0089] In step S401, after the client is triggered, it immediately pre-creates a fixed number (at least 1, more depending on the terminal performance) of Webview component pools, and loads a public HTML file (such as common.html) of a fixed page common resource. Among them, the public HTML file can be a fixed link online, or it can be a local file based on offline package technology, which contains the public HTML, public CSS and public JS code of the page. It should be pointed out that the above-mentioned public HTML file is the common part of all pages of the client. Different public HTML files can be established according to different clients, and the same public HTML file can be established according to different clients.

[0090] In step S402, when the client's H5 page is triggered, the client first queries the Webview component pool established in step S201 whether there is an available Webview component with pre-loaded public HTML files. If so, one is taken out from the Webview component pool and used; if not, the client creates a new Webview component and loads the page public resources corresponding to the page in the new Webview component.

[0091] In step S403, the client searches the local cache according to the address of the triggered page (equivalent to a cache maintained by the client itself, storing the request returned by the server locally and establishing a mapping relationship with the page address), and checks whether there is a cache file corresponding to the address of the page in the local cache. If so, the cache file corresponding to the address of the page is sent to the Webview component for rendering, and the content of the page is displayed.

[0092] In step S404, the client sends a page request in parallel to the server, and attaches the template version number and data version number of the cache file of the current page in the request. The server returns the latest page content, and the client uses the return message to re-update the local cache for use in step 203 when the page is opened next time.

[0093] In step S405, if the cache file corresponding to the address of the page is not found in step 203, the client calls the front-end code to notify the front-end code that page loading has started, and then instructs the front-end code to initiate an asynchronous Ajax request, request the address of the page from the server, and send the page address to the Webview component to load the page.

[0094] In step S406, when the server receives the request sent by the client, the server needs to access directly and compare the version number of the current page cache file in the request with the file version number in the server to determine the content returned to the client. ① When the template version number of the cache file of the page is inconsistent with the template version number in the server, the template needs to be updated, and the server re-renders the page template file and the page data file and returns it to the front-end code, and the front-end code updates the entire page; ② When the template version number of the cache file of the page is consistent with the template version number in the server, and the data version number of the cache file of the page is inconsistent with the data version number in the server, the data needs to be updated, and the server only returns the page data file to the front-end code, and the front-end code only uses the data to asynchronously update the data part of the page content; ③ When the template version number of the cache file of the page is consistent with the template version number in the server, and the data version number of the cache file of the page is consistent with the data version number in the server, no update is required, the server does not return new content to the front-end code, and the front-end code does not need to be updated.

[0095] As an example, when triggering the client's Fig.9A When the trigger button 501 corresponding to the page "Credit Points" is clicked, the page will be updated (i.e., the page display processing method provided by the embodiment of the present invention is used to update the page), and the following is displayed on the client: Fig. 9B The page corresponding to the trigger "Credit Points" is shown. Then, when the trigger Fig. 9B When the "Back" button is triggered 502, the client cache file is used to display Fig.9A The page does not need to be requested again, so the loading efficiency is high.

[0096] The following is a description of an exemplary structure of a page display processing device 455 provided by an embodiment of the present invention implemented as a software module. In some embodiments, Figure 2 As shown, the software modules stored in the display processing device 455 of the memory 450 may include: a creation module 4551 , a query module 4552 , and a request update module 4553 .

[0097] A creation module, used to create at least one network view component through a client, and preload page common resources in the at least one network view component;

[0098] a query module, for querying a network view component preloaded with a page common resource corresponding to the page when the page of the client is triggered, and

[0099] Used to query the cache file corresponding to the address of the page, and send it to the queried network view component for rendering to display the content of the page;

[0100] The update request module is used to request the updated version file of the page from the server and update the cache file of the page.

[0101] In some embodiments, the creation module is also used to pre-create a network view component pool including at least one network view component through the client when the client is started, the client switches from the background to the foreground, or the client jumps to a set interface, and load a page template file of page common resources in each network view component in the network view component pool.

[0102] In some embodiments, the creation module is also used to load a fixed link of a public hypertext markup language file corresponding to the page public resources, or to load a local file in the form of an offline package corresponding to the page public resources, wherein the local file includes a public hypertext markup language file, a public cascading style sheet, and a public scripting language.

[0103] In some embodiments, the request update module is also used to send a page request to the server, wherein the page request includes the template version number and data version number of the cache file of the page; when the template version number of the cache file of the page is inconsistent with the template version number in the server, receiving the updated page template file and page data file sent by the server; when the template version number of the cache file of the page is consistent with the template version number in the server, and the data version number of the cache file of the page is inconsistent with the data version number in the server, receiving the updated page data file sent by the server.

[0104] In some embodiments, the page display processing device also includes creating a loading module, which is used to create a new network view component and load the page common resources corresponding to the page in the new network view component when a network view component pre-loaded with page common resources corresponding to the page is not queried; query the cache file corresponding to the address of the page, and send it to the new network view component for rendering to display the content of the page.

[0105] In some embodiments, the page display processing device also includes a trigger request module, which is used to trigger the front-end code to perform a page loading operation when the cache file corresponding to the address of the page is not queried, so that the front-end code requests the server for the file corresponding to the page address, and sends the file corresponding to the page address to the queried network view component for rendering to display the content of the page.

[0106] An embodiment of the present invention provides a storage medium storing executable instructions, wherein the executable instructions are stored. When the executable instructions are executed by a processor, the processor will be caused to execute the method provided by the embodiment of the present invention, for example, Figure 4 The method shown.

[0107] In some embodiments, the storage medium may be a memory such as FRAM, ROM, PROM, EPROM, EEPROM, flash memory, magnetic surface memory, optical disk, or CD-ROM; or various devices including one or any combination of the above memories.

[0108] In some embodiments, executable instructions may be in the form of a program, software, software module, script or code, written in any form of programming language (including compiled or interpreted languages, or declarative or procedural languages), and may be deployed in any form, including as a stand-alone program or as a module, component, subroutine or other unit suitable for use in a computing environment.

[0109] As an example, executable instructions may, but need not, correspond to a file in a file system, may be stored as part of a file that stores other programs or data, such as in one or more scripts in an HTML document, in a single file dedicated to the program in question, or in multiple coordinated files (e.g., files storing one or more modules, subroutines, or code portions).

[0110] By way of example, executable instructions may be deployed to be executed on one computing device, or on multiple computing devices located at one site, or on multiple computing devices distributed across multiple sites and interconnected by a communication network.

[0111] In summary, the embodiments of the present invention have the following beneficial effects:

[0112] 1) In the scenario where the preloaded Webview component is hit, the Webview component loading process is optimized, the time required to load the Webview component is reduced, and the white screen waiting time is reduced.

[0113] 2) The server rendering method reduces the number of requests to 1, reduces the number of requests sent, and improves the speed of subsequent loading.

[0114] 3) Using the client local cache, the speed of reloading the page is equivalent to the native experience speed, and the page can be opened at a very fast speed.

[0115] The above description is only an embodiment of the present invention and is not intended to limit the protection scope of the present invention. Any modification, equivalent replacement and improvement made within the spirit and scope of the present invention are included in the protection scope of the present invention.

Claims

1. A method for displaying a page, characterized in that: include: Creating a web view component pool including at least one web view component through a client, and preloading a page common resource in each of the web view components included in the web view component pool; When a page of the client is triggered, querying the network view component pool based on the page; When a web view component preloaded with a page common resource corresponding to the page is found from the web view component pool, a local cache is queried according to the address of the page; When a cache file corresponding to the address of the page is queried from the local cache, the web view component is used to parse the common resources of the page, a document object model and a rendering tree are constructed, and the cache file is sent to the queried web view component for rendering using the document object model and the rendering tree to display the content of the page; When no cache file corresponding to the address of the page is found in the local cache, the front-end code is triggered to perform a page loading operation, so that the front-end code requests the file corresponding to the page address from the server, and sends the file corresponding to the page address to the found network view component for rendering, so as to display the content of the page; When no web view component preloaded with the page common resources corresponding to the page is found from the web view component pool, a new web view component is created, and the page common resources corresponding to the page are loaded into the new web view component; Querying a cache file corresponding to the address of the page, and sending the cache file to the new network view component for rendering to display the content of the page; After querying the cache file corresponding to the address of the page from the local cache and sending the cache file to the queried network view component for rendering, a page request is sent to the server, wherein the page request includes a template version number and a data version number of the cache file of the page; When the template version number of the cache file of the page is inconsistent with the template version number in the server, receiving the updated page template file and page data file sent by the server; When the template version number of the cache file of the page is consistent with the template version number in the server, and the data version number of the cache file of the page is inconsistent with the data version number in the server, receiving the updated page data file sent by the server; The cache file of the page is updated according to the file returned by the server.

2. The method according to claim 1, characterized in that The step of creating a web view component pool including at least one web view component through a client, and preloading a page common resource in each web view component included in the web view component pool, comprises: When the client is started, the client switches from the background to the foreground, or the client jumps to the set interface, the client pre-creates a network view component pool including at least one network view component, and loads a page template file of page common resources in each network view component included in the network view component pool.

3. The method according to claim 2, characterized in that The page template file of the loading page common resources includes: Load the fixed link of the public hypertext markup language file corresponding to the public resource of the page, or, A local file in the form of an offline package corresponding to the common resource of the page is loaded, wherein the local file includes a common hypertext markup language file, a common cascading style sheet, and a common scripting language.

4. A page display processing device, characterized in that: include: A creation module, used to create a web view component pool including at least one web view component through a client, and preload page common resources in each web view component included in the web view component pool; A query module, used for querying the network view component pool based on the page when the page of the client is triggered; When a web view component preloaded with a page common resource corresponding to the page is found from the web view component pool, a local cache is queried according to the address of the page; The query module is further configured to, when a cache file corresponding to the address of the page is queried from the local cache, parse the common resources of the page using the network view component, construct a document object model and a rendering tree, and send the cache file to the queried network view component to render using the document object model and the rendering tree to display the content of the page; A trigger request module, for triggering the front-end code to perform a page loading operation when no cache file corresponding to the address of the page is queried from the local cache, so that the front-end code requests the file corresponding to the page address from the server, and sends the file corresponding to the page address to the queried network view component for rendering, so as to display the content of the page; Creating a loading module, used for creating a new network view component and loading the page common resources corresponding to the page in the new network view component when no network view component preloaded with the page common resources corresponding to the page is found from the network view component pool; Querying a cache file corresponding to the address of the page, and sending the cache file to the new network view component for rendering to display the content of the page; A request update module, configured to query a cache file corresponding to the address of the page from the local cache, send the cache file to the queried network view component for rendering, and then send a page request to the server, wherein the page request includes a template version number and a data version number of the cache file of the page; when the template version number of the cache file of the page is inconsistent with the template version number in the server, receive the updated page template file and page data file sent by the server; When the template version number of the cache file of the page is consistent with the template version number in the server, and the data version number of the cache file of the page is inconsistent with the data version number in the server, receive the updated page data file sent by the server; and update the cache file of the page according to the file returned by the server.

5. The device according to claim 4, characterized in that The creation module is also used to pre-create a network view component pool including at least one network view component through the client when the client is started, the client switches from the background to the foreground, or the client jumps to the set interface, and load the page template file of the page common resources in each network view component included in the network view component pool.

6. The device according to claim 4, characterized in that The creation module is further used to load a fixed link of a public hypertext markup language file corresponding to the public resource of the page, or, A local file in the form of an offline package corresponding to the common resource of the page is loaded, wherein the local file includes a common hypertext markup language file, a common cascading style sheet, and a common scripting language.

7. A terminal device, characterized in that: include: A memory for storing executable instructions; A processor, configured to implement the page display processing method according to any one of claims 1 to 3 when executing the executable instructions stored in the memory.

8. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores executable instructions for causing a processor to execute instructions to implement the page display processing method according to any one of claims 1 to 3.

Citation Information

Patent Citations

  • Method and device for rendering webpage of mobile explorer

    CN106776761A

  • Page display method and apparatus, and electronic device

    CN107066631A