A page rendering method and device, computer equipment and readable storage medium

Abstract

The present disclosure provides a page rendering method and device, computer device and readable storage medium, wherein the method comprises: in response to triggering a display operation of a target page, obtaining target page code corresponding to the target page and target page data; based on the target page code and the target page data, rendering the target page; and in response to the target page code carrying preloading information of at least one sub-page associated with the target page, based on the preloading information, preloading sub-page data corresponding to the at least one sub-page, and performing a preprocessing operation corresponding to the at least one sub-page to obtain a preprocessing result; in response to triggering a display operation of a target sub-page, based on the preloaded sub-page data corresponding to the target sub-page and the preprocessing result, rendering the target sub-page.

Description

TECHNICAL FIELD

[0001] The present disclosure relates to the technical field of software development, and in particular, to a page rendering method and device, a computer device and a readable storage medium. BACKGROUND

[0002] In today's mobile Internet and Web technology, due to the high iteration efficiency and the independence of the release characteristics of Web, more and more mobile pages tend to use Web pages as the presentation means of the page, and the Web page becomes more and more complex with the iteration and design day by day, and at the same time, the performance requirement is also higher and higher. In order to meet the increasing performance requirement, some schemes for improving page loading performance have been explored in the prior art.

[0003] The current way of improving page loading performance has the problems of memory consumption and the inability to balance page loading performance. SUMMARY

[0004] The embodiments of the present disclosure at least provide a page rendering method, device and system.

[0005] In a first aspect, the embodiments of the present disclosure provide a page rendering method, comprising:

[0006] In response to triggering a display operation of a target page, obtaining target page code corresponding to the target page and target page data; based on the target page code and the target page data, rendering the target page; and

[0007] In response to the target page code carrying preloading information of at least one sub-page associated with the target page, based on the preloading information, preloading sub-page data corresponding to the at least one sub-page, and performing a preprocessing operation corresponding to the at least one sub-page to obtain a preprocessing result;

[0008] In response to triggering a display operation of a target sub-page, based on the preloaded sub-page data corresponding to the target sub-page and the preprocessing result, rendering and displaying the target sub-page.

[0009] In an optional implementation, the preprocessing operation includes at least one of the following: determining the display coordinates of each component in the sub-page, data cleaning of the sub-page data, theme color calculation, and page size scaling.

[0010] In an optional implementation, in response to triggering a display operation of a target page, obtaining target page code corresponding to the target page and target page data, comprises:

[0011] The page display front end sends a page acquisition instruction to the client in response to triggering a display operation of the target page.

[0012] The client sends the page acquisition instruction to a server in response to receiving the page acquisition instruction sent by the page display front end, and sends the target page code and the target page data to the page display front end in response to receiving the target page code returned by the server based on the page acquisition instruction and the target page data.

[0013] In an optional implementation, the page display front end sends a page acquisition instruction to the client in response to triggering a display operation of the target page, including:

[0014] The page display front end sends a page data acquisition request corresponding to the target page to the client, and sends the page acquisition instruction to the client in response to not receiving target page data corresponding to the page data acquisition request returned by the client within a preset time and a preprocessing result generated when preprocessing the target page.

[0015] In an optional implementation, the page display front end sends a page acquisition instruction to the client in response to triggering a display operation of the target page, including:

[0016] The page display front end determines that the target page code carries the preloading information associated with the target page, and sends the preloading information to the client.

[0017] The client preloads the sub-page data corresponding to the at least one sub-page and performs a preprocessing operation corresponding to the at least one sub-page based on the preloading information to obtain a preprocessing result in response to receiving the preloading information sent by the page display front end.

[0018] In an optional implementation, the client preloads the sub-page data corresponding to the at least one sub-page and performs a preprocessing operation corresponding to the at least one sub-page based on the preloading information to obtain a preprocessing result in response to receiving the preloading information sent by the page display front end, including:

[0019] The client determines a preprocessing logic execution script corresponding to the at least one sub-page based on the preloading information in response to receiving the preloading information sent by the page display front end.

[0020] The client obtains the sub-page data from the server and performs a pre-processing operation corresponding to the at least one sub-page based on the pre-processing logic execution file to obtain the pre-processing result.

[0021] In an optional implementation, before the obtaining the sub-page data from the server and performing a pre-processing operation corresponding to the at least one sub-page based on the pre-processing logic execution file to obtain the pre-processing result, the method further includes:

[0022] The client initializes an execution environment of the pre-processing logic execution file based on a language type of the pre-processing logic execution file.

[0023] In an optional implementation, the rendering the target sub-page based on the preloaded sub-page data corresponding to the target sub-page and the pre-processing result in response to triggering the display operation of the target sub-page includes:

[0024] The page display terminal sends trigger information of the target sub-page to the client in response to triggering the display operation of the target sub-page.

[0025] The client determines the preloaded sub-page data corresponding to the target sub-page and the pre-processing result from the preloaded sub-page data and the pre-processing result in response to receiving the trigger information of the target sub-page, and transmits the preloaded sub-page data corresponding to the target sub-page and the pre-processing result into a preset global variable.

[0026] The page display terminal extracts the preloaded sub-page data corresponding to the target sub-page and the pre-processing result from the global variable in response to detecting that the preloaded sub-page data corresponding to the target sub-page and the pre-processing result are transmitted into the global variable, and renders the target sub-page based on the preloaded sub-page data corresponding to the target sub-page and the pre-processing result.

[0027] In a second aspect, the embodiments of the present disclosure further provide a page rendering apparatus, including:

[0028] The obtaining module is configured to obtain target page code and target page data corresponding to a target page in response to triggering a display operation of the target page, and render and display the target page based on the target page code and the target page data.

[0029] The preloading module is used to respond to the target page code carrying preloading information of at least one subpage associated with the target page, preload the subpage data corresponding to the at least one subpage based on the preloading information, and perform preprocessing operations corresponding to the at least one subpage to obtain preprocessing results.

[0030] The rendering module is used to respond to a triggering operation to display the target subpage, and to render and display the target subpage based on the preloaded subpage data corresponding to the target subpage and the preprocessing results.

[0031] In one optional implementation, the preprocessing operation includes at least one of the following: determining the display coordinates of each component in the subpage, cleaning the subpage data, calculating the theme color, and scaling the page size.

[0032] In one optional implementation, the acquisition module includes:

[0033] The first sending unit is used to send a page retrieval instruction to the client in response to the front-end's operation that triggers the display of the target page.

[0034] The second sending unit is configured to: in response to receiving the page retrieval instruction sent by the page display front-end, send the page retrieval instruction to the server; and in response to receiving the target page code and the target page data returned by the server based on the page retrieval instruction, send the target page code and the target page data to the page display front-end.

[0035] In one optional implementation, the first transmitting unit is specifically used for:

[0036] Send a page data retrieval request corresponding to the target page to the client; if no target page data corresponding to the page data retrieval request or preprocessing result generated during preprocessing of the target page is received from the client within a preset time, then send the page retrieval instruction to the client.

[0037] In one optional implementation, the preloading module includes:

[0038] The third sending module is used to send the preloading information to the client after the front-end of the page display determines that the target page code carries the preloading information.

[0039] The preloading unit is used by the client in response to receiving the preloading information sent by the page display front-end, to preload the subpage data corresponding to the at least one subpage based on the preloading information, and to perform preprocessing operations corresponding to the at least one subpage to obtain preprocessing results.

[0040] In one optional implementation, the preloading unit is specifically used for:

[0041] The client responds to receiving the preloading information sent by the page display frontend, and determines the preprocessing logic execution file corresponding to the at least one subpage based on the preloading information;

[0042] Based on the preprocessing logic execution file, the subpage data is obtained from the server, and preprocessing operations corresponding to the at least one subpage are performed to obtain the preprocessing result.

[0043] In an optional implementation, the preloading module further includes:

[0044] An initialization unit is used by the client to initialize the execution environment of the preprocessing logic executable file based on the language type of the preprocessing logic executable file.

[0045] In one optional implementation, the rendering module is used for:

[0046] In response to triggering the display operation of the target subpage, the page display terminal sends the trigger information of the target subpage to the client;

[0047] In response to receiving the trigger information of the target subpage, the client determines the preloaded subpage data and preprocessing results corresponding to the target subpage from the preloaded subpage data and preprocessing results, and passes the preloaded subpage data and preprocessing results corresponding to the target subpage into a preset global variable.

[0048] The page display terminal responds to the detection that the global variable contains preloaded subpage data and preprocessing results corresponding to the target subpage, extracts the preloaded subpage data and preprocessing results corresponding to the target subpage from the global variable, and renders and displays the target subpage based on the preloaded subpage data and preprocessing results corresponding to the target subpage.

[0049] Thirdly, embodiments of this disclosure also provide a computer device, including: a processor, a memory, and a bus, wherein the memory stores machine-readable instructions executable by the processor, and when the computer device is running, the processor communicates with the memory via the bus, and when the machine-readable instructions are executed by the processor, the steps of the first aspect above, or any possible implementation of the first aspect, are performed.

[0050] Fourthly, embodiments of this disclosure also provide a computer-readable storage medium storing a computer program that, when executed by a processor, performs the steps of the first aspect or any possible implementation of the first aspect.

[0051] This disclosure provides a page rendering method, apparatus, computer device, and readable storage medium. During the rendering and display of a target page, if the target page code contains pre-loading information for at least one subpage corresponding to the target page, the subpage data corresponding to the at least one subpage is pre-loaded based on this pre-loading information, and a pre-processing operation corresponding to the at least one subpage is performed to obtain a pre-processing result. After triggering the display operation of the target subpage within the subpage, the target subpage is rendered and displayed based on the pre-loaded subpage data and the pre-processing result. Thus, even without triggering a subpage display operation, the subpage is pre-loaded and pre-processed beforehand, allowing the pre-loaded page data and pre-processing result to be directly used for rendering and displaying the target subpage, thereby reducing memory consumption while improving page loading performance.

[0052] To make the above-mentioned objects, features and advantages of this disclosure more apparent and understandable, preferred embodiments are described below in detail with reference to the accompanying drawings. Attached Figure Description

[0053] To more clearly illustrate the technical solutions of the embodiments of this disclosure, the accompanying drawings used in the embodiments will be briefly described below. These drawings are incorporated in and constitute a part of this specification. They illustrate embodiments conforming to this disclosure and, together with the specification, serve to explain the technical solutions of this disclosure. It should be understood that the following drawings only show some embodiments of this disclosure and should not be considered as limiting the scope. Those skilled in the art can obtain other related drawings based on these drawings without creative effort.

[0054] Figure 1 A flowchart of a page rendering method provided by an embodiment of this disclosure is shown;

[0055] Figure 2A schematic diagram of a page rendering apparatus provided in an embodiment of the present disclosure is shown;

[0056] Figure 3 This illustration shows a detailed schematic diagram of the acquisition module in the rendering apparatus provided in an embodiment of the present disclosure;

[0057] Figure 4 This diagram illustrates a specific schematic of the preloading module in the page rendering apparatus provided in an embodiment of the present disclosure;

[0058] Figure 5 A schematic diagram of a computer device provided in an embodiment of this disclosure is shown. Detailed Implementation

[0059] To make the objectives, technical solutions, and advantages of the embodiments of this disclosure clearer, the technical solutions of the embodiments of this disclosure will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only a part of the embodiments of this disclosure, and not all of them. The components of the embodiments of this disclosure described and shown in the accompanying drawings can generally be arranged and designed in various different configurations. Therefore, the following detailed description of the embodiments of this disclosure provided in the accompanying drawings is not intended to limit the scope of the claimed disclosure, but merely represents selected embodiments of this disclosure. All other embodiments obtained by those skilled in the art based on the embodiments of this disclosure without inventive effort are within the scope of protection of this disclosure.

[0060] Research has shown that in today's era of advanced mobile internet and web technologies, due to the high iteration efficiency and release independence of the web, more and more mobile pages tend to use web pages as their presentation method. As web pages iterate and become increasingly complex, their performance requirements also rise. To meet these increasing performance demands, existing technologies have explored several solutions to improve page loading performance.

[0061] Currently, there are two main types of solutions to improve page loading performance: pre-rendering and pre-requesting.

[0062] Firstly, pre-rendering involves launching the browser to load the corresponding page before the user enters the page, and then displaying the pre-rendered browser optimization when the user clicks to navigate to that page. However, this approach has a drawback: because it's impossible to accurately predict which page the user will access, multiple pages usually need to be pre-rendered simultaneously before being provided to the user as needed to ensure the solution's usability. This feature leads to excessive system memory consumption and significant ineffective memory waste. The heavy memory demands also mean that this solution is only suitable for high-performance devices and cannot solve the performance bottlenecks of entry-level devices.

[0063] Secondly, pre-requesting involves requesting the API data before rendering, and then directly passing the requested data to the page when the user accesses it. This approach is less expensive, but its drawback is that because it only allows requests, request-related logic (such as data cleaning) and other rendering-dependent pre-processing logic (such as calculations like map coordinates) cannot be completed in advance. Therefore, it still blocks the rendering process when the user accesses the page, limiting the optimization effect of this approach.

[0064] However, both current solutions have their own limitations, either consuming a lot of memory or having poor optimization effects. A page rendering method that can balance low memory consumption and high page loading performance is a problem that urgently needs to be solved.

[0065] Based on the above research, this disclosure provides a page rendering method that extracts the ability to preload page data and the corresponding preprocessing logic for the page and executes them separately. This ensures that the storage requirements of page data can be met with a small amount of memory, and that after the page display operation is triggered, no further preprocessing operations are required. The page can be rendered directly based on the preloaded page data and preprocessing results, thereby improving page loading performance while reducing memory consumption.

[0066] The shortcomings of the above solutions are the result of the inventor's practical experience and careful research. Therefore, the discovery process of the above problems and the solutions proposed in this disclosure below should be considered as the inventor's contribution to this disclosure.

[0067] It should be noted that similar labels and letters in the following figures indicate similar items. Therefore, once an item is defined in one figure, it does not need to be further defined and explained in subsequent figures.

[0068] To facilitate understanding of this embodiment, a page rendering method disclosed in this disclosure will first be described in detail. The execution subject of the page rendering method provided in this disclosure is generally a computer device with certain computing capabilities. This computer device may include, for example, a terminal device, a server, or other processing devices. The terminal device may be a user equipment (UE), a mobile device, a user terminal, a terminal, a cellular phone, a cordless phone, a personal digital assistant (PDA), a handheld device, a computing device, an in-vehicle device, a wearable device, etc. In some possible implementations, this page rendering method can be implemented by the processor calling computer-readable instructions stored in memory.

[0069] See Figure 1 As shown in the figure, this disclosure provides a specific architecture of a system for executing a page rendering method, including: a page display front-end and a client.

[0070] The front-end, or page display front-end, is the foreground part of the application. It is part of the application and is used to respond to user actions and execute page rendering logic.

[0071] The client, also known as the backend, is the backend part of an application. It is part of the application and is used to support the frontend work of page display and provide service components.

[0072] The following describes the page rendering method provided in this embodiment, taking the terminal device as the execution subject as an example.

[0073] See Figure 1 The diagram shows a flowchart of a page rendering method provided in an embodiment of this disclosure. The method includes steps S101 to S103, wherein:

[0074] S101: In response to the operation of triggering the display of the target page, obtain the target page code and target page data corresponding to the target page; render and display the target page based on the target page code and the target page data.

[0075] In practice, the target page can be any page that can be opened within the application; this target page includes trigger buttons for multiple subpages corresponding to the target page. After the target page is displayed on the terminal device, the user can trigger any subpage corresponding to a trigger button through the trigger button.

[0076] In one possible embodiment, the operation to trigger the display of the target page can also be performed on the WebView. A WebView is a client-side container, essentially a browser. Once the client opens this browser within its application, it can load the target page developed for the front-end, just like any other browser.

[0077] In this embodiment of the disclosure, the target page code corresponding to the target page can be the page code required during the period from when a browser page has no displayed information to when it is first displayed or when interaction is possible, in response to opening a browser. Correspondingly, the target page data corresponding to the target page can include the configuration data required during the period from when the browser page has no displayed information to when it is first displayed or when interaction is possible.

[0078] In one possible implementation, during the development phase of the page rendering process, the developer splits the code logic into first-screen code and non-first-screen code. The first-screen code is the target page code, and the calculation logic related to the first-screen code is maintained separately. The first-screen code is usually divided into two parts: (1) real-time calculation based on the current user device environment (e.g., calculating the aspect ratio of the image based on the aspect ratio of the user device); (2) the first-screen data request part. When the developer exits the solution, they can put the calculation logic of this part of the first-screen code into a separate file. Non-first-screen code refers to the logic code part that triggers the page again after the user interacts with the first screen.

[0079] The real-time calculation based on the current user device environment may include at least one of the following: determining the coordinate position of the page, the theme color, and the page size scaling.

[0080] For example, when a user searches for a video on website A, there is no content displayed on the page immediately after the user completes the search. The process continues until the entire search list is displayed. This process and result is the execution of the first screen code. Afterward, the user can click the three dots in the lower right corner of the video display area to trigger features such as adding to favorites, displaying drop-down lists, or showing pop-ups. These are all execution processes and results of non-first screen code.

[0081] In this embodiment of the disclosure, after obtaining the target page code and target page data corresponding to the target page, the target page can be rendered and displayed based on the target page code and the target page data. Specifically, the process includes the following:

[0082] The front-end responds to the operation that triggers the display of the target page by sending a page retrieval command to the client;

[0083] In response to receiving the page retrieval instruction sent by the page display frontend, the client sends the page retrieval instruction to the server; in response to receiving the target page code and the target page data returned by the server based on the page retrieval instruction, the client sends the target page code and the target page data to the page display frontend.

[0084] Specifically, after the front-end responds to a display operation for the target page, it sends a command to the client to retrieve the target page code and data. Upon receiving the command, the client forwards it to the server. The server, based on the command, determines the corresponding target page code and data, returns them to the client, and then sends them back to the front-end. The client then sends the target page code and data to the front-end, where the rendering process of the target page is completed.

[0085] For example, in response to a user opening a shopping website B and entering the website address of website B, the front-end of the page display, recognizing the user's browser activity, can send a command to the client, instructing the client to retrieve the target page code and target page data, such as the display theme color and page size. After receiving the page retrieval command from the front-end, the client forwards the command to the server. Based on the command, the server determines the code logic and configuration data corresponding to the theme color, page size, and other information, and returns the target page code and data to the client. The client then sends the target page code and data to the front-end, where the rendering process is completed, resulting in a target page with the target theme color, page size, and other information.

[0086] For example, the rendering process of the target page can also be applied to processes such as searching and clicking controls that can jump to the next page. In this case, each page is the target page relative to the next page, which will not be elaborated here.

[0087] Following the above S101, the page rendering method provided in this embodiment further includes:

[0088] S102: In response to the target page code carrying preloading information of at least one subpage associated with the target page, based on the preloading information, preload the subpage data corresponding to the at least one subpage, and perform preprocessing operations corresponding to the at least one subpage to obtain a preprocessing result.

[0089] The preprocessing operations include at least one of the following: determining the display coordinates of each component in the subpage, cleaning the subpage data, calculating the theme color, and scaling the page size.

[0090] For example, since a subpage may contain multiple components, it's necessary to determine the display coordinates of each component within the subpage so that it can be displayed at its corresponding position. Data cleaning of the subpage data is a final step in identifying and correcting identifiable errors in the data files, including checking data consistency and handling invalid and missing values. Theme color calculation may include determining the relationship between the theme colors of the subpage and the target page, or the theme color transformation process during page transitions. Page scaling involves scaling the displayed pages during the transition process relative to the target page and the size of each subpage.

[0091] In another possible embodiment, before obtaining the subpage data from the server and performing preprocessing operations corresponding to the at least one subpage based on the preprocessing logic execution file to obtain the preprocessing result, the following may also be included:

[0092] The client initializes the execution environment of the preprocessing logic executable file based on the language type of the preprocessing logic executable file.

[0093] In one possible implementation, a separate thread can be created to initialize the execution environment of the preprocessing logic execution file, based on the language type of the script.

[0094] Specifically, when the client receives the name of the code logic script file, it determines the type by analyzing the file extension. For example, a file ending in .ts indicates TypeScript, and a file ending in .py indicates Python. The client then calls the corresponding execution method. If Python is used, a Python Kit based on native code can be used to execute the script and obtain the preprocessed result. In this embodiment, the language type of the preprocessing logic execution file may include the page id-worker.js, etc.

[0095] In one possible embodiment, in response to the target page code carrying preloading information of at least one subpage corresponding to the target page, the following steps are performed: Based on the preloading information, the subpage data corresponding to the at least one subpage is preloaded, and a preprocessing operation corresponding to the at least one subpage is performed to obtain a preprocessing result:

[0096] The front-end of the page display determines that the target page code carries the preloading information and sends the preloading information to the client.

[0097] The client responds to receiving the preloading information sent by the page display frontend, preloads the subpage data corresponding to the at least one subpage based on the preloading information, and performs preprocessing operations corresponding to the at least one subpage to obtain the preprocessing result.

[0098] In this embodiment of the disclosure, the front-end of the page display can first determine whether the target page code returned by the client carries preloading information. When it is determined whether the target page code carries preloading information, the front-end can send the preloading information determined from the target page code to the client. Based on the preloading information, the client preloads the subpage data corresponding to the at least one subpage and performs the preprocessing operation corresponding to the at least one subpage to obtain the preprocessing result.

[0099] In one possible implementation, in response to receiving the preloading information sent by the page display frontend, the client preloads the subpage data corresponding to the at least one subpage based on the preloading information, and performs preprocessing operations corresponding to the at least one subpage to obtain the following preprocessing results:

[0100] The client responds to receiving the preloading information sent by the page display frontend, and determines the preprocessing logic execution file corresponding to the at least one subpage based on the preloading information;

[0101] Based on the preprocessing logic execution file, the subpage data is obtained from the server, and preprocessing operations corresponding to the at least one subpage are performed to obtain the preprocessing result.

[0102] In one possible implementation, code logic that calls the client can be added to the target page, and this code logic can be bound to a pre-processed page list, with a corresponding page ID configured for each target page. Specifically, the subsequent page ID and corresponding page link can be passed to the JavaScript Bridge provided by the client in a key-value pair format. The key-value pairs can be matched one-to-one in the form of {"id":"value"}.

[0103] In one possible implementation, during the execution phase, after the client obtains all key-value pairs through the JS Bridge, it constructs the script filenames for all the code logic of the initial screen by traversing the key-value list (i.e., page IDs), and then proceeds to the next execution preparation phase. The JS Bridge is a protocol and technology for communication between the page display front-end and the client. By calling the JS Bridge, the front-end and client can exchange necessary information bidirectionally, and the client can customize the behavior of each bridge based on this protocol. After preparation is complete, the script content of the initial screen code logic can be executed to perform calculations and obtain the results. After obtaining the results, it is determined whether to pass the calculated results to the user, based on whether the user has already opened the target page that has completed the preprocessing.

[0104] Specifically, when creating a new WebView, multiple WebView instances are recorded in the page list. After obtaining the execution result, the page list is traversed, and the Uniform Resource Locator (URL) corresponding to the execution result can be obtained by executing `location.href` on all WebViews. By comparing the URL with the registered page ID, it is determined whether the user has opened the target page that has completed the preprocessing process. Here, we can divide it into the following two cases:

[0105] Scenario 1: If a matching page ID can be found, it means that the target page has been opened. At this time, the data can be set in the global variable of the webview. The client notifies the front end that the calculation has been completed through the JS Bridge. The front end can then access the corresponding variable in the page list through window.preload Result and consume the variable to get the corresponding result.

[0106] Scenario 2: If no match is found, it means the target page hasn't been opened yet. In this case, the result can be stored in memory. When the user opens the target page and the client is notified to create the corresponding webview, the client then passes the result to a variable. The frontend can access the result through `window.preloadResult`. Therefore, for the frontend, it first attempts to access the result upon startup. If the result isn't passed to the webview, it registers a JS Bridge to listen to the client until the client sends a notification, at which point it consumes the result, completing the preprocessing.

[0107] In one possible embodiment, the process of the page display frontend sending a page retrieval instruction to the client in response to an operation that triggers the display of the target page includes:

[0108] Send a page data retrieval request corresponding to the target page to the client; if no target page data corresponding to the page data retrieval request or preprocessing result generated during preprocessing of the target page is received from the client within a preset time, then send the page retrieval instruction to the client.

[0109] In this embodiment, under certain circumstances, such as network congestion, if a request to retrieve page data corresponding to the target page is sent to the client but no target page data or preprocessing results are received from the client within a preset time, such as 3 seconds, in order to ensure the user's browsing experience, the page retrieval instruction can be sent to the client again after the preset time has elapsed so that the front-end page can be displayed.

[0110] Following S101 and S102 above, the page rendering method provided in this embodiment further includes:

[0111] S103: In response to triggering the display operation of the target subpage, render and display the target subpage based on the preloaded subpage data corresponding to the target subpage and the preprocessing results.

[0112] In this embodiment of the disclosure, after obtaining and preprocessing the subpage data for the target subpage, the target subpage can be rendered on the front end.

[0113] Specifically, in response to the triggering of the display operation of the target subpage through the following steps one through three, the target subpage is rendered and displayed based on the preloaded subpage data corresponding to the target subpage and the preprocessing results:

[0114] Step 11: In response to triggering the display operation of the target subpage, the page display terminal sends the trigger information of the target subpage to the client;

[0115] Step 1 and 2: In response to receiving the trigger information of the target subpage, the client determines the preloaded subpage data and preprocessing results corresponding to the target subpage from the preloaded subpage data and preprocessing results, and passes the preloaded subpage data and preprocessing results corresponding to the target subpage to a preset global variable;

[0116] Step 13: In response to detecting that the global variable contains preloaded subpage data and preprocessing results corresponding to the target subpage, the page display terminal extracts the preloaded subpage data and preprocessing results corresponding to the target subpage from the global variable, and renders and displays the target subpage based on the preloaded subpage data and preprocessing results corresponding to the target subpage.

[0117] This disclosure proposes a client-provided execution unit that processes data before user access by using a pre-written script in the front-end code, and synchronizes the execution results to the front-end after user access. Regarding script capabilities, it not only handles request logic (thus enabling pre-requesting), but also, given the relatively poor computational performance of front-end languages ​​compared to the better performance of native languages, it can offload some heavy computations (calculating coordinates, cleaning data, etc.) to the client. Furthermore, this solution essentially covers all rendering blocking scenarios involved in front-end development, minimizing rendering latency caused by pre-rendering calculations and significantly improving rendering performance. This disclosure proposes a client-side implementation that balances memory consumption and optimization effects. Since this solution only handles the initial screen data calculation, it avoids launching a complete webview for overall page pre-rendering, saving significant memory consumption. Simultaneously, since a large portion of the initial rendering overhead is in calculating the initial screen content, pre-calculating the initial screen content also achieves a considerable performance improvement.

[0118] In response to a display operation triggering a target page, this embodiment obtains the target page code and target page data corresponding to the target page, and renders the target page. Based on the preloading information of at least one corresponding subpage contained in the target page code, it preloads the subpage data corresponding to at least one subpage and performs preprocessing operations corresponding to at least one subpage to obtain a preprocessing result. In response to a display operation, based on the preloaded subpage data corresponding to the target subpage and the preprocessing result, it renders and displays the target subpage. This embodiment can reduce the latency caused by the calculation and rendering process of the target page, thereby improving rendering performance.

[0119] Those skilled in the art will understand that, in the above-described method of the specific implementation, the order in which each step is written does not imply a strict execution order and does not constitute any limitation on the implementation process. The specific execution order of each step should be determined by its function and possible internal logic.

[0120] Based on the same inventive concept, this disclosure also provides a page rendering device corresponding to the page rendering method. Since the principle of the device in this disclosure for solving the problem is similar to the page rendering method described above in this disclosure, the implementation of the device can refer to the implementation of the method, and the repeated parts will not be described again.

[0121] Reference Figure 2 The diagram shown is a schematic representation of a page rendering apparatus provided in an embodiment of this disclosure. The apparatus includes: an acquisition module 210, a preloading module 220, and a rendering module 230; wherein,

[0122] The acquisition module 210 is configured to, in response to a triggering operation to display a target page, acquire the target page code and target page data corresponding to the target page; and, based on the target page code and the target page data, render and display the target page; and

[0123] The preloading module 220 is used to respond to the target page code carrying preloading information of at least one subpage associated with the target page, preload the subpage data corresponding to the at least one subpage based on the preloading information, and perform preprocessing operations corresponding to the at least one subpage to obtain preprocessing results.

[0124] The rendering module 230 is used to render and display the target subpage in response to a triggering operation to display the target subpage, based on the preloaded subpage data corresponding to the target subpage and the preprocessing results.

[0125] In one optional implementation, the preprocessing operation includes at least one of the following: determining the display coordinates of each component in the subpage, cleaning the subpage data, calculating the theme color, and scaling the page size.

[0126] In one alternative implementation, refer to Figure 3 The diagram shown is a detailed schematic of the acquisition module in the rendering apparatus provided in this embodiment; the acquisition module 210 includes:

[0127] The first sending unit 211 is used to send a page retrieval instruction to the client in response to the page display front end's operation that triggers the display of the target page;

[0128] The second sending unit 212 is configured to: in response to receiving the page retrieval instruction sent by the page display front-end, send the page retrieval instruction to the server; and in response to receiving the target page code and the target page data returned by the server based on the page retrieval instruction, send the target page code and the target page data to the page display front-end.

[0129] In one optional implementation, the first transmitting unit 211 is specifically used for:

[0130] Send a page data retrieval request corresponding to the target page to the client; if no target page data corresponding to the page data retrieval request or preprocessing result generated during preprocessing of the target page is received from the client within a preset time, then send the page retrieval instruction to the client.

[0131] In one alternative implementation, refer to Figure 4 The diagram shown is a detailed schematic of the preloading module in the page rendering apparatus provided in this embodiment; the preloading module 220 includes:

[0132] The third sending module 221 is used to send the preloading information to the client after the front-end of the page display determines that the target page code carries the preloading information.

[0133] The preloading unit 222 is used by the client in response to receiving the preloading information sent by the page display front end, to preload the subpage data corresponding to the at least one subpage based on the preloading information, and to perform preprocessing operations corresponding to the at least one subpage to obtain a preprocessing result.

[0134] In one optional implementation, the preloading unit 222 is specifically used for:

[0135] The client responds to receiving the preloading information sent by the page display frontend, and determines the preprocessing logic execution file corresponding to the at least one subpage based on the preloading information;

[0136] Based on the preprocessing logic execution file, the subpage data is obtained from the server, and preprocessing operations corresponding to the at least one subpage are performed to obtain the preprocessing result.

[0137] In an optional implementation, the preloading module 220 further includes:

[0138] Initialization unit 223 is used by the client to initialize the execution environment of the preprocessing logic execution file based on the language type of the preprocessing logic execution file.

[0139] In one optional implementation, the rendering module 230 is used for:

[0140] In response to triggering the display operation of the target subpage, the page display terminal sends the trigger information of the target subpage to the client;

[0141] In response to receiving the trigger information of the target subpage, the client determines the preloaded subpage data and preprocessing results corresponding to the target subpage from the preloaded subpage data and preprocessing results, and passes the preloaded subpage data and preprocessing results corresponding to the target subpage into a preset global variable.

[0142] The page display terminal responds to the detection that the global variable contains preloaded subpage data and preprocessing results corresponding to the target subpage, extracts the preloaded subpage data and preprocessing results corresponding to the target subpage from the global variable, and renders and displays the target subpage based on the preloaded subpage data and preprocessing results corresponding to the target subpage.

[0143] In response to a display operation triggering a target page, this embodiment obtains the target page code and target page data corresponding to the target page, and renders the target page. Based on the preloading information of at least one corresponding subpage contained in the target page code, it preloads the subpage data corresponding to at least one subpage and performs preprocessing operations corresponding to at least one subpage to obtain a preprocessing result. In response to a display operation, based on the preloaded subpage data corresponding to the target subpage and the preprocessing result, it renders and displays the target subpage. This embodiment can reduce the latency caused by the calculation and rendering process of the target page, thereby improving rendering performance.

[0144] The processing flow of each module in the device and the interaction flow between each module can be referred to the relevant descriptions in the above method embodiments, and will not be detailed here.

[0145] Based on the same technical concept, this disclosure also provides a computer device. (See also...) Figure 5 The diagram shows the structure of a computer device provided in this embodiment, including a processor 501, a memory 502, and a bus 503. The memory 502 stores execution instructions and includes main memory 5021 and external memory 5022. The main memory 5021, also called internal memory, is used to temporarily store computational data in the processor 501 and data exchanged with external memory such as a hard disk 5022. The processor 501 exchanges data with the external memory 5022 through the main memory 5021. When the computer device is running, the processor 501 and the memory 502 communicate through the bus 503, causing the processor 501 to execute the following instructions:

[0146] In response to an operation that triggers the display of a target page, the system obtains the target page code and target page data corresponding to the target page; based on the target page code and the target page data, it renders and displays the target page; and

[0147] In response to the fact that the target page code carries preloading information of at least one subpage associated with the target page, based on the preloading information, the subpage data corresponding to the at least one subpage is preloaded, and the preprocessing operation corresponding to the at least one subpage is performed to obtain the preprocessing result;

[0148] In response to triggering a display operation on the target subpage, the target subpage is rendered and displayed based on the preloaded subpage data corresponding to the target subpage and the preprocessing results.

[0149] This disclosure also provides a computer-readable storage medium storing a computer program, which, when executed by a processor, performs the steps of the page rendering method described in the above method embodiments. The storage medium can be a volatile or non-volatile computer-readable storage medium.

[0150] The computer program product of the page rendering method provided in this disclosure includes a computer-readable storage medium storing code logic. The instructions included in the code logic can be used to execute the steps of the page rendering method described in the above method embodiments. For details, please refer to the above method embodiments, which will not be repeated here.

[0151] This disclosure also provides a computer program that, when executed by a processor, implements any of the methods described in the foregoing embodiments. The computer program product can be implemented specifically through hardware, software, or a combination thereof. In one optional embodiment, the computer program product is specifically embodied in a computer storage medium; in another optional embodiment, the computer program product is specifically embodied in a software product, such as a software development kit (SDK), etc.

[0152] Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the specific working processes of the systems and devices described above can be referred to the corresponding processes in the foregoing method embodiments, and will not be repeated here. In the several embodiments provided in this disclosure, it should be understood that the disclosed systems, devices, and methods can be implemented in other ways. The device embodiments described above are merely illustrative. For example, the division of units is only a logical functional division; in actual implementation, there may be other division methods. Furthermore, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Another point is that the displayed or discussed mutual coupling or direct coupling or communication connection may be through some communication interfaces; the indirect coupling or communication connection of devices or units may be electrical, mechanical, or other forms.

[0153] The units described as separate components may or may not be physically separate. The components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the units can be selected to achieve the purpose of this embodiment according to actual needs.

[0154] In addition, the functional units in the various embodiments of this disclosure can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit.

[0155] If the aforementioned functions are implemented as software functional units and sold or used as independent products, they can be stored in a processor-executable, non-volatile, computer-readable storage medium. Based on this understanding, the technical solution of this disclosure, in essence, or the part that contributes to the prior art, or a portion of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods described in the various embodiments of this disclosure. The aforementioned storage medium includes various media capable of storing code logic, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

[0156] Finally, it should be noted that the above-described embodiments are merely specific implementations of this disclosure, used to illustrate the technical solutions of this disclosure, and not to limit it. The protection scope of this disclosure is not limited thereto. Although this disclosure has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that any person skilled in the art can still modify or easily conceive of changes to the technical solutions described in the foregoing embodiments, or make equivalent substitutions for some of the technical features, within the scope of the technology disclosed in this disclosure. Such modifications, changes, or substitutions do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of this disclosure, and should all be covered within the protection scope of this disclosure. Therefore, the protection scope of this disclosure should be determined by the protection scope of the claims.

Claims

1. A page rendering method, characterized in that, include: In response to the operation that triggers the display of the target page, the target page code and target page data corresponding to the target page are obtained; Based on the target page code and the target page data, the target page is rendered and displayed. The target page code corresponding to the target page is the page code required from when the browser page has no displayed information to when it is first displayed or can be interacted with. as well as In response to the fact that the target page code carries preloading information of at least one subpage associated with the target page, based on the preloading information, the subpage data corresponding to the at least one subpage is preloaded, and the preprocessing operation corresponding to the at least one subpage is performed to obtain the preprocessing result; In response to triggering a display operation on the target subpage, the target subpage is rendered and displayed based on the preloaded subpage data corresponding to the target subpage and the preprocessing results.

2. The method according to claim 1, characterized in that, The preprocessing operations include at least one of the following: determining the display coordinates of each component in the subpage, cleaning the subpage data, calculating the theme color, and scaling the page size.

3. The method according to claim 1 or 2, characterized in that, The step of responding to the operation that triggers the display of the target page, obtaining the target page code and target page data corresponding to the target page, includes: The front-end responds to the operation that triggers the display of the target page by sending a page retrieval command to the client; In response to receiving the page retrieval instruction sent by the page display frontend, the client sends the page retrieval instruction to the server; in response to receiving the target page code and the target page data returned by the server based on the page retrieval instruction, the client sends the target page code and the target page data to the page display frontend.

4. The method according to claim 3, characterized in that, The front-end of the page display responds to the operation that triggers the display of the target page by sending a page retrieval instruction to the client, including: Send a page data retrieval request corresponding to the target page to the client; if no target page data corresponding to the page data retrieval request or preprocessing result generated during preprocessing of the target page is received from the client within a preset time, then send the page retrieval instruction to the client.

5. The method according to claim 3, characterized in that, The response is that the target page code carries preloading information for at least one subpage associated with the target page. Based on the preloading information, the subpage data corresponding to the at least one subpage is preloaded, and preprocessing operations corresponding to the at least one subpage are performed to obtain a preprocessing result, including: The front-end of the page display determines that the target page code carries the preloading information and sends the preloading information to the client. The client responds to receiving the preloading information sent by the page display frontend, preloads the subpage data corresponding to the at least one subpage based on the preloading information, and performs preprocessing operations corresponding to the at least one subpage to obtain the preprocessing result.

6. The method according to claim 5, characterized in that, The client responds to receiving the preloading information sent by the page display frontend, and based on the preloading information, preloads the subpage data corresponding to the at least one subpage, and performs preprocessing operations corresponding to the at least one subpage to obtain preprocessing results, including: The client responds to receiving the preloading information sent by the page display frontend, and determines the preprocessing logic execution file corresponding to the at least one subpage based on the preloading information; Based on the preprocessing logic execution file, the subpage data is obtained from the server, and preprocessing operations corresponding to the at least one subpage are performed to obtain the preprocessing result.

7. The method according to claim 6, characterized in that, Before obtaining the subpage data from the server and performing preprocessing operations corresponding to the at least one subpage based on the preprocessing logic execution file to obtain the preprocessing result, the method further includes: The client initializes the execution environment of the preprocessing logic executable file based on the language type of the preprocessing logic executable file.

8. The method according to claim 3, characterized in that, The response to triggering the display operation of the target subpage, based on the preloaded subpage data corresponding to the target subpage and the preprocessing results, renders and displays the target subpage, including: The front-end of the page display responds to the operation of displaying the target subpage by sending the triggering information of the target subpage to the client; In response to receiving the trigger information of the target subpage, the client determines the preloaded subpage data and preprocessing results corresponding to the target subpage from the preloaded subpage data and preprocessing results, and passes the preloaded subpage data and preprocessing results corresponding to the target subpage into a preset global variable. The front-end responds to the detection that the global variable contains preloaded subpage data and preprocessing results corresponding to the target subpage. It then extracts the preloaded subpage data and preprocessing results corresponding to the target subpage from the global variable and renders and displays the target subpage based on the preloaded subpage data and preprocessing results.

9. A page rendering device, characterized in that, include: The acquisition module is used to acquire the target page code and target page data corresponding to the target page in response to the operation that triggers the display of the target page; Based on the target page code and the target page data, the target page is rendered and displayed. The target page code corresponding to the target page is the page code required from when the browser page has no displayed information to when it is first displayed or can be interacted with. as well as The preloading module is used to respond to the target page code carrying preloading information of at least one subpage associated with the target page, preload the subpage data corresponding to the at least one subpage based on the preloading information, and perform preprocessing operations corresponding to the at least one subpage to obtain preprocessing results. The rendering module is used to respond to a triggering operation to display the target subpage, and to render and display the target subpage based on the preloaded subpage data corresponding to the target subpage and the preprocessing results.

10. A computer device, characterized in that, include: The computer device includes a processor, a memory, and a bus, wherein the memory stores machine-readable instructions executable by the processor, and the processor communicates with the memory via the bus when the computer device is running, and the machine-readable instructions, when executed by the processor, perform the steps of the page rendering method as described in any one of claims 1 to 8.

11. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program that, when executed by a processor, performs the steps of the page rendering method as described in any one of claims 1 to 8.

Images