A method, device and storage medium for page switching

Abstract

The application discloses a page switching method and device and a storage medium, which are used for reducing the white screen phenomenon in the switching process. The method comprises the following steps: obtaining a jump instruction of a user jumping from a source page to a target page; creating a preloading container in the source page in response to the jump instruction, preloading static resources of the target page through the preloading container, and caching the static resources into a local cache; jumping to the target page and loading the static resources of the target page from the local cache. The preloading container is used for preloading the static resources of the target page. When the user jumps from the source page to the target page, the target page can be quickly loaded because the static resources have been preloaded, so that the loading blocking caused by large resources or poor network is greatly reduced, and the appearance of the white screen phenomenon is reduced.

Description

Technical Field

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

[0002] In the current application development field, applications rely on the browser's inherent page navigation mechanism. Under normal network conditions and with moderate resource availability, they can achieve basic page switching functions, meeting users' basic browsing and operation needs. However, as internet applications become increasingly rich and complex, users' demands for application interactivity and immediacy are rising. When a page application faces redirection to a platform with a large amount of initial static resources, or when the network connection is poor or the signal is unstable, the page loading process is easily hindered, and a brief white screen may occur.

[0003] Once this white screen problem occurs, the user's original smooth operation process is interrupted. Whether browsing information, performing tasks or interacting, it cannot be done smoothly, which seriously affects the user's experience. Summary of the Invention

[0004] To address the aforementioned technical problems, this application provides a method, apparatus, and storage medium for page switching.

[0005] The technical solution provided in this application is described below:

[0006] A first aspect of this application provides a method for page switching, the method comprising:

[0007] Obtain the redirection command from the source page to the target page;

[0008] In response to the redirection instruction, a preload container is created in the source page, and the static resources of the target page are preloaded through the preload container and cached in the local cache;

[0009] Redirect to the target page and load the static resources of the target page from the local cache.

[0010] Optionally, after redirecting to the target page, the method further includes:

[0011] Display transition content on the target page;

[0012] After loading the static resources of the target page from the local cache, the method further includes:

[0013] Remove the transition content and display the actual content of the target page.

[0014] Optionally, the transition content may be a jump animation, a loading progress bar, or a screenshot of the source page.

[0015] Optionally, when the transition content is a screenshot of the source page, the method further includes the following steps before jumping to the target page:

[0016] Take a screenshot of the source page to obtain a screenshot of the source page;

[0017] The screenshot of the source page is stored in the local cache.

[0018] Optionally, in response to the redirect instruction, creating a preload container in the source page includes:

[0019] Determine whether the amount of static resources on the target page exceeds a preset threshold;

[0020] If so, then in response to the jump instruction, a preload container is created in the source page.

[0021] Optionally, before redirecting to the target page, the method further includes:

[0022] Determine that the preloaded container has finished loading the static resources.

[0023] Optionally, the preloaded container is an iframe.

[0024] A second aspect of this application provides a page switching system, the system comprising:

[0025] The acquisition unit is used to acquire the user's redirection instruction from the source page to the target page;

[0026] A response unit is used to respond to the jump instruction, create a preload container in the source page, preload the static resources of the target page through the preload container, and cache the static resources in the local cache;

[0027] The jump unit is used to jump to the target page and prioritize loading the static resources of the target page from the local cache.

[0028] A third aspect of this application provides a page switching device, the device comprising:

[0029] Processor, memory, input / output units, and bus;

[0030] The processor is connected to the memory, the input / output unit, and the bus;

[0031] The memory stores a program, which the processor invokes to execute the first aspect and any optional page switching method of the first aspect.

[0032] A fourth aspect of this application provides a computer-readable storage medium storing a program that, when executed on a computer, performs the first aspect and any optional page switching method of the first aspect.

[0033] As can be seen from the above technical solutions, this application has the following advantages:

[0034] A preloading container is created on the source page to preload the static resources of the target page. When a user navigates from the source page to the target page, the target page loads quickly because the static resources have been preloaded. This significantly reduces loading delays caused by large resource sizes or poor network conditions, thus minimizing the occurrence of blank screens. Preloading static resources uses a background loading mode, meaning that loading the target page's static resources does not affect the user's current operations on the source page. Users can still smoothly browse the source page content and perform various tasks. Furthermore, preloading reduces the target page's loading time, improving page loading efficiency. Attached Figure Description

[0035] To more clearly illustrate the technical solutions in this application, the accompanying drawings used in the description of the embodiments will be briefly introduced below. Obviously, the accompanying drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0036] Figure 1 A schematic flowchart of an embodiment of the page switching method provided in this application;

[0037] Figure 2 A schematic flowchart illustrating an embodiment of the transition content of the target page in the page switching method provided in this application;

[0038] Figure 3 A schematic flowchart illustrating an embodiment of the screenshot of the source page in the page switching method provided in this application;

[0039] Figure 4 A schematic flowchart of an embodiment of creating a preloaded container for the source page in the page switching method provided in this application;

[0040] Figure 5 A schematic diagram of an embodiment of the page switching system provided in this application;

[0041] Figure 6A schematic diagram of an embodiment of the page switching device provided in this application. Detailed Implementation

[0042] It should be noted that the page switching method provided in this application can be applied to terminals, systems, and servers. For example, a terminal can be a smartphone, computer, tablet, smart TV, smartwatch, portable computer, or a desktop computer, etc. For ease of explanation, this application uses a terminal as the implementing entity for illustration.

[0043] This application first provides an embodiment of a page switching method; please refer to [link to embodiment]. Figure 1 The method includes:

[0044] S101. Obtain the user's redirection instruction from the source page to the target page;

[0045] The source page typically contains multiple hyperlinks, which are elements that guide users to different pages. When a user clicks a link, the browser on the terminal detects this action, obtains the target address of the link, and the target address points to the target page, thus determining the redirect instruction.

[0046] In practical applications, when selecting products on the source page, each product has a corresponding "View Details" button. When a user clicks the "View Details" button for a product, the browser detects this action. At this time, the browser listens for the button's click event to obtain the user's redirection instruction from the product list page to the target page corresponding to the "View Details" button. Based on the redirection instruction, the browser sends a request to the server to obtain the target page resource, carrying the target address of the target page, according to the network request and page loading process. After receiving the request, the server finds the corresponding page data based on the target address carried in the request and returns it to the browser.

[0047] S102. In response to the redirection command, create a preload container in the source page, and preload the static resources of the target page through the preload container, and cache the static resources in the local cache.

[0048] Upon detecting a redirect command, the terminal creates an invisible preload container within the source page. This preload container is a virtual loading space that pre-processes some of the target page's loading tasks. The preload container loads various static resources required by the target page. These static resources include, but are not limited to, the target page's layout files, stylesheet files for enhancing the page's appearance, script files for implementing page interactions, and images.

[0049] Browsers use their built-in caching mechanisms to download resources from the server to their local machine according to their resource loading priorities and caching strategies. For frequently accessed or recently accessed resources, the browser may prioritize storing them in the memory cache for faster access; while resources that are not frequently updated or consume a lot of space may be stored in the disk cache. The next time these resources are needed, the browser can retrieve them directly from the local cache without downloading them from the server again, thus significantly reducing loading time.

[0050] S103. Redirect to the target page and load the static resources of the target page from the local cache.

[0051] When the preloading container finishes loading the static resources of the target page, or when the redirection conditions are met within a certain time even if the page is not fully loaded, the browser will perform a page redirection. After redirecting to the target page, the browser first checks whether the static resources required by the target page already exist in the local cache. If they exist and the cache has not expired, the browser will quickly load these resources directly from the local cache instead of sending a new request to the server to download them. The target page can be loaded and displayed to the user in a shorter time, reducing the user's waiting time for the page to load and improving the user experience.

[0052] In this embodiment, a preloading container is created on the source page to preload the static resources of the target page. When the user's instruction is to jump from the source page to the target page, the target page can load quickly because the static resources have been preloaded. This greatly reduces loading obstacles caused by large resource sizes or poor network conditions, thereby reducing the occurrence of blank screens. The preloading of static resources uses a background loading mode. While loading the static resources of the target page, it does not affect the user's current operations on the source page. The user can still smoothly browse the content of the source page and perform various tasks. At the same time, the preloading method reduces the loading time of the target page and improves page loading efficiency.

[0053] When loading static resources of the target page from the local cache, the target page maintains visual continuity for the user by displaying transition content. The following explains the transition content on the target page; please refer to [link / reference]. Figure 2 , Figure 2 As an example of transitional content during page switching, the method includes:

[0054] S201. Display transition content on the target page;

[0055] When the browser detects a user's click, it obtains the corresponding target address and determines the redirect instruction. The page quickly redirects to the target page, where the transition content displayed is a redirect animation, a loading progress bar, or a screenshot of the source page (pseudo-page).

[0056] At the moment of page transition, when a user clicks the link, the source page quickly redirects to the target page. During this transition, a fade-in loading animation may appear in the center of the screen, such as an animated character running. Once the page has finished loading, the animation disappears. This loading animation guides the user's attention, making them aware that a page transition is underway. After reaching the target page, a loading progress bar may appear, starting from 0% and gradually increasing as static resources load, allowing the user to visually understand the page loading progress. When the progress bar reaches 100%, it means the static resources have finished loading. After the page transition, the target page may also display a screenshot of the source page. The screenshot occupies the entire screen, but it will have a semi-transparent effect and a slight blur, indicating that it is not the actual page. Using a screenshot as a transition page allows users to still see the previous page content during the page loading process, maintaining visual continuity and reducing abruptness.

[0057] While displaying the transition content, the browser begins loading the target page's static resources from its local cache. These static resources include, but are not limited to, the target page's layout file, stylesheet files used to enhance the page, script files that implement interactive page functions, and some images.

[0058] It's important to note that when the target page is a single-page application (SPA), even after static resources have been loaded, the target page may still be processing the virtual DOM, resulting in a brief white screen. This is especially noticeable in complex SPAs. Therefore, in such scenarios, if the terminal determines that the target page is an SPA, it will prioritize using a screenshot of the source page as transitional content.

[0059] S202, Remove the transitional content and display the actual content of the target page.

[0060] The completion status of the preloaded container can be determined by listening to its loading completion event or by performing a timed check. Once the static resources in the preloaded container have finished loading, the target page begins removing transitional content and displays the actual content of the target page.

[0061] In practical applications, animation effects are used to remove transitional content. For example, a fade-in / fade-out effect can be used to gradually reduce the transparency of the transitional content from 100% to 0%; or a sliding effect can be used to make the transitional content slide off the page. Simultaneously, the size and position of the target page are adjusted according to its layout requirements so that its content is fully displayed during the animation, allowing the actual content of the target page to gradually replace the transitional content.

[0062] In this embodiment, by creating a pre-loading container on the source page to cache the static resources of the target page in advance, the loading time of the target page is greatly shortened. During the page loading process, a progress bar allows users to intuitively understand the loading status. Transitional content such as jump animations or screenshots of the source page is displayed during page navigation, making page transitions more natural. For example, a fade-in loading animation guides the user's attention, and screenshots of the source page maintain visual continuity, reducing the abruptness of page transitions and improving the user's visual experience. After loading is complete, the transitional content disappears, and the actual content of the target page is fully presented, achieving a smooth and fluid page transition and reducing the occurrence of blank screens.

[0063] The following is an explanation of the screenshots from the source page; please refer to [link / reference]. Figure 3 , Figure 3 As one embodiment of taking a screenshot of a source page, the method includes:

[0064] S301. Take a screenshot of the source page to obtain a screenshot of the source page;

[0065] When a user clicks a link to the target page, the browser detects this action and receives the instruction to navigate from the source page to the target page. Before executing the navigation, the browser detects that the transition content is a screenshot of the source page and triggers the source page's screenshot function to capture the page. The browser determines the visible area of ​​the screenshot based on the current window size and position. The screenshot not only covers the page content visible on the user's current screen but also includes fixed page elements such as the search bar, sidebar, and navigation bar. For web pages using responsive design, the browser determines the elements to be captured based on the page's layout on the current device. If the page height exceeds one screen, the browser automatically uses scrolling screenshot technology, simulating page scrolling to capture different parts of the page content in stages, and then stitches these screenshots together to ensure the integrity of the page screenshot.

[0066] S302. Store a screenshot of the source page in the local cache;

[0067] To improve storage and retrieval efficiency, browsers perform format conversion on screenshots, including converting them to JPEG or PNG format. In addition, browsers use image compression to remove redundant information from screenshots, further reducing file size without affecting the visual quality.

[0068] Browsers choose appropriate local storage locations to save screenshots based on their caching strategies. For screenshots of frequently accessed pages, browsers may store them in memory cache to speed up retrieval; for screenshots that are rarely accessed or consume a lot of space, browsers will store them in disk cache. Browsers periodically clear their cache, deleting expired or no longer used screenshots to free up local storage space. After storing screenshots in the local cache, browsers create an index for the screenshots in the cache management system. Index information includes the screenshot's unique identifier, storage location, screenshot time, etc. By creating an index, browsers can quickly locate and retrieve cached screenshots when needed, enabling rapid display of transitional content during page navigation.

[0069] In this embodiment, a screenshot of the source page is used as transitional content, making page transitions visually more natural and smooth, allowing users to clearly perceive the connection between pages, while reducing the possibility of a blank screen during the transition. Furthermore, by preloading and caching static resources of the target page, and by converting and compressing the source page screenshot, the number of network requests and data transmission volume are reduced, saving local storage space and speeding up the reading and display of screenshots.

[0070] In step S102, the source page also needs to determine whether to create a preload container. The preload container is explained below; please refer to [link / reference]. Figure 4 , Figure 4 One embodiment of determining the creation of a preload container for a source page includes:

[0071] S401. Determine whether the amount of static resources on the target page is greater than a preset threshold. If so, execute S402.

[0072] When a user performs an action that triggers a page redirect on the source page, the browser or application captures the redirection and generates a redirect instruction from the source page to the target page. At the moment the redirect is triggered, the browser retrieves and extracts links to the static resources of the target page. For each extracted static resource link, the browser uses its internal network request module to construct and send a request. Upon receiving the request, the server returns information containing the resource data. The browser receives the server's response and looks up fields related to file size in the response headers, typically the content length field. The value of the content length field indicates the number of bytes in the static resource, thus obtaining the size of the static resource. The file sizes of all static resources are summed to obtain the total amount of static resources on the target page, and then compared with a preset threshold.

[0073] S402, In response to the redirect instruction, create a preloaded container in the source page;

[0074] The preset threshold is a fixed value pre-set based on factors such as system performance and user experience. When the amount of static resources exceeds the preset threshold, a preloading container is created in the source page in response to the redirect instruction. This container is used to preload the static resources of the target page in the background, reducing the user's waiting time when redirecting to the target page. When the amount of static resources is less than the preset threshold, a preloading container can be omitted, and the page can be redirected directly. This is because smaller amounts of data may load quickly and will not significantly impact the user experience.

[0075] S403. Confirm that the preloaded container has finished loading static resources.

[0076] A preload container can be an iframe, which is an inline frame element within a webpage. An iframe can embed another webpage at a specified location within the current webpage, allowing multiple independent content areas to be displayed simultaneously. An iframe has its own document object model, styles, and scripts, and can be loaded and interacted with independently.

[0077] Add a load completion event listener to the iframe. The event will be triggered when all static resources within the iframe have successfully loaded. Simultaneously, the iframe can be configured with a timed check mechanism to periodically check the loading status of the inline frame. Specific checks include: verifying the existence and non-nullability of the iframe's document object, and checking the loading status of static resources within the iframe page. For example, for stylesheet files, check the number of stylesheets referenced on the page and the links to each stylesheet to ensure all stylesheets have loaded successfully; for images, check each image individually to ensure it has loaded completely; and for script files, check if critical initialization code has been executed.

[0078] Once the system detects that the iframe's document object is complete and all important static resources have been loaded, it determines that the iframe has successfully loaded the target page's static resources.

[0079] In this embodiment, the decision to preload static resources is dynamically based on the amount of static resource data, reducing resource waste caused by blind preloading. When the target page has a large amount of static resource data, a preloading container is created in advance on the source page, and resources are loaded in the background. Through preloading, the page can be quickly displayed during navigation, greatly reducing waiting time. Preloaded static resources can also be stored in the local cache. When the same page is accessed again later, it is read directly from the cache, reducing network requests and further speeding up page loading. At the same time, when a large number of users access a page with a large amount of data at the same time, the preloading mechanism ensures that requests are sent gradually at the source page stage, reducing the risk of browser crashes due to sudden high concurrency requests and improving browser stability.

[0080] In addition to determining whether to create a preloading container based on the size of the static resource data, in some possible embodiments, this application can also consider network conditions to determine whether to create a preloading container. For example, after receiving a user's redirection instruction from the source page to the target page, if the current network condition is detected as poor (e.g., signal strength less than a preset strength threshold), a preloading container is created in the source page in response to the redirection instruction to reduce the possibility of a blank screen during the redirection process due to poor network conditions. Conversely, if the current network condition is detected as good (e.g., signal strength greater than a preset strength threshold), the decision to create a preloading container can be further determined by considering the size of the static resources. That is, if the amount of static resource data is greater than a preset threshold, a preloading container is created in the source page in response to the redirection instruction; if the amount of static resource data is not greater than the preset threshold, no preloading container is created, and the page redirection proceeds directly, because a smaller amount of data may be loaded in a short time and will not significantly affect the user experience.

[0081] The page switching system provided in this application is described in detail below. Please refer to [link / reference]. Figure 5 , Figure 5 One embodiment of a system for page switching provided in this application, the system comprising:

[0082] The acquisition unit 501 is used to acquire the user's redirection instruction from the source page to the target page;

[0083] The response unit 502 is used to respond to the jump instruction, create a preload container in the source page, preload the static resources of the target page through the preload container, and cache the static resources in the local cache;

[0084] The jump unit 503 is used to jump to the target page and load the static resources of the target page from the local cache first.

[0085] This application also provides a page switching device, please refer to [link to device]. Figure 6, Figure 6 One embodiment of the page switching apparatus provided in this application includes:

[0086] Processor 601, memory 602, input / output unit 603, bus 604;

[0087] The processor 601 is connected to the memory 602, the input / output unit 603, and the bus 604;

[0088] The memory 602 stores a program, and the processor 601 calls the program to execute any of the page switching methods described above. For detailed implementation details, please refer to [link to specific implementation details]. Figure 1 - Figure 4 Examples are not described here.

[0089] This application also relates to a computer-readable storage medium on which a program is stored, which, when run on a computer, causes the computer to perform any of the page switching methods described above.

[0090] Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the specific working processes of the systems, devices, and units described above can be referred to the corresponding processes in the foregoing method embodiments, and will not be repeated here.

[0091] In the several embodiments provided in this application, it should be understood that the disclosed systems, apparatuses, and methods can be implemented in other ways. For example, the apparatus embodiments described above are merely illustrative; for instance, the division of units is only a logical functional division, and in actual implementation, there may be other division methods. For example, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Furthermore, the coupling or direct coupling or communication connection shown or discussed may be an indirect coupling or communication connection between apparatuses or units through some interfaces, and may be electrical, mechanical, or other forms.

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

[0093] Furthermore, the functional units in the various embodiments of this application can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The integrated unit can be implemented in hardware or as a software functional unit.

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

Claims

1. A method for page switching, characterized in that, The method includes: Obtain the redirection command from the source page to the target page; In response to the redirection instruction, a preload container is created in the source page, and the static resources of the target page are preloaded through the preload container and cached in the local cache; Redirect to the target page and load the static resources of the target page from the local cache.

2. The page switching method according to claim 1, characterized in that, After the jump to the target page, the method further includes: Display transition content on the target page; After loading the static resources of the target page from the local cache, the method further includes: Remove the transition content and display the actual content of the target page.

3. The page switching method according to claim 2, characterized in that, The transition content may be a jump animation, a loading progress bar, or a screenshot of the source page.

4. The page switching method according to claim 3, characterized in that, When the transition content is a screenshot of the source page, the method further includes the following steps before redirecting to the target page: Take a screenshot of the source page to obtain a screenshot of the source page; The screenshot of the source page is stored in the local cache.

5. The page switching method according to claim 1, characterized in that, The step of creating a preload container on the source page in response to the redirect instruction includes: Determine whether the amount of static resources on the target page exceeds a preset threshold; If so, then in response to the jump instruction, a preload container is created in the source page.

6. The page switching method according to claim 1, characterized in that, Before redirecting to the target page, the method further includes: Determine that the preloaded container has finished loading the static resources.

7. The method for page switching according to any one of claims 1 to 6, characterized in that, The preloaded container is an iframe.

8. A page switching system, characterized in that, The system includes: The acquisition unit is used to acquire the user's redirection instruction from the source page to the target page; A response unit is used to respond to the jump instruction, create a preload container in the source page, preload the static resources of the target page through the preload container, and cache the static resources in the local cache; The jump unit is used to jump to the target page and prioritize loading the static resources of the target page from the local cache.

9. A page switching device, characterized in that, The device includes: Processor, memory, input / output units, and bus; The processor is connected to the memory, the input / output unit, and the bus; The memory stores a program, which the processor invokes to perform the method as described in any one of claims 1 to 7.

10. A computer-readable storage medium having a program stored thereon, the program performing the method as claimed in any one of claims 1 to 7 when executed on a computer.

Images