Method, apparatus, device, storage medium, and program product for page rendering

Abstract

The present application discloses a method, apparatus, device, storage medium and program product for page rendering. When the method is applied to the main thread, it includes: when an interface request from a service module is received, initiating a page request to the server side based on the interface request, and the page request includes a target URL; receiving first response data returned by a service worker thread based on the page request, where the first response data is cached data obtained from a cache database by the service worker thread after intercepting the page request and determining that the target URL is a specified URL; transmitting the first response data back to the service module for the service module to perform the first page rendering; receiving second response data returned by the service worker thread based on the page request, where the second response data is data received by the service worker thread from the server after sending the page request to the server; transmitting the second response data back to the service module for the service module to perform the second page rendering, so as to respond to the page request earlier and shorten the waiting time of the user.

Description

Technical Field

[0001] This application relates to the technical field of web data processing, and in particular, to a method for page rendering, a device for page rendering, an electronic device, a computer-readable storage medium, and a computer program product. Background Art

[0002] In some overseas projects, due to the poor network conditions and client devices in some countries, the time consumed by network requests is relatively long during page loading. Although static resources can be optimized through CDN or client caching solutions, interface requests still take a lot of time. Summary of the Invention

[0003] This application provides a method, a device, a device, a storage medium, and a program product for page rendering to solve the problem that interface requests consume a lot of time in the prior art.

[0004] In a first aspect, an embodiment of this application provides a method for page rendering. The method is applied to the main thread of a browser and includes:

[0005] When an interface request from a service module is received, a page request is initiated to the server based on the interface request. The page request includes the target URL corresponding to the requested interface.

[0006] Receive first response data returned by a service worker thread based on the page request. The first response data is cached data obtained from a preset cache database by the service worker thread after intercepting the page request and determining that the target URL is a specified URL.

[0007] Return the first response data to the service module so that the service module uses the first response data for the first page rendering.

[0008] Receive second response data returned by the service worker thread based on the page request. The second response data is data received by the service worker thread from the server after sending the page request to the server.

[0009] Return the second response data to the service module so that the service module uses the second response data for the second page rendering.

[0010] In a second aspect, an embodiment of this application further provides a method for page rendering. The method is applied to a service worker thread and includes:

[0011] Intercept a page request sent by the main thread of the browser and determine whether the target URL address in the page request is a specified URL address.

[0012] If the target URL address in the page request is the specified URL address, obtain the cached data corresponding to the target URL address in the preset cache database, and send the cached data to the main thread as the first response data, where the first response data is used for the first page rendering;

[0013] Obtain the second response data from the server according to the page request;

[0014] Send the second response data to the main thread, where the second response data is used for re-page rendering.

[0015] In a third aspect, an embodiment of the present application further provides a page rendering device, which is applied to the main thread of a browser, and the device includes:

[0016] A page request initiation unit, configured to initiate a page request to the server side based on the interface request when receiving an interface request from a service module, where the page request includes the target URL corresponding to the requested interface;

[0017] A first response data receiving unit, configured to receive the first response data returned by the service worker thread based on the page request, where the first response data is the cached data obtained by the service worker thread from the preset cache database after intercepting the page request and determining that the target URL is the specified URL;

[0018] A first response data backhaul unit, configured to backhaul the first response data to the service module so that the service module uses the first response data for the first page rendering;

[0019] A second response data receiving unit, configured to receive the second response data returned by the service worker thread based on the page request, where the second response data is the data received by the service worker thread after sending the page request to the server;

[0020] A second response data backhaul unit, configured to backhaul the second response data to the service module so that the service module uses the second response data for re-page rendering.

[0021] In a fourth aspect, an embodiment of the present application further provides a page rendering device, which is applied to a service worker thread, and the device includes:

[0022] A request interception unit, configured to intercept a page request sent by the main thread of the browser and determine whether the target URL address in the page request is the specified URL address;

[0023] A first response unit, configured to, if a target URL address in the page request is a specified URL address, obtain cached data corresponding to the target URL address in a preset cache database, and send the cached data to the main thread as first response data for first page rendering;

[0024] A second response unit, configured to obtain second response data from a server according to the page request, and send the second response data to the main thread for second page rendering.

[0025] In a fifth aspect, an embodiment of the present application further provides an electronic device, including:

[0026] One or more processors;

[0027] A storage device for storing one or more programs,

[0028] When the one or more programs are executed by the one or more processors, the one or more processors implement the method of the first aspect or the second aspect as described above.

[0029] In a sixth aspect, an embodiment of the present application further provides a computer-readable storage medium, on which a computer program is stored, and when the program is executed by a processor, the method of the first aspect or the second aspect as described above is implemented.

[0030] In a seventh aspect, an embodiment of the present application further provides a computer program product, including computer-executable instructions, which are used to implement the method of the first aspect or the second aspect as described above when executed.

[0031] The technical solution provided by the present application has the following beneficial effects:

[0032] In this embodiment, after the browser main thread generates a page request by sending an interface request for a service module to the server side, the page request is intercepted by the service worker thread. The service worker thread looks up the corresponding cached data in the cache database according to the target URL in the page request and returns it to the main thread as the first response data for passing back to the service module for first rendering. At the same time, the service worker thread continues to request the second response data from the server and returns the second response data to the main thread for passing back to the service module for second rendering. By first performing interface response based on the old cached data and also sending an interface request to the server side, and then performing page rendering again after the server returns the response data, this processing can render the main data earlier, and the user does not need to wait due to the long time-consuming interface request, shortening the user's waiting time and improving the page rendering efficiency. BRIEF DESCRIPTION OF THE DRAWINGS

[0033] Figure 1 is a flowchart of an embodiment of a method for page rendering provided in Embodiment 1 of the present application;

[0034] Figure 2 is a schematic diagram of the communication architecture between the Service worker and the browser side and the server side provided in Embodiment 1 of the present application;

[0035] Figure 3 is a schematic diagram of the first rendering of a game category page provided in Embodiment 1 of the present application;

[0036] Figure 4 is a schematic diagram of the re - rendering of a game category page provided in Embodiment 1 of the present application;

[0037] Figure 5 is a flowchart of an embodiment of a method for page rendering provided in Embodiment 2 of the present application;

[0038] Figure 6 is a flowchart of an embodiment of a method for page rendering provided in Embodiment 3 of the present application;

[0039] Figure 7 is a block diagram of the structure of an embodiment of a device for page rendering provided in Embodiment 4 of the present application;

[0040] Figure 8 is a block diagram of the structure of an embodiment of a device for page rendering provided in Embodiment 5 of the present application;

[0041] Figure 9 is a schematic diagram of the structure of an electronic device provided in Embodiment 6 of the present application. DETAILED DESCRIPTION OF THE EMBODIMENTS

[0042] The present application will be further described in detail below with reference to the drawings and embodiments. It can be understood that the specific embodiments described herein are only for explaining the present application and not for limiting the present application. Additionally, it should be noted that for the sake of description, only parts related to the present application are shown in the drawings rather than all the structures.

[0043] Embodiment 1

[0044] Figure 1 is a flowchart of an embodiment of a method for page rendering provided in Embodiment 1 of the present application. This embodiment can be applied to the main thread of the browser. The main thread can communicate with the service worker thread Service worker. Here, Service worker is a browser - side proxy script written in Javascript, such as Figure 2As shown, the Service worker is located between the browser side and the server side and can act as a proxy server between the browser side and the server side. The Service worker is event-based and is only loaded into memory when processing events. When a page registers a Service worker, a series of event handlers can be registered to respond to events such as network requests and message pushes. The Service worker can also be used to manage caching. For example, when responding to a network request, it can be configured to return cached data or fetch data from the network.

[0045] To implement the caching management of interface requests in the browser, a listener for the posetMessage() information sent by the Service worker can be added in the main thread of the browser, and the Fetch event of the main thread can be listened and intercepted in the Service worker. Among them, the Fetch API provides a JavaScript interface for accessing and manipulating parts of the HTTP pipeline, such as requests and responses; it also provides a global fetch() method, which provides a simple and reasonable way to asynchronously fetch resources across the network.

[0046] As Figure 1 shown, this embodiment may include the following steps:

[0047] Step 110, when an interface request from the service module is received, a page request is initiated to the server side based on the interface request, and the page request includes the target URL corresponding to the requested interface.

[0048] In one implementation, when the user requests to access a page, the specific service module sends an interface request to the main thread of the browser and passes in fn1 as the method to be called after the request response. After receiving the interface request, the main thread can initiate a page request to the server side through the Fetch API. Exemplarily, the target URL corresponding to the requested interface and other optional parameters are carried in the page request.

[0049] Of course, the main thread can also send a page request through other methods, such as Ajax, Axios, etc., and this embodiment does not limit this.

[0050] Step 120, receive the first response data returned by the service worker thread based on the page request.

[0051] Among them, the first response data is the cached data obtained from the preset cache database by the Service worker when it intercepts the page request and determines that its target URL is the specified URL.

[0052] Specifically, the page requests sent by the main thread will be intercepted by the Service worker. Then, in the Service worker, it is determined whether the target URL carried by the page request is the specified URL that needs to be cached. In one implementation, a whitelist of URL addresses can be pre-configured. If the target URL exists in the whitelist of URL addresses, then the target URL is determined to be the specified URL. The whitelist of URL addresses can be stored in the cache.

[0053] If the Service worker determines that the current target URL is the specified URL, it can look up the target URL and other parameters in the cache database to obtain the cache data corresponding to the target URL. Then, the cache data is used as the first response data, and the first response data is returned to the main thread through posetMessage().

[0054] In one implementation, the cache data corresponding to the URL cached in the cache database can be the data loaded from the server when the URL was last requested.

[0055] Step 130, the first response data is passed back to the service module, so that the service module uses the first response data for the first page rendering.

[0056] Specifically, when the main thread listens to posetMessage(), it can extract the first response data from posetMessage(). Then, the main thread executes the callback function fn1 to return the first response data to the service module, and the service module completes the first rendering of the page based on the first response data.

[0057] Among them, the first page rendering can be the rendering of some basic data of the page. This part of the basic data can be interface data that will not change in a short time. For example, for pages such as game category pages and article comment pages, some page data will not change in a short time and generally only increase. If relevant interface data that will not change in a short time can be cached in the Service worker, the page can be quickly loaded. In Google's performance metrics, the earlier the main content appears, the better the user experience will be, and the corresponding loading performance metrics will also be better. Therefore, rendering the page in advance based on the cache data can bring a better experience to the user and also improve the page loading performance metrics to a certain extent.

[0058] Furthermore, the first response data of the first rendering can be the response data cached when the current page was last requested and retrieved from the server. Based on the data from the previous request, the first page rendering of the current request is performed, thereby avoiding the waiting state of a blank page caused by the long time-consuming interface request from the server and improving the user experience.

[0059] Step 140, receive the second response data returned by the service worker thread based on the page request.

[0060] Among them, the second response data is the data received by the Service worker from the server after sending the page request to the server. Specifically, regardless of whether the Service worker can obtain the first response data, it is necessary to request response data from the server based on the page request, and after receiving the response data returned by the server, use this response data as the second response data and send it to the main thread through posetMessage(). After the main thread listens to posetMessage(), the second response data is extracted from it.

[0061] Step 150, pass the second response data back to the business module so that the business module uses the second response data for re-page rendering.

[0062] In one implementation, after the main thread obtains the second response data, the callback function fn1 is executed again to return the second response data to the business module. The business module completes the re-page rendering based on this second response data, thereby realizing the update of the page rendered for the first time.

[0063] It should be noted that if the first response data is the same as the second response data, the pages of the first page rendering and the re-page rendering are the same. Generally speaking, there will be differences between the first response data and the second response data, resulting in slightly different pages for the two renderings. For example, in a request for a game category page, Figure 3 is the page for the first rendering, Figure 4 is the page for the re-rendering. From the comparison of the two, it can be seen that the difference between the pages of the two renderings is relatively small. Then, most of the page content can be displayed to the user during the first rendering. For the user, the page content can be seen earlier, shortening the user's waiting time, thereby improving the rendering efficiency.

[0064] In this embodiment, after the browser main thread generates a page request by sending an interface request for a service module to the server side, the page request is intercepted by the service worker thread. The service worker thread looks up the corresponding cached data from the cache database according to the target URL in the page request and returns it to the main thread as the first response data. The first response data is used to be passed back to the service module for initial rendering. At the same time, the service worker thread continues to request the second response data from the server and returns the second response data to the main thread. The second response data is used to be passed back to the service module for re-rendering. By first making an interface response based on the old cached data and also making an interface request to the server side, and then re-rendering the page after the server returns the response data, such processing can render the main data earlier, and the user does not need to wait due to the long time-consuming interface request, shortening the user's waiting time and improving the page rendering efficiency.

[0065] Embodiment 2

[0066] Figure 5 FIG. is a flowchart of a method embodiment for page rendering provided in Embodiment 2 of this application. This embodiment provides a more specific description based on Embodiment 1. Embodiment 1 basically realizes the process of interface caching. However, in the actual implementation process, most projects use the promise-based method for requests and responses. A Promise, simply speaking, is a container that holds the result of an event that will end in the future (usually an asynchronous operation). Syntactically, a Promise is an object from which the message of an asynchronous operation can be obtained. Promise provides a unified API, and various asynchronous operations can be processed in the same way. For example, assume that the code of a service module based on a Promise object is as follows:

[0067] Model.getLiveRoomList().then(data=>(renderLiveRoom(data)))

[0068] That is, it calls a specific interface request method (getLiveRoomList) in the api module (Model), which will return a native promise. When the interface returns, the method passed in the then (i.e., fn1 in Embodiment 1) will be executed. Then, after obtaining the data (data), the data is passed into the corresponding processing method (data). The specification of the native promise in JavaScript determines that renderLiveRoom will only be executed once and cannot meet the requirement of being executed multiple times. In order to enable fn1 to be executed more than once in this embodiment, the underlying request part of the api module is optimized to implement an operation that can load then multiple times.

[0069] As Figure 5 shown, this embodiment may include the following steps:

[0070] Step 510, when an interface request from a service module is received, obtain a promise object from the interface request, and the promise object includes a then response method.

[0071] In one implementation, when a user requests to access a page, a specific service module issues an interface request to the browser main thread. The interface request may include a promise object, and the promise object may include a then response method for use after the request is responded to. The main thread extracts the corresponding promise object by parsing the interface request.

[0072] Step 520, store the then response method in a pre-generated global queue, and obtain the storage identifier of the then response method in the global queue.

[0073] In this step, after the then response method is extracted from the promise object, the then response method can be stored in the pre-generated global queue ApiHandleMap, and the storage identifier of the then response method in the ApiHandleMap is obtained.

[0074] In one example, in ApiHandleMap, the storage identifier can be used as the key, and the corresponding then response method can be used as the value, and the then response method is stored in the form of a key-value pair. Among them, the storage identifier can adopt various identifier forms that can uniquely identify the then response method in ApiHandleMap. For example, a globally incrementing variable starting from 0 can be used as the key field to determine the key value of each record in the queue.

[0075] Step 530, add the storage identifier to the page request and send the page request, where the page request carries the storage identifier and the target URL corresponding to the requested interface.

[0076] In one implementation, when the browser main thread can initiate a page request to the server through the Fetch API, the page request can carry the target URL corresponding to the requested interface, the storage identifier, and other optional parameters.

[0077] Step 540, receive the first response data returned by the service worker thread based on the page request, and the first response data carries the storage identifier.

[0078] Among them, the first response data is the cached data retrieved from a preset cache database by the service worker thread when it determines that the target URL is a specified URL after intercepting the page request.

[0079] Specifically, the page request sent by the main thread is intercepted by the Service worker. Then, in the Serviceworker, it is judged whether the target URL is a specified URL. If it is determined that the current target URL is a specified URL, the target URL and other parameters can be searched in the cache database to obtain the cached data corresponding to the target URL. Then, the cached data is used as the first response data, and the first response data and the corresponding storage identifier are returned to the main thread through posetMessage().

[0080] In the main thread, a listener for the publish message posetMessage() of the Service worker can be added in advance. When the main thread listens to this posetMessage(), the storage identifier and the first response data can be extracted from the posetMessage().

[0081] Step 550: Search for the storage identifier in the global queue to obtain the corresponding then response method, and call the then response method to pass the first response data back to the service module, and the service module uses the first response data for the first page rendering.

[0082] Specifically, after the main thread obtains the storage identifier, it can search in the ApiHandleMap according to the extracted storage identifier to locate the data record where the storage identifier is located, and obtain the corresponding then response method from the data record. Then, the then response method is called to perform a callback operation to pass the first response data back to the service module, and the service module performs the first page rendering based on the first response data.

[0083] Step 560: Receive the second response data returned by the service worker thread based on the page request, and the second response data carries the storage identifier.

[0084] Among them, the second response data is the data received by the service worker thread after sending the page request to the server.

[0085] Specifically, regardless of whether the Service worker can obtain the first response data, it can request response data from the server based on the page request. After receiving the response data returned by the server, the response data is used as the second response data, and the second response data and the received storage identifier are sent to the main thread through posetMessage(). After the main thread listens to posetMessage(), the second response data and the storage identifier are extracted from it.

[0086] Step 570, search for the storage identifier in the global queue to obtain the corresponding then response method, and call the then response method to pass the second response data back to the service module, and the service module uses the second response data for re-page rendering.

[0087] Specifically, after the main thread obtains the storage identifier and the second response data, it can search again in the ApiHandleMap according to the extracted storage identifier to locate the data record where the storage identifier is located, and obtain the corresponding then response method from the data record, and then call the then response method to perform a callback operation to pass the second response data back to the service module, and the service module performs re-page rendering based on the second response data.

[0088] In one embodiment, this embodiment may further include the following steps:

[0089] After the page rendering is completed, the then response method is deleted in the global queue.

[0090] After the page rendering is completed, the main thread can search in the ApiHandleMap according to the storage identifier, so as to delete the record where the storage identifier is located, including deleting the corresponding then response method and the storage identifier, so as to reduce memory occupation.

[0091] Among them, after the main thread listens to the completion of the service module's re-page rendering, it can determine that the page rendering is completed.

[0092] In related technologies, the usage of Service worker is to implement offline applications. That is, the static resources requested in Service worker are intercepted, and then it is judged whether there is a cache. If there is a cache, it can be directly returned, reducing the necessity of network requests. However, if Service worker is directly used for interface requests, the problem of page update cannot be solved. Therefore, in this embodiment, fetch and promise are optimized. By setting up a global queue, the then response method in the promise object is stored in the global queue and a storage identifier is obtained. Subsequently, this storage identifier is carried during both requests and responses. According to this storage identifier, the main thread can find the corresponding then response method in the global queue and execute it, thus implementing an operation that can load then multiple times. And the overall modified part is less, only the interface request layer needs to be modified, which is easy to implement.

[0093] Embodiment 3

[0094] Figure 6 The flowchart of a method embodiment for page rendering provided by Embodiment 3 of this application. This embodiment is described from the Service worker side and may include the following steps:

[0095] Step 610, intercept the page request sent by the main thread of the browser, and judge whether the target URL address in the page request is a specified URL address.

[0096] Specifically, the requests sent by the main thread can be listened and intercepted on the Service worker side. Exemplarily, this request can be a Fetch operation request. When the Service worker intercepts this page request, the target URL can be extracted from this page request, and it is judged whether this target URL is the specified URL that needs to be cached.

[0097] In one implementation, a whitelist of URL addresses can be preconfigured. If the target URL exists in this whitelist of URL addresses, it is determined that this target URL is the specified URL. This whitelist of URL addresses can be stored in the cache.

[0098] By configuring the whitelist of URL addresses, some interfaces that require high precision and are updated frequently, such as URLs of live room information, can be removed.

[0099] Step 620, if the target URL address in the page request is the specified URL address, obtain the cache data corresponding to the target URL address in the preset cache database, and send the cache data to the main thread as the first response data, where the first response data is used for the first page rendering.

[0100] In this step, if the Service worker determines that the current target URL is the specified URL, it can look up the target URL and other parameters in the cache database to obtain the cache data corresponding to the target URL. Then, it takes the cache data as the first response data and returns the first response data to the main thread through postMessage().

[0101] Among them, the cache database is used to store the cache data of the browser's interface requests. Exemplarily, the cache database can include data storage forms such as IndexedDB or Cache Storage, etc.

[0102] In one embodiment, if the page request intercepted by the Service worker carries a storage identifier, the Service worker also needs to carry the storage identifier when returning the response data (including the first response data), so that the main thread can perform relevant callback operations based on the storage identifier.

[0103] Step 630, obtain second response data from the server according to the page request.

[0104] Specifically, if the target URL address in the page request is not the specified URL address, step 630 can be directly executed. Or, if the cache data corresponding to the target URL address does not exist in the cache database, step 630 is also directly executed. Or, after returning the first response data to the main thread, step 630 still needs to be continued. That is to say, whether the Service worker successfully obtains and returns the first response data or not, step 630 will continue to be executed, sending the page request to the server. After receiving the response data returned by the server, the response data is taken as the second response data.

[0105] Step 640, send the second response data to the main thread, and the second response data is used for re-rendering the page.

[0106] After the Service worker obtains the second response data returned by the server, it can send the second response data to the main thread through postMessage(), and the second response data is used for re-rendering the page.

[0107] In one embodiment, if the page request carries a storage identifier, the Service worker also needs to carry the storage identifier when returning the second response data, so that the main thread can perform relevant callback operations based on the storage identifier.

[0108] In one embodiment, if the currently intercepted target URL is a specified URL, it means that the second response data corresponding to the URL needs to be cached, so that the second response data can be stored as cache data in the cache database to update the previous cache data in the cache database.

[0109] In this embodiment, interface data caching is implemented in the Service worker. When the Service worker intercepts a page request from the browser main thread, it can first search the cache database for cache data for the page request, and return the cache data to the main thread after finding the cache data, thereby achieving an early response, saving the time consumed in obtaining response data from the server, and improving the timeliness of page rendering.

[0110] Example 4

[0111] Figure 7 This is a structural block diagram of an embodiment of a page rendering device provided in the fourth embodiment of the present application. The device can be applied to the main thread of the browser and may include the following units:

[0112] The page request initiating unit 710 is configured to, upon receiving an interface request from a business module, initiate a page request to the server based on the interface request, wherein the page request includes a target URL corresponding to the requested interface;

[0113] A first response data receiving unit 720 is configured to receive first response data returned by the service worker thread based on the page request, where the first response data is cache data obtained from a preset cache database when the service worker thread intercepts the page request and determines that the target URL is a specified URL;

[0114] A first response data returning unit 730 is configured to return the first response data to the business module, so that the business module uses the first response data to perform an initial page rendering;

[0115] A second response data receiving unit 740 is configured to receive second response data returned by the service worker thread based on the page request, where the second response data is data returned by the server after the service worker thread sends the page request to the server;

[0116] The second response data returning unit 750 is configured to return the second response data to the business module, so that the business module uses the second response data to perform page rendering again.

[0117] In one embodiment, the apparatus may further include the following units:

[0118] A promise object acquisition unit, configured to acquire a promise object from the interface request, where the promise object includes a then response method;

[0119] A queue storage unit, configured to store the then response method into a pre-generated global queue, and acquire a storage identifier of the then response method in the global queue;

[0120] An identifier addition unit, configured to add the storage identifier to the page request.

[0121] In one embodiment, the first response data carries the storage identifier;

[0122] The first response data transmission unit 730 is specifically configured to:

[0123] Search for the storage identifier in the global queue to obtain the corresponding then response method;

[0124] Invoke the then response method to transmit the first response data back to the service module.

[0125] In one embodiment, the apparatus may further include the following unit:

[0126] A data deletion unit, configured to delete the then response method and the corresponding storage identifier in the global queue after page rendering is completed.

[0127] In one embodiment, the apparatus may further include the following unit:

[0128] An information monitoring unit, configured to add monitoring of the published information of the service worker thread in the main thread;

[0129] The first response data receiving unit 720 is specifically configured to:

[0130] When the published information of the service worker thread is monitored, extract the first response data from the published information.

[0131] The page rendering apparatus provided by an embodiment of the present application can execute the page rendering method in Embodiment 1 or Embodiment 2 of the present application, and has corresponding functional modules and beneficial effects for executing the method.

[0132] Embodiment 5

[0133] Figure 8 It is a structural block diagram of an apparatus embodiment for page rendering provided by Embodiment 5 of the present application. The apparatus is applied to a service worker thread and may include the following units:

[0134] A request interception unit 810 is configured to intercept page requests sent by the main thread of a browser and determine whether the target URL address in the page request is a specified URL address;

[0135] A first response unit 820 is configured to, if the target URL address in the page request is a specified URL address, obtain cached data corresponding to the target URL address from a preset cache database and send the cached data as first response data to the main thread, where the first response data is used for initial page rendering;

[0136] A second response unit 830 is configured to obtain second response data from a server according to the page request and send the second response data to the main thread, where the second response data is used for subsequent page rendering.

[0137] In one embodiment, the apparatus may further include the following unit:

[0138] A cached data update unit is configured to store the second response data as cached data in the cache database to update the prior cached data in the cache database.

[0139] In one embodiment, if the page request carries a storage identifier, the storage identifier is carried when returning the first response data or the second response data.

[0140] The apparatus for page rendering provided by an embodiment of the present application can execute a method for page rendering in Embodiment 3 of the present application, and has corresponding functional modules and beneficial effects for executing the method.

[0141] Embodiment 6

[0142] Figure 9 As shown in the schematic structural diagram of an electronic device provided for Embodiment 6 of the present application, Figure 9 the electronic device includes a processor 910, a memory 920, an input device 930, and an output device 940; the number of processors 910 in the electronic device may be one or more, Figure 9 taking one processor 910 as an example; the processor 910, the memory 920, the input device 930, and the output device 940 in the electronic device may be connected through a bus or other means, Figure 9 taking the connection through a bus as an example.

[0143] The memory 920 serves as a computer-readable storage medium and can be used to store software programs, computer-executable programs, and modules, such as the program instructions / modules corresponding to the above-mentioned Embodiment 1, Embodiment 2, or Embodiment 3 in the embodiments of the present application. The processor 910 executes various functional applications and data processing of the electronic device by running the software programs, instructions, and modules stored in the memory 920, that is, to implement the methods described in the above Method Embodiment 1, Method Embodiment 2, or Method Embodiment 3.

[0144] The memory 920 mainly includes a program storage area and a data storage area. Among them, the program storage area can store an operating system and application programs required for at least one function; the data storage area can store data created according to the use of the terminal, etc. In addition, the memory 920 can include high-speed random access memory, and can also include non-volatile memory, such as at least one magnetic disk storage device, a flash memory device, or other non-volatile solid-state storage devices. In some instances, the memory 920 can further include a memory remotely set relative to the processor 910, and these remote memories can be connected to the device / terminal / server through a network. Examples of the above network include but are not limited to the Internet, enterprise intranets, local area networks, mobile communication networks, and their combinations.

[0145] The input device 930 can be used to receive input digital or character information, and generate key signal inputs related to the user settings and function controls of the electronic device. The output device 940 can include display devices such as a display screen.

[0146] Embodiment 7

[0147] The embodiments of the present application in Embodiment 7 also provide a storage medium containing computer-executable instructions, and the computer-executable instructions are used to execute the method of any one of the above Method Embodiments 1 to 3 when executed by a computer processor.

[0148] Of course, for a storage medium containing computer-executable instructions provided by the embodiments of the present application, the computer-executable instructions are not limited to the above-mentioned method operations, and can also execute related operations in the methods provided by any embodiment of the present application.

[0149] Embodiment 8

[0150] The embodiments of the present application in Embodiment 8 also provide a computer program product, and the computer program product includes computer-executable instructions, and the computer-executable instructions are used to execute the method of any one of the above Method Embodiments 1 to 3 when executed by a computer processor.

[0151] Certainly, for a computer program product provided by an embodiment of the present application, the computer-executable instructions are not limited to the method operations described above, and can also execute related operations in the methods provided by any embodiment of the present application.

[0152] From the above description of the embodiments, those skilled in the art can clearly understand that the present application can be implemented by means of software and necessary general hardware. Of course, it can also be implemented by hardware, but in many cases the former is a better implementation method. Based on such an understanding, the technical solution of the present application, in essence or the part that contributes to the prior art, can be embodied in the form of a software product. This computer software product can be stored in a computer-readable storage medium, such as a floppy disk, read-only memory (ROM), random access memory (RAM), flash memory (FLASH), hard disk or optical disc of a computer, etc., including several instructions for causing an electronic device (which can be a personal computer, a server, or a network device, etc.) to execute the methods described in various embodiments of the present application.

[0153] It should be noted that in the embodiments of the above device, the various units and modules included are only divided according to functional logic, but are not limited to the above division, as long as the corresponding functions can be realized; in addition, the specific names of the functional units are only for the convenience of mutual distinction and do not limit the protection scope of the present application.

[0154] Note that the above is only a preferred embodiment of the present application and the applied technical principle. Those skilled in the art will understand that the present application is not limited to the specific embodiments described herein, and various obvious changes, re-adjustments and substitutions can be made by those skilled in the art without departing from the protection scope of the present application. Therefore, although the present application has been described in detail through the above embodiments, the present application is not limited to the above embodiments. Without departing from the concept of the present application, more other equivalent embodiments can be included, and the scope of the present application is determined by the scope of the appended claims.

Claims

1. A page rendering method, characterized in that: The method is applied in the main thread of the browser, and the method includes: When an interface request from a business module is received, a promise object is obtained from the interface request, the promise object including a then response method; the then response method is stored in a pre-generated global queue, and a storage identifier of the then response method in the global queue is obtained; the storage identifier is added to a page request, and a page request is initiated to the server based on the interface request, the page request including a target URL corresponding to the requested interface; receiving first response data returned by the service worker thread based on the page request, where the first response data is cache data obtained from a preset cache database when the service worker thread intercepts the page request and determines that the target URL is a specified URL; The first response data is transmitted back to the business module, so that the business module uses the first response data to perform an initial page rendering; wherein the initial page rendering is the rendering of interface data that will not change in a short period of time; receiving second response data returned by the service worker thread based on the page request, where the second response data is data returned by the server after the service worker thread sends the page request to the server; The second response data is transmitted back to the business module, so that the business module uses the second response data to perform page rendering again.

2. The method according to claim 1, characterized in that The first response data carries the storage identifier; The returning the first response data to the business module includes: Searching the storage identifier in the global queue to obtain the corresponding then response method; The then response method is called to return the first response data to the business module.

3. The method according to claim 1 or 2, characterized in that The method further comprises: After the page rendering is completed, the then response method and the corresponding storage identifier are deleted from the global queue.

4. The method according to any one of claims 1 to 2, characterized in that Before receiving the first response data returned by the service worker thread based on the page request, the method further includes: Add a listener for the publishing information of the service worker thread in the main thread; The receiving service worker thread returns first response data based on the page request, including: When the publishing information of the service worker thread is monitored, the first response data is extracted from the publishing information.

5. A page rendering method, characterized in that: The method is applied to a service worker thread and includes: Intercepting a page request sent by a main thread of a browser and determining whether a target URL address in the page request is a specified URL address; the page request carries a storage identifier; the storage identifier is obtained by: when the main thread of the browser receives an interface request from a business module, obtaining a promise object from the interface request, the promise object including a then response method; storing the then response method in a pre-generated global queue, obtaining a storage identifier of the then response method in the global queue; and adding the storage identifier to the page request; If the target URL address in the page request is a specified URL address, cache data corresponding to the target URL address is obtained from a preset cache database, and the cache data is sent to the main thread as first response data, and the first response data is used for initial page rendering; wherein the initial page rendering is the rendering of interface data that will not change in a short period of time; Obtaining second response data from the server according to the page request; The second response data is sent to the main thread, and the second response data is used for re-rendering the page.

6. The method according to claim 5, characterized in that After obtaining the second response data from the server according to the page request, the method further includes: The second response data is stored as cache data in the cache database to update the previous cache data in the cache database.

7. The method according to claim 5 or 6, characterized in that The storage identifier is carried when the first response data or the second response data is returned.

8. A device for page rendering, characterized in that: The device is applied to the main thread of the browser, and includes: A page request initiating unit, configured to, upon receiving an interface request from a business module, initiate a page request to a server based on the interface request, wherein the page request includes a target URL corresponding to the requested interface; a first response data receiving unit, configured to receive first response data returned by the service worker thread based on the page request, the first response data being cache data obtained from a preset cache database when the service worker thread intercepts the page request and determines that the target URL is a specified URL; a first response data transmission unit, configured to transmit the first response data back to the business module, so that the business module uses the first response data to perform an initial page rendering; wherein the initial page rendering is the rendering of interface data that will not change in a short period of time; a second response data receiving unit, configured to receive second response data returned by the service worker thread based on the page request, wherein the second response data is data returned by the server after the service worker thread sends the page request to the server; a second response data returning unit, configured to return the second response data to the business module, so that the business module uses the second response data to perform page rendering again; The device further comprises: A promise object acquisition unit, configured to acquire a promise object from the interface request, wherein the promise object includes a then response method; A queue storage unit, configured to store the then response method in a pre-generated global queue and obtain a storage identifier of the then response method in the global queue; The identifier adding unit is used to add the storage identifier to the page request.

9. A device for page rendering, characterized in that: The device is applied to a service work thread, and the device includes: A request interception unit is configured to intercept a page request sent by a main thread of a browser and determine whether a target URL in the page request is a specified URL; the page request carries a storage identifier; the storage identifier is obtained by: when the main thread of the browser receives an interface request from a business module, obtaining a promise object from the interface request, the promise object including a then response method; storing the then response method in a pre-generated global queue, obtaining a storage identifier of the then response method in the global queue; and adding the storage identifier to the page request; a first response unit configured to, if the target URL in the page request is a specified URL, obtain cache data corresponding to the target URL from a preset cache database, and send the cache data as first response data to the main thread, wherein the first response data is used for performing an initial page rendering; wherein the initial page rendering is the rendering of interface data that will not change within a short period of time; The second response unit is used to obtain second response data from the server according to the page request and send the second response data to the main thread, where the second response data is used to perform page rendering again.

10. An electronic device, characterized in that: The electronic device comprises: one or more processors; a storage device for storing one or more programs, When the one or more programs are executed by the one or more processors, the one or more processors implement the method according to any one of claims 1 to 7.

11. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the program is executed by a processor, the method according to any one of claims 1 to 7 is implemented.

12. A computer program product, comprising computer executable instructions, wherein the computer executable instructions are used to implement the method according to any one of claims 1 to 7 when executed.

Images