Page loading method and device, electronic equipment and computer readable storage medium

Abstract

The present application relates to a page loading method and device, electronic equipment and computer readable storage medium, the method comprises: in response to the current display page comprising a first option, determine the first page; the first page corresponds to the first option; determine the first cache level; the first cache level corresponds to the first page; the first cache level is used to indicate the loading progress when the first page is preloaded; based on the first cache level, the first page is preloaded to obtain the first cache data; in response to the trigger operation of the first option, based on the first cache data, the first page view rendering result is obtained; the first page view rendering result corresponds to the first page; the first page view rendering result is displayed. In this way, the waiting time between the user triggering the first option and the first page display can be shortened, thereby realizing the rapid display of the page.

Description

Technical Field

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

[0002] In current mobile application development, to improve development efficiency and cross-platform compatibility, a hybrid app model combining native and cross-platform technologies is commonly adopted. Under this hybrid app model, how to shorten the loading time after a user triggers a page is a pressing technical problem that needs to be solved. Summary of the Invention

[0003] To address, or at least partially address, the aforementioned technical problems, this document provides a page loading method, apparatus, electronic device, and computer-readable storage medium.

[0004] Firstly, this article provides a page loading method, including: In response to the current displayed page including a first option, a first page is determined; the first page corresponds to the first option. A first cache level is determined; the first cache level corresponds to the first page; the first cache level is used to indicate the loading progress when the first page is preloaded; Based on the first cache level, the first page is preloaded to obtain the first cache data; In response to the triggering operation of the first option, a first page view rendering result is obtained based on the first cached data; the first page view rendering result corresponds to the first page; Display the rendering result of the first page view.

[0005] Secondly, this paper also provides a page loading device, including: An object determination module is used to determine a first page in response to the currently displayed page including a first option; the first page corresponds to the first option. A cache level determination module is used to determine a first cache level; the first cache level corresponds to the first page; the first cache level is used to indicate the loading progress when preloading the first page; The preloading module is used to preload the first page based on the first cache level to obtain the first cache data; A loading module is used to respond to a trigger operation on the first option and obtain a first page view rendering result based on the first cached data; the first page view rendering result corresponds to the first page; The display module is used to display the rendering result of the first page view.

[0006] Thirdly, this document also provides an electronic device, which includes: A storage device on which computer programs are stored; A processor for executing the computer program in the storage device to implement the steps of the page loading method as described above.

[0007] Fourthly, this document also provides a computer-readable storage medium having a computer program stored thereon, wherein a processor executes the computer program to implement the page loading method described above.

[0008] Fifthly, this document also provides a computer program product that, when run on a computer, enables the computer to implement the page loading method described above.

[0009] The technical solution presented in this paper has the following advantages compared to existing technologies: By setting the response to the currently displayed page to include a first option, the first page is determined; the first page corresponds to the first option; a first cache level is determined; the first cache level corresponds to the first page; the first cache level is used to indicate the loading progress when preloading the first page; based on the first cache level, the first page is preloaded to obtain first cache data; in response to the triggering operation of the first option, the first page view rendering result is obtained based on the first cache data; the first page view rendering result corresponds to the first page; and the first page view rendering result is displayed. The essence of this setup is to decouple the page loading process into a preloading phase and a triggering display phase. When the first option is exposed, the preloading phase begins, and the page corresponding to the first option is preloaded; after the user actually triggers the first option, the triggering display phase begins, executing only the remaining loading steps after obtaining the first cache data, rather than re-executing the complete page loading process. This can shorten the waiting time from the user triggering the first option to the display of the first page, thereby achieving fast page display. Attached Figure Description

[0010] The accompanying drawings, which are incorporated in and form part of this specification, illustrate examples consistent with this document and, together with the specification, serve to explain the principles herein.

[0011] To more clearly illustrate the technical solutions in the examples or prior art described herein, the accompanying drawings used in the description of the examples or prior art will be briefly introduced below. Obviously, those skilled in the art can obtain other drawings based on these drawings without any creative effort.

[0012] Figure 1 This article provides a structural block diagram of a page loading method system; Figure 2 This article provides a flowchart of a page loading method; Figure 3 This paper provides a structural block diagram of a page loading device; Figure 4 This is a schematic diagram of the structure of an electronic device described in this article. Detailed Implementation

[0013] To better understand the objectives, features, and advantages outlined in this paper, the proposed solution will be further described below. It should be noted that the features described herein can be combined with each other, provided there is no conflict.

[0014] The following description sets forth many specific details to provide a full understanding of this document, but it may also be implemented in other ways than those described herein; obviously, the examples in the specification are only a part of the examples in this document, and not all of them.

[0015] It is understandable that before using the technical solutions disclosed in the examples in this article, users should be informed of the types, scope of use, and usage scenarios of the personal information involved in this article in an appropriate manner in accordance with relevant laws and regulations, and their authorization should be obtained.

[0016] For example, upon receiving a user's active request, a prompt message is sent to the user to explicitly inform them that the requested operation will require the acquisition and use of the user's personal information. This allows the user to independently choose whether to provide personal information to the software or hardware, such as electronic devices, applications, servers, or storage media, that perform the operations described herein, based on the prompt message.

[0017] As an optional but non-limiting implementation, in response to a user's active request, sending a prompt message to the user can be done via a pop-up window, where the prompt message can be presented in text format. Furthermore, the pop-up window can also include a selection control allowing the user to choose "agree" or "disagree" to provide personal information to the electronic device.

[0018] It is understood that the above notification and user authorization process is merely illustrative and does not limit the implementation method described in this article. Other methods that comply with relevant laws and regulations may also be applied to the implementation method described in this article.

[0019] The page loading method provided in this article can be applied to... Figure 1 The page loading method system is shown below. For example... Figure 1As shown, the page loading method system may include a terminal device 101 and a server 102. A medium (e.g., a network) providing a communication link may be included between the terminal device 101 and the server 102. This network can be implemented as various connection types, such as wired or wireless communication links.

[0020] The terminal device 101 can be equipped with various applications or software, such as video playback applications or software, live streaming applications or software, collaborative office applications or software, image generation or processing applications or software, video generation or processing applications or software, media resource management applications or software, video conferencing applications or software, reading applications or software, social networking applications or software, payment applications or software, web browsers, and instant messaging tools. In some cases, these applications or software can be iterated and changed based on a continuous integration / continuous delivery model.

[0021] Terminal devices 101 include, but are not limited to, smartphones, tablets, e-book readers, audio and video players, laptops, desktop computers, and smart wearable devices.

[0022] Server 102 can be a backend device that provides backend support for applications or software running on terminal device 101, and is used to perform functions such as business logic, model reasoning, and task scheduling.

[0023] Server 102 here can be implemented as a distributed server cluster consisting of multiple servers, or as a single server.

[0024] When a user uses terminal device 101, terminal device 101 displays a user interface. The user can issue commands to the application or software through input operations, including but not limited to text input, voice commands, touch interaction, or gesture operations. After receiving the input operation, the application or software processes it according to its functional logic and outputs corresponding feedback information to the user. This feedback information can be presented in the form of a visual user interface, voice broadcast, notification prompts, etc., thereby completing a round of human-computer interaction.

[0025] It should be noted that the page loading method described in this article can be executed by terminal device 101. It should be understood that... Figure 1 The number of terminal devices 101 and servers 102 shown is merely illustrative. Depending on implementation needs, there can be any number of terminal devices 101 and servers 102.

[0026] Figure 2 This is a flowchart illustrating a page loading method provided in this article. Figure 2 As shown, the method may specifically include: Step 210: In response to the currently displayed page including the first option, determine the first page; the first page corresponds to the first option.

[0027] The currently displayed page may include, for example, the page displayed by the execution body of this method at the current moment. The currently displayed page includes the first option, for example, the first option may be exposed to the user at the current moment by displaying the page. In other words, at the current moment, the user can see the first option by observing the screen of the execution body of this method.

[0028] The first option can include, for example, controls, links, logos, page entries, or function entries displayed on the currently shown page. The first page corresponds to the first option; for example, it can include the page that will be displayed if a trigger action is performed on the first option. In other words, the first page is the page that follows the action taken after the first option is triggered.

[0029] The triggering operation for the first option can include actions taken by the user through direct physical contact (such as touchscreen operation), indirect physical input devices (such as mouse, touchpad), or contactless input methods (such as gesture recognition, voice control). If the triggering is achieved through direct physical contact (such as touchscreen operation) or indirect physical input devices (such as mouse, touchpad), it can include, but is not limited to, the following interaction methods: click, swipe, drag, or long press. Furthermore, depending on different application scenarios and technical implementation conditions, the triggering operation can be extended to employ more advanced interaction technologies, such as eye tracking, brain-computer interfaces, and other emerging human-computer interaction methods.

[0030] Step 220: Determine the first cache level; the first cache level corresponds to the first page; the first cache level is used to indicate the loading progress when preloading the first page.

[0031] Loading a webpage can involve the following steps: container initialization, page template acquisition and parsing, business data model acquisition and binding, and view rendering. Specifically, container initialization may include creating and configuring the basic runtime environment to host the page. Page template acquisition and parsing may include obtaining the page template from a server (e.g., a server-side application) and parsing it to generate an executable page structure. Business data model acquisition and binding may include obtaining data related to the current business logic from the server, establishing a mapping relationship between this data and the corresponding slots in the page template, and then filling the corresponding slots with the business data. View rendering may include rendering the final page view based on the page template filled with business data within the basic runtime environment.

[0032] The technical solution in this paper divides the loading process of the first page into two stages, with the moment of detecting the trigger operation on the first option as the boundary: a preloading stage and a trigger display stage. The preloading stage could be, for example, the stage where the first page is loaded before the trigger operation on the first option is detected. The trigger display stage could be, for example, the stage where the first page is loaded after the trigger operation on the first option is detected.

[0033] Cache levels can include information related to loading progress, such as those specific to the preloading phase. In practice, multiple cache levels can be pre-set, each corresponding to a different page loading progress during the preloading phase. Optionally, page loading progress can be represented by the number of page loading steps performed. Because different cache levels correspond to different loading progresses during the preloading phase, the content contained in the final cached data will also differ accordingly.

[0034] There are several specific implementation methods for "determining the first cache level". For example, in some cases, optionally, a first mapping set is pre-constructed, which includes multiple first mappings. The first mappings include the mapping between page identifiers and cache levels. When performing "determining the first cache level", a reference first mapping is determined by querying the first mapping set; the reference first mapping includes the page identifier of the first page, and the cache level in the reference first mapping is determined as the first cache level. The page identifier may include, for example, information used to distinguish different pages. For example, the page identifier may include a page number or a link address, etc.

[0035] In other cases, optionally, a second mapping set is pre-constructed, which includes multiple second mappings. The second mappings include the mapping between page types and cache levels. When performing "determine the first cache level," the page type of the first page is determined; by querying the second mapping set, a reference second mapping is determined, which includes the page type of the first page; the cache level in the reference second mapping is used as the first cache level.

[0036] The page type can be a classification result determined according to preset page classification criteria. For example, based on information display type, page types can be divided into user homepages, product detail pages, event pages, search results pages, etc. Based on the page access hierarchy, page types can be divided into first-level pages or second-level pages, etc. A first-level page can include, for example, the page directly displayed after entering an application or website. For example, a first-level page includes the application homepage. A second-level page can include, for example, the page displayed after a function entry point set on the first-level page is triggered.

[0037] In practice, a primary correspondence can be set based on the importance of each page, or a secondary correspondence can be set based on page classification criteria based on page importance. This ensures that the higher the importance of a page, the higher its cache level. A higher cache level means more loading steps are required during the preloading phase and fewer loading steps are required during the display phase, allowing relatively important pages to be displayed as quickly as possible.

[0038] Step 230: Based on the first cache level, preload the first page to obtain the first cache data.

[0039] The first page is the page that needs to be displayed only after the first option is triggered; the first option has not been triggered when this step is performed. Therefore, the essence of this step is to preload the first page.

[0040] The first cached data may include, for example, the preload result of the first page. Specifically, it may be an intermediate loading result formed during the loading process of the first page. During the preload process of the first page, some or all loading steps of the first page can be completed. If the preload process of the first page completes some loading steps, the first cached data may optionally include the page template parsing result or the page template binding result with business data. If the preload process of the first page completes all loading steps of the first page, the first cached data includes the page view rendering result. The page template parsing result may include, for example, the executable page structure obtained after performing the page template acquisition and parsing steps. The page template binding result with business data may include data obtained after performing the page template acquisition and parsing steps and the business data model acquisition and binding steps. The page view rendering result may include, for example, data obtained after performing the container initialization step, the page template acquisition and parsing step, the business data model acquisition and binding step, and the view rendering step.

[0041] It should be noted again that the specific number of loading steps performed when preloading the first page is determined based on the first cache level.

[0042] Step 240: In response to the triggering operation of the first option, obtain the rendering result of the first page view based on the first cached data; the rendering result of the first page view corresponds to the first page.

[0043] The essence of this step is that when the first option is triggered, the page is not loaded from scratch, but rather starting from the first cached data. Loading the page from scratch could include, for example, fully executing container initialization, page template acquisition and parsing, business data model acquisition and binding, and view rendering. Loading the page starting from the first cached data could include, for example, skipping the loading steps for obtaining the first cached data and its prerequisites, and directly executing the loading steps after obtaining the first cached data. Clearly, compared to loading the page from scratch, loading the page starting from the first cached data requires fewer loading steps and takes less time, which is beneficial for quickly displaying the first page.

[0044] Step 250: Display the rendering result of the first page view.

[0045] The rendering result of the first page view can be, for example, the rendering result of the page view corresponding to the first page, which can specifically be a pixel image.

[0046] The above technical solution determines the first page by setting a response to the currently displayed page, including a first option; the first page corresponds to the first option; a first cache level is determined; the first cache level corresponds to the first page; the first cache level is used to indicate the loading progress when preloading the first page; based on the first cache level, the first page is preloaded to obtain first cache data; the first cache data is the preload result of the first page; in response to the triggering operation of the first option, the first page view rendering result is obtained based on the first cache data; the first page view rendering result corresponds to the first page; and the first page view rendering result is displayed. Essentially, this setup decouples the page loading process into a preloading phase and a triggering display phase. When the first option is exposed, the preloading phase begins, and the page corresponding to the first option is preloaded; after the user actually triggers the first option, the triggering display phase begins, executing only the remaining loading steps after obtaining the first cache data, rather than re-executing the complete page loading process. This can shorten the waiting time from when the user triggers the first option to when the first page is displayed, thereby achieving fast page display.

[0047] Furthermore, since the loading progress of the first page is determined based on the first cache level, it is beneficial to achieve the following: the higher the importance of the page, the higher the cache level of the page, the more loading steps need to be executed in the preloading phase, the fewer loading steps need to be executed in the trigger display phase, and the shorter the waiting time between the user triggering the first option and the first page being displayed.

[0048] Based on the above technical solution, optionally, determining the first cache level includes: determining the first cache level based on the currently displayed page; the first cache level corresponds to the first page; the first cache level is one of multiple cache levels; the loading progress is different when the page is preloaded under different cache levels; the method further includes: storing the first cache data in a first cache dataset; the first cache dataset corresponds to the first cache level.

[0049] In practical applications, in some scenarios, the importance of the first page may be related to the page that includes the first option corresponding to the first page. In other words, although different pages may all include a first option pointing to the same first page, the cache level determined for the first page may differ when that first option is triggered on different pages. In this case, "determining the first cache level based on the currently displayed page" can specifically include: determining the first cache level based on the page identifier or business attributes of the currently displayed page.

[0050] "The loading progress of the page during preloading varies under different cache levels." Optionally, the higher the cache level, the faster the page loading progress during preloading.

[0051] For example, suppose a product's details page is the first page. When a user sees the product as the first option (which can be implemented as a product card) on the application's homepage, the current displayed page is the application's homepage. The cache level for this product's details page can be set to a high level to allow for deep preloading during the preloading phase. After preloading, the product's details page reaches a high loading progress. Because the probability of the user viewing this product on the application's homepage is high, the user's waiting time is shortened in this scenario. When a user sees the product as the first option (which can be implemented as a product card) on the browsing history page, the current displayed page is the browsing history page. The cache level for this product's details page can be set to a low level to allow for shallow preloading during the preloading phase. After preloading, the product's details page reaches a low loading progress. This is because the probability of the user viewing this product on the browsing history page is estimated to be low.

[0052] A cache dataset can be, for example, a dataset used to store cached data preloaded from a page. In practice, when multiple cache levels are set, different cache datasets can be set up for each cache level to achieve the purpose of classifying and storing cached data corresponding to different cache levels.

[0053] The first cache dataset could be, for example, the cache dataset corresponding to the first cache level.

[0054] By setting "determining the first cache level, including: determining the first cache level based on the currently displayed page; the first cache level corresponding to the first page; the first cache level being one of multiple cache levels; the loading progress during page preloading differs under different cache levels; the method also includes: storing the first cache data in the first cache dataset; the first cache dataset corresponding to the first cache level," the essence is to pre-set multiple cache levels and, for each cache level, set the page loading progress during the preloading phase, as well as the corresponding cache dataset. When preloading a specific page, the loading progress during the preloading phase is determined by the cache level of the page to be preloaded, and the cache dataset in which the preloaded results are stored is also determined. Using this method, the loading progress and storage location of the preloading results can be flexibly controlled according to the cache level of the page to be loaded. This allows for higher preloading progress for important and high-priority pages, enabling faster display; and avoids over-preloading of unimportant and low-priority pages, reducing unnecessary resource consumption.

[0055] Based on the above technical solution, optionally, in response to the triggering operation of the first option, a first page view rendering result is obtained based on the first cached data, including: in response to the triggering operation of the first option, searching for the first cached data in multiple cached datasets in a preset order; and obtaining the first page view rendering result based on the first cached data.

[0056] In practice, multiple cache datasets can be set up to store cached data (i.e., the preloaded results of the page). Optionally, different cache datasets can be assigned to different cache levels. Each cache dataset is dedicated to storing cached data at its corresponding cache level. Alternatively, different cache datasets can be assigned to different time periods. Each cache dataset is dedicated to storing cached data generated within its corresponding time period.

[0057] The preset order could be, for example, a pre-defined arrangement of multiple cached datasets. This preset order determines which cached dataset to search in first, and then which cached dataset to search in next, when looking up the first cached data.

[0058] Optionally, searching for first cached data in multiple cached datasets according to a preset order may include: repeatedly executing the following loop steps until the first cached data is found; the loop steps may include: determining a second cached dataset in multiple cached datasets according to a preset order and a first sequence number; when the loop steps are executed for the first time, the value of the first sequence number is 1; the second cached dataset corresponds to the first sequence number; searching for the first cached data in the second cached dataset; in response to the first cached data not being found in the second cached dataset, updating the first sequence number; the updated first sequence number is the next sequence number after the first sequence number before the update.

[0059] By setting "in response to the triggering operation of the first option, based on the first cached data, the rendering result of the first page view is obtained, including: in response to the triggering operation of the first option, searching for the first cached data in multiple cached datasets in a preset order; and obtaining the rendering result of the first page view based on the first cached data", the essence is to search for the first cached data one by one in multiple cached datasets in a preset order, which helps to shorten the time to find the first cached data and avoid missing the first cached data.

[0060] Further, optionally, "in response to the triggering operation of the first option, searching for the first cached data in a preset order among multiple cached datasets" may include: in response to the triggering operation of the first option, searching for the first cached data in multiple cached datasets in descending order of cache level; wherein, different cached datasets correspond to different cache levels, and the cache level of the cached data is consistent with the cache level of the cached dataset to which the cached data belongs; the higher the cache level of the cached data, the fewer loading steps are required to complete page loading based on the cached data; and the first page view rendering result is obtained based on the first cached data.

[0061] For example, the pre-set cache levels include a first-level cache level, a second-level cache level, and a third-level cache level, arranged in descending order of cache level as first-level cache level, second-level cache level, and third-level cache level. After detecting a trigger operation on the first option, the process enters the trigger display stage for the first page. First, the cache data corresponding to the first page is searched in the cache dataset corresponding to the first-level cache level. If the cache data corresponding to the first page is found in the cache dataset corresponding to the first-level cache level, the first page view rendering result is obtained based on the found cache data. If the cache data corresponding to the first page is not found in the cache dataset corresponding to the first-level cache level, the cache data corresponding to the first page is searched in the cache dataset corresponding to the second-level cache level. If the cache data corresponding to the first page is found in the cache dataset corresponding to the second-level cache level, the first page view rendering result is obtained based on the found cache data. If the cache data corresponding to the first page is not found in the cache dataset corresponding to the second-level cache level, the cache data corresponding to the first page is searched in the cache dataset corresponding to the third-level cache level. If cache data corresponding to the first page is found in the cache dataset corresponding to the third-level cache, the first page view rendering result is obtained based on the found cache data. If no cache data corresponding to the first page is found in the cache dataset corresponding to the third-level cache, the first page loading starts from the beginning.

[0062] By setting the function to "in response to the triggering operation of the first option, search for the first cached data in multiple cached datasets in a preset order, including: in response to the triggering operation of the first option, search for the first cached data in multiple cached datasets in descending order of cache level; wherein, different cached datasets correspond to different cache levels, and the cache level of the cached data is consistent with the cache level of the cached dataset to which the cached data belongs; the higher the cache level of the cached data, the fewer loading steps are required from the cached data to the completion of page loading; and the first page view rendering result is obtained based on the first cached data", the essence is to prioritize the search and use of cached data with high cache level during the triggering and display stage, thereby significantly reducing the page loading steps required during the triggering and display stage, so as to further shorten the waiting time from the user triggering the first option to the first page display, thereby achieving fast page display.

[0063] Based on the above technical solutions, optionally, the multiple caching levels include at least one of the following: a first-level caching level, a second-level caching level, and a third-level caching level; the cached data corresponding to the first-level caching level includes the page view rendering result; the cached data corresponding to the second-level caching level includes the page template and business data binding result; and the cached data corresponding to the third-level caching level includes the page template parsing result. The purpose of this setting is to achieve a reasonable setting of the preloading progress corresponding to each caching level, thereby balancing the consumption of system resources while achieving fast page display.

[0064] Based on the above technical solutions, optionally, in response to a trigger operation on the first option, a first page view rendering result is obtained based on the first cached data, including: in response to a trigger operation on the first option, if the first cached data includes dynamic data slots, obtaining and displaying the first page view rendering result based on the first cached data; the dynamic data slots in the first page view rendering result are in an unfilled business data state; acquiring dynamic data, where the dynamic data corresponds to the dynamic data slots; using the dynamic data and the first cached data, obtaining a second page view rendering result; the dynamic data slots in the second page view rendering result are in a state filled with business data; and updating the first page view rendering result using the second page view rendering result.

[0065] Dynamic data can be business data that is linked to the current business scenario in real time and changes with time, status, or associated objects. In some scenarios, dynamic data needs to rely on user interaction or runtime context to be determined. For dynamic data, the results obtained during the preloading phase may differ from those obtained during the triggering display phase. For example, the "real-time inventory quantity" in a product details page is dynamic data. Dynamic data slots can be, for example, reserved positions in a page template for holding dynamic data.

[0066] "The dynamic data slots in the first page view rendering result are in an unfilled business data state." For example, this can be implemented by displaying the slots that need to be filled with business data as placeholders or blank areas in the first page view rendering result.

[0067] "Retrieving dynamic data" can include: sending a dynamic data retrieval request corresponding to the first page to the server based on a triggered operation; and receiving feedback information corresponding to the retrieval request from the server. This feedback information includes the dynamic data corresponding to the first page.

[0068] In practice, optionally, the steps of "obtaining and displaying the first page view rendering result based on the first cached data" and "obtaining dynamic data; using the dynamic data and the first cached data to obtain the second page view rendering result" are executed in parallel. The step of "obtaining dynamic data; using the dynamic data and the first cached data to obtain the second page view rendering result" involves interaction with the server, parsing the dynamic data, filling dynamic data slots, and view rendering. Compared to the step of "obtaining and displaying the first page view rendering result based on the first cached data," the step of "obtaining dynamic data; using the dynamic data and the first cached data to obtain the second page view rendering result" is more time-consuming.

[0069] The first and second page view rendering results are both corresponding to the first page. The difference lies in the state: in the first page view rendering result, dynamic data is missing, while in the second page view rendering result, dynamic data is complete, meaning it is filled in. In other words, in the second page view rendering result, dynamic data can be displayed correctly.

[0070] It's important to note that the dynamic data is missing in the first page view rendering result because the dynamic data obtained during the preloading phase and the triggered display phase may differ. Using the dynamic data obtained during the preloading phase could mislead the user. Therefore, dynamic data is not used when creating the first cached data.

[0071] The aforementioned technical solution, by setting up "responding to a trigger operation on the first option, obtaining a first page view rendering result based on the first cached data, including: responding to a trigger operation on the first option, if the first cached data includes dynamic data slots, obtaining and displaying the first page view rendering result based on the first cached data; the dynamic data slots in the first page view rendering result are in a state where no business data is filled; acquiring dynamic data, the dynamic data corresponding to the dynamic data slots; using the dynamic data and the first cached data to obtain a second page view rendering result; the dynamic data slots in the second page view rendering result are in a state where business data is filled; and using the second page view rendering result to update the first page view rendering result," essentially means that during the preloading stage, when creating the first cached data, dynamic data is not used. During the trigger display stage, based on the first cached data, a page view rendering result lacking dynamic data is created and displayed. Furthermore, dynamic data is promptly acquired in the background, and a page view rendering result including dynamic data is created using the dynamic data. The newly created page view rendering result with dynamic data replaces the page view rendering result lacking dynamic data. This allows for faster page loading even in scenarios involving dynamic data, shortening the waiting time between the user triggering the first option and the first page being displayed.

[0072] Based on the above technical solution, the method may optionally include: determining a first destruction condition; the first destruction condition corresponding to first cached data; and destroying the first cached data in response to satisfying the first destruction condition.

[0073] The first destruction condition can be, for example, a condition used to determine whether to destroy the first cached data. This document does not limit the specific nature of the first destruction condition. For example, the first destruction condition may include at least one of the following: the lifespan of the first cached data reaches its maximum lifespan; the remaining available storage space of the cache dataset used to store the first cached data is less than a preset storage space threshold; the currently displayed page does not include the first option.

[0074] In practice, the maximum lifespan of different cached data can be the same or different. For example, the maximum lifespan of cached data can be set differently based on the page type or business type of the page corresponding to the cached data. Business type can be, for example, a business function category. In some scenarios, different business types correspond to different business processing logic and data processing rules. For example, taking an e-commerce application, business types can include product display type, shopping cart management type, order settlement type, online payment type, marketing activity type, etc. Page type can be, for example, the type of interactive presentation adopted by the page, which can be distinguished by the page's interface structure and user interaction methods. Different page types correspond to different interface component configurations and interactive response logic. For example, page types can include list page type, detail page type, etc.

[0075] For example, the maximum lifespan of cached data related to the order settlement business type can be set to 'a' seconds, while the maximum lifespan of cached data related to the product display business type can be set to 'b' seconds. Here, 'a' and 'b' are two different values.

[0076] The current page in "the current page does not include the first option" and the current page in "responding to the current page including the first option" in step 210 can be the same page or different pages.

[0077] For example, in one instance, if a terminal device is displaying the homepage of an e-commerce application, and the first option is a product card on the homepage, at time 1, the product card is visible on the terminal device screen, which is considered "the currently displayed page includes the first option". From time 1 to time 2, the user does not switch pages, but changes the product card displayed on the e-commerce application homepage by swiping up and down on the terminal device screen. At time 2, the product card is no longer visible on the terminal device screen, which is considered "the currently displayed page does not include the first option". In this example, the "currently displayed page" in "the currently displayed page does not include the first option" is the same page as the "currently displayed page" in step 210, which is "in response to the current displayed page including the first option".

[0078] In another example, if the terminal device is displaying the homepage of an e-commerce application, and the first option is a product card on the homepage, at time 1, the product card is visible on the terminal device screen, which is considered "the currently displayed page includes the first option". From time 1 to time 2, the user switches pages. At time 2, the terminal device screen displays the e-commerce application settings page, and the product card is no longer visible on the screen, which is considered "the currently displayed page does not include the first option". In this example, the "currently displayed page does not include the first option" is a different page from the "currently displayed page includes the first option" in step 210.

[0079] By setting "determine the first destruction condition; the first destruction condition corresponds to the first cached data; in response to the first destruction condition being met, destroy the first cached data", the first cached data can be destroyed in a timely manner, avoiding the first cached data with a low probability of use from occupying system resources for a long time.

[0080] Based on the above technical solutions, optionally, the first page is preloaded to obtain the first cached data, including: creating a first preload task in response to meeting the task creation conditions; the first preload task corresponds to the first page; adding the first preload task to the preload task queue; and preloading the first page in response to the execution time of the first preload task to obtain the first cached data.

[0081] Task creation conditions can be, for example, conditions used to decide whether to create a preloaded task corresponding to the first page. This document does not limit the specific nature of the task creation conditions. For example, task creation conditions may include at least one of the following: the global preload function is enabled; the preload function corresponding to the first cache level is enabled; the number of cached data corresponding to the first business type stored in the cache dataset reaches a first threshold; the number of cached data corresponding to the first page type stored in the cache dataset reaches a second threshold; the terminal device's CPU utilization reaches a set utilization threshold; the terminal device's available memory is less than a set memory threshold; the terminal device's battery level is less than a set battery threshold; the cache dataset does not contain cached data corresponding to the first page; and the preloaded task queue does not contain a preloaded task corresponding to the first page. Here, the first business type is the business type corresponding to the first page. The first page type is the page type corresponding to the first page.

[0082] The global preloading feature is enabled, meaning that preloading tasks for each cache level are allowed to be created. The global preloading feature is disabled, meaning that the creation of preloading tasks for each cache level is restricted. Setting task creation conditions, including enabling the global preloading feature, essentially adjusts whether the page loading scheme described in this article is allowed by controlling the on / off state of the global preloading feature.

[0083] The preloading function corresponding to the first cache level being enabled means, for example, that the creation of preloading tasks corresponding to the first cache level is allowed. The preloading function being disabled means, for example, that the creation of preloading tasks corresponding to the first cache level is restricted. Essentially, adjusting the on / off state of the preloading function corresponding to the first cache level controls whether or not page loading tasks corresponding to the first cache level are allowed.

[0084] Setting task creation conditions includes setting the quantity of cached data corresponding to the first business type in the cache dataset to reach a first threshold, and / or setting the quantity of cached data corresponding to the first page type in the cache dataset to reach a second threshold. Essentially, this sets task creation conditions from the perspective of business type and page type, which facilitates precise allocation of preloaded resources. By distinguishing between different business types and page types, limited loading resources can be prioritized for core business processes, avoiding ineffective preloading of low-priority pages and thus improving the utilization efficiency of loading resources.

[0085] Setting task creation conditions includes at least one of the following: the terminal device's CPU usage reaches a set usage threshold, the terminal device's available memory is less than a set memory threshold, and the terminal device's battery level is less than a set battery threshold. Essentially, this sets task creation conditions from the perspective of the resources required for the terminal device to execute the preloading task, ensuring that system resources are not excessively consumed during the execution of the preloading task, thereby ensuring the normal operation of the terminal device.

[0086] Setting task creation conditions includes ensuring that the cached dataset does not contain cached data corresponding to the first page, and / or that the preloaded task queue does not contain preloaded tasks corresponding to the first page. Essentially, this sets task creation conditions from the perspective of deduplicating preloaded tasks, thereby reducing resource waste during the execution of preloaded tasks.

[0087] By setting up a preloading task to obtain first cached data for the first page, including: creating a first preloading task in response to meeting task creation conditions; assigning the first preloading task to the first page; adding the first preloading task to the preloading task queue; and preloading the first page to obtain first cached data in response to the execution timing of the first preloading task, the essence is that when the currently displayed page includes the first option, a preloading task is not always created for the first page. Instead, a preloading task is created for the first page only when the task creation conditions are met, and the preloading tasks are managed through a preloading task queue. This method allows for dynamic determination of whether to create a preloading task based on the actual operating conditions of the terminal device (such as performance data, resource consumption, peak business periods, etc.), achieving a dynamic balance between performance gains and preloading costs.

[0088] It should be noted that, for the sake of simplicity, the aforementioned method examples are all described as a series of actions. However, those skilled in the art should understand that the methods described herein are not limited by the order of the actions, as some steps may be performed in other orders or simultaneously, depending on the content of this document. Furthermore, those skilled in the art should also understand that the examples described in the specification are preferred examples, and the actions and modules involved are not necessarily essential to this document.

[0089] Figure 3 This is a schematic diagram of a page loading device provided in this paper. The page loading device described herein can be configured in the client or the server. See also... Figure 3 The page loading device specifically includes: The object determination module 310 is used to determine a first page in response to the current display page including a first option; the first page corresponds to the first option. The level determination module 320 is used to determine a first cache level; the first cache level corresponds to the first page; the first cache level is used to indicate the loading progress when preloading the first page; The preloading module 330 is used to preload the first page based on the first cache level to obtain the first cache data; The loading module 340 is used to respond to the triggering operation of the first option and obtain the first page view rendering result based on the first cached data; the first page view rendering result corresponds to the first page. The display module 350 is used to display the rendering result of the first page view.

[0090] Furthermore, the level determination module 320 is used for: Based on the currently displayed page, a first cache level is determined; the first cache level corresponds to the first page; the first cache level is one of multiple cache levels; the loading progress is different when the page is preloaded under different cache levels; The device further includes a storage module for: The first cached data is stored in the first cached dataset; the first cached dataset corresponds to the first cache level.

[0091] Furthermore, module 340 is loaded for: In response to the triggering operation of the first option, the first cached data is searched in a preset order among the multiple cached datasets; Based on the first cached data, the rendering result of the first page view is obtained.

[0092] Furthermore, the plurality of cache levels includes at least one of the following: a level 1 cache level, a level 2 cache level, and a level 3 cache level; The cached data corresponding to the first-level cache includes the page view rendering results; The cached data corresponding to the second-level cache includes the binding results of page templates and business data; The cache data corresponding to the three-level cache includes the page template parsing results.

[0093] Furthermore, module 340 is loaded for: In response to the triggering operation of the first option, if the first cached data includes a dynamic data slot, the first page view rendering result is obtained and displayed based on the first cached data; the dynamic data slot in the first page view rendering result is in an unfilled business data state. Acquire dynamic data, which corresponds to the dynamic data slot; Using the dynamic data and the first cached data, a second page view rendering result is obtained; in the second page view rendering result, the dynamic data slot is filled with business data. Update the first page view rendering result using the second page view rendering result.

[0094] Furthermore, the device also includes a consumption module for: The first destruction condition is determined; the first destruction condition corresponds to the first cached data; In response to the fulfillment of the first destruction condition, the first cached data is destroyed.

[0095] Furthermore, the preload module 330 is used for: In response to the fulfillment of the task creation conditions, a first preload task is created; the first preload task corresponds to the first page. Add the first preloaded task to the preloaded task queue; In response to the arrival of the execution time of the first preloading task, the first page is preloaded to obtain the first cached data.

[0096] The page loading device provided in this article can execute the steps in the page loading method provided in this article and has the same or corresponding beneficial effects as the page loading method, which will not be elaborated here.

[0097] The following is a detailed reference. Figure 4 The diagram illustrates a structural schematic of an electronic device 1000 suitable for implementing the methods described herein. The electronic device described herein may include, but is not limited to, mobile terminals such as mobile phones, laptops, digital radio receivers, personal digital assistants, tablet computers, portable multimedia players, in-vehicle terminals (e.g., in-vehicle navigation terminals), and fixed terminals such as digital televisions, desktop computers, or servers. Figure 4 The electronic device shown is merely an example and should not impose any limitations on the functionality and scope of this article.

[0098] like Figure 4As shown, the electronic device 1000 may include a processor (e.g., a central processing unit, a graphics processing unit, etc.) 1001, which can perform various appropriate actions and processes according to a program stored in a read-only memory 1002 or a program loaded from a storage device 1008 into a random access memory 1003 to implement the page loading method described herein. The random access memory 1003 also stores various programs and information required for the operation of the electronic device 1000. The processor 1001, the read-only memory 1002, and the random access memory 1003 are interconnected via a bus 1004. An input / output interface 1005 is also connected to the bus 1004.

[0099] Typically, the following devices can be connected to the input / output interface 1005: input devices 1006 including, for example, a touchscreen, touchpad, keyboard, mouse, camera, microphone, accelerometer, gyroscope, etc.; output devices 1007 including, for example, a liquid crystal display, speaker, vibrator, etc.; storage devices 1008 including, for example, magnetic tape, hard disk, etc.; and communication devices 1009. Communication device 1009 allows electronic device 1000 to communicate wirelessly or wiredly with other devices to exchange information. Although Figure 4 An electronic device 1000 with various devices is shown; however, it should be understood that it is not required to implement or possess all of the devices shown. More or fewer devices may be implemented or possessed alternatively.

[0100] Since the processor of the electronic device provided in this article executes the computer program in the storage device, it can implement the page loading method provided in this article, which has the same or corresponding beneficial effects as the page loading method, and will not be elaborated here.

[0101] Optionally, this document also provides a computer program product that, when run on a computer, enables the computer to implement the page loading method provided herein. In some use cases, the computer program product may be hosted on a computer-readable medium. The computer program product contains program code for performing the page loading method described herein. The computer program product can be downloaded and installed from a network via communication device 1009, or installed from storage device 1008, or installed from read-only memory 1002.

[0102] Computer program code for performing the methods provided herein can be written in one or more programming languages ​​or a combination thereof, including but not limited to object-oriented programming languages ​​and conventional procedural programming languages. The program code can be executed entirely on the user's computer, partially on the user's computer, as a standalone software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or server. In cases involving remote computers, the remote computer can be connected to the user's computer via any type of network—including local area networks (LANs) or wide area networks (WANs), or it can be connected to an external computer (e.g., via the Internet using an Internet service provider).

[0103] Since the computer program product described herein enables the computer to implement the page loading method as described above when it is run on a computer, and has the same or corresponding beneficial effects as the page loading method, it will not be elaborated here.

[0104] It should be noted that the computer-readable medium mentioned above can be a computer-readable signal medium or a computer-readable storage medium, or any combination thereof. A computer-readable storage medium can be, for example,—but not limited to—an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination thereof. More specific examples of a computer-readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer disk, a hard disk, a random access memory, a read-only memory, an erasable programmable read-only memory, an optical fiber, a portable compact disk read-only memory, an optical storage device, a magnetic storage device, or any suitable combination thereof. In this document, a computer-readable storage medium can be any tangible medium containing or storing a program that can be used by or in conjunction with a page loading method system, apparatus, or device. In this document, a computer-readable signal medium can include information signals propagated in baseband or as part of a carrier wave, carrying computer-readable program code. Such propagated information signals can take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination thereof. A computer-readable signal medium can also be any computer-readable medium other than a computer-readable storage medium, which can send, propagate, or transmit a program for use by or in connection with a page loading method system, apparatus, or device. The program code contained on the computer-readable medium can be transmitted using any suitable medium, including but not limited to: wires, optical fibers, radio frequency, etc., or any suitable combination thereof.

[0105] The aforementioned computer-readable medium may be included in the aforementioned electronic device; or it may exist independently and not assembled into the electronic device.

[0106] This document also provides a computer-readable storage medium on which a computer program is stored, which, when executed by a processor, can implement the page loading method provided herein.

[0107] Since the computer program stored in the aforementioned computer-readable storage medium can implement the page loading method provided herein when executed by a processor, and has the same or corresponding beneficial effects as the page loading method, it will not be elaborated here.

[0108] The flowcharts and block diagrams in the accompanying figures illustrate the architecture, functionality, and operation of possible implementations of systems, methods, and computer program products according to the various examples herein. In this respect, each block in a flowchart or block diagram may represent a module, segment, or portion of code containing one or more executable instructions for implementing the specified logical function. It should also be noted that in some alternative implementations, the functions indicated in the blocks may occur in a different order than those indicated in the figures. For example, two consecutively indicated blocks may actually be executed substantially in parallel, and they may sometimes be executed in reverse order, depending on the functions involved. It should also be noted that each block in a block diagram and / or flowchart, and combinations of blocks in block diagrams and / or flowcharts, may be implemented using a dedicated hardware-based system that performs the specified function or operation, or using a combination of dedicated hardware and computer instructions.

[0109] The units or modules described herein can be implemented in software or hardware. The names of the units or modules do not, in certain circumstances, constitute a limitation on the unit or module itself.

[0110] The functions described above in this document can be performed, at least in part, by one or more hardware logic components. For example, exemplary types of hardware logic components that can be used, without limitation, include: field-programmable gate arrays, application-specific integrated circuits (ASICs), application-specific standard products (ASICs), systems-on-a-chip (SoCs), complex programmable logic devices, and so on.

[0111] It should be noted that, in this document, relational terms such as "first" and "second" are used merely to distinguish one entity or operation from another, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Furthermore, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Without further limitations, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes said element.

[0112] The above descriptions are merely specific embodiments of the present invention, enabling those skilled in the art to understand or implement the technical solutions herein. Various modifications to these examples will be readily apparent to those skilled in the art, and the general principles defined herein may be implemented in other examples without departing from the spirit or scope of this document. Therefore, this document is not intended to be limited to the examples described herein, but rather to be accorded the widest scope consistent with the principles and novel features disclosed herein.

Claims

1. A page loading method, comprising: In response to the current displayed page including a first option, a first page is determined; the first page corresponds to the first option. Determine the first cache level; The first cache level corresponds to the first page; the first cache level is used to indicate the loading progress when the first page is preloaded; Based on the first cache level, the first page is preloaded to obtain the first cache data; In response to the triggering operation of the first option, a first page view rendering result is obtained based on the first cached data; The rendering result of the first page view corresponds to the first page; Display the rendering result of the first page view.

2. The method according to claim 1, wherein determining the first cache level includes: Based on the currently displayed page, determine the first cache level; The first cache level corresponds to the first page; The first cache level is one of multiple cache levels; The loading progress differs when the page is preloaded at different cache levels. The method further includes: Store the first cached data into the first cached dataset; The first cached dataset corresponds to the first cache level.

3. The method according to claim 2, in response to a triggering operation on the first option, obtaining a first page view rendering result based on the first cached data, includes: In response to the triggering operation of the first option, the first cached data is searched in multiple cached datasets in a preset order; Based on the first cached data, the rendering result of the first page view is obtained.

4. The method according to claim 2, wherein the plurality of cache levels includes at least one of the following: a level 1 cache level, a level 2 cache level, and a level 3 cache level; The cached data corresponding to the first-level cache includes the page view rendering results; The cached data corresponding to the second-level cache includes the binding results of page templates and business data; The cache data corresponding to the three-level cache includes the page template parsing results.

5. The method according to claim 1, in response to a triggering operation on the first option, obtaining a first page view rendering result based on the first cached data, including: In response to the triggering operation of the first option, if the first cached data includes dynamic data slots, the first page view rendering result is obtained and displayed based on the first cached data; The dynamic data slots in the first page view rendering result are in a state where no business data is filled; Acquire dynamic data, which corresponds to the dynamic data slot; Using the dynamic data and the first cached data, the rendering result of the second page view is obtained; The dynamic data slots in the second page view rendering result are in a state where they are filled with business data; Update the first page view rendering result using the second page view rendering result.

6. The method according to claim 1, further comprising: Determine the first destruction condition; The first destruction condition corresponds to the first cached data; In response to the fulfillment of the first destruction condition, the first cached data is destroyed.

7. The method according to claim 1, wherein the first page is preloaded to obtain first cached data, comprising: In response to the fulfillment of the task creation conditions, the first preloaded task is created; The first preloading task corresponds to the first page; Add the first preloaded task to the preloaded task queue; In response to the arrival of the execution time of the first preloading task, the first page is preloaded to obtain the first cached data.

8. A page loading device, comprising: An object determination module is used to determine a first page in response to the currently displayed page including a first option; the first page corresponds to the first option. The level determination module is used to determine the first cache level; The first cache level corresponds to the first page; the first cache level is used to indicate the loading progress when the first page is preloaded; The preloading module is used to preload the first page based on the first cache level to obtain the first cache data; A loading module is used to obtain a first page view rendering result based on the first cached data in response to a trigger operation on the first option. The rendering result of the first page view corresponds to the first page; The display module is used to display the rendering result of the first page view.

9. An electronic device, the electronic device comprising: A storage device on which computer programs are stored; A processor for executing the computer program in the storage device to implement the page loading method according to any one of claims 1-7.

10. A computer-readable storage medium having a computer program stored thereon, wherein a processor executes the computer program to implement the page loading method as described in any one of claims 1-7.

11. A computer program product, when run on a computer, causes the computer to implement the page loading method as described in any one of claims 1-7.

Images