Page loading method, device and computer program product

Abstract

The embodiment of the invention discloses a page loading method and device and a computer program product, and belongs to the field of application programs.The method comprises the steps that a native page of an application program is loaded, and a webpage view page of a webpage view assembly is loaded; displaying a native page and a webpage view page located on the upper layer of the native page to obtain a first page; wherein the webpage view page is a transparent page, and the page content of the native page is displayed through the webpage view page. According to the method, the page loading speed can be increased.

Description

Technical Field

[0001] The embodiments of the present application relate to the field of application programs, and in particular, to a page loading method, device, and computer program product. Background Art

[0002] The homepage of an application is used to display the core functions and services of the application to users. Users can quickly browse the latest updates, popular content recommendations, etc. of the application on the homepage of the application.

[0003] In the related art, a webview (web page view) component is used to display the home page. After starting the application, the webview component is initialized, the laya engine of the webview is initialized, and the laya engine is used to render the home page content.

[0004] According to the method in the related art, when the home page has a lot of content, it takes too long to load the page content using webview; and the laya engine used by the webview component has a long initialization loading time, which further leads to slow page opening speed. Summary of the invention

[0005] Embodiments of the present application provide a page loading method, device, and computer program product.

[0006] According to one aspect of the present application, a page loading method is provided, wherein the application includes a web page view component; the method includes:

[0007] Loading a native page of the application and loading a web view page of the web view component;

[0008] Display the native page and the web page view page located at an upper layer of the native page to obtain the first page;

[0009] The web page view page is a transparent page, and the page content of the native page is displayed through the web page view page.

[0010] According to another aspect of the present application, a page loading device is provided, wherein an application is running on the device, and the application includes a web page view component; the device includes:

[0011] A loading module, used to load the native page of the application and the web view page of the web view component;

[0012] A display module, used for displaying the native page and the web page view page located at an upper layer of the native page to obtain the first page;

[0013] The web page view page is a transparent page, and the page content of the native page is displayed through the web page view page.

[0014] According to another aspect of the present application, a terminal is provided, the terminal comprising a processor and a memory, the memory storing at least one instruction, the instruction being loaded and executed by the processor to implement a page loading method as provided in the present application.

[0015] According to another aspect of the present application, a computer-readable storage medium is provided, wherein at least one instruction is stored in the storage medium, and the instruction is loaded and executed by a processor to implement a page loading method as provided in the implementation of the present application.

[0016] According to another aspect of the present application, a computer program product is provided, which includes a computer program stored in a computer-readable storage medium; the computer program is read and executed from the computer-readable storage medium by a processor of a computer device, so that the computer device implements the page loading method provided in the implementation of the present application.

[0017] The beneficial effects brought by the technical solution provided by the embodiments of the present application may include:

[0018] When using the webview component to display a page, the native page of the application is combined with the webview page to display. After the page is started, the native page of the application is used to load and display the page content, and the webview page of the webview component is loaded at the same time, and the webview page is displayed in a transparent form on the upper layer of the native page. Using this method to start the page, the page content can be displayed in the native page, and the webview page is displayed as fully transparent. In this way, the startup display speed of the page depends only on the loading speed of the native page, and the loading speed of the webview component will no longer affect the startup of the page. The application can quickly load the page content and display it on the native page by loading local data or requesting data from the server, thereby improving the page loading speed; even if the webview component loads slowly, since the webview page is displayed as transparent, its loading progress will not affect the display of the page content, and it can still bring users a smooth experience of opening the page in seconds. BRIEF DESCRIPTION OF THE DRAWINGS

[0019] In order to more clearly introduce the technical solutions in the embodiments of the present application, the drawings required for use in the description of the embodiments of the present application will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.

[0020] Figure 1 is a schematic diagram of a computer system provided by an exemplary embodiment of the present application;

[0021] Figure 2 is a flow chart of a page loading method provided by an exemplary embodiment of the present application;

[0022] Figure 3 is a schematic diagram of a first page provided by an exemplary embodiment of the present application;

[0023] Figure 4 is a flow chart of a page loading method provided by an exemplary embodiment of the present application;

[0024] Figure 5 is a schematic diagram of a page loading method provided by an exemplary embodiment of the present application;

[0025] Figure 6 is a schematic diagram of a page loading method provided by an exemplary embodiment of the present application;

[0026] Figure 7 is a flow chart of a page loading method provided by an exemplary embodiment of the present application;

[0027] Figure 8 is a schematic diagram of a page loading method provided by an exemplary embodiment of the present application;

[0028] Fig. 9 is a schematic diagram of a page loading method provided by an exemplary embodiment of the present application;

[0029] Fig.10 is a schematic diagram of a second page provided by an exemplary embodiment of the present application;

[0030] Fig.11 is a flow chart of a page loading method provided by an exemplary embodiment of the present application;

[0031] Fig.12 is a schematic diagram of a page loading method provided by an exemplary embodiment of the present application;

[0032] Fig.13 is a structural block diagram of a page loading device provided by an exemplary embodiment of the present application;

[0033] Fig.14 It is a structural block diagram of a computer device provided by an exemplary embodiment of the present application. DETAILED DESCRIPTION

[0034] In order to make the objectives, technical solutions and advantages of the present application clearer, the implementation methods of the present application will be further described in detail below with reference to the accompanying drawings.

[0035] When the following description refers to the drawings, unless otherwise indicated, the same numbers in different drawings represent the same or similar elements. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with the present application. Instead, they are only examples of devices and methods consistent with some aspects of the present application as detailed in the attached claims.

[0036] In the description of the present application, it should be understood that the terms "first", "second", etc. are only used for descriptive purposes and cannot be understood as indicating or implying relative importance. In the description of the present application, it should be noted that, unless otherwise clearly specified and limited, the terms "connected" and "connected" should be understood in a broad sense. For example, it can be a fixed connection, a detachable connection, or an integral connection; it can be a mechanical connection or an electrical connection; it can be directly connected or indirectly connected through an intermediate medium. For ordinary technicians in this field, the specific meanings of the above terms in this application can be understood according to specific circumstances. In addition, in the description of the present application, unless otherwise specified, "multiple" means two or more. "And / or" describes the association relationship of associated objects, indicating that there can be three relationships. For example, A and / or B can represent: A exists alone, A and B exist at the same time, and B exists alone. The character " / " generally indicates that the objects associated before and after are in an "or" relationship.

[0037] Figure 1 A schematic diagram of a computer system provided by an exemplary embodiment of the present application is shown, and the computer system may include a terminal 101 and a server 103 .

[0038] Exemplarily, the page loading method shown in the embodiment of the present application can be applied in a terminal, and the terminal 101 is installed with a client of an application. The application can be any application with a page display function, or the application can be any application that can display an interface / page. For example, the application can include at least one of the following: an operating system desktop program, a desktop component program, a social application, an information application, a forum application, a video application, a short video application, a browser, a game application, a shopping application, a music application, a local service application, a travel service application, an office application, a sports application, an application for an Internet of Things device, etc.

[0039] The terminal may include a mobile phone, a tablet computer, a notebook computer, a laptop computer, a desktop computer, an all-in-one computer, an Internet of Things device, an intelligent robot workstation, a television, a set-top box, smart glasses, a smart watch, a digital camera, an MP4 (Moving Picture Experts Group 4) playback terminal, an MP5 (Moving Picture Experts Group Layer 5) playback terminal, a learning machine, a reading machine, an e-book reader, an electronic dictionary, a car terminal, a virtual reality (VR) playback terminal or an augmented reality (AR) playback terminal, etc.

[0040] Exemplarily, the page loading method provided by the present application can be executed by an application (or a client of the application) in the terminal. The terminal 101 is installed with an application 102. When the page loading method provided by the embodiment of the present application needs to be used, the page loading client can run the application to execute the page loading method and display the first page 104. The first page is composed of a native page 105 and a web page view page 106, wherein the native page 105 is used to display the page content of the first page, and the web page view page 106 is a transparent page.

[0041] The terminal 101 includes a first memory and a first processor. A page loading program is stored in the first memory; the page loading program is called and executed by the first processor to implement the page loading method provided in the present application. The first memory may include but is not limited to the following: Random Access Memory (RAM), Read Only Memory (ROM), Programmable Read-Only Memory (PROM), Erasable Programmable Read-Only Memory (EPROM), and Electric Erasable Programmable Read-Only Memory (EEPROM).

[0042] The first processor may be composed of one or more integrated circuit chips. Optionally, the first processor may be a general-purpose processor, such as a central processing unit (CPU) or a network processor (NP). Optionally, the first processor may implement the page loading method provided by the present application by running a program or code.

[0043] In an optional embodiment, the terminal 101 and the server 103 may be connected to each other via a wired or wireless network.

[0044] The server 103 is used to provide background services for the client of the terminal 101. Optionally, the server 103 undertakes the main computing work and the terminal 101 undertakes the secondary computing work; or, the server 103 undertakes the secondary computing work and the terminal 101 undertakes the main computing work; or, the server 103 and the terminal 101 adopt a distributed computing architecture to perform collaborative computing.

[0045] The server 103 may be a single server, or a server cluster consisting of multiple servers, or a cloud computing service center.

[0046] Optionally, the server 103 includes a second memory and a second processor. The second memory stores a page loading program; the page loading program is called by the second processor to implement the page loading method provided in the present application. Optionally, the second memory may include but is not limited to the following: RAM, ROM, PROM, EPROM, EEPROM. Optionally, the second processor may be a general-purpose processor, such as a CPU or NP.

[0047] Figure 2 is a flow chart of a page loading method provided by an exemplary embodiment of the present application. The page loading method can be applied in a computer device, which can be the above-mentioned Figure 1 The terminal or server shown in the figure. The method comprises the following steps.

[0048] Step 220 , loading the native page of the application, and loading the web view page of the web view component.

[0049] Exemplarily, the method is executed by an application on a terminal, where the application includes a web view component, and the web view component is used to display a page of the application.

[0050] Since the initialization time of the web view component is long and the page loading speed is slow when the page is opened, the embodiment of the present application provides a page loading method. For the display of the first-level page, the combination of the native page and the web view page is used to display the page content of the first-level page on the native page, and the web view component is initialized to load the web view page. The web view page does not display the page content of the first-level page, but is used to display the page content of the second-level page. In this way, the first-level page can be quickly started, and the user experience of using the web view component for page display can be optimized.

[0051] The first page may be any page in the application. For example, the first page may be the homepage of the application. The first page is a first-level page of the application, and at least one second-level page of the first page may be opened through the first page. All or part of the first-level pages of the application may be displayed using the method of the embodiment of the present application.

[0052] Exemplarily, the first page and / or the second page is displayed using a web page view component, and the web page view component needs to be initialized when the first page is opened.

[0053] Optionally, the application receives a startup instruction for the first page, and loads the native page and the web view page in response to the startup instruction. The startup instruction may be generated in response to a user's triggering operation. For example, the startup instruction is generated in response to a user clicking on a link to the first page. Alternatively, the startup instruction may be generated by the application. For example, the first page is the homepage of the application, and in response to starting the application, a startup instruction for the first page is generated. Alternatively, the startup instruction may be triggered by other applications. For example, a user triggers a jump link of the application in the second application, a startup instruction is generated, the application is started, and the first page is displayed.

[0054] A native page is a page loaded and displayed by the native program of an application. For example, the application locally stores or caches data of the native page, and the application can quickly load and display the native page by reading the locally stored or cached data. Alternatively, the client of the application can request the data of the native page from the server, and load and display the native page according to the requested data.

[0055] A webview page is a page loaded and displayed by a webview component in an application. For example, the application does not store data of the webview page locally. When the webview page needs to be displayed, the webview component requests the server to obtain the data of the webview page in real time, and loads and displays the webview page according to the obtained data.

[0056] It should be noted that the application loads the native page and the web view page at the same time. While loading the native page, the application initializes the web view component and loads the web view page through the web view component. Because the page content of the first page is displayed by the native page, the page content is not displayed on the web view page, and the loading progress of the web view page does not affect the normal display of the first page.

[0057] Step 240 , display the native page and the web page view page located on the upper layer of the native page to obtain a first page.

[0058] The first page is composed of a native page and a web page view page. The native page and the web page view page are superimposed up and down to obtain the first page, and the web page view page is located on the upper layer of the native page.

[0059] The web page view page is a transparent page, and the native page is used to display the first page content of the first page. The first page content in the native page can be displayed through the web page view page.

[0060] Exemplarily, the web page view page is a fully transparent page, that is, the transparency is 0%. Alternatively, the transparency of the web page view page is within a first interval, and the first interval may be a preset value, for example, the first interval may be 0% to 10%.

[0061] Exemplarily, the web page view page is a transparent blank page, that is, the web page view page does not include page content; the web page view page is used to display the secondary page of the first page, and when receiving an open operation of the secondary page, the web page view component loads the page content of the corresponding secondary page and displays the page content in the web page view page.

[0062] Alternatively, when the web view page is a fully transparent page, the web view page can also display the page content. For example, the web view page can display the page content of the secondary page (second page) of the first page. However, since the web view page is a fully transparent page, the page content of the web view page will not be displayed on the first page. When the user opens the second page, the application can quickly display the page content of the second page by adjusting the transparent image of the web view page.

[0063] The page content includes at least one of the following: text, image, audio, video, animation, motion effect, link, UI control. A blank page refers to a page that does not include any of the above page content.

[0064] Optionally, the coverage area of ​​the web view page is not greater than the coverage area of ​​the native page. The page area of ​​the web view page is less than or equal to the page area of ​​the native page. Optionally, the web view page is the same shape and size as the native page, and the web view page is centered with the native page.

[0065] For example, displaying Figure 3 The first page shown includes a native page 105 displayed on the lower layer and a web page view page 106 displayed on the upper layer. In order to highlight the web page view page 106 displayed on the upper layer, this example marks the edge of the web page view page 106. In actual applications, the edge will not be displayed, and the user will not be able to see the web page view page 106, but can only see the native page 105 on the lower layer.

[0066] Exemplarily, the first page content may include at least one of the following: animation, image, video, motion effect, text. For example, the first page may contain a large amount of complex animation content and dynamic effects, and the speed of loading and rendering using the web view component is too slow. In this case, the method provided in the embodiment of the present application can be used to display the content using the native page to speed up the startup speed of the first page.

[0067] In an optional embodiment, the native page can be used to display the main content of the first page, and the main content may include at least one of the following: text content, image content, video content, animation content, and interactive content whose importance is higher than a threshold. Interactive content is content that can respond to user-triggered operations. For example, interactive content includes UI controls and links. The web view page is used to display the secondary content of the first page, and the secondary content may include at least one of the following: decorative content, non-essential text, non-essential images, non-essential videos, non-essential animations, etc. That is, the content displayed in the web view page does not affect the normal browsing and use of the first page.

[0068] In summary, the page loading method provided in this embodiment adopts a display method combining the native page of the application and the web view page when using the web view component to display the page. After the page is started, the native page of the application is used to load and display the page content, and the web view page of the web view component is loaded at the same time, and the web view page is displayed in a transparent form on the upper layer of the native page. Using this method to start the page, the page content can be displayed in the native page, and the web view page is displayed as fully transparent. In this way, the startup display speed of the page depends only on the loading speed of the native page, and the loading speed of the web view component will no longer affect the startup of the page. The application can quickly load the page content and display it on the native page by loading local data or requesting data from the server, thereby improving the page loading speed; even if the web view component loads slowly, since the web view page is displayed in a transparent form, its loading progress will not affect the display of the page content, and it can still bring users a smooth experience of opening the page in seconds.

[0069] An exemplary embodiment of synchronously loading a native page and a web view page is provided.

[0070] Figure 4 is a flow chart of a page loading method provided by another exemplary embodiment of the present application. The page loading method can be applied in a terminal, which can be the above-mentioned Figure 1 The terminal shown. Based on Figure 2 In the illustrated embodiment, step 220 includes step 221 and step 222 .

[0071] Step 221, requesting first page content of a first page; displaying the first page content in a native page.

[0072] Exemplarily, the client requests data of the first page from the server, and loads and displays the first page content of the first page according to the received data of the first page.

[0073] Alternatively, the client requests the locally stored data of the first page, and loads and displays the first page content of the first page according to the read data of the first page.

[0074] After the native page successfully loads and displays the first page content, the user can browse the entire page content of the first page normally without waiting for the web view page to load; the interactive operations / trigger operations performed by the user on the first page are received and responded to by the application.

[0075] Step 222, initialize the web view component; initialize the rendering engine of the web view component; use the rendering engine to render the web view page.

[0076] Among them, step 221 and step 222 are executed synchronously. After step 221 is executed, the application can display all the page contents of the first page, and the execution progress of step 222 does not affect the page display of the first page.

[0077] Exemplarily, the web page view page does not display page content, that is, the web page view page is a transparent blank page. The web page view component uses a rendering engine to render the transparent blank page to obtain the web page view page.

[0078] For example, Figure 5 As shown, after starting the page 300, the application synchronously executes the initialization process 301 of the page view component and the process 302 of requesting the page data of the first page. The web view component execution engine initialization 303, and loads the h5 (Hyper Text Markup Language 5) content. After requesting the page data, the application displays the page content of the native page (i.e., the first page content of the first page) 304 based on the page data. The page display of the first page does not need to wait for the initialization process of the web view component.

[0079] Step 240 , display the native page and the web page view page located on the upper layer of the native page to obtain a first page.

[0080] like Figure 6As shown, if the method in the related art is adopted, the page startup process A will be executed, and the page content will be displayed by the web view component. It is necessary to execute the web view component initialization, html (Hyper Text Markup Language) loading, js (JavaScript) / css (Cascading Style Sheets) loading, long link request page data, and execute the page rendering process based on the page data; after completing the initialization, the web view component obtains the page data through the long link, and executes the rendering and display of the page content based on the page data. At the same time, the application executes the request for account information data and transmits the account information to the web view component. The time taken to open the page by the method in the related art is marked as t1.

[0081] When the method provided in the embodiment of the present application is adopted, the page startup process B is executed, the application displays the page content, and the web page view component is initialized while the application loads and displays the page content. Figure 6 As shown, the application requests account information data, the long link requests page data, and displays content based on the page data; at the same time, the initialization of the web view component, HTML loading, and JS / CSS loading are executed. Using the method provided in the embodiment of the present application, it only takes t2 time for the page to display the page content. After experimental verification, as shown in Table 1, the time t1 of the method in the related art is 2666ms (milliseconds), and the time t2 of the method provided in the embodiment of the present application is 984ms, which greatly reduces the time consumption of page opening and achieves the effect of page opening in seconds.

[0082] Table 1

[0083] t1 t2 Effect 2666ms 984ms Reach seconds to open

[0084] In summary, the page loading method provided in this embodiment loads the native page and the web view page at the same time when the first page is opened, and the native page displays the page content of the first page, while the web view page is a transparent blank page without displaying content. Since the native page loads faster, the page can be opened quickly, and the initialization and page loading of the web view component are performed at the same time, so that the secondary page can be opened quickly using the web view page, bringing users a smooth experience of opening the page in seconds.

[0085] An exemplary embodiment of using a web page view page to display a secondary page of a first page is provided.

[0086] Figure 7 is a flow chart of a page loading method provided by another exemplary embodiment of the present application. The page loading method can be applied in a terminal, which can be the above-mentioned Figure 1 The terminal shown. Based on Figure 2 In the illustrated embodiment, step 240 is followed by step 250 .

[0087] Step 220 , loading the native page of the application, and loading the web view page of the web view component.

[0088] Step 240 , display the native page and the web page view page located on the upper layer of the native page to obtain a first page.

[0089] Exemplarily, the relevant descriptions of step 220 and step 240 may refer to the above.

[0090] Step 250, calling the web page view component to generate a second page; the second page is a secondary page of the native page.

[0091] Exemplarily, a user interface (UI) control is displayed on the native page, such as Fig. 9 As shown, the application receives the user's click operation on the UI control 501 in the native page, calls the callJs method 502 of the web view page component, controls the web view component to obtain and display the page content 503 of the secondary page, and then opens the secondary page.

[0092] For example, Fig.10 As shown, the user clicks on the UI control 107 in the native page 105 , and the corresponding secondary page is displayed on the web view page 106 .

[0093] Exemplarily, the web page view page is adjusted to be opaque, and the second page content of the second page is loaded and displayed on the web page view page. The web page view page will cover the native page of the lower layer, showing the effect of opening the second page.

[0094] Optionally, the first-level page is displayed using a native page, and the third-level page or the next lower-level page opened through the second-level page can be displayed using the web view page; in this way, the client does not need to store a large amount of page data locally, only the page data of the first-level page needs to be stored, and the remaining page data can be requested from the network in real time through the web view component when displayed.

[0095] Exemplarily, the application receives a trigger operation for the content of the first page and displays the second page on the web page view page. The trigger operation is used to open the second page.

[0096] When the web view page is in a transparent state, the web view component does not receive trigger operations (such as click events), and the application controls the trigger operation to be transmitted to the underlying native page, which receives and responds to the trigger operation. After the current user opens the secondary page, the page content of the secondary page is displayed in the web view page, and the web view component receives and responds to the trigger operation.

[0097] Exemplarily, when the second page is not opened or closed, the web view component does not receive a trigger operation on the web view page; when the second page is opened, the web view component receives a trigger operation on the web view page.

[0098] like Figure 8 As shown, when a user operation 401 is received in the first page, when the secondary page 402 is opened, the web view component receives the click event generated by the user operation and responds; when the secondary page 403 is closed, the native page receives the click event generated by the user operation and responds, while the web view component does not receive the click event.

[0099] For example, the first page content includes a link to the second page, and the application receives a click operation on the link to the second page.

[0100] In summary, the page loading method provided in this embodiment uses a native page to display the page content of a primary page, and uses a web view page to display the page content of a secondary page. When opening a primary page, a native page is used to speed up the opening speed of the primary page, and at the same time, the web view component is initialized and the web view page is loaded. Based on this, when opening a secondary page, there is no need to initialize the web view component, and the web view page can be used to quickly display the page content of the secondary page. This enables the page display of the application to have the flexibility of a web view page, while ensuring that the page is opened efficiently, providing users with a smooth experience of opening the page in seconds.

[0101] An exemplary embodiment of sharing page data between an application and a web page view component is provided.

[0102] Fig.11 is a flow chart of a page loading method provided by another exemplary embodiment of the present application. The page loading method can be applied in a terminal, which can be the above-mentioned Figure 1 The terminal shown. Based on Figure 2 In the illustrated embodiment, the method further includes steps 260 to 280 .

[0103] Step 260, request page data from the server.

[0104] Exemplarily, the page data of all pages in the application are requested by the client to the server, and after obtaining the page data, the client shares the page data with the web view component through the communication interface. In this way, the page data of all pages in the application can be stored by the client, which is convenient for client caching.

[0105] Optionally, the client requests page data of the first page from the server, and / or the client requests page data of the native page from the server, and / or the client requests page data of the web view component from the server, and / or the client requests page data of the second page from the server.

[0106] For example, when displaying the first page, the client requests page data of the native page from the server; and after completing initialization, the web view component requests page data of the web view page from the client through the communication interface, and the client requests page data of the web view page from the server based on the request of the web view page.

[0107] For another example, when displaying the second page, the client requests the page data of the second page from the server.

[0108] Exemplarily, the client may receive a data acquisition request sent by the web page view component through the communication interface, and request page data from the server according to the data acquisition request of the web page view component.

[0109] Step 270, receiving page data.

[0110] The page data includes at least one of the following: page data of a first page, page data of a second page, page data of a native page, and page data of a web page view page. The page data of a native page includes data of a first page content of a first page; and the page data of a web page view page includes data of a second page content of a second page.

[0111] The server returns corresponding page data to the client according to the request of the client. For example, the server sends page data of the first page to the client, and / or the server sends page data of the native page to the client, and / or the server sends page data of the web view page to the client. For another example, the server sends page data of the second page to the client.

[0112] Optionally, the client can cache the received page data locally.

[0113] Step 280: Share the page data with the web view component through the communication interface.

[0114] Exemplarily, using the method provided in this embodiment, the page data is requested by the application (client), and the requested page data is shared by the client and the web page view component. Fig.12As shown, the web view component 603 and the client 602 share data through a communication interface 604 (e.g., a jsBridge interface). The web view component 603 receives the front-end data generated by the behavior on the web view page, and transmits it to the client 602 through the communication interface 604. The client 602 requests data from the server 601 through a long link request 605, stores the requested data in the client 602, and shares the requested data with the web view component 603 through the communication interface 604. The client receives the behavior on the native page and requests data from the server 601 in the same way. The client is responsible for data storage, resource management, and data conversion of the application, and shares the data with the web view component 603.

[0115] Optionally, the web page view component may request page data from the client through the communication interface, and the client sends the page data to the web page view component through the communication interface.

[0116] In summary, in the page loading method provided in this embodiment, the page data in the application is requested by the client to the server, and the requested page data is shared with the web view component through the communication interface, which is convenient for the client to cache and manage the page data.

[0117] The following is an embodiment of the device of the present application, which can be used to execute the embodiment of the method of the present application. For details not disclosed in the embodiment of the device of the present application, please refer to the embodiment of the method of the present application.

[0118] Please refer to Fig.13 , Fig.13 This is a structural block diagram of a page loading device provided by an exemplary embodiment of the present application. The page loading device can be implemented as all or part of a terminal through software, hardware, or a combination of both. An application program is running on the device, and the application program includes a web page view component; the device includes:

[0119] A loading module 702, used to load the native page of the application and the web view page of the web view component;

[0120] A display module 703 is used to display the native page and the web page view page located at an upper layer of the native page to obtain a first page;

[0121] The web page view page is a transparent page, and the page content of the native page is displayed through the web page view page.

[0122] In an optional embodiment, the loading module 702 is used to initialize the web page view component;

[0123] The loading module 702 is used to initialize the rendering engine of the web view component;

[0124] The loading module 702 is used to render the web view page using the rendering engine.

[0125] In an optional embodiment, the web page view page does not display page content;

[0126] The loading module 702 is used to use the rendering engine to render a transparent blank page to obtain the web page view page.

[0127] In an optional embodiment, the loading module 702 is used to request the first page content of the first page;

[0128] The loading module 702 is used to display the first page content in the native page.

[0129] In an optional embodiment, the coverage area of ​​the web view page is not greater than the coverage area of ​​the native page.

[0130] In an optional embodiment,

[0131] The display module 703 is used to call the web page view component to generate a second page; the second page is a secondary page of the native page.

[0132] In an optional embodiment, the device further includes:

[0133] When the second page is not opened or closed, the web page view component does not receive a trigger operation on the web page view page;

[0134] When the second page is opened, the web view component receives a trigger operation on the web view page.

[0135] In an optional embodiment, the device further includes:

[0136] The sending module 704 is used to request page data from the server;

[0137] A receiving module 705, configured to receive the page data;

[0138] The interface module 706 is used to share the page data with the web page view component through a communication interface.

[0139] In an optional embodiment, the first page content includes at least one of the following: animation, image, video, motion effect, and text.

[0140] It should be noted that: when the page loading device provided in the above embodiment executes the page loading method, only the division of the above functional modules is used as an example. In actual applications, the above functions can be assigned to different functional modules as needed, that is, the internal structure of the device can be divided into different functional modules to complete all or part of the functions described above. In addition, the page loading device provided in the above embodiment belongs to the same concept as the page loading method embodiment. The specific implementation process is detailed in the method embodiment and will not be repeated here.

[0141] In summary, the page loading device provided in this embodiment adopts a display method combining the native page of the application and the web view page when using the web view component to display the page. After the page is started, the native page of the application is used to load and display the page content, and the web view page of the web view component is loaded at the same time, and the web view page is displayed in a transparent form on the upper layer of the native page. Using this method to start the page, the page content can be displayed in the native page, and the web view page is displayed as fully transparent. In this way, the startup display speed of the page depends only on the loading speed of the native page, and the loading speed of the web view component will no longer affect the startup of the page. The application can quickly load the page content and display it on the native page by loading local data or requesting data from the server, thereby improving the page loading speed; even if the web view component loads slowly, since the web view page is displayed in a transparent form, its loading progress will not affect the display of the page content, and it can still bring users a smooth experience of opening the page in seconds.

[0142] The present application also provides a computer device, which includes a processor and a memory, wherein the memory stores at least one instruction, and the at least one instruction is loaded and executed by the processor to implement the page loading method provided by each of the above method embodiments. It should be noted that the computer device can be as follows: Fig.14 A computer device is provided, which may be a terminal.

[0143] Fig.14 The block diagram of the structure of a computer device 1000 provided by an exemplary embodiment of the present application is shown. The computer device 1000 may be: a smart phone, a tablet computer, an MP3 player (Moving Picture Experts Group Audio Layer III, dynamic image expert compression standard audio layer 3), an MP4 (Moving Picture Experts Group Audio Layer IV, dynamic image expert compression standard audio layer 4) player, a laptop computer or a desktop computer. The computer device 1000 may also be called a user account device, a portable computer device, a laptop computer device, a desktop computer device, and other names.

[0144] Typically, the computer device 1000 includes a processor 1001 and a memory 1002 .

[0145] The processor 1001 may include one or more processing cores, such as a 4-core processor, an 8-core processor, etc. The processor 1001 may be implemented in at least one hardware form of DSP (Digital Signal Processing), FPGA (Field-Programmable Gate Array), and PLA (Programmable Logic Array). The processor 1001 may also include a main processor and a coprocessor. The main processor is a processor for processing data in the awake state, also known as a CPU (Central Processing Unit); the coprocessor is a low-power processor for processing data in the standby state. In some embodiments, the processor 1001 may be integrated with a GPU (Graphics Processing Unit, page loader), and the GPU is responsible for rendering and drawing the content to be displayed on the display screen. In some embodiments, the processor 1001 may also include an AI (Artificial Intelligence) processor, which is used to process computing operations related to machine learning.

[0146] The memory 1002 may include one or more computer-readable storage media, which may be non-transitory. The memory 1002 may also include a high-speed random access memory, and a non-volatile memory, such as one or more disk storage devices, flash memory storage devices. In some embodiments, the non-transitory computer-readable storage medium in the memory 1002 is used to store at least one instruction, which is used to be executed by the processor 1001 to implement the page loading method provided in the method embodiment of the present application.

[0147] In some embodiments, the computer device 1000 may also optionally include: a peripheral device interface 1003 and at least one peripheral device. The processor 1001, the memory 1002 and the peripheral device interface 1003 may be connected via a bus or a signal line. Each peripheral device may be connected to the peripheral device interface 1003 via a bus, a signal line or a circuit board. Specifically, the peripheral device includes: at least one of a radio frequency circuit 1004, a display screen 1005, a camera assembly 1006, an audio circuit 1007, and a power supply 1009.

[0148] The peripheral device interface 1003 may be used to connect at least one peripheral device related to I / O (Input / Output) to the processor 1001 and the memory 1002. In some embodiments, the processor 1001, the memory 1002, and the peripheral device interface 1003 are integrated on the same chip or circuit board; in some other embodiments, any one or two of the processor 1001, the memory 1002, and the peripheral device interface 1003 may be implemented on a separate chip or circuit board, which is not limited in this embodiment.

[0149] The radio frequency circuit 1004 is used to receive and transmit RF (Radio Frequency) signals, also known as electromagnetic signals. The radio frequency circuit 1004 communicates with the communication network and other communication devices through electromagnetic signals. The radio frequency circuit 1004 converts the electrical signal into an electromagnetic signal for transmission, or converts the received electromagnetic signal into an electrical signal. Exemplarily, the radio frequency circuit 1004 includes: an antenna system, an RF transceiver, one or more amplifiers, a tuner, an oscillator, a digital signal processor, a codec chipset, a user account identity module card, and the like. The radio frequency circuit 1004 can communicate with other computer devices through at least one wireless communication protocol. The wireless communication protocol includes, but is not limited to: the World Wide Web, a metropolitan area network, an intranet, various generations of mobile communication networks (2G, 3G, 4G and 5G), a wireless local area network and / or a WiFi (Wireless Fidelity) network. In some embodiments, the radio frequency circuit 1004 may also include circuits related to NFC (Near Field Communication), which is not limited in this application.

[0150] The display screen 1005 is used to display a UI (User Interface). The UI may include graphics, text, icons, videos, and any combination thereof. When the display screen 1005 is a touch display screen, the display screen 1005 also has the ability to collect touch signals on the surface or above the surface of the display screen 1005. The touch signal can be input to the processor 1001 as a control signal for processing. At this time, the display screen 1005 can also be used to provide virtual buttons and / or virtual keyboards, also known as soft buttons and / or soft keyboards. In some embodiments, the display screen 1005 can be one, and the front panel of the computer device 1000 is set; in other embodiments, the display screen 1005 can be at least two, which are respectively set on different surfaces of the computer device 1000 or are folded; in some other embodiments, the display screen 1005 can be a flexible display screen, which is set on the curved surface or folded surface of the computer device 1000. Even, the display screen 1005 can also be set to a non-rectangular irregular shape, that is, a special-shaped screen. The display screen 1005 can be made of materials such as LCD (Liquid Crystal Display) and OLED (Organic Light-Emitting Diode).

[0151] The camera assembly 1006 is used to capture images or videos. Exemplarily, the camera assembly 1006 includes a front camera and a rear camera. Typically, the front camera is arranged on the front panel of the computer device, and the rear camera is arranged on the back of the computer device. In some embodiments, there are at least two rear cameras, which are any one of a main camera, a depth of field camera, a wide-angle camera, and a telephoto camera, so as to realize the fusion of the main camera and the depth of field camera to realize the background blur function, the fusion of the main camera and the wide-angle camera to realize the panoramic shooting and VR (Virtual Reality) shooting function or other fusion shooting functions. In some embodiments, the camera assembly 1006 may also include a flash. The flash can be a monochrome temperature flash or a dual-color temperature flash. A dual-color temperature flash refers to a combination of a warm light flash and a cold light flash, which can be used for light compensation at different color temperatures.

[0152] The audio circuit 1007 may include a microphone and a speaker. The microphone is used to collect sound waves from the user account and the environment, and convert the sound waves into electrical signals and input them into the processor 1001 for processing, or input them into the radio frequency circuit 1004 to achieve voice communication. For the purpose of stereo acquisition or noise reduction, there may be multiple microphones, which are respectively arranged at different parts of the computer device 1000. The microphone may also be an array microphone or an omnidirectional acquisition microphone. The speaker is used to convert the electrical signal from the processor 1001 or the radio frequency circuit 1004 into sound waves. The speaker may be a traditional film speaker or a piezoelectric ceramic speaker. When the speaker is a piezoelectric ceramic speaker, it can not only convert the electrical signal into sound waves audible to humans, but also convert the electrical signal into sound waves inaudible to humans for purposes such as ranging. In some embodiments, the audio circuit 1007 may also include a headphone jack.

[0153] The power supply 1009 is used to power various components in the computer device 1000. The power supply 1009 can be an alternating current, a direct current, a disposable battery, or a rechargeable battery. When the power supply 1009 includes a rechargeable battery, the rechargeable battery can be a wired rechargeable battery or a wireless rechargeable battery. A wired rechargeable battery is a battery that is charged through a wired line, and a wireless rechargeable battery is a battery that is charged through a wireless coil. The rechargeable battery can also be used to support fast charging technology.

[0154] In some embodiments, the computer device 1000 further includes one or more sensors 1010 , including but not limited to: an acceleration sensor 1011 , a gyroscope sensor 1012 , a pressure sensor 1013 , an optical sensor 1015 , and a proximity sensor 1016 .

[0155] Those skilled in the art will understand that Fig.14 The structure shown in the figure does not constitute a limitation on the computer device 1000, and the computer device 1000 may include more or less components than those shown in the figure, or combine some components, or adopt a different component arrangement.

[0156] The memory also includes one or more programs, which are stored in the memory and include a program for performing the page loading method provided in the embodiment of the present application.

[0157] The present application also provides a computer device, which includes: a processor and a memory, wherein the storage medium stores at least one instruction, at least one program, a code set or an instruction set, and the at least one instruction, at least one program, a code set or an instruction set is loaded and executed by the processor to implement the page loading method provided by the above-mentioned method embodiments.

[0158] The present application also provides a computer-readable storage medium, which stores at least one instruction, at least one program, code set or instruction set. The at least one instruction, at least one program, code set or instruction set is loaded and executed by a processor to implement the page loading method provided by the above-mentioned method embodiments.

[0159] The present application also provides a computer program product or a computer program, which includes a computer instruction stored in a computer-readable storage medium. A processor of a computer device reads the computer instruction from the computer-readable storage medium, and the processor executes the computer instruction, so that the computer device executes the page loading method provided in the above optional implementation.

[0160] The serial numbers of the above-mentioned embodiments of the present application are for description only and do not represent the advantages or disadvantages of the embodiments.

[0161] A person skilled in the art will understand that all or part of the steps to implement the above embodiments may be accomplished by hardware or by instructing related hardware through a program, and the program may be stored in a computer-readable storage medium, and the above-mentioned storage medium may be a read-only memory, a disk or an optical disk, etc.

[0162] The above description is only an illustrative embodiment that can be implemented in the present application and is not intended to limit the present application. Any modifications, equivalent substitutions, improvements, etc. made within the spirit and principles of the present application should be included in the scope of protection of the present application.

[0163] It should be noted that before collecting relevant information of the user and during the process of collecting relevant information of the user, this application can display a prompt interface, pop-up window or output voice prompt information. The prompt interface, pop-up window or voice prompt information is used to prompt the user that relevant information is currently being collected, so that this application only starts to execute the relevant steps of obtaining user relevant information after obtaining the confirmation operation issued by the user to the prompt interface or pop-up window, otherwise (that is, when the confirmation operation issued by the user to the prompt interface or pop-up window is not obtained), the relevant steps of obtaining user relevant information are terminated, that is, the relevant information of the user is not obtained. In other words, all user information collected by this application is collected with the consent and authorization of the user, and the collection, use and processing of relevant user information need to comply with the relevant laws, regulations and standards of the relevant countries and regions.

Claims

1. A page loading method, characterized in that: The application includes a web page view component; the method includes: Loading a native page of the application and loading a web view page of the web view component; Display the native page and the web page view page located at an upper layer of the native page to obtain a first page; The web page view page is a transparent page, and the page content of the native page is displayed through the web page view page.

2. The method according to claim 1, characterized in that The web page view page for loading the web page view component includes: Initializing the web view component; Initializing the rendering engine of the web view component; The web view page is rendered using the rendering engine.

3. The method according to claim 1 or 2, characterized in that: The web page view page does not display page content; the method also includes: A transparent blank page is rendered using a rendering engine to obtain the web page view page.

4. The method according to any one of claims 1 to 3, characterized in that: The loading of the native page of the application comprises: requesting first page content of the first page; The first page content is displayed in the native page.

5. The method according to any one of claims 1 to 3, characterized in that: The coverage area of ​​the web page view page is not greater than the coverage area of ​​the native page.

6. The method according to any one of claims 1 to 3, characterized in that: The method further comprises: The web page view component is called to generate a second page; the second page is a secondary page of the native page.

7. The method according to claim 6, characterized in that When the second page is not opened or closed, the web page view component does not receive a trigger operation on the web page view page; When the second page is opened, the web view component receives a trigger operation on the web view page.

8. The method according to any one of claims 1 to 3, characterized in that: The method further comprises: Request page data from the server; Receiving the page data; The page data is shared with the web page view component through a communication interface.

9. A computer device, characterized in that: The computer device includes a processor, a memory connected to the processor, and program instructions stored in the memory. When the processor executes the program instructions, the page loading method according to any one of claims 1 to 8 is implemented.

10. A computer program product, characterized in that The computer program product includes a computer program, which is stored in a computer-readable storage medium; the computer program is read and executed from the computer-readable storage medium by a processor of a computer device, so that the computer device implements the page loading method as described in any one of claims 1 to 8.

Images