A page rendering method and device, electronic equipment and storage medium

Abstract

The application relates to a page rendering method and device, electronic equipment and a storage medium. A pre-rendering engine is deployed in a terminal device in which a target application is installed, so that when the target application determines that the entry of at least one non-native page is displayed, the target application sends a pre-rendering request for the at least one non-native page to the pre-rendering engine. After receiving the pre-rendering request, the pre-rendering engine acquires page resources of each non-native page, performs pre-rendering of the corresponding non-native page based on each page resource, obtains a pre-rendering result of each non-native page and returns the pre-rendering result to the target application. In this way, the target application can display a target non-native page based on the pre-rendering result of the target non-native page in response to a display request for the target non-native page. The application can improve the loading speed of the non-native page and avoid increasing the pressure on the server.

Description

Technical Field

[0001] This application relates to the field of computer technology, and in particular to a page rendering method, apparatus, electronic device, and storage medium. Background Technology

[0002] During application development, pages developed using the operating system's native language are called native pages. For example, for the Android operating system, native languages ​​include JAVA and Kotlin. However, some specific pages may be developed using non-native languages ​​and are called non-native pages. Non-native pages are usually developed using World Wide Web (Web) technologies, and the non-native languages ​​used include HyperText Markup Language 5 (HTML5) and JavaScript.

[0003] However, rendering non-native pages typically relies on the browser's rendering engine and cannot directly use the high-performance rendering engine provided by the operating system. Furthermore, non-native pages need to download page resources from the server corresponding to the application, which makes the loading time of non-native pages slower and affects the user experience of the application.

[0004] In related technologies, to improve the loading speed of non-native pages, the server can render the non-native page and then send the rendered non-native page to the application; however, rendering non-native pages by the server will increase the server's resource consumption and put more pressure on the server.

[0005] Therefore, the problem that needs to be solved is how to improve the loading speed of non-native pages while avoiding increasing the pressure on the server. Summary of the Invention

[0006] This application provides a page rendering method, apparatus, electronic device, and storage medium to improve the loading speed of non-native pages while avoiding increasing the pressure on the server.

[0007] On one hand, an embodiment of this application provides a page rendering method applied to a pre-rendering engine, wherein a target application is installed in the terminal device where the pre-rendering engine is deployed, and the method includes:

[0008] The application receives a pre-rendering request for at least one non-native page from the target application; wherein the pre-rendering request is sent by the target application when it determines that the entry point of each of the at least one non-native page is displayed.

[0009] Obtain the page resources of each non-native page, perform pre-rendering of the corresponding non-native page based on each page resource, and obtain the pre-rendering result of each non-native page. Each pre-rendering result represents the page content and page style of the corresponding non-native page.

[0010] The pre-rendered results of each of the at least one non-native page are returned to the target application, so that the target application displays the target non-native page based on the pre-rendered results of the target non-native page in response to a display request for the target non-native page among the at least one non-native pages.

[0011] On one hand, the page rendering method provided in this application embodiment is applied to a target application, wherein a pre-rendering engine is deployed in the terminal device where the target application is installed, and the method includes:

[0012] When displaying the target page, if it is determined that the target page contains an entry point for at least one non-native page, a pre-rendering request for the at least one non-native page is sent to the pre-rendering engine.

[0013] The pre-rendering results of each of the at least one non-native pages are obtained. The pre-rendering result of each non-native page is obtained by the pre-rendering engine in the following way: obtaining the page resources of each non-native page, performing pre-rendering of the corresponding non-native page based on the page resources, and each pre-rendering result represents: the page content and page style of the corresponding non-native page.

[0014] In response to a display request for a target non-native page among the at least one non-native pages, a pre-rendered result of the target non-native page is obtained through a non-native page display component to display the target non-native page.

[0015] On one hand, an embodiment of this application provides a page rendering apparatus applied to a pre-rendering engine, wherein a target application is installed in the terminal device on which the pre-rendering engine is deployed, and the apparatus includes:

[0016] A receiving module is configured to receive a pre-rendering request sent by the target application for at least one non-native page; wherein the pre-rendering request is sent by the target application when it determines that the entry point of each of the at least one non-native page is displayed;

[0017] The pre-rendering module is used to obtain the page resources of each non-native page, perform pre-rendering of the corresponding non-native page based on each page resource, and obtain the pre-rendering result of each non-native page. Each pre-rendering result represents the page content and page style of the corresponding non-native page.

[0018] A sending module is configured to return the pre-rendering results of each of the at least one non-native pages to the target application, so that the target application, in response to a display request for a target non-native page among the at least one non-native pages, displays the target non-native page based on the pre-rendering results of the target non-native page.

[0019] Optionally, the terminal device is equipped with a pre-rendering toolkit, which provides a pre-rendering interface for calling the pre-rendering engine;

[0020] The receiving module is specifically used for:

[0021] The system receives a pre-rendering request for at least one non-native page, sent by the target application using a cross-language communication protocol, through the pre-rendering interface. The cross-language communication protocol is used for communication between the native language code corresponding to the target application and the non-native language code corresponding to the non-native page.

[0022] Optionally, the sending module is specifically used for:

[0023] Using the cross-language communication protocol, the pre-rendering results of each of the at least one non-native page are returned to the pre-rendering interface, so that the target application can obtain the pre-rendering results of each of the at least one non-native page through the pre-rendering interface.

[0024] Optionally, the sending module is specifically used for:

[0025] Call a specific native language interface to return the pre-rendered results of each of the at least one non-native page to the pre-rendering interface; or

[0026] Load a specific Uniform Resource Locator (URL) request, the URL request containing the pre-rendered results of each of the at least one non-native page, to trigger the pre-rendering interface to intercept the URL request and obtain the pre-rendered results of each of the at least one non-native page.

[0027] Optionally, when acquiring page resources for each non-native page, the pre-rendering module is specifically used for:

[0028] Based on the page address of each non-native page in the pre-rendering request, the network request interface used by the target application is called using a cross-language communication protocol to obtain the corresponding non-native page resources from the server corresponding to the target application.

[0029] Optionally, the server corresponding to the target application includes a content distribution server and a business server;

[0030] When obtaining the corresponding non-native page resources from the server corresponding to the target application, the pre-rendering module is specifically used for:

[0031] Obtain page files for constructing the corresponding non-native pages from the content distribution server; and

[0032] Obtain the corresponding business data from the non-native page from the business server.

[0033] Optionally, the page file includes a page structure file, a page script file, and a page style file. The page structure file contains at least one page element, the page script file contains at least one page script, and the page style file contains the rendering style of each page element.

[0034] When performing pre-rendering of the corresponding non-native page based on each page resource, the pre-rendering module is specifically used for:

[0035] The rendering style of each page element is inlined into the corresponding page element in the page structure file, each page script is embedded into the corresponding page element in the page structure file, and the business data is populated into the corresponding page element in the page structure file.

[0036] On one hand, embodiments of this application provide a page rendering apparatus applied to a target application, wherein a pre-rendering engine is deployed in the terminal device on which the target application is installed, and the apparatus includes:

[0037] The request module is used to send a pre-rendering request for the at least one non-native page to the pre-rendering engine when displaying the target page, if it is determined that the target page contains an entry point for each of the at least one non-native page.

[0038] The acquisition module is used to obtain the pre-rendering results of each of the at least one non-native pages. The pre-rendering result of each non-native page is obtained by the pre-rendering engine in the following way: acquiring the page resources of each non-native page, and performing pre-rendering of the corresponding non-native page based on the page resources. Each pre-rendering result represents: the page content and page style of the corresponding non-native page.

[0039] The display module is configured to respond to a display request for a target non-native page among the at least one non-native pages by obtaining a pre-rendered result of the target non-native page through a non-native page display component, and then displaying the target non-native page.

[0040] Optionally, the terminal device is equipped with a pre-rendering toolkit, which provides a pre-rendering interface for calling the pre-rendering engine;

[0041] The request module is specifically used for:

[0042] The pre-rendering interface is invoked, and a cross-language communication protocol is used to send a pre-rendering request for the at least one non-native page to the pre-rendering engine; wherein, the cross-language communication protocol is used to communicate between the native language code corresponding to the target application and the non-native language code corresponding to the non-native page.

[0043] Optionally, the request module is specifically used for:

[0044] By calling the callback function provided by the pre-rendering engine through the pre-rendering interface, the pre-rendering request for the at least one non-native page is added to the callback function, so that the pre-rendering engine can obtain the pre-rendering request from the callback function.

[0045] Optionally, the acquisition module is specifically used for:

[0046] The pre-rendering interface receives the pre-rendering results of at least one non-native page returned by the pre-rendering engine using the cross-language communication protocol.

[0047] The display module is specifically used for:

[0048] The pre-rendering result of the target non-native page is obtained from the pre-rendering interface through the non-native page display component.

[0049] An electronic device provided in this application includes a processor and a memory, wherein the memory stores a computer program, and when the computer program is executed by the processor, the processor performs the steps of any of the above-described page rendering methods.

[0050] This application provides a computer-readable storage medium including a computer program. When the computer program is run on an electronic device, the computer program is used to cause the electronic device to perform the steps of any of the above-described page rendering methods.

[0051] This application provides a computer program product, which includes a computer program stored in a computer-readable storage medium. When the processor of an electronic device reads the computer program from the computer-readable storage medium, the processor executes the computer program, causing the electronic device to perform the steps of any of the above-described page rendering methods.

[0052] The solution in this application embodiment has at least the following beneficial effects:

[0053] In this embodiment, a pre-rendering engine is deployed in the terminal device where the target application is installed. When the target application determines that the entry point of at least one non-native page is to be displayed, it sends a pre-rendering request for at least one non-native page to the pre-rendering engine. After receiving the pre-rendering request, the pre-rendering engine obtains the page resources of each non-native page, performs pre-rendering of the corresponding non-native page based on each page resource, obtains the pre-rendering result of each non-native page, and returns the pre-rendering result of each non-native page to the target application. In this way, the target application can display the target non-native page based on the pre-rendering result of the target non-native page in response to the display request for the target non-native page.

[0054] This application embodiment uses a pre-rendering engine in the terminal device to pre-render the non-native pages of the target application, obtaining the pre-rendered results of the non-native pages. Thus, when the target application needs to display the non-native pages, the pre-rendered results of the non-native pages can be loaded quickly to display the non-native pages. Therefore, this application embodiment can improve the loading speed of non-native pages. At the same time, since the non-native pages are pre-rendered in the terminal device, the pressure on the server is avoided.

[0055] Other features and advantages of this application will be set forth in the following description and will be apparent in part from the description or may be learned by practicing the application. The objectives and other advantages of this application may be realized and obtained by means of the structures particularly pointed out in the written description, claims, and drawings. Attached Figure Description

[0056] The accompanying drawings, which are included to provide a further understanding of this application and form part of this application, illustrate exemplary embodiments and are used to explain this application, but do not constitute an undue limitation of this application. In the drawings:

[0057] Figure 1 This is a schematic diagram illustrating an application scenario of a page rendering method according to an embodiment of this application;

[0058] Figure 2 This is a flowchart of a page rendering method according to an embodiment of this application;

[0059] Figure 3 This is a schematic diagram illustrating the display process of an entry point for a non-native page in an embodiment of this application;

[0060] Figure 4 This is a schematic diagram illustrating the process of obtaining page resources for a non-native page in an embodiment of this application;

[0061] Figure 5 This is a schematic diagram illustrating the process of obtaining page resources for another non-native page in an embodiment of this application;

[0062] Figure 6 This is a schematic diagram of a pre-rendering process for a non-native page in an embodiment of this application;

[0063] Figure 7 This is a schematic diagram illustrating the interaction process between a pre-rendering interface and a pre-rendering engine in an embodiment of this application.

[0064] Figure 8 This is a flowchart illustrating another page rendering method in an embodiment of this application;

[0065] Figure 9 This is a logical schematic diagram of a page rendering method in an embodiment of this application;

[0066] Figure 10 This is a schematic diagram illustrating how one enters a non-native page from an entry point within a non-native page, as described in an embodiment of this application.

[0067] Figure 11 This is an interactive flowchart of a page rendering method according to an embodiment of this application;

[0068] Figure 12 This is a schematic diagram of a system architecture for implementing a page rendering method in an embodiment of this application;

[0069] Figure 13 This is a schematic diagram of the composition structure of a page rendering device according to an embodiment of this application;

[0070] Figure 14 This is a schematic diagram of the composition structure of another page rendering device in an embodiment of this application;

[0071] Figure 15 This is a schematic diagram of the composition structure of an electronic device using an embodiment of this application. Detailed Implementation

[0072] To make the objectives, technical solutions, and advantages of the embodiments of this application clearer, the technical solutions of this application will be clearly and completely described below with reference to the accompanying drawings of the embodiments of this application. Obviously, the described embodiments are only some embodiments of the technical solutions of this application, and not all embodiments. Based on the embodiments recorded in this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the technical solutions of this application.

[0073] The following describes some of the concepts involved in the embodiments of this application.

[0074] Pre-rendering: Before a user actually requests access to a page, a static version of the page is generated or prepared in advance, so that the content can be quickly displayed when the user actually accesses the page, improving page loading speed, reducing waiting time, and thus improving user experience.

[0075] Pre-rendering engine: This engine can be embedded in native applications to execute non-native code, such as JavaScript code, within the native application. It can also interact with the native code of the native application to achieve dynamic script execution, page rendering, and other functionalities. For example, a pre-rendering engine can be implemented based on an existing engine, such as JavaScriptCore, a JavaScript engine responsible for interpreting and executing JavaScript code.

[0076] Pre-rendering toolkit: This is a software development kit (SDK) that provides various interfaces for interacting with the pre-rendering engine, including pre-rendering interfaces and pre-rendering tools. Through the pre-rendering toolkit, the functions of the pre-rendering engine can be used more conveniently, and the interaction process with the pre-rendering engine can be simplified.

[0077] The word “exemplary” as used below means “serving as an example, embodiment, or illustration.” Any embodiment illustrated as an “exemplary” is not necessarily to be construed as superior to or better than other embodiments.

[0078] In related technologies, to improve the loading speed of non-native pages, the server can render the non-native page and then send the rendered non-native page to the application. However, rendering non-native pages by the server will also increase the server's resource consumption, making the server more stressed.

[0079] In view of this, embodiments of this application provide a page rendering method, apparatus, electronic device, and storage medium. By using a pre-rendering engine in a terminal device to pre-render non-native pages of a target application, a pre-rendering result of the non-native page is obtained. Therefore, when the non-native page needs to be displayed, the pre-rendering result of the non-native page can be loaded quickly to display the non-native page. Thus, embodiments of this application can improve the loading speed of non-native pages. Furthermore, since the non-native page is pre-rendered in the terminal device, it avoids increasing the pressure on the server.

[0080] Furthermore, in related technologies, the solution of rendering non-native pages by the server requires modification of the server, that is, adjusting the code logic of the server so that the server can render non-native pages, which is costly. However, the embodiment of this application does not require modification of the server, thus saving the modification cost of the server.

[0081] The preferred embodiments of this application are described below with reference to the accompanying drawings. It should be understood that the preferred embodiments described herein are for illustration and explanation only and are not intended to limit this application. Furthermore, the embodiments and features in the embodiments of this application can be combined with each other without conflict.

[0082] like Figure 1 The diagram shown illustrates an application scenario of an embodiment of this application. The application scenario diagram includes a terminal device 110 and a server 120. The terminal device 110 and the server 120 can communicate via a communication network.

[0083] In one alternative implementation, the communication network can be a wired network or a wireless network. Therefore, the terminal device 110 and the server 120 can be directly or indirectly connected via wired or wireless communication. This application embodiment does not impose specific limitations here.

[0084] In this application embodiment, the terminal device 110 used by the target includes, but is not limited to, mobile phones, tablets, laptops, desktop computers, e-book readers, smart voice interaction devices, smart home appliances, in-vehicle terminals, and other devices. The terminal device may have the target application installed and a pre-rendering engine deployed. The target application can be any application containing both native and non-native pages. The server 120 can be a backend server corresponding to the target application, or a server specifically used to provide page resources; this application does not impose specific limitations. The server 120 can be an independent physical server, a server cluster or distributed system composed of multiple physical servers, or a cloud server providing basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communication, middleware services, domain name services, security services, content delivery networks (CDNs), and big data and artificial intelligence platforms.

[0085] The page rendering methods in the various embodiments of this application can be executed by the terminal device 110, specifically by the target application and the pre-rendering engine working together. When the target application displays the target page, if it determines that at least one non-native page of the target page is a non-native page, it sends a pre-rendering request for the at least one non-native page to the pre-rendering engine. After receiving the pre-rendering request, the pre-rendering engine can obtain the page resources of each non-native page from the server 120, perform pre-rendering of the corresponding non-native page based on each page resource, obtain the pre-rendering result of each non-native page, and return the pre-rendering result of each non-native page to the target application. In this way, in response to the display request for the target non-native page, the target application can display the target non-native page based on the pre-rendering result of the target non-native page.

[0086] It should be noted that, Figure 1 The examples shown are merely illustrative; in reality, the number of terminal devices and servers is unlimited and is not specifically limited in this application embodiment.

[0087] The page rendering method provided by the exemplary embodiments of this application will be described below with reference to the accompanying drawings and the application scenarios described above. It should be noted that the application scenarios described above are only shown to facilitate understanding of the spirit and principles of this application, and the embodiments of this application are not limited in any way in this respect.

[0088] See Figure 2 As shown, this application provides a page rendering method that is applied to a pre-rendering engine. The pre-rendering engine is deployed on a terminal device on which the target application is installed. For example, the pre-rendering engine can be implemented based on an existing JavaScriptCore (JSCore) engine. The JSCore engine is based on the Webkit or X5 kernel. By starting a JavaScript runtime environment on the terminal device, the JSCore engine can interpret and execute JavaScript code. Figure 2 The specific implementation process of the page rendering method shown includes the following S21-S23:

[0089] S21. The pre-rendering engine receives a pre-rendering request from the target application for at least one non-native page; wherein the pre-rendering request is sent by the target application when it determines that the entry point of each of the at least one non-native page is displayed.

[0090] When displaying a target page, the target application can determine whether the target page contains an entry point to a non-native page. This target page can be any native page or any non-native page. The non-native page can be a webpage, such as an HTML page, specifically an HTML5 (H5) page. Each entry point to a non-native page is used to access that non-native page; it can be a link, button, menu item, or any other interactive element.

[0091] For example, when the target application is a financial management application, such as Figure 3 As shown, the left-hand page is the target application's homepage. This page contains multiple tabs at the bottom, such as "Today," "Finance," "Funds," and "My Account," which are native pages. When the user clicks the "My Account" tab, the right-hand page is displayed. This page contains entry points to multiple non-native pages, such as the open buttons for "My Assets," "Current Assets," and "Stable Assets." At this point, the target application can send pre-rendering requests for these non-native pages to the pre-rendering engine. These pre-rendering requests can contain the page address of each non-native page.

[0092] In some embodiments of this application, a pre-rendering toolkit may be deployed in the terminal device. The pre-rendering toolkit is used to provide a pre-rendering interface for calling the pre-rendering engine. The pre-rendering interface is implemented in the native language of the target application so that the target application can call the pre-rendering interface to communicate with the pre-rendering engine. The pre-rendering interface can be understood as a method or function for calling the pre-rendering engine.

[0093] Considering that the pre-rendering engine is used to pre-render non-native pages and needs to be implemented using non-native language code, while the pre-rendering interface uses native language code, a cross-language communication protocol can be used to enable communication between the pre-rendering interface and the pre-rendering engine. The cross-language communication protocol is used to communicate between the native language code of the pre-rendering interface and the non-native language code of the non-native page; that is, the pre-rendering engine can receive pre-rendering requests for at least one non-native page sent by the target application through the aforementioned pre-rendering interface using the cross-language communication protocol.

[0094] In one optional implementation, when the target application calls the pre-rendering interface and sends a pre-rendering request for at least one non-native page to the pre-rendering engine using a cross-language communication protocol, it can specifically call a callback function provided by the pre-rendering engine through the pre-rendering interface, adding the pre-rendering request to the callback function so that the pre-rendering engine can obtain the pre-rendering request from the callback function. The callback function is used to transfer data between the pre-rendering interface and the pre-rendering engine.

[0095] For example, when the non-native language code is JavaScript, the cross-language communication protocol can specifically use JavaScriptBridge (JSBridge for short). It is a communication mechanism that can establish a bridge between native languages ​​(such as Java or Kotlin for Android, and Swift or Objective-C for iOS) and JavaScript, enabling native language code and JavaScript code to communicate with each other. Through JSBridge, non-native pages of the target application can be built using web technologies, while also accessing the native functions of the terminal device.

[0096] In this embodiment of the application, taking the cross-language communication protocol JSBridge and the non-native language code JavaScript as an example, the JSBridge in this embodiment of the application typically involves communication in the following two directions:

[0097] First, from the pre-rendering interface to the pre-rendering engine: The pre-rendering interface can execute a piece of JavaScript code by calling a specific method of the JavaScript code. This JavaScript code is usually used to call a callback function provided by the pre-rendering engine and add the data to be transmitted to the callback function; for example, the specific method mentioned above can be the evaluateJavascript method in Android, or the stringByEvaluatingJavaScriptFromString method in iOS.

[0098] Second, from the pre-rendering engine to the pre-rendering interface: the pre-rendering engine can send data to the pre-rendering interface in a specific way.

[0099] For example, specific methods include invoking a specific Uniform Resource Locator (URL) scheme. This involves triggering actions in the native application by loading a URL request with a custom scheme, rather than making an actual network request. A custom scheme is a special protocol defined for the native application that allows interaction with the native application via URL requests of a specific format to perform specific operations within the native application. Specifically, the pre-rendering engine loads a URL request with a specific format, containing data sent by the pre-rendering engine. This triggers the pre-rendering interface to intercept the URL request, thereby obtaining the data sent by the pre-rendering engine.

[0100] For example, a specific approach could include: the pre-rendering engine calling a specific Application Programming Interface (API) to send data to the pre-rendering interface. In this case, a specific native language API can be directly injected into the pre-rendering engine. For instance, in Android, the `addJavascriptInterface` method can provide the pre-rendering engine with a directly callable native language API; while in iOS, the WKScriptMessageHandler protocol can be used to process data from the pre-rendering engine.

[0101] To ensure that data can be correctly transmitted between the pre-rendering interface and the pre-rendering engine, the transmitted data usually needs to be serialized. For example, the transmitted data can be converted into JavaScript Object Notation (JSON) format. Both the pre-rendering interface and the pre-rendering engine can handle JSON format data for communication.

[0102] In this embodiment, the target application calls the pre-rendering interface of the pre-rendering toolkit and communicates with the pre-rendering engine using a cross-language communication protocol. This decouples the interface related to the target application and abstracts the pre-rendering interface provided to the target application, making it easier for other applications to quickly access and reuse the pre-rendering interface.

[0103] S22. The pre-rendering engine obtains the page resources of each non-native page, performs pre-rendering of the corresponding non-native page based on each page resource, and obtains the pre-rendering result of each non-native page. Each pre-rendering result represents the page content and page style of the corresponding non-native page.

[0104] The pre-rendering request can contain the page address of each non-native page. The page resources of each non-native page are usually stored on the server corresponding to the target application. Therefore, the pre-rendering engine can obtain the page resources of the corresponding non-native page from the server corresponding to the target application based on the page address of each non-native page.

[0105] In some embodiments of this application, to facilitate communication between the pre-rendering engine and the server corresponding to the target application, the pre-rendering engine can call the network request interface used by the target application to communicate with the server. In this case, the pre-rendering engine can use a cross-language communication protocol to call the network request interface used by the target application based on the page address of each non-native page in the pre-rendering request, and obtain the corresponding non-native page resources from the server corresponding to the target application. This eliminates the need to set up a separate network request interface for the pre-rendering engine, allowing reuse of the existing network request interface on the terminal device.

[0106] For example, the pre-rendering engine uses the JavaScriptCore engine. The JavaScriptCore engine itself does not provide a network request interface and needs to rely on the network request interface used by the target application. In this case, a network call interface can be implemented in the cross-language communication protocol. The network call interface can be used to call the network request interface used by the target application. This network request interface can be a network request interface provided by the operating system or a network request interface provided by the target application itself.

[0107] For example, implementing network requests in the iOS operating system is relatively simple, and the target application can directly use the network request interface provided by the operating system. This is because the iOS operating system provides a powerful Foundation framework, which includes the NSURLSession class, an important class for handling network requests. It provides a flexible and powerful way to perform various network request tasks, including downloading data, uploading content, and performing background transfers. Therefore, the network request interface based on the NSURLSession class can be used directly.

[0108] For example, in the Android operating system, although the target application can directly use the network request interface provided by the operating system, the target application usually also provides its own network request interface. In this case, in order to avoid introducing a dependency on the operating system, the pre-rendering engine can use the network request interface provided by the target application. In this way, the target application's ability to optimize network requests can also be reused.

[0109] For example, such as Figure 4 As shown, taking the JSBridge cross-language communication protocol as an example, the pre-rendering engine can use JSBridge to call the network request interface directly used by the target application to obtain page resources of non-native pages from the server.

[0110] In some embodiments of this application, the page resources of non-native pages typically include static page files and business data. The server corresponding to the target application includes a content distribution server and a business server. The content distribution server typically stores static page files, and the business server typically stores business data.

[0111] Therefore, as Figure 5 As shown, when the pre-rendering engine obtains page resources for non-native pages from the server corresponding to the target application, it can specifically obtain page files used to build the corresponding non-native pages from the content distribution server, and business data from the corresponding non-native pages from the business server. The content distribution server is based on a content delivery network and includes servers distributed in different geographical locations. This allows the terminal device to obtain resources from the server with the closest geographical location, thereby reducing latency and speeding up page loading. Obtaining only business data from the non-native pages from the business server reduces the load on the business server, allowing it to focus more on processing dynamic requests.

[0112] In some embodiments of this application, the page resources of non-native pages may include page structure files, page script files, and page style files. The page structure file contains at least one page element, the page script file contains at least one page script, and the page style file contains the rendering style of each page element.

[0113] The page structure file is used to build the page structure of non-native pages. Specifically, it defines at least one page element on the non-native page through various tags. Page elements include titles, text, images, links, buttons, tables, forms, multimedia elements (such as audio and video), etc. The page structure file can be an HTML file.

[0114] Some page scripts in the script file can be used to control the behavior and interaction logic of page elements in non-native pages. For example, if the page element is an image, executing the script can dynamically render the image; or, if the page element is a button, executing the script can add a new page element to the non-native page after detecting a user click on the button. Furthermore, the script file can also contain pre-rendering scripts, which provide pre-rendering logic for non-native pages, allowing the pre-rendering engine to pre-render the non-native page based on this logic. Specifically, the scripts in the script file can use JavaScript code.

[0115] Page style files describe the appearance and formatting of various page elements that are not natively generated on a page, such as fonts, colors, spacing, layout, and other visual effects. Specifically, these page style files can be Cascading Style Sheets (CSS) files. CSS is a stylesheet language that provides control over page layout, colors, fonts, and other visual effects. By separating page style files from page structure files, the presentation style is separated from the page structure, thereby improving code maintainability and reusability.

[0116] In S22 above, when performing pre-rendering of the corresponding non-native page based on each page resource, the presentation style of each page element can be inlined into the corresponding page element in the page structure file, each page script can be embedded into the corresponding page element in the page structure file, and business data can be filled into the corresponding page element in the page structure file to obtain the pre-rendering result.

[0117] Specifically, when inlining the rendering style of each page element into the corresponding page element, you can define the rendering style of the page element by using specific attributes in the corresponding page element; for example, taking the page structure file as an HTML file, you can use the style attribute in the corresponding page element in the HTML file to define the rendering style of the page element.

[0118] For example, the following specific example demonstrates how to use the style attribute in an HTML file to add rendering styles to page elements.

[0119] <h1 style＝"color:blue；font-family:arial；">This is a title, and the font is set to blue Arial.

[0120] <p style＝"font-size:16px；line-height:1.5；">This is a paragraph text with a font size of 16 pixels and a line height of 1.5 times the font size.

[0121] <div style＝"background-color:lightgrey；padding:20px；">This is an area with a gray background and inner margins.

[0122] <span style＝"color:red；">This text is in red.

[0123] In this example, directly in the title tag <h1>Paragraph tags Regional tags and text labels The `style` attribute is used to define the styles of each element.

[0124] In this embodiment, by inlining the rendering style of page elements into the page structure file (such as an HTML file), the number of requests to the page style file (such as a CSS file) is reduced, which speeds up the first rendering speed of non-native pages. The rendering style of page elements is parsed by the browser along with the HTML file, thereby ensuring that the non-native page can present the expected design effect as soon as it is loaded, and eliminating the flickering of unstyled content (i.e., style flickering).

[0125] When embedding scripts for each page within the corresponding page elements of the page structure file, you can do so by using specific tags within those elements. Taking an HTML file as an example, you can directly embed the scripts within the corresponding page elements in the HTML file using... <script>标签来嵌入脚本的代码，也可以通过<script>标签的src属性引用脚本文件。

[0126] 业务数据通常是不断更新的，将业务数据填充至页面结构文件中相应的页面元素中时，可以通过特定脚本来操作文档对象模型(Document Object Model，DOM)，将业务数据填充到相应的页面元素中。其中，DOM是一个接口，它允许通过脚本动态地访问和更新页面结构文件的内容、结构及样式。具体来说，DOM定义了一个页面结构文件的逻辑结构，并且提供了一种方法来操作这个逻辑结构及其内容。

[0127] 通过在预渲染引擎内部实现上述实施例中的预渲染逻辑，使得预渲染引擎可以执行非原生页面的预渲染。可选的，预渲染引擎可以采用已有的预渲染逻辑，例如，采用服务器端的预渲染逻辑，具体基于Vue服务器渲染器(Vue Server Renderer，VSR)实现，VSR是Vue.js官方提供的一个库，用于支持服务器端渲染(Server-Side Rendering，SSR)。

[0128] 示例性的，如图6所示，以非原生页面为H5页面，基于上述VSR实现预渲染逻辑为例，预渲染引擎在接收到预渲染请求后，可以基于预渲染请求中的H5页面的页面地址获取相应的页面资源，该页面资源包括HTML文件(即页面结构文件)、JavaScriptBundle(即脚本文件)、CSS文件(即页面样式文件)等，JavaScriptBundle是将多个JavaScript文件进行打包后的文件，通过文件打包，可以提高加载速度；然后，解析HTML文件，同时，从JavaScriptBundle中解析ServerBundle(服务端包)和ClientManifest(客户端清单)。在上述VSR中，ClientManifest主要包含将JavaScript文件加载到客户端(即目标应用)中的所有必要信息，比如，哪些JavaScript文件需要被加载以及它们之间的依赖关系等。ServerBundle包含预渲染所需的Vue组件和预渲染逻辑，基于该Vue组件和预渲染逻辑，可以行H5页面的首屏预渲染，包括将CSS文件中的呈现样式内联至HTML文件中，以避免首屏加载时样式闪烁，将需要加载的JavaScript文件嵌入HTML文件中，以及将业务数据填充至HTML文件中。

[0129] 本申请实施例中，基于每个页面资源执行相应的非原生页面的预渲染时，可以将每个页面元素的呈现样式内联至页面结构文件中相应的页面元素中，以避免显示非原生页面时产生样式闪烁；同时，将每个页面脚本嵌入页面结构文件中相应的页面元素中，以及将业务数据填充至页面结构文件中相应的页面元素中，以实现非原生页面的预渲染。

[0130] S23、预渲染引擎将至少一个非原生页面各自的预渲染结果返回给目标应用，以使目标应用响应于针对至少一个非原生页面中的目标非原生页面的显示请求，基于目标非原生页面的预渲染结果显示目标非原生页面。

[0131] 其中，预渲染引擎可以采用上述实施例中的跨语言通信协议，将至少一个非原生页面各自的预渲染结果返回给目标应用。

[0132] 在本申请的一些实施例中，当目标应用通过预渲染工具包提供的预渲染接口，采用跨语言通信协议向预渲染引擎发送预渲染请求时，预渲染引擎可以采用跨语言通信协议，将至少一个非原生页面各自的预渲染结果返回给预渲染接口，以使目标应用通过预渲染接口获取至少一个非原生页面各自的预渲染结果。

[0133] 在一种可选的实施方式中，预渲染引擎采用跨语言通信协议，将至少一个非原生页面各自的预渲染结果返回给预渲染接口时，具体可以调用特定的原生语言接口，将至少一个预渲染结果返回给预渲染接口；或者，预渲染引擎还可以加载特定的URL请求，具体可以是自定义Scheme的URL请求，该URL请求包含至少一个非原生页面各自的预渲染结果，通过加载该URL请求，可以触发预渲染接口拦截该URL请求，从而获得至少一个非原生页面各自的预渲染结果。在目标应用显示的目标页面中，显示有至少一个非原生页面的入口，用户可以触发其中的目标非原生页面的入口，此时，目标应用接收到针对目标非原生页面的显示请求，可以通过非原生页面显示组件，从上述预渲染接口获取目标非原生页面的预渲染结果，以显示目标非原生页面。

[0134] 例如，非原生页面显示组件可以为WebView，它是一个用于在目标应用内部加载和显示非原生页面(如H5页面)内容的组件，可以在目标应用中嵌入非原生页面，而无需启动外部浏览器。WebView可以使用操作系统默认的浏览器引擎来解析和渲染非原生页面。

[0135] 本申请实施例中，通过终端设备中的预渲染引擎对目标应用的非原生页面进行预渲染，获得非原生页面的预渲染结果，从而在需要显示该非原生页面时，可以快速加载非原生页面的预渲染结果，以显示非原生页面，因此，本申请实施例可以提高非原生页面的加载速度，同时，由于在终端设备中对非原生页面进行预渲染，避免增加服务端的压力。此外，相较于相关技术中由服务端渲染非原生页面的方案，本申请实施例不需要对服务端进行改造，节省了服务端的改造成本。

[0136] 下面结合图7对目标应用与预渲染引擎的交互过程进行整体介绍。

[0137] 示例性的，如图7所示，目标应用通过调用预渲染工具包的预渲染接口，借助跨语言通信协议，如JSBridge，与预渲染引擎进行交互；具体的，目标应用调用预渲染工具包的预渲染接口，通过JSBridge向预渲染引擎发送预渲染请求，预渲染引擎基于该预渲染请求执行具体的预渲染逻辑，并将获得的预渲染结果通过JSBridge返回给预渲染接口，进而预渲染接口可以根据目标应用的需求，将预渲染结果返回给目标应用。

[0138] 下面对本申请实施例的目标应用侧的页面渲染方法进行介绍。

[0139] 如图8所示，为本申请实施例提供的一种页面渲染方法，应用于目标应用，安装目标应用的终端设备中部署有预渲染引擎，该方法的具体实施流程包括以下S81-S83：

[0140] S81、目标应用在显示目标页面时，若确定目标页面中包含至少一个非原生页面各自的入口，则向预渲染引擎发送针对至少一个非原生页面的预渲染请求；

[0141] S82、目标应用获得至少一个非原生页面各自的预渲染结果，每个非原生页面的预渲染结果是预渲染引擎通过以下方式获得的：获取每个非原生页面的页面资源，基于页面资源执行相应的非原生页面的预渲染，每个预渲染结果表征：相应的非原生页面的页面内容和页面样式；

[0142] S83、目标应用响应于针对至少一个非原生页面中的目标非原生页面的显示请求，通过非原生页面显示组件获取目标非原生页面的预渲染结果，以显示目标非原生页面。

[0143] 需要说明的是，上述S81-S83的具体实施流程可参见本申请前述实施例中的S21-S23的具体实施流程，在此不再赘述。

[0144] 本申请实施例中，目标应用可以向终端设备中的预渲染引擎发送非原生页面的预渲染请求，以使预渲染引擎对非原生页面进行预渲染，获得非原生页面的预渲染结果，从而在目标应用需要显示该非原生页面时，可以快速加载非原生页面的预渲染结果，以显示非原生页面，因此，本申请实施例可以提高非原生页面的加载速度，同时，由于在终端设备中对非原生页面进行预渲染，避免增加服务端的压力。

[0145] 在本申请的一些实施例中，终端设备中部署有预渲染工具包，预渲染工具包用于提供调用预渲染引擎的预渲染接口；目标应用在向预渲染引擎发送针对至少一个非原生页面的预渲染请求时，具体可以调用预渲染接口，采用跨语言通信协议，向预渲染引擎发送针对至少一个非原生页面的预渲染请求；其中，跨语言通信协议用于在所述目标应用的原生语言代码，和所述非原生页面的非原生语言代码之间进行通信。

[0146] 可选的，所述预渲染接口采用跨语言通信协议，向预渲染引擎发送预渲染请时求，具体可以调用所述预渲染引擎提供的回调函数，将针对所述至少一个非原生页面的预渲染请求添加至所述回调函数中，以使所述预渲染引擎从所述回调函数中获取所述预渲染请求。

[0147] 需要说明的是，该实施例的具体实施方式可参见本申请前述实施例的相关内容，在此不再赘述。

[0148] 在本申请的一些实施例中，目标应用在获得至少一个非原生页面各自的预渲染结果，具体可以通过预渲染接口，接收预渲染引擎采用跨语言通信协议，返回的至少一个非原生页面各自的预渲染结果。

[0149] 进一步地，目标应用响应于针对至少一个非原生页面中的目标非原生页面的显示请求，可以通过非原生页面显示组件，从预渲染接口获取目标非原生页面的预渲染结果。

[0150] 需要说明的是，该实施例的具体实施方式可参见本申请前述实施例的相关内容，在此不再赘述。

[0151] 下面结合图9的具体例子，对本申请实施例的页面渲染方法的整体逻辑进行示例性介绍。

[0152] 如图9所示，以目标应用为理财应用，非原生页面为H5页面为例，该理财应用在显示目标页面(如标签页)时，如果确定该目标页面中包含H5页面的入口(可以是一个或多个)，则向预渲染引擎发送H5页面的预渲染请求，预渲染引擎基于该预渲染请求，获取H5页面的页面资源后，基于该页面资源执行H5页面的预渲染，并在预渲染完成后，将H5页面的预渲染结果返回给理财应用；理财应用响应于对H5页面的显示请求，可以通过WebView(即H5页面显示组件)基于预渲染结果显示H5页面。

[0153] 示例性的，如图10所示，左边页面为包含多个H5页面的入口的目标页面，多个H5页面的入口包括"我的资产”、"昨日收益”、"活期资产”、"稳健资产”各自对应的打开按钮，采用上述图9所示的页面渲染过程，对多个H5页面分别进行预渲染，获得多个H5页面各自的预渲染结果。当用户点击"我的资产”对应的打开按钮后，可以基于对应的H5页面的预渲染结果显示对应的H5页面，如图10中的右边页面。

[0154] 下面结合图11对本申请实施例的页面渲染方法涉及的交互流程进行示例性介绍。

[0155] 如图11所示，本申请实施例的页面渲染方法包括以下交互流程：

[0156] S111、目标应用的入口页面触发H5页面的预加载。该入口页面是指包含H5页面的入口的目标页面。

[0157] S112、目标应用向预渲染工具包的预渲染接口触发预渲染。

[0158] S113、预渲染接口初始化预渲染引擎。

[0159] 具体的，预渲染接口可以向预渲染引擎发送初始化指令，以使预渲染引擎进行初始化。

[0160] S114、预渲染接口向预渲染引擎触发预渲染。

[0161] S115、预渲染引擎从分容分发服务端拉取页面文件。

[0162] S116、内容分发服务端返回页面文件给预渲染引擎。

[0163] S117、预渲染引擎开始预渲染。

[0164] 具体的，基于上述页面文件可以开始进行预渲染。

[0165] S118、预渲染引擎向业务服务端请求业务数据。

[0166] S119、业务服务端返回业务数据给预渲染引擎。

[0167] S120、预渲染引擎预渲染完成，获得预渲染结果。

[0168] 其中，在基于上述页面文件进行预渲染过程中，加入上述业务数据。

[0169] S121、预渲染引擎向预渲染接口返回预渲染结果。

[0170] S122、目标应用的入口页面触发显示H5页面。

[0171] S123、目标应用向WebView触发显示H5页面。

[0172] S124、WebView从预渲染接口获取预渲染结果。

[0173] 具体的，WebView可以先判断该H5页面是否进行了预渲染，如果是，则从预渲染接口获取该H5页面的预渲染结果。

[0174] S125、预渲染接口将预渲染结果返回给WebView。

[0175] S126、WebView显示H5页面。

[0176] 具体的，预渲染结果是预渲染后的HTML文件，将预渲染后的HTML文件中的字符串直接加载到WebView中进行渲染，以显示H5页面。

[0177] 需要说明的是，当WebView判断待显示的H5页面未进行预渲染时，预渲染接口不存在H5页面的预渲染结果时，此时，WebView可以通过指定的URL地址从相应的服务端加载相应的H5页面。

[0178] 下面结合图12对实现本申请实施例的页面渲染方法的系统架构进行示例性介绍。

[0179] 以非原生页面为H5页面，预渲染引擎基于JSCore实现，以及跨语言通信协议采用JSBridge为例，如图12所示，系统架构包含目标应用的各个功能、预渲染引擎的各个功能，以及将本申请实施例的页面预渲染进行工程化的各个过程。

[0180] 一、目标应用的各个功能。

[0181] 网络I / O：处理网络输入输出操作。

[0182] JSCore / V8环境：提供JavaScript运行环境。

[0183] JSBridge：实现JavaScript代码和原生语言代码的通信。

[0184] 原生能力：提供原生应用(如上述实施例中的目标应用)的功能。

[0185] 缓存管理：管理原生应用中的缓存数据。

[0186] 离线包：支持原生应用在离线状态下的功能。

[0187] 二、预渲染引擎的各个功能。

[0188] 预渲染引擎的基础能力包括：

[0189] 原生通信，即与原生语言代码进行通信；预渲染能力；网络请求；缓存管理；离线包，即支持离线功能；性能检测，即检测预渲染引擎的性能。

[0190] 其中，预渲染引擎的预渲染能力具体包括：HTML拉取，即获取HTML文件；JSBundle拉取，即获取JavaScript文件；CSS解析；插槽语法，允许开发者在父组件中定义内容，并将这些内容传递给子组件的特定位置进行渲染；页面预渲染；生成HTML，即生成预渲染结果。

[0191] 预渲染能力涉及的页面流程包括：

[0192] 在H5页面中，B页面(即包含H5页面的入口的页面)入口曝光后，触发预渲染，以便打开页面(即H5页面)。同样地，在原生页面中，B页面入口曝光后，触发预渲染，以便打开页面(即H5页面)。

[0193] 具体的，在B页面中，预渲染H5页面，然后进行WebView显示，以渲染H5页面，包括界面渲染、加载脚本，以使页面可交互。

[0194] 三、页面预渲染的工程化

[0195] 构建各种工具，以执行：Bundle构建(即将页面预渲染涉及的代码进行打包)；触发预渲染；离线包构建。

[0196] 开发调试过程包括以下几个方面：实时调试；真机调试；Demo示例，即提供示例代码。

[0197] 流水线部署过程包括以下几个方面：测试部署，即部署到测试环境；正式部署，即部署到生产环境；离线包发布。

[0198] 性能检测涉及以下几个方面：日志查询；异常告警；Crash检测，即检测目标应用的崩溃情况；卡顿检测，即检测目标应用的卡顿情况；页面性能检测；预渲染成功率；预渲染失败率；预渲染命中率，即成功显示预渲染页面的比例。

[0199] 基于相同的发明构思，本申请实施例还提供一种页面渲染装置，该装置解决问题的原理与上述实施例中的预渲染引擎侧的方法相似，因此该装置的实施可以参见上述预渲染引擎侧的方法的实施，重复之处不再赘述。

[0200] 如图13所示，其为页面渲染装置1300的结构示意图，该装置设置于预渲染引擎中，部署预渲染引擎的终端设备中安装有目标应用，该装置可以包括：

[0201] 接收模块1301，用于接收目标应用发送的，针对至少一个非原生页面的预渲染请求；其中，预渲染请求是目标应用在确定至少一个非原生页面各自的入口被显示时发送的；

[0202] 预渲染模块1302，用于获取每个非原生页面的页面资源，基于每个页面资源执行相应的非原生页面的预渲染，获得每个非原生页面的预渲染结果，每个预渲染结果表征：相应的非原生页面的页面内容和页面样式；

[0203] 发送模块1303，用于将至少一个非原生页面各自的预渲染结果返回给目标应用，以使目标应用响应于针对至少一个非原生页面中的目标非原生页面的显示请求，基于目标非原生页面的预渲染结果显示目标非原生页面。

[0204] 本申请实施例中，通过终端设备中的预渲染引擎对目标应用的非原生页面进行预渲染，获得非原生页面的预渲染结果，从而在需要显示该非原生页面时，可以快速加载非原生页面的预渲染结果，以显示非原生页面，因此，本申请实施例可以提高非原生页面的加载速度，同时，由于在终端设备中对非原生页面进行预渲染，避免增加服务端的压力。此外，相较于相关技术中由服务端渲染非原生页面的方案，本申请实施例不需要对服务端进行改造，节省了服务端的改造成本。

[0205] 可选的，终端设备中部署有预渲染工具包，预渲染工具包用于提供调用预渲染引擎的预渲染接口；

[0206] 则接收模块1301具体用于：

[0207] 接收目标应用调用预渲染接口，采用跨语言通信协议发送的，针对至少一个非原生页面的预渲染请求；其中，跨语言通信协议用于在目标应用对应的原生语言代码，和非原生页面对应的非原生语言代码之间进行通信。

[0208] 可选的，发送模块1303具体用于：

[0209] 采用跨语言通信协议，将至少一个非原生页面各自的预渲染结果返回给预渲染接口，以使目标应用通过预渲染接口获取至少一个非原生页面各自的预渲染结果。

[0210] 可选的，接收模块1301具体用于：

[0211] 调用特定的原生语言接口，将所述至少一个非原生页面各自的预渲染结果返回给所述预渲染接口；或者

[0212] 加载特定的统一资源定位符URL请求，URL请求包含至少一个非原生页面各自的预渲染结果，以触发预渲染接口拦截URL请求，获得至少一个非原生页面各自的预渲染结果。

[0213] 可选的，获取每个非原生页面的页面资源时，预渲染模块1302具体用于：

[0214] 基于预渲染请求中的每个非原生页面的页面地址，采用跨语言通信协议调用目标应用使用的网络请求接口，从目标应用对应的服务端获取相应的非原生页面的页面资源。

[0215] 可选的，目标应用对应的服务端包括内容分发服务端和业务服务端；

[0216] 从目标应用对应的服务端获取相应的非原生页面的页面资源时，预渲染模块1302具体用于：

[0217] 从内容分发服务端获取用于构建相应的非原生页面的页面文件；以及

[0218] 从业务服务端获取相应的非原生页面中的业务数据。

[0219] 可选的，页面文件包括页面结构文件、页面脚本文件和页面样式文件，页面结构文件包含至少一个页面元素，页面脚本文件包含至少一个页面脚本，页面样式文件包含每个页面元素的呈现样式；

[0220] 则基于每个页面资源执行相应的非原生页面的预渲染时，预渲染模块1302具体用于：

[0221] 将每个页面元素的呈现样式内联至页面结构文件中相应的页面元素中，将每个页面脚本嵌入所述页面结构文件中相应的页面元素中，以及将业务数据填充至页面结构文件中相应的页面元素中。

[0222] 基于相同的发明构思，本申请实施例还提供一种页面渲染装置，该装置解决问题的原理与上述实施例中的目标应用侧的方法相似，因此该装置的实施可以参见上述目标应用侧的方法的实施，重复之处不再赘述。

[0223] 如图14所示，其为页面渲染装置1400的结构示意图，该装置设置于目标应用中，安装目标应用的终端设备中部署有预渲染引擎，该装置包括：

[0224] 请求模块1401，用于在显示目标页面时，若确定目标页面包含至少一个非原生页面各自的入口，则向预渲染引擎发送针对至少一个非原生页面的预渲染请求；

[0225] 获取模块1402，用于获得至少一个非原生页面各自的预渲染结果，每个非原生页面的预渲染结果是预渲染引擎通过以下方式获得的：获取每个非原生页面的页面资源，基于页面资源执行相应的非原生页面的预渲染，每个预渲染结果表征：相应的非原生页面的页面内容和页面样式；

[0226] 显示模块1403，用于响应于针对至少一个非原生页面中的目标非原生页面的显示请求，通过非原生页面显示组件获取目标非原生页面的预渲染结果，以显示目标非原生页面。

[0227] 本申请实施例中，目标应用可以向终端设备中的预渲染引擎发送非原生页面的预渲染请求，以使预渲染引擎对非原生页面进行预渲染，获得非原生页面的预渲染结果，从而在目标应用需要显示该非原生页面时，可以快速加载非原生页面的预渲染结果，以显示非原生页面，因此，本申请实施例可以提高非原生页面的加载速度，同时，由于在终端设备中对非原生页面进行预渲染，避免增加服务端的压力。

[0228] 可选的，终端设备中部署有预渲染工具包，预渲染工具包用于提供调用预渲染引擎的预渲染接口；

[0229] 则请求模块具体用于：

[0230] 调用预渲染接口，采用跨语言通信协议，向预渲染引擎发送针对至少一个非原生页面的预渲染请求；其中，跨语言通信协议用于在目标应用的原生程序，和非原生页面的非原生语言代码之间进行通信。

[0231] 可选的，请求模块具体用于：

[0232] 通过所述预渲染接口，调用所述预渲染引擎提供的回调函数，将针对所述至少一个非原生页面的预渲染请求添加至所述回调函数中，以使所述预渲染引擎从所述回调函数中获取所述预渲染请求。

[0233] 可选的，获取模块具体用于：

[0234] 通过预渲染接口，接收预渲染引擎采用跨语言通信协议，返回的至少一个非原生页面各自的预渲染结果。

[0235] 则显示模块具体用于：

[0236] 通过非原生页面显示组件，从预渲染接口获取目标非原生页面的预渲染结果。

[0237] 为了描述的方便，以上各部分按照功能划分为各模块(或单元)分别描述。当然，在实施本申请时可以把各模块(或单元)的功能在同一个或多个软件或硬件中实现。

[0238] 本申请实施例中，术语"模块”或"单元”是指有预定功能的计算机程序或计算机程序的一部分，并与其他相关部分一起工作以实现预定目标，并且可以通过使用软件、硬件(如处理电路或存储器)或其组合来全部或部分实现。同样的，一个处理器(或多个处理器或存储器)可以用来实现一个或多个模块或单元。此外，每个模块或单元都可以是包含该模块或单元功能的整体模块或单元的一部分。

[0239] 在介绍了本申请示例性实施方式的页面渲染方法和装置之后，接下来，介绍根据本申请的另一示例性实施方式的电子设备。

[0240] 与上述方法实施例基于同一发明构思，本申请实施例中还提供了一种电子设备。在一种实施例中，该电子设备可以是终端设备，如图1所示的终端设备110。在该实施例中，电子设备的结构可以如图15所示，包括：通信组件1510、存储器1520、显示单元1530、摄像头1540、传感器1550、音频电路1560、蓝牙模块1570、处理器1580等部件。

[0241] 通信组件1510用于与服务器进行通信。在一些实施例中，可以包括电路无线保真(Wireless Fidelity，WiFi)模块，WiFi模块属于短距离无线传输技术，电子设备通过WiFi模块可以帮助用户收发信息。

[0242] 存储器1520可用于存储软件程序及数据。处理器1580通过运行存储在存储器1520的软件程序或数据，从而执行终端设备110的各种功能以及数据处理。存储器1520可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。存储器1520存储有使得终端设备110能运行的操作系统。本申请中存储器1520可以存储操作系统及各种应用程序，还可以存储执行本申请实施例页面渲染方法的计算机程序。

[0243] 显示单元1530还可用于显示由用户输入的信息或提供给用户的信息以及终端设备110的各种菜单的图形用户界面(graphical user interface，GUI)。具体地，显示单元1530可以包括设置在终端设备110正面的显示屏1532。其中，显示屏1532可以采用液晶显示器、发光二极管等形式来配置。显示单元1530可以用于显示本申请实施例中的目标应用的原生页面和非原生页面等。

[0244] 显示单元1530还可用于接收输入的数字或字符信息，产生与终端设备110的用户设置以及功能控制有关的信号输入，具体地，显示单元1530可以包括设置在终端设备110正面的触控屏1531，可收集用户在其上或附近的触摸操作，例如点击按钮，拖动滚动框等。

[0245] 其中，触控屏1531可以覆盖在显示屏1532之上，也可以将触控屏1531与显示屏1532集成而实现终端设备110的输入和输出功能，集成后可以简称触摸显示屏。本申请中显示单元1530可以显示应用程序以及对应的操作步骤。

[0246] 摄像头1540可用于捕获静态图像，用户可以将摄像头1540拍摄的图像通过应用发布。摄像头1540可以是一个，也可以是多个。物体通过镜头生成光学图像投射到感光元件。感光元件可以是电荷耦合器件(charge coupled device，CCD)或互补金属氧化物半导体(complementary metal-oxide-semiconductor，CMOS)光电晶体管。感光元件把光信号转换成电信号，之后将电信号传递给处理器1580转换成数字图像信号。

[0247] 终端设备还可以包括至少一种传感器1550，比如加速度传感器1551、距离传感器1552、指纹传感器1553、温度传感器1554。终端设备还可配置有陀螺仪、气压计、湿度计、温度计、红外线传感器、光传感器、运动传感器等其他传感器。

[0248] 音频电路1560、扬声器1561、传声器1562可提供用户与终端设备110之间的音频接口。音频电路1560可将接收到的音频数据转换后的电信号，传输到扬声器1561，由扬声器1561转换为声音信号输出。终端设备110还可配置音量按钮，用于调节声音信号的音量。另一方面，传声器1562将收集的声音信号转换为电信号，由音频电路1560接收后转换为音频数据，再将音频数据输出至通信组件1510以发送给比如另一终端设备110，或者将音频数据输出至存储器1520以便进一步处理。

[0249] 蓝牙模块1570用于通过蓝牙协议来与其他具有蓝牙模块的蓝牙设备进行信息交互。例如，终端设备可以通过蓝牙模块1570与同样具备蓝牙模块的可穿戴电子设备(例如智能手表)建立蓝牙连接，从而进行数据交互。

[0250] 处理器1580是终端设备的控制中心，利用各种接口和线路连接整个终端的各个部分，通过运行或执行存储在存储器1520内的软件程序，以及调用存储在存储器1520内的数据，执行终端设备的各种功能和处理数据。在一些实施例中，处理器1580可包括一个或多个处理单元；处理器1580还可以集成应用处理器和基带处理器，其中，应用处理器主要处理操作系统、用户界面和应用程序等，基带处理器主要处理无线通信。可以理解的是，上述基带处理器也可以不集成到处理器1580中。本申请中处理器1580可以运行操作系统、应用程序、用户界面显示及触控响应，以及本申请实施例的页面渲染方法。另外，处理器1580与显示单元1530耦接。

[0251] 在一些可能的实施方式中，本申请提供的页面渲染方法的各个方面还可以实现为一种计算机程序产品的形式，其包括计算机程序，当计算机程序产品在电子设备上运行时，计算机程序用于使电子设备执行本说明书上述描述的根据本申请各种示例性实施方式的页面渲染方法中的步骤，例如，电子设备可以执行如图2中所示的步骤。

[0252] 计算机程序产品可以采用一个或多个可读介质的任意组合。可读介质可以是可读信号介质或者可读存储介质。可读存储介质例如可以是但不限于电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。

[0253] 本申请的实施方式的计算机程序产品可以采用便携式紧凑盘只读存储器(CD-ROM)并包括计算机程序，并可以在电子设备上运行。然而，本申请的程序产品不限于此，在本文件中，可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被命令执行系统、装置或者器件使用或者与其结合使用。

[0254] 可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了可读计算机程序。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。可读信号介质还可以是可读存储介质以外的任何可读介质，该可读介质可以发送、传播或者传输用于由命令执行系统、装置或者器件使用或者与其结合使用的程序。

[0255] 可读介质上包含的计算机程序可以用任何适当的介质传输，包括但不限于无线、有线、光缆、RF等等，或者上述的任意合适的组合。

[0256] 可以以一种或多种程序设计语言的任意组合来编写用于执行本申请操作的计算机程序，程序设计语言包括面向对象的程序设计语言—诸如Java、C++等，还包括常规的过程式程序设计语言—诸如"C”语言或类似的程序设计语言。计算机程序可以完全地在用户电子设备上执行、部分地在用户电子设备上执行、作为一个独立的软件包执行、部分在用户电子设备上部分在远程电子设备上执行、或者完全在远程电子设备或服务器上执行。在涉及远程电子设备的情形中，远程电子设备可以通过任意种类的网络包括局域网(LAN)或广域网(WAN)连接到用户电子设备，或者，可以连接到外部电子设备(例如利用因特网服务提供商来通过因特网连接)。

[0257] 应当注意，尽管在上文详细描述中提及了装置的若干单元或子单元，但是这种划分仅仅是示例性的并非强制性的。实际上，根据本申请的实施方式，上文描述的两个或更多单元的特征和功能可以在一个单元中具体化。反之，上文描述的一个单元的特征和功能可以进一步划分为由多个单元来具体化。

[0258] 此外，尽管在附图中以特定顺序描述了本申请方法的操作，但是，这并非要求或者暗示必须按照该特定顺序来执行这些操作，或是必须执行全部所示的操作才能实现期望的结果。附加地或备选地，可以省略某些步骤，将多个步骤合并为一个步骤执行，和 / 或将一个步骤分解为多个步骤执行。

[0259] 本领域内的技术人员应明白，本申请的实施例可提供为方法、系统、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用计算机程序的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

[0260] 本申请是参照根据本申请实施例的方法、设备(系统)、和计算机程序产品的流程图和 / 或方框图来描述的。应理解可由计算机程序命令实现流程图和 / 或方框图中的每一流程和 / 或方框、以及流程图和 / 或方框图中的流程和 / 或方框的结合。可提供这些计算机程序命令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的命令产生用于实现在流程图一个流程或多个流程和 / 或方框图一个方框或多个方框中指定的功能的装置。

[0261] 这些计算机程序命令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的命令产生包括命令装置的制造品，该命令装置实现在流程图一个流程或多个流程和 / 或方框图一个方框或多个方框中指定的功能。

[0262] 这些计算机程序命令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的命令提供用于实现在流程图一个流程或多个流程和 / 或方框图一个方框或多个方框中指定的功能的步骤。

[0263] 尽管已描述了本申请的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例做出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本申请范围的所有变更和修改。

[0264] 显然，本领域的技术人员可以对本申请进行各种改动和变型而不脱离本申请的精神和范围。这样，倘若本申请的这些修改和变型属于本申请权利要求及其等同技术的范围之内，则本申请也意图包含这些改动和变型在内。< / script> < / h1> < / h1>

Claims

1. A page rendering method, characterized in that, The method, applied to a pre-rendering engine, wherein the target application is installed on the terminal device where the pre-rendering engine is deployed, includes: Receive a pre-rendering request sent by the target application for at least one non-native page; wherein the pre-rendering request is sent by the target application when the entry point of each of the at least one non-native page is displayed; Obtain the page resources of each non-native page, perform pre-rendering of the corresponding non-native page based on each page resource, and obtain the pre-rendering result of each non-native page. Each pre-rendering result represents the page content and page style of the corresponding non-native page. The pre-rendered results of each of the at least one non-native page are returned to the target application, so that the target application displays the target non-native page based on the pre-rendered results of the target non-native page in response to a display request for the target non-native page among the at least one non-native pages.

2. The method according to claim 1, characterized in that, The terminal device is equipped with a pre-rendering toolkit, which provides a pre-rendering interface for calling the pre-rendering engine. The step of receiving a pre-rendering request sent by the target application for at least one non-native page includes: The system receives a pre-rendering request for at least one non-native page, sent by the target application using a cross-language communication protocol, through the pre-rendering interface. The cross-language communication protocol is used for communication between the native language code corresponding to the target application and the non-native language code corresponding to the non-native page.

3. The method according to claim 2, characterized in that, Returning the pre-rendered results of each of the at least one non-native page to the target application includes: Using the cross-language communication protocol, the pre-rendering results of each of the at least one non-native page are returned to the pre-rendering interface, so that the target application can obtain the pre-rendering results of each of the at least one non-native page from the pre-rendering interface.

4. The method according to claim 3, characterized in that, The step of using the cross-language communication protocol to return the pre-rendering results of each of the at least one non-native page to the pre-rendering interface includes: Call a specific native language interface to return the pre-rendered results of each of the at least one non-native page to the pre-rendering interface; or Load a specific Uniform Resource Locator (URL) request, the URL request containing the pre-rendered results of each of the at least one non-native page, to trigger the pre-rendering interface to intercept the URL request and obtain the pre-rendered results of each of the at least one non-native page.

5. The method according to any one of claims 1 to 4, characterized in that, The acquisition of page resources for each non-native page includes: Based on the page address of each non-native page in the pre-rendering request, the network request interface used by the target application is called using a cross-language communication protocol to obtain the corresponding non-native page resources from the server corresponding to the target application.

6. The method according to claim 5, characterized in that, The server-side corresponding to the target application includes a content distribution server-side and a business server-side; The step of obtaining the corresponding non-native page resources from the server corresponding to the target application includes: Obtain page files for constructing the corresponding non-native pages from the content distribution server; and Obtain the corresponding business data from the non-native page from the business server.

7. The method according to claim 6, characterized in that, The page file includes a page structure file, a page script file, and a page style file. The page structure file contains at least one page element, the page script file contains at least one page script, and the page style file contains the presentation style of each page element. The step of performing pre-rendering of the corresponding non-native page based on each page resource includes: The rendering style of each page element is inlined into the corresponding page element in the page structure file, each page script is embedded into the corresponding page element in the page structure file, and the business data is populated into the corresponding page element in the page structure file.

8. A page rendering method, characterized in that, Applied to a target application, wherein a pre-rendering engine is deployed in the terminal device on which the target application is installed, the method includes: When displaying the target page, if it is determined that the target page contains an entry point for at least one non-native page, a pre-rendering request for the at least one non-native page is sent to the pre-rendering engine. The pre-rendering results of each of the at least one non-native pages are obtained. The pre-rendering result of each non-native page is obtained by the pre-rendering engine in the following way: obtaining the page resources of each non-native page, performing pre-rendering of the corresponding non-native page based on the page resources, and each pre-rendering result represents: the page content and page style of the corresponding non-native page. In response to a display request for a target non-native page among the at least one non-native pages, a pre-rendered result of the target non-native page is obtained through a non-native page display component to display the target non-native page.

9. The method according to claim 8, characterized in that, The terminal device is equipped with a pre-rendering toolkit, which provides a pre-rendering interface for calling the pre-rendering engine. Sending a pre-rendering request to the pre-rendering engine for the at least one non-native page includes: The pre-rendering interface is invoked, and a cross-language communication protocol is used to send a pre-rendering request for the at least one non-native page to the pre-rendering engine; wherein, the cross-language communication protocol is used to communicate between the native language code corresponding to the target application and the non-native language code corresponding to the non-native page.

10. The method according to claim 9, characterized in that, The invocation of the pre-rendering interface, employing a cross-language communication protocol, sends a pre-rendering request for the at least one non-native page to the pre-rendering engine, including: By calling the callback function provided by the pre-rendering engine through the pre-rendering interface, the pre-rendering request for the at least one non-native page is added to the callback function, so that the pre-rendering engine can obtain the pre-rendering request from the callback function.

11. The method according to claim 9 or 10, characterized in that, Obtaining the pre-rendered results of each of the at least one non-native page includes: The pre-rendering interface receives the pre-rendering results of at least one non-native page returned by the pre-rendering engine using the cross-language communication protocol. The pre-rendered result of the target non-native page is obtained through a non-native page display component, including: The pre-rendering result of the target non-native page is obtained from the pre-rendering interface through the non-native page display component.

12. A page rendering device, characterized in that, An apparatus for use in a pre-rendering engine, wherein a target application is installed on a terminal device on which the pre-rendering engine is deployed, the apparatus comprising: A receiving module is configured to receive a pre-rendering request sent by the target application for at least one non-native page; wherein the pre-rendering request is sent by the target application when the entry point of each of the at least one non-native page is displayed; The pre-rendering module is used to obtain the page resources of each non-native page, perform pre-rendering of the corresponding non-native page based on each page resource, and obtain the pre-rendering result of each non-native page. Each pre-rendering result represents the page content and page style of the corresponding non-native page. A sending module is configured to return the pre-rendering results of each of the at least one non-native pages to the target application, so that the target application, in response to a display request for a target non-native page among the at least one non-native pages, displays the target non-native page based on the pre-rendering results of the target non-native page.

13. A page rendering apparatus, characterized in that, The device, which is applied to a target application and has a pre-rendering engine deployed in the terminal device where the target application is installed, includes: The request module is used to send a pre-rendering request for the at least one non-native page to the pre-rendering engine when displaying the target page, if it is determined that the target page contains an entry point for each of the at least one non-native page. The acquisition module is used to obtain the pre-rendering results of each of the at least one non-native pages. The pre-rendering result of each non-native page is obtained by the pre-rendering engine in the following way: acquiring the page resources of each non-native page, and performing pre-rendering of the corresponding non-native page based on the page resources. Each pre-rendering result represents: the page content and page style of the corresponding non-native page. The display module is configured to respond to a display request for a target non-native page among the at least one non-native pages by obtaining a pre-rendered result of the target non-native page through a non-native page display component, and then displaying the target non-native page.

14. An electronic device, characterized in that, It includes a processor and a memory, wherein the memory stores a computer program that, when executed by the processor, causes the processor to perform the steps of any of the methods of claims 1 to 7 or any of the methods of claims 8 to 11.

15. A computer-readable storage medium, characterized in that, It includes a computer program that, when run on an electronic device, causes the electronic device to perform the steps of any of the methods described in claims 1 to 7 or any of the methods described in claims 8 to 11.

Images