Web page display method, electronic device, chip system, and readable storage medium

Abstract

Provided in the present application are a web page display method, an electronic device, a chip system, and a readable storage medium. When a function provided by a browser application of going forwards from a master web page to a slave web page or going backwards from the slave web page to the master web page is implemented, in the process of going forwards or backwards, the method can display a spliced image formed by a first image obtained by capturing the master web page and a second image obtained by capturing the slave web page, and use the spliced image as a transition interface for going forwards or backwards, such that the master web page can smoothly go forwards to the slave web page or the slave web page can smoothly go backwards to the master web page, so as to make it easy for users to accept changes in web pages, thereby improving user experience.

Description

A webpage display method, electronic device, chip system, and readable storage medium

[0001] This application claims priority to Chinese Patent Application No. 202510486884.4, filed on April 17, 2025, entitled "A Webpage Display Method, Electronic Device, Chip System and Readable Storage Medium", the entire contents of which are incorporated herein by reference. Technical Field

[0002] This application relates to the field of terminals, and more particularly to a web page display method, electronic device, chip system, and readable storage medium. Background Technology

[0003] Typically, browser applications on electronic devices provide users with functions such as searching for information, browsing web pages, and downloading videos. While browsing the web, the browser can display primary and secondary web pages for the user to view. For example, in a news webpage, the primary webpage might be the one displaying a list of news headlines, while secondary webpages might be the ones displaying the content of the news articles.

[0004] Browsers can also provide forward and back navigation functions for main and secondary web pages. For example, you can go back from a secondary web page to the main web page, or go forward from the main web page to a secondary web page.

[0005] In the relevant solutions, the browser switches between main and secondary web pages to achieve forward or backward navigation. However, this method of switching between entire pages may cause the web page to jump, affecting the user experience. Summary of the Invention

[0006] This application provides a webpage display method, electronic device, chip system, and readable storage medium that enable smooth switching between master and slave webpages, making it easier for users to receive changes to the webpage and improving the user experience.

[0007] Firstly, a webpage display method is provided, the method comprising:

[0008] An electronic device displays a main webpage, which includes a first control corresponding to a secondary webpage; in response to a first operation on the first control, the secondary webpage is displayed, the first operation indicating that the secondary webpage is opened within the main webpage; in response to a second operation on the secondary webpage, a stitched image is generated based on a first image and a second image, the second operation indicating a switch from the secondary webpage to the main webpage, the first image being obtained by cropping the main webpage and the second image being obtained by cropping the secondary webpage; during the switch from the secondary webpage to the main webpage, the stitched image is displayed; if the second operation is stopped, the main webpage is displayed.

[0009] In response to a second operation (switching from a webpage to the main webpage, or backtracking from a webpage to the main webpage), this application embodiment generates a stitched image based on a first image and a second image. During the switch from the webpage to the main webpage, the stitched image obtained by cropping the first image from the main webpage and the second image from the webpage is displayed. This stitched image serves as a transition interface when switching between the main and secondary webpages, enabling a smooth transition and making it easier for users to accept changes in the webpage, thus improving the user experience.

[0010] In other related solutions, during the transition from a secondary webpage to the primary webpage, electronic devices can achieve a similar display effect by compositing layers from both the primary and secondary webpages. However, this approach requires simultaneously processing and displaying portions of both layers and adjusting parameters such as layer transparency and position in real time. This necessitates strong graphics processing and computing capabilities from the electronic device. For some less powerful devices, this may cause lag and stuttering, negatively impacting the user experience.

[0011] In this embodiment, during the switching from a webpage to the main webpage, a spliced ​​image is displayed, consisting of a first image captured from the main webpage and a second image captured from the webpage. Only the parameters of this spliced ​​image need to be processed, such as moving the position of the spliced ​​image. There is no need to process and display the content of multiple layers simultaneously. Compared with related solutions, this reduces the performance requirements of electronic devices and avoids phenomena such as lag and delay in electronic devices.

[0012] In conjunction with the first aspect, in one possible implementation of the first aspect, the electronic device generates a stitched image based on the first image and the second image, including:

[0013] The electronic device creates a view area for displaying the stitched image, and there is one view area; based on the first image and the second image, a stitched image is generated and drawn on the view area.

[0014] In some solutions, the transition between master and slave web pages is achieved by creating multiple WebView instances to create multiple webpage view areas, displaying a smooth interface during the switch. For example, two WebView instances are created to form two webpage view areas: one displaying the slave webpage and the other displaying the master webpage. While this approach of creating multiple WebView instances can achieve a similar effect to a seamless transition between master and slave webpages, it also presents several problems. Each WebView instance consumes CPU or GPU resources for tasks such as page rendering, script execution, and network requests. Each instance also requires memory to store page data, scripts, images, and other resources, and may initiate independent network requests to load page resources. This can lead to a series of issues, including increased CPU or GPU load, increased memory usage, and increased network resource consumption. These problems can result in slower electronic device response, increased power consumption, and a negative impact on user experience.

[0015] In this embodiment, in response to a second operation (switching from a webpage to the main webpage, also known as a backtracking operation from a webpage to the main webpage), a view area is created, and the stitched image is drawn in this view area. During the switch from the webpage to the main webpage, the stitched image is displayed through this view area. Since a view area can be created by a View instance, a WebView instance, or a SurfaceView instance, the flexibility of creating view areas is increased. Furthermore, compared to related schemes that create multiple webpage view areas using multiple WebView instances, it can reduce CPU or GPU load, reduce memory usage, and reduce network resource consumption, thereby improving the response speed of electronic devices, reducing power consumption, and enhancing the user experience.

[0016] In conjunction with the first aspect, in one possible implementation of the first aspect, the electronic device displays the main webpage when the second operation is stopped, including:

[0017] When the second operation is stopped, the electronic device retrieves the main resources and sub-resources of the main webpage from the storage resources of the main webpage. The storage resources of the main webpage include the main resources and sub-resources of the main webpage. The main resources refer to the resources corresponding to the network address of the main webpage, and the sub-resources refer to the resources introduced in the main resources. Based on the main resources and sub-resources of the main webpage, the main webpage is displayed.

[0018] In the relevant solutions, electronic devices only store the sub-resources of web pages, not the main resources of the web pages. Therefore, when returning to the main web page from the secondary web page (in the case that the second operation is stopped), the sub-resources of the web page are usually obtained from the main web page's stored resources, but the main resources of the web page still need to be requested and loaded. This increases the number of requests and the amount of data transmission, which may slow down the loading speed of the main web page, increase the user's waiting time, and affect the user experience.

[0019] In this embodiment, when navigating back from a webpage to the main webpage and displaying the main webpage, the main resources and sub-resources of the main webpage can be obtained from the main webpage's storage resources. The main webpage is then displayed based on the obtained main resources and sub-resources. Compared to related solutions, there is no need to request and load the main resources of the webpage again, thus reducing the number of requests and the amount of data transmitted, improving the main webpage loading speed, and reducing user waiting time.

[0020] In conjunction with the first aspect, in one possible implementation of the first aspect, the electronic device displays the main webpage, including:

[0021] Electronic devices obtain the main resources and sub-resources of a webpage from a server. The main resources refer to the resources corresponding to the webpage's network address, and the sub-resources refer to the resources incorporated within the main resources. The main resources and sub-resources of the main webpage are stored to obtain the stored resources of the main webpage. Based on the main resources and sub-resources of the main webpage, the main webpage is displayed; or...

[0022] The electronic device retrieves the main and sub-resources of the main webpage from its storage resources; and displays the main webpage based on the main and sub-resources.

[0023] The proposed solution typically stores the child resources of the main webpage, but not the main webpage's main resources. The reasons are as follows: The main resources of the main webpage refer to HTML files, which are usually the core content of the webpage and their content may change frequently with page updates. If older versions of the HTML files are cached, users may see outdated page content, affecting user experience. On the other hand, child resources of the main webpage refer to CSS tables, JavaScript files, and images, which typically do not change frequently with webpage updates. Caching these resources can reduce network traffic to some extent.

[0024] Since the relevant solution only stores the sub-resources of the main webpage, the electronic device can obtain the sub-resources of the main webpage from the stored resources, but still needs to request and load the main webpage resources. This will increase the number of requests and the amount of data transmitted, which may slow down the loading speed of the main webpage, increase the user's waiting time, and affect the user experience.

[0025] In this embodiment, after obtaining the main resources and sub-resources of a main webpage from a server, the electronic device can store the main resources and sub-resources of the main webpage to obtain the storage resources of the main webpage; based on the main resources and sub-resources of the main webpage, the main webpage is displayed. When the electronic device needs to display the main webpage again, it can retrieve the main resources and sub-resources of the main webpage from the storage resources of the main webpage; based on the main resources and sub-resources of the main webpage, the main webpage is displayed. Since the electronic device can retrieve the main resources and sub-resources of the main webpage from the storage resources of the main webpage, the number of requests and data transmission volume can be reduced, the main webpage loading speed can be improved, and the user waiting time can be reduced.

[0026] In conjunction with the first aspect, in one possible implementation of the first aspect, before displaying the main webpage when the second operation is stopped, the method further includes:

[0027] Lock the storage resources of the main webpage. The storage resources of the main webpage include the main resources and sub-resources of the main webpage. The main resources refer to the resources corresponding to the network address of the main webpage, and the sub-resources refer to the resources introduced in the main resources.

[0028] In this embodiment of the application, by locking the storage resources of the main webpage, the electronic device can ensure that when accessing the storage resources of the main webpage again, the storage resources of the main webpage will not become inconsistent or lost due to modification or deletion, thereby improving the overall performance of the electronic device.

[0029] In conjunction with the first aspect, in one possible implementation of the first aspect, after the electronic device generates a stitched image based on the first image and the second image, the method further includes:

[0030] Electronic devices store the stitched images, thus obtaining storage resources for the stitched images; and,

[0031] If the second operation is stopped, after displaying the main webpage, the method further includes:

[0032] Electronic devices free up storage resources for stitched images.

[0033] In this embodiment of the application, after the main webpage is displayed when the second operation is stopped, the storage resources of the spliced ​​image can be released. This reduces the storage space occupied by the spliced ​​image, thereby improving the response speed and stability of the electronic device.

[0034] In conjunction with the first aspect, in one possible implementation of the first aspect, the electronic device displays a spliced ​​image during the process of switching from a webpage to a main webpage, including:

[0035] When an electronic device switches from a webpage to the main webpage, the position of the view area changes; based on the changed position of the view area, a spliced ​​image is displayed.

[0036] In conjunction with the first aspect, in one possible implementation of the first aspect, the second operation is a rightward sliding operation.

[0037] In conjunction with the first aspect, in one possible implementation of the first aspect, the method further includes:

[0038] In response to a third operation on the main webpage, the electronic device generates a stitched image based on the first and second images. The third operation is used to indicate a switch from the main webpage to the secondary webpage. During the switch from the main webpage to the secondary webpage, the stitched image is displayed. If the third operation is stopped, the secondary webpage is displayed.

[0039] In a second aspect, an electronic device is provided for performing the method provided in the first aspect. Specifically, the electronic device may include a processing unit for performing any possible implementation of the first aspect.

[0040] Thirdly, an electronic device is provided, comprising: one or more processors; one or more memories; wherein the one or more memories store one or more computer programs, the one or more computer programs including instructions that, when executed by the one or more processors, cause the electronic device to perform any possible implementation of the method in the first aspect described above.

[0041] Fourthly, a computer-readable storage medium is provided, including computer instructions that, when executed on an electronic device, cause the electronic device to perform the method described in the first aspect.

[0042] Fifthly, a chip is provided, including a memory for storing instructions; and a processor for retrieving and executing the instructions from the memory, causing an electronic device on which the chip is mounted to perform the method described in the first aspect above. Attached Figure Description

[0043] Figure 1 is a schematic diagram of a webpage jumping.

[0044] Figure 2 is a schematic diagram of a smoothly transitioning webpage provided in an embodiment of this application.

[0045] Figure 3 is a schematic diagram of the structure of an electronic device 300 provided in an embodiment of this application.

[0046] Figure 4 is a schematic diagram of the software system of the electronic device 300 according to an embodiment of this application.

[0047] Figure 5 is a schematic diagram of an application scenario provided by an embodiment of this application.

[0048] Figure 6 is a schematic diagram of a webpage display method provided in an embodiment of this application.

[0049] Figure 7 is a schematic diagram of obtaining web page resources according to an embodiment of this application.

[0050] Figure 8 is a schematic diagram of a webpage display provided in an embodiment of this application.

[0051] Figure 9 is an example screenshot provided in an embodiment of this application.

[0052] Figure 10 is a schematic diagram of returning from a sub-webpage to the main webpage according to an embodiment of this application.

[0053] Figure 11 is an example diagram of setting a view area according to an embodiment of this application.

[0054] Figure 12 is an example diagram of displaying a spliced ​​image provided in an embodiment of this application.

[0055] Figure 13 is an example diagram of adjusting layer relationships provided in an embodiment of this application. Detailed Implementation

[0056] The technical solutions in the embodiments of this application are described below.

[0057] Typically, browser applications on electronic devices provide users with functions such as searching for information, browsing web pages, and downloading videos. While browsing the web, the browser can display primary and secondary web pages for the user to view. For example, in a news webpage, the primary webpage might be the one displaying a list of news headlines, while secondary webpages might be the ones displaying the content of the news articles.

[0058] Browsers can also provide forward and back navigation functions for main and secondary web pages. For example, you can go back from a secondary web page to the main web page, or go forward from the main web page to a secondary web page.

[0059] In the relevant solutions, the browser switches between main and secondary web pages to achieve forward or backward navigation. However, this method of switching between entire pages may cause the web page to jump, affecting the user experience.

[0060] For example, please refer to Figure 1, which is a schematic diagram of a webpage jumping. It should be understood that webpage jumping is also called interface jumping, layout jumping, or content jumping, etc. As shown in Figure 1(a), the interface 110 shown is the main webpage of a news webpage, displaying multiple news titles, such as news title 1. A user can click on news title 1. In response to the user's click, the electronic device begins loading the secondary webpage corresponding to news title 1 and displays the interface 120 shown in Figure 1(b). Interface 120 displays a loading progress bar 121, which is used to display the loading progress. After loading is complete, the interface 130 (secondary webpage) shown in Figure 1(c) is displayed, showing the news article content 1 corresponding to news title 1. It should be noted that the relationship between the webpage and the user interface (hereinafter referred to as the interface) mentioned above is as follows: a webpage is a form of user interface, which is a user interface displayed through a browser.

[0061] Users can swipe right on news article content 1 in interface 130. In response to the user's swipe, the electronic device begins loading the main webpage corresponding to news article content 1 and displays interface 140 as shown in Figure 1(d). Interface 140 displays a loading progress bar 141 to show the loading progress. After loading is complete, interface 110 (main webpage) is displayed.

[0062] As shown in Figure 1 above, during the process of navigating from webpage 130 to the main webpage 110, a transition interface (interface 140) is displayed. The difference between this transition interface and the one on webpage 130 is that the latter includes a loading progress bar that displays the loading progress. After loading is complete, the user's interface suddenly "jumps" from webpage 130 to the main webpage 110. This sudden page jump usually results in a choppy and disjointed visual experience, negatively impacting the user experience.

[0063] To address the aforementioned issues, this application provides a webpage display method that displays a stitched image composed of screenshots from the main webpage and the secondary webpage during the switching between main and secondary webpages. This stitched image serves as a transition interface when switching between main and secondary webpages, enabling a smooth transition and making it easier for users to perceive changes in the webpage, thus improving the user experience.

[0064] For example, please refer to Figure 2, which is a schematic diagram of a smoothly transitioning webpage provided in an embodiment of this application.

[0065] The interface 210 shown in Figure 2(a) is the same as the interface shown in Figure 1(c), both being web pages. The method of opening this interface is the same as in Figure 1 and will not be repeated here. The user can begin a right swipe operation in interface 210. In response to the user's right swipe, interface 220 shown in Figure 2(b) is displayed. This interface is a transition interface, displaying a stitched image 221 composed of screenshots of the main web page and the secondary web page. The user can continue swiping in interface 220. If the user's swipe distance exceeds a threshold 1 (for example, the threshold 1 could refer to 55% of the screen width or the web page width, etc., without limitation), interface 230 shown in Figure 2(c) is displayed. Interface 230 is the same as the interface shown in Figure 1(a), both being the main web page.

[0066] As can be seen from Figure 2 above, during the process of navigating from webpage 210 to the main webpage 230, the spliced ​​image 221 can be displayed. Compared with the scheme shown in Figure 1, this avoids the interface suddenly "jumping" from the webpage to the main webpage, and allows the interface to smoothly switch from the webpage to the main webpage.

[0067] The webpage display method provided in this application is applied to electronic devices. Electronic devices can also be called terminals, user equipment (UE), mobile stations (MS), mobile terminals (MT), etc. Electronic devices can be mobile phones, smart TVs, wearable devices, tablets, computers with wireless transceiver capabilities, virtual reality (VR) electronic devices, augmented reality (AR) electronic devices, wireless terminals in industrial control, wireless terminals in self-driving, wireless terminals in remote medical surgery, wireless terminals in smart grids, wireless terminals in transportation safety, wireless terminals in smart cities, wireless terminals in smart homes, and so on. The embodiments of this application do not limit the specific technologies or device forms used in the electronic devices.

[0068] Figure 3 is a schematic diagram of the structure of an electronic device 300 (taking a mobile phone as an example) provided in an embodiment of this application. The electronic device 300 may include a processor 310, an external memory interface 320, an internal memory 321, a universal serial bus (USB) interface 330, antenna 1, antenna 2, a mobile communication module 340, a wireless communication module 350, an audio module 360, a sensor module 370, a camera 381, a display screen 382, ​​etc. The sensor module 370 may include a pressure sensor 370A, a gyroscope sensor 370B, etc.

[0069] Processor 310 may include one or more processing units, such as a central processing unit (CPU), application processor (AP), modem processor, graphics processing unit (GPU), image signal processor (ISP), controller, memory, video codec, digital signal processor (DSP), baseband processor, and / or neural network processing unit (NPU). These different processing units may be independent devices or integrated into one or more processors.

[0070] In this embodiment of the application, the processor 310 can execute the webpage display method provided in this embodiment of the application.

[0071] This concludes the introduction to the hardware structure of electronic device 300. It is understood that the components included in the hardware structure shown in Figure 3 do not constitute a specific limitation on electronic device 300. Electronic device 300 may have more or fewer components than shown in the figure, may combine two or more components, or may have different component configurations. The various components shown in the figure can be implemented in hardware, software, or a combination of hardware and software, including one or more signal processing and / or application-specific integrated circuits.

[0072] In addition, an operating system runs on top of these components. Examples include Apple's iOS, Google's Android, and Microsoft's Windows. Applications can be installed and run on this operating system.

[0073] The operating system of the electronic device 300 can adopt a layered architecture, event-driven architecture, microkernel architecture, microservice architecture, or cloud architecture. This application embodiment uses the layered architecture Android system as an example to exemplify the software system of the electronic device 300.

[0074] Figure 4 is a schematic diagram of the software system of the electronic device 300 according to an embodiment of this application. The software system includes several layers, each with a clear role and division of labor, and the layers communicate with each other through software interfaces. In some embodiments, the software system is divided from top to bottom into an application layer, an application framework layer, a local layer, a hardware abstraction layer, and a kernel layer.

[0075] The application layer can include a series of application packages, such as camera, contacts, phone, messages, weather, settings, games, browser, etc. When these application packages are run, they can access the various service modules provided in the application framework layer through application programming interfaces (APIs) and execute corresponding business logic.

[0076] The application framework layer, or simply the framework layer, provides application programming interfaces (APIs) and programming frameworks for applications in the application layer. The application framework layer includes a set of predefined functions.

[0077] The framework layer can include a browser management module, event handlers, etc. The browser management module refers to the ActivityManager component, which is primarily used to start the browser process and manage its lifecycle. When a user clicks the browser icon, the software system uses ActivityManager to create and start the browser process. During browser operation, ActivityManager continuously manages the browser's lifecycle, handling state changes such as browser interface switching and background operation. Event handlers are mainly responsible for listening to and processing user interactions on the browser interface, such as capturing user input events, identifying event types, and triggering corresponding logical operations (e.g., page scrolling, link navigation, updating the user interface).

[0078] The Native Layer, also known as the Native C / C++ Layer, provides implementations for many core operating system functions, including key libraries for graphics, multimedia, and networking. This layer can interact with hardware through the Hardware Abstraction Layer (HAL), enabling upper-layer applications to access hardware resources in a unified way without needing to concern themselves with the specific hardware details.

[0079] Specifically, in this embodiment, the local layer may include a browser engine and a graphics library. The browser engine is primarily used to render, draw, and display web pages, enabling them to be loaded onto the user interface and displayed. The browser engine includes a network module, a rendering instruction generation module, and a rendering instruction execution module. The network module is mainly responsible for handling network requests and downloading web page resources. It manages communication between the browser and the server, including sending HTTP requests, receiving responses, handling proxy and caching logic, and controlling connection reuse. The rendering instruction generation module can refer to a rendering client (RenderClient), which is mainly responsible for parsing web page resources and generating drawing instructions. The rendering instruction execution module can refer to a GPU client (GPUServer), which is mainly used to receive drawing instructions sent by the RenderClient and convert these commands into GPU-executable instructions through graphics APIs (such as OpenGL, Vulkan, etc.), thereby achieving efficient graphics rendering. The graphics library can refer to the 2D graphics rendering engine Skia, which is mainly responsible for handling 2D graphics drawing tasks in the browser, including drawing shapes, text, and images. For example, Skia can be used to construct the stitched images involved in this embodiment.

[0080] The Hardware Abstraction Layer (HAL) isolates the details of hardware devices from the operating system and applications, freeing software developers from concern themselves with the specific hardware implementation details. This layer includes sensor HALs, network HALs, and more.

[0081] The kernel layer is the layer between hardware and software. It includes sensor drivers and display drivers.

[0082] It is understood that the layers in the software system shown in Figure 4, and the components contained in each layer, do not constitute a specific limitation on the electronic device. In other embodiments of this application, the electronic device may include more or fewer layers than shown in the figure, and each layer may include more or fewer components. For example, the local layer may also include the Android Runtime, which provides the necessary environment and infrastructure for the application to run.

[0083] It is understood that, in order to implement the webpage display method in the embodiments of this application, the electronic device includes hardware and / or software modules that perform various functions. Based on the algorithm steps of the examples described in the embodiments disclosed herein, this application can be implemented in hardware or a combination of hardware and computer software. Whether a function is executed by hardware or by computer software driving hardware depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to implement the described functions for each specific application in conjunction with the embodiments.

[0084] It should be noted that although the embodiments of this application are illustrated using the Android system as an example, the basic principles are equally applicable to electronic devices based on operating systems such as iOS, Windows, or HarmonyOS.

[0085] The application scenarios of the webpage display method provided in the embodiments of this application are described below with reference to the accompanying drawings.

[0086] It should be understood that the webpage display method provided in this application embodiment can be applied to the scenario shown in Figure 2, where the user navigates from a secondary webpage to the primary webpage, or to the scenario where the user navigates from the primary webpage to a secondary webpage, etc.

[0087] For example, please refer to Figure 5, which is a schematic diagram of an application scenario provided by an embodiment of this application. It illustrates the process of displaying a secondary webpage using the webpage display method provided by this embodiment in a scenario where the user navigates from a main webpage to a secondary webpage.

[0088] As shown in interface 510 in Figure 5(a), interface 510 includes a browser icon 511. The user can click this icon, and the electronic device, in response to the click, displays interface 520 as shown in Figure 5(b). Interface 520 is the same as interface 110 shown in Figure 1, both being the main webpage. The user can click on news headline 1 in interface 520. In response to this click, the electronic device begins loading the secondary webpage corresponding to news headline 1 and displays interface 530 as shown in Figure 5(c), which displays a loading progress bar 531. After loading is complete, interface 540 as shown in Figure 5(d) is displayed, showing the news article content 1 corresponding to news headline 1. The user can swipe up in interface 540 to the bottom of the news article content 1, displaying interface 550 as shown in Figure 5(e). Interface 550 includes multiple news headlines embedded within the news article content 1, such as news headlines 11, 12, and 13 shown in interface 550.

[0089] The user can click on the news title 11 shown in interface 550. In response to the user's click on the news title 11, the electronic device begins to load the webpage corresponding to the news title 11 and displays interface 560 as shown in Figure 5(f), with a loading progress bar 561. After loading is complete, interface 570 as shown in Figure 5(g) is displayed, showing the news article content 11 corresponding to the news title 11.

[0090] In the above interface, interface 520 can be considered as the main webpage, interfaces 540 and 550 can be considered as first-level subordinate webpages, and interface 570 can be considered as a second-level subordinate webpage. Among them, the first-level subordinate webpage can be considered as the main webpage of the second-level subordinate webpage.

[0091] The electronic device can perform a right swipe operation on interface 570 (secondary webpage). In response to the user's right swipe operation, interface 580 shown in Figure 5(h) is displayed. This interface is a transition interface, which displays a stitched image composed of screenshots of the secondary webpage and the primary webpage. The user can continue to swipe on interface 580. If the user's swipe distance is greater than a threshold 1, the user will return to interface 590 shown in Figure 5(i). Interface 590 is the same as interface 550, both being the primary webpage (i.e., the main webpage of the secondary webpage).

[0092] Users can swipe left on interface 590 (the main webpage corresponding to the secondary webpage). In response to the user's swipe, interface 580, shown in (h) of Figure 5, is displayed. This interface is a transitional interface, displaying a stitched image composed of screenshots of the secondary webpage and the primary webpage. Users can continue swiping on interface 580. If the user's swipe distance exceeds a threshold of 1, the user will proceed to interface 570 (the secondary webpage).

[0093] The above section describes the application scenarios of the webpage display method provided in the embodiments of this application. The following section describes the implementation of the webpage display method.

[0094] For example, please refer to Figure 6, which is a schematic diagram of a webpage display method provided in an embodiment of this application. The method includes steps S601 to S606.

[0095] In step S601, the main webpage can be the core webpage displayed by the browser. It plays a dominant role in the multi-level webpage structure, undertaking important roles such as navigation, information aggregation, and function entry. For example, interface 520 shown in Figure 5 is the main webpage, which provides function entry for the first-level sub-webpage (interface 540). The main webpage can also refer to a webpage that embeds function entry for sub-webpages. For example, the first-level sub-webpage (interface 550) shown in Figure 5 provides function entry for the second-level sub-webpage (interface 570), so interface 550 can also be considered the main webpage of the second-level sub-webpage.

[0096] In other embodiments, secondary web pages are also mentioned here. A secondary web page is a subpage or auxiliary page of the main web page. It relies on the navigation or function entry points of the main web page to perform specific tasks or display detailed information. For example, if interface 520 shown in Figure 5 is the main web page, then news titles 1 to 8 on it can each correspond to a secondary web page; for example, news title 1 corresponds to the secondary web page shown in interface 540. Similarly, if interface 550 shown in Figure 5 is the main web page, then news titles 11 to 13 on it can each correspond to a secondary web page; for example, news title 11 corresponds to the secondary web page shown in interface 570.

[0097] In step S601, the user's operation of opening the main webpage can refer to the user clicking the browser icon 511 in the interface 510 shown in Figure 5, or it can refer to the user entering a Uniform Resource Locator (URL) in the browser address bar, etc. This application embodiment does not limit this. The Uniform Resource Locator (URL) can also be called a network address, website address, etc.

[0098] In step S601, webpage resources include main webpage resources and sub-resources. The main webpage resource in step S601 refers to the resource that the user enters a URL in the browser address bar or requests directly through a link. The main resource typically refers to a HyperText Markup Language (HTML) document. The HTML document is the foundation for building a webpage, containing the webpage's structure, content, and references to other sub-resources. Sub-resources refer to other resources referenced by various tags within the main resource; these resources are essential for the complete display and operation of the webpage. Common sub-resources include Cascading Style Sheets (CCS), JavaScript files, images, font files, audio and video files, etc.

[0099] In step S601, the electronic device can request web page resources from the server through the configured browser engine to obtain the web page resources, or it can obtain the web page resources from the cache. The specific implementation of obtaining web page resources can be found in Figure 7.

[0100] Figure 7 is a schematic diagram of obtaining web page resources according to an embodiment of this application. It illustrates an implementation method for obtaining web page resources of a main web page. It should be noted that this implementation method is also applicable to obtaining web page resources of sub-web pages. This implementation method includes steps S701 to S711.

[0101] In step S701, the user performs the operation of opening the main webpage, and the browser engine receives the network address A of the main webpage.

[0102] For an explanation of browser engines, please refer to the explanation of browser engines in the local layer in Figure 4.

[0103] In implementation, for example, when a user launches the browser in interface 510 shown in Figure 5, the browser engine will receive the network address of the main webpage configured by default in the browser. Or, for example, when a user enters the network address of the main webpage in the browser, the browser engine will receive the network address of the main webpage; this is not limited. For ease of description, the network address of the main webpage in this embodiment is referred to as network address A.

[0104] In step S702, the browser engine determines whether there is a cache identifier A corresponding to network address A, so as to determine whether there is a cache resource of the main webpage in the cache.

[0105] It should be understood that when a browser engine first requests webpage resources from a server based on network address A, the server returns the webpage resources of the main webpage corresponding to network address A to the browser engine. After obtaining the webpage resources, the browser engine can store them in its cache. The webpage resources of the main webpage stored in the cache can be called the cached resources of the main webpage. The browser engine can also generate a cache identifier corresponding to the cached resources of the main webpage (for ease of description, this cache identifier can be called cache identifier A).

[0106] The cache identifier A and the cached resources of the main webpage can be understood as a set of key-value pairs. A key-value pair is a common data structure consisting of two parts: a key and a value. The key is a unique identifier used to distinguish different data items; it can be a string, a number, or other immutable data type. The key uniquely identifies a data item, like an address or label. The value is the data associated with the key and can be of any type, such as a string, number, object, list, etc. The value is the specific content that the key points to. In this embodiment, the cache identifier A can refer to the key, and the cached resources of the main webpage can refer to the value. The browser engine can retrieve the cached resources of the main webpage in the cache based on the key-value pairs.

[0107] When the browser engine receives network address A again, it can determine whether the cached resource (value) of the main webpage exists in the cache based on whether the cache identifier A (key) exists.

[0108] As shown in Figure 7, if the browser engine determines in step S702 that there is no cache identifier A, it proves that the browser engine has not yet requested the server to load web page resources based on network address A. Then the browser engine can request the server to load web page resources, obtain the web page resources of the main web page and store them.

[0109] If the browser engine determines the existence of cache identifier A through step S702, proving that the browser engine previously requested and loaded web page resources from the server based on network address A and stored those resources in the cache, then the browser engine also needs to determine through step S706 whether the cached resources of the main web page in the cache have exceeded the cache expiration date. If the cache expiration date has not passed, the browser engine can retrieve the web page resources of the main web page from the cache. If the cache expiration date has passed, it also needs to determine through step S709 whether the web page resources have been modified. If the web page resources have not been modified, the browser engine can retrieve the web page resources of the main web page from the cache. If the web page resources have been modified, the server can return the modified web page resources to the browser engine, and the browser engine can then retrieve the web page resources of the main web page.

[0110] As described above, there are four ways in which the electronic device obtains the main and sub-resources of the main webpage in step 601 shown in Figure 6. Method 1: The webpage resource is not in the cache. The process of obtaining the webpage resource in this method can be referred to as S701 to S705 in Figure 7. Method 2: The webpage resource exists in the cache and the webpage resource has not exceeded the cache expiration date. The process of obtaining the webpage resource in this method can be referred to as S701, S702, S706, and S707 in Figure 7. Method 3: The webpage resource exists in the cache, the webpage resource has exceeded the cache expiration date, and the webpage resource has not been modified. The process of obtaining the webpage resource in this method can be referred to as S701, S702, S706, S708, S709, and S707. Method 4: The webpage resource exists in the cache, the webpage resource has exceeded the cache expiration date, and the webpage resource has been modified. The process of obtaining the webpage resource in this method can be referred to as S701, S702, S706, S708, and S711.

[0111] The following provides a detailed introduction to the four methods mentioned above, omitting descriptions of repetitive steps.

[0112] Method 1:

[0113] In step S703, if the browser engine determines that there is no cache identifier A, the browser engine requests the server to load the web page resource, and the request includes network address A.

[0114] In step S704, the server returns to the browser engine the main resource A1 of the main webpage, the identifier of the main resource A1 and / or the last modification time of the main resource A1, and the cache validity period and / or the absolute time of cache expiration of the main resource A1.

[0115] Here, the main resource A1 refers to the HTML file of the main webpage. Typically, after the browser engine sends a loading request to the server, the server returns a response to the browser engine, which may include the main resource A1.

[0116] The entity tag (ETag) of the main resource A1 is a unique identifier generated by the server for the main resource of the main webpage, typically based on the content of the main resource. The server includes the ETag of the main resource A1 in the response it returns to the browser engine. The ETag is primarily used to verify whether a resource has been modified. For example, when the browser engine sends a load request to the server, it can include an If-None-Match field in the request header, which includes the ETag value obtained from the previous response from the server. The server compares the ETag value in the load request with the ETag value of the current resource on the server. If the two ETag values ​​are the same, the resource has not been modified; if they are different, the resource has been modified. If the resource has not been modified, the server returns a 304 status code to the browser engine, informing it that the resource has not been modified, and the browser engine can continue to use the cached resource. If the resource has been modified, the server returns a 200 status code to the browser engine, informing it that the resource has been modified, and returns the new resource content and the new ETag value. The browser engine then updates its cached resource and uses the new resource.

[0117] The Last-Modified time (Last-Modified) of main resource A1 is the time when main resource A1 was last modified, as returned by the server to the browser engine. Last-Modified is primarily used to verify whether a resource has been modified. For example, when the browser engine sends a load request to the server, it can include the If-Modified-Since field in the request header. This field includes the Last-Modified timestamp previously obtained from the server (referred to as timestamp 1 for ease of description). The server compares the Last-Modified timestamp in the request with the timestamp of the resource's last modification time on the server (referred to as timestamp 2 for ease of description). If the two timestamps are the same, or if timestamp 1 is after timestamp 2, it means the resource has not been modified. If timestamp 1 is before timestamp 2, it means the resource has been modified. If the resource has been modified, the server returns a 200 status code to the browser engine to inform it that the resource has been modified, and returns the new resource content and a new ETag value. The browser engine then updates its cached resource and uses the new resource.

[0118] It should be noted that the embodiments of this application can verify whether the main resource has been modified using the aforementioned ETag, or by using the aforementioned Last-Modified, or by using both ETag and Last-Modified simultaneously. When using both ETag and Last-Modified for verification, since ETag is a unique identifier generated by the server and related to the resource content, it is usually generated based on the resource content. If the resource content changes, the ETag value will also change accordingly. In contrast, Last-Modified is only based on the last modification time of the resource, which may not accurately reflect changes in the resource content. For example, if the resource is modified multiple times in a short period of time, the Last-Modified time may be the same, causing cache verification to fail. Therefore, the priority of using ETag for verification is higher than that of using Last-Modified for verification.

[0119] In step S704, the cache expiration time (max-age) of the main resource A1 indicates how long the resource is valid. Typically, after the browser engine sends a load request to the server, the server returns a response to the browser engine. This response includes the Cache-control header field, which can carry the max-age value. For example, Cache-Control:max-age = <seconds>The `max-age` parameter is primarily used to verify whether a resource has exceeded its cache expiration date. For example, when a browser engine receives a web address for the first time, it can send a load request to the server. The server's response includes `Cache-Control: max-age = <3600S>`. The browser engine can then calculate the cache expiration date based on the current time and `max-age`. For instance, if the current time is April 23, 2023, at 16:00:00, the cache expiration date is April 23, 2023, at 17:00:00. When the browser engine receives a web address again, it can determine if the time since the web address was received exceeds the cache expiration date. If it hasn't, the webpage resource can be retrieved from the cache. If it has exceeded the cache expiration date, a load request can be sent to the server to retrieve the webpage resource, and the server's response to the browser engine will include the new `max-age`.

[0120] The absolute expiration time (Expires) of the main resource A1's cache is also a response header field. This field specifies the absolute expiration time of the resource. For example, Expires: April 23, 2023, 16:00:00 means that the resource will expire on April 23, 2023, at 16:00:00. Typically, the server includes the Expires header field in the response returned to the browser engine. Expires is mainly used to verify whether the resource has exceeded the cache expiration time. For example, when the browser engine receives a network address for the first time, it can send a load request to the server, and the server's response will include Expires: April 23, 2023, 16:00:00. When the browser engine receives the network address again, it can determine whether the time of receiving the network address has exceeded the cache expiration time (which is April 23, 2023, 16:00:00). If it has not exceeded the cache expiration time, the web page resource can be retrieved from the cache. If the cache expiration period has expired, a load request can be sent to the server to request the web page resource, and the response returned by the server to the browser engine will include the new Expires.

[0121] It should be noted that the embodiments of this application can verify whether a resource has exceeded the cache expiration date using the aforementioned `max-age`, the aforementioned `Expires`, or both. When using both `max-age` and `Expires` simultaneously, `Expires` is a time-based cache control mechanism that relies on browser and server clock synchronization. If the browser and server clocks are not synchronized, inconsistent caching behavior may occur. `Cache-Control:max-age` is a more modern cache control mechanism that provides more flexible instructions. It is based on relative time (in seconds) rather than absolute time and is therefore unaffected by clock synchronization issues. Therefore, verification using `Cache-Control:max-age` has higher priority than verification using `Expires`.

[0122] As described above, when the browser engine obtains the main resource A1 of the main webpage using method one, the server can return the main resource A1, its identifier and / or last modified time, and the cache expiration period and / or absolute cache expiration time to the browser engine based on the loading request. The identifier and / or last modified time of the main resource A1 are used to determine whether to modify it. The cache expiration period and / or absolute cache expiration time of the main resource A1 are used to determine whether the cached resource of the main webpage has exceeded its cache expiration period.

[0123] In step S705, the browser engine obtains the sub-resource A11 of the main webpage based on the main resource A1, and stores the main resource A1, the sub-resource A11, the identifier of the main resource A1 and / or the last modification time of the main resource A1, and the cache validity period and / or the absolute time of cache expiration of the main resource A1 in the cache to obtain the cached resource of the main webpage and generate a cache identifier A.

[0124] Here, sub-resource A11 can refer to CCS tables, JavaScript files, images, font files, audio and video files, etc., included in the main resource A1 (HTML file). After receiving the main resource A1 returned by the server, the browser engine can parse the main resource A1 to obtain the sub-resource A11. The implementation method of parsing the main resource A1 in this application embodiment is not limited.

[0125] In step S706, if the browser engine determines that cache identifier A exists, it determines whether the cached resources of the main webpage in the cache have exceeded the cache expiration period.

[0126] This step includes the following implementation methods. In the first implementation method, the browser engine can determine whether the cached resources of the main webpage in the cache have exceeded the cache expiration period based on the cache validity period (max-age) of the main resource A1 and / or the absolute time of cache expiration (Expires) of the main resource A1. The determination method has been described above and will not be repeated here.

[0127] In the second implementation method, the browser engine can first determine whether the cached resources of the main webpage in the cache have exceeded the cache expiration date based on a preset first condition. If the first condition is met, it is determined that the cached resources of the main webpage have not exceeded the cache expiration date. If the first condition is not met, it determines whether the cached resources of the main webpage in the cache have exceeded the cache expiration date based on the cache validity period (max-age) of the main resource A1 and / or the absolute time of cache expiration (Expires) of the main resource A1.

[0128] The preset first condition can be understood as the browser engine's preset cache validity period management strategy. The preset first condition can refer to: whether the browser engine determines whether the time when it receives the main webpage's network address A again is within a preset time period after the time when it first received the main webpage's network address A; whether the browser engine determines whether the number of consecutive back operations is less than M, where consecutive back operations include the back operation corresponding to the currently received main webpage's network address A; and whether the browser engine determines whether the number of consecutive forward operations is less than M, where consecutive forward operations include the forward operation corresponding to the currently received main webpage's network address A.

[0129] The network address of the first webpage received (which can be the main webpage or a secondary webpage) refers to the network address of the webpage obtained by the browser engine after the user opens the webpage for the first time. For example, the user can click on the news headline 11 in the interface 550 shown in Figure 5(e) to open the secondary webpage 570 for the first time. At this time, the browser engine can receive the network address of the secondary webpage.

[0130] The web address of a webpage (which can be the main webpage or a secondary webpage) received again refers to the webpage address obtained by the browser engine when a user returns to the same webpage via the back button or forward button after initially opening it. For example, a user can click on interface 520 in Figure 5 to open the first-level secondary webpage 540 for the first time. Then, they can click on news headline 11 on the first-level secondary webpage 550 to open the second-level secondary webpage 570 for the first time. Afterwards, they can perform a right swipe (back button) operation on the second-level secondary webpage 570 to return to the first-level secondary webpage 590. At this point, the browser engine can again receive the web address of the first-level secondary webpage; this right swipe operation corresponds to the back button operation for the currently received web address. Similarly, if a user performs a left swipe (forward button) operation on the first-level secondary webpage 590 in Figure 5 to advance to the second-level secondary webpage, the browser engine can again receive the web address of the second-level secondary webpage; this left swipe operation corresponds to the forward operation for the currently received web address.

[0131] Within a preset time period following the moment the webpage's network address is first received, the preset time period may refer to 1 hour, 2 hours, etc., which is not limited in this embodiment of the application.

[0132] A continuous rollback operation refers to, for example, a user opening a first-level sub-page from the main webpage, then a second-level sub-page from the first-level sub-page, then a third-level sub-page from the second-level sub-page, and then rolling back from the third-level sub-page to the second-level sub-page, from the second-level sub-page back to the first-level sub-page, and from the first-level sub-page back to the main webpage. This can be considered a three-times continuous rollback operation. However, if the user rolls back from the third-level sub-page to the second-level sub-page, then moves forward from the second-level sub-page to the third-level sub-page, then rolls back again from the third-level sub-page to the second-level sub-page, then rolls back from the second-level sub-page to the first-level sub-page, and finally rolls back to the main webpage, this cannot be considered a continuous rollback operation. The same explanation for continuous forward operations can be found in the above description. In this embodiment, M can be less than or equal to a preset value, such as 5 or 6.

[0133] The first condition is met when: the browser engine determines that the time when it receives the network address A of the main webpage again is within a preset time period after the time when it first receives the network address A of the main webpage; and the browser engine determines that the number of consecutive back-back operations is less than or equal to M (or the number of consecutive forward operations is less than or equal to M). For example, suppose the time when it first receives the network address A of the main webpage is 16:00:00 on April 23, 2023, and the preset time period is 1 hour (that is, within 1 hour after 16:00:00 on April 23, 2023, the cached resources of the main webpage have not exceeded the cache expiration period, and after receiving the network address of the main webpage again, the cached resources of the main webpage can be directly obtained from the cache). If the time when it receives the network address A of the main webpage again is 16:30:00 on April 23, 2023, then the browser engine determines that the time when it receives the network address A of the main webpage again is within the preset time period after the time when it first receives the network address A of the main webpage. For example, assuming M=6, if the user's action upon receiving the main webpage's network address is a back operation, and the current user action is followed by a back operation ...

[0134] The first condition is not met if: the browser engine determines that the time when it receives the network address A of the main webpage again is not within a preset time period after the time when it first receives the network address A of the main webpage; or the browser engine determines that the number of consecutive back operations is greater than M; or the browser engine determines that the number of consecutive forward operations is greater than M. If the first condition is not met, the browser engine determines whether the cached resource of the main webpage in the cache has exceeded its cache expiration time based on the cache validity period (max-age) of the main resource A1 and / or the absolute time of cache expiration (Expires) of the main resource A1. For example, assuming the time when the network address A of the main webpage was first received is April 23, 2023, at 16:00:00, the preset time period is 1 hour, and the time when the network address A of the main webpage was received again is April 23, 2023, at 17:30:00, then the browser engine determines that the time when the network address A of the main webpage was received again is within a preset time period after the time when the network address A of the main webpage was first received. For example, assuming M = 6, if the user's current action upon receiving the main webpage's network address is a back operation, and the current user action is consistent with previous user actions (back-forward-back), or a combination of back-back-back-back-back-back-back-back-back, then the browser engine determines that the number of consecutive back operations is greater than M. Alternatively, assuming M = 6, if the user's current action upon receiving the main webpage's network address is a forward operation, and the current user action is consistent with previous user actions (forward-back-forward), or a combination of forward-forward-forward-forward-forward-forward, then the browser engine determines that the number of consecutive forward operations is greater than M.

[0135] Method 2:

[0136] In step S707, if the browser engine determines that the cached resources have not exceeded the cache expiration period, the browser engine obtains the main resource A1 and the sub-resource A11 of the main webpage from the cached resources of the main webpage.

[0137] As mentioned above, the cached resources of the main webpage and the cache identifier A are a key-value pair. The browser engine can obtain the cached resources (values) of the main webpage based on the cache identifier A (key). The cached resources of the main webpage include the main resource A1 and the sub-resource A11.

[0138] Method 3:

[0139] In step S708, if the browser engine determines that the cached resource has exceeded the cache expiration period, it requests the server to load the web page resource. The request includes the network address A, the identifier Etag of the main resource A1, and / or the last modified time Last-Modified of the main resource A1.

[0140] In step S709, the server determines whether to modify the main resource A1 based on the identifier of the main resource A1 and / or the last modification time of the main resource A1.

[0141] The specific implementation method for this step has been described above and will not be repeated here.

[0142] If the server determines that the main resource A1 has not been modified, the server returns a 304 status code to the browser engine to inform the browser engine that the resource has not been modified. The browser engine can then execute step S707, which means it can retrieve the main resource A1 and the sub-resource A11 of the main webpage from the cached resources of the main webpage based on the cache identifier A.

[0143] Method 4:

[0144] In step S710, if the server determines that the main resource A1 has been modified, it returns to the browser engine the main resource A2 of the main webpage, the identifier of the main resource A2 and / or the last modification time of the main resource A2, and the cache validity period and / or the absolute time of cache expiration of the main resource A2.

[0145] As can be seen from the above embodiments, if the browser engine determines that the cached resources of the main webpage in the cache have exceeded the cache expiration period, then after sending a load request to the server, the server can return a new Expires and / or a new max-age to the browser engine. If the server determines that the main resource A1 has been modified, then the server can return the modified main resource, the ETag of the modified main resource, and / or Last-Modified to the browser engine.

[0146] In this embodiment, primary resource A2 refers to the resource modified from primary resource A1. The identifier of primary resource A2 is its ETag, and the last modification time of primary resource A2 is its Last-Modified value. The cache validity period of primary resource A2 is its max-age value, and the absolute time of cache expiration is its Expires value.

[0147] In step S711, the browser engine obtains the sub-resource A21 of the main webpage based on the main resource A2, and updates the cached resources of the main webpage based on the identifier of the main resource A2, the sub-resource A21, and the main resource A2, and / or the last modification time of the main resource A2, and the cache validity period and / or the absolute time of cache expiration of the main resource A2.

[0148] It should be understood that after the browser engine receives the main resource A2 returned by the server, it can parse the main resource A2 and then obtain the sub-resource A21.

[0149] In implementation, for example, after the browser engine obtains the main resource A2 of the main webpage through S710, and the identifier of the main resource A2 and / or the last modification time of the main resource A2, and the cache validity period and / or the absolute time of cache expiration of the main resource A2, and obtains the sub-resource A21 through S711, it can use the above data to replace the cached resources of the main webpage corresponding to the original cache identifier A (the cached resources include: main resource A1, sub-resource A11, and the identifier of the main resource A1 and / or the last modification time of the main resource A1, and the cache validity period and / or the absolute time of cache expiration of the main resource A1), so as to update the cached resources of the main webpage.

[0150] In related solutions, when the browser engine receives the network address of a webpage (which can be a main webpage or a sub-webpage), it can request and load the webpage's main resources based on that network address. Then, it parses the main resources, retrieves the sub-resources, and finally displays the webpage based on both the main and sub-resources. In this process, these solutions typically cache the sub-resources but not the main resources. The reasons are as follows: The main resources of a webpage refer to HTML files, which are usually the core content of the webpage and may change frequently with page updates. If older versions of the HTML files are cached, the page content displayed to the user may not be up-to-date, affecting the user experience. Sub-resources refer to CSS tables, JavaScript files, and images, which typically do not change frequently with page updates. Caching these resources can reduce network traffic to some extent.

[0151] Because the relevant solutions only cache the sub-resources of the webpage in the cache, when the browser engine receives the webpage's network address again, the browser engine can retrieve the sub-resources of the webpage from the cache, but still needs to request and load the main resources of the webpage. This will increase the number of requests and the amount of data transmitted, which may lead to slower webpage loading speed, increased user waiting time, and other issues, affecting the user experience.

[0152] In this embodiment, when the browser engine retrieves web page resources using method one shown in Figure 7, it can cache the main and sub-resources of the web page. Therefore, when retrieving web page resources again using method two shown in Figure 7, if it is determined that the cached resources have not exceeded their cache expiration date, the main and sub-resources of the web page can be retrieved from the cache. Since the main and sub-resources of the web page that have not exceeded their cache expiration date can be retrieved from the cache, the number of requests and data transmission volume can be reduced, web page loading speed can be improved, user waiting time can be reduced, and problems such as abnormal web page display and data inconsistency caused by cached resources exceeding their cache expiration date can be avoided.

[0153] Furthermore, the browser engine can determine whether a webpage resource has been modified if the cached resource has exceeded its cache expiration period. If the webpage resource has been modified, the cached resource will be updated in a timely manner. This can prevent abnormal webpage display and ensure that the interface always displays the latest webpage content, thus improving the user experience.

[0154] The above section, in conjunction with Figure 7, describes the specific implementation of step S601 shown in Figure 6. The implementation process of step S603 shown in Figure 6 can refer to the implementation process of step S601. For example, in step S603, the main resource and secondary resource of the webpage can also be obtained through the four methods shown in Figure 7, which will not be repeated here. The following section, in conjunction with Figure 8, describes the specific implementation of steps S602 and S604 shown in Figure 6.

[0155] Figure 8 is a schematic diagram of a webpage display provided in an embodiment of this application. It should be noted that Figure 8 describes the implementation process of displaying the main webpage and secondary webpages, and generating screenshots of the main webpage and secondary webpages, in conjunction with the software structure shown in Figure 4. Specifically, in Figure 8, the implementation process of step S601 in Figure 6 is first briefly described through steps S801 to S803; secondly, the implementation process of step S602 shown in Figure 6 is described through steps S804 to S810; then, the implementation process of step S603 in Figure 6 is described through steps S811 to S813; and finally, the implementation process of step S604 in Figure 6 is described through steps S814 to S820.

[0156] In step S801, the user performs the operation of opening the main webpage, and the browser application in the application layer receives the user's operation 1 of opening the main webpage.

[0157] It should be understood that user operation 1 can refer to the user clicking the browser icon 511 in the interface 510 shown in Figure 5 to open the interface 520 (main webpage), etc.

[0158] The browser application can be a browser pre-installed on the electronic device at the factory, or a browser downloaded by the user from an app store or website, etc. This application embodiment does not limit this.

[0159] In step S802, the browser application layer program sends a loading request 1 to the browser engine in the local layer through the browser management module in the framework layer. The loading request 1 carries the network address A of the main webpage.

[0160] In step S803, after receiving loading request 1, the rendering instruction generation module in the browser engine can obtain the main resources and sub-resources of the main webpage in the manner shown in Figure 7.

[0161] Step S804: The rendering instruction generation module parses the main resources and sub-resources of the main webpage, or parses the sub-resources of the main webpage, and generates parsed data 1.

[0162] In implementation, if the main resources and sub-resources of the main webpage are obtained in step S803 through method two or method three shown in Figure 7, since method two and method three are both obtained from the cache as unparsed main resources and sub-resources, then in step S804, the rendering instruction generation module needs to parse the main resources and sub-resources of the main webpage and generate parsed data 1.

[0163] If the main resource of the main webpage is obtained in step S803 through method one or method four shown in Figure 7, since method one has already parsed the main resource A1 of the main webpage when obtaining the sub-resource A11 of the main webpage in S705, and method four has already parsed the main resource A2 of the main webpage when obtaining the sub-resource A21 of the main webpage in S711, then only the sub-resources of the main webpage can be parsed in step S804.

[0164] It should be understood that parsing the main resources (HTML file) of the main webpage yields a Document Object Model (DOM) tree, which represents the structure of the main webpage, including the DOM elements in the HTML document and their hierarchical relationships. Parsing the sub-resources of the main webpage (CSS tables, JavaScript files, images, font files, audio and video files, etc.) yields the following: parsing CSS tables provides the priority of CSS rules, the font color and style of the main webpage; parsing JavaScript files provides JavaScript-defined variables and functions; parsing images provides image metadata; parsing font files provides font styles, names, and weights; and parsing audio and video files provides audio and video metadata. The parsed data 1 in step S804 includes the data obtained after parsing the main resources of the main webpage.

[0165] In step S805, the rendering instruction generation module sends rendering instruction 1 to the rendering instruction execution module, and the rendering instruction 1 carries parsed data 1.

[0166] In step S806, after receiving rendering instruction 1, the rendering instruction execution module performs rendering, drawing, compositing and other operations on the parsed data 1 based on rendering instruction 1 to generate the main webpage data.

[0167] The embodiments of this application do not limit the specific implementation of operations such as rendering, drawing, and compositing.

[0168] It should be understood that, in embodiments of this application, the rendered data obtained by rendering the parsed data 1 can be stored in one or more buffers. A buffer is a memory area that stores image data and is used to temporarily store the rendering results until these results are displayed on the screen.

[0169] To address the screen flickering issue, this application embodiment utilizes two buffers: a front buffer and a back buffer. The front buffer displays the current image, while the back buffer renders new images. Once a new image has finished rendering in the back buffer, a buffer swap operation is performed to display the contents of the back buffer on the screen, and the front buffer is switched to the back buffer to begin the next rendering cycle.

[0170] It should also be understood that by rendering, drawing, and compositing the parsed data 1, rich data can be generated (for ease of description, this embodiment of the application refers to this rich data as main webpage data) to present a complete main webpage on the user interface. This data may include layout data, drawing data, compositing data, visual representation, interaction data, and performance data, which together constitute the final presentation effect of the main webpage.

[0171] In step S807, the rendering instruction execution module returns the main webpage data to the rendering instruction generation module, and the rendering instruction generation module returns the main webpage data to the browser management module.

[0172] In step S808, the browser management module performs a display operation.

[0173] The browser management module can send displays by updating the screen, refreshing the display, etc., and this application embodiment does not limit this.

[0174] In step S809, the browser application displays the main webpage.

[0175] For example, the main webpage can refer to interfaces 520 and 550 shown in Figure 5.

[0176] In step S810, after the browser application displays the main webpage, the rendering instruction generation module can perform a screenshot operation on the main webpage, generate a screenshot of the main webpage, and store the screenshot of the main webpage in the cache, along with the cache identifier C corresponding to the cache resource that generated the screenshot of the main webpage.

[0177] In practice, for example, the rendering instruction generation module can perform a screenshot operation by copying the main webpage data from S807.

[0178] It should be understood that the screenshot of the main webpage generated by the rendering instruction generation module does not include icons in the status bar of the user interface (such as date, Wi-Fi icon, battery level, etc.). For example, please refer to Figure 9, which is an example screenshot provided in an embodiment of this application. For instance, when the rendering instruction generation module performs a screenshot operation on the main webpage shown in Figure 9(a), it can copy the main webpage data, which does not include icons in the status bar of the user interface, and then generate a screenshot of the main webpage.

[0179] It should also be understood that the rendering instruction generation module stores a screenshot of the main webpage in the cache. This means the cache contains a cached resource of the main webpage screenshot. The rendering instruction generation module can also generate a cache identifier C corresponding to the cached resource of the main webpage screenshot. This cache identifier C and the cached resource of the main webpage screenshot can be considered a key-value pair. Subsequently, the rendering instruction generation module can retrieve the main webpage screenshot from the cache using this key-value pair.

[0180] In some embodiments, the rendering instruction generation module may also store the screenshot of the main webpage in the cache resource corresponding to the cache identifier A mentioned above. In this case, the cache resource corresponding to the cache identifier A includes the main resource and sub-resources of the main webpage mentioned above, as well as the screenshot of the main webpage.

[0181] In step S811, the user performs the operation of opening a secondary webpage in the main webpage, and the browser application in the application layer receives the user operation 2 of opening a secondary webpage in the main webpage.

[0182] It should be understood that user operation 2 could refer to the user clicking on news headline 1 in interface 520 (main webpage) shown in Figure 5, opening interface 540 (secondary webpage), or it could refer to the user clicking on news headline 11 in interface 550 (main webpage) shown in Figure 5, opening interface 570 (secondary webpage), etc.

[0183] In step S812, the browser application layer program sends a loading request 2 to the browser engine in the local layer through the browser management module in the framework layer. The loading request 2 carries the network address B of the webpage.

[0184] In step S813, after receiving loading request 2, the rendering instruction generation module in the browser engine obtains the main resources and sub-resources of the webpage.

[0185] For details on how to obtain the main and sub-resources of a webpage, please refer to Figure 7.

[0186] Step S814: The rendering instruction generation module parses the main resources and sub-resources of the webpage, or parses the sub-resources of the webpage, to generate parsed data 2.

[0187] For details on how to implement this step, please refer to step S804 above.

[0188] In step S815, the rendering instruction generation module sends rendering instruction 2 to the rendering instruction execution module, and the rendering instruction 2 carries parsed data 2.

[0189] In step S816, after receiving rendering instruction 2, the rendering instruction execution module performs rendering, drawing, compositing and other operations on the parsed data 2 based on rendering instruction 2 to generate web page data.

[0190] For details on how to implement this step, please refer to step S806 above.

[0191] In step S817, the rendering instruction execution module returns data from the webpage to the rendering instruction generation module, and the rendering instruction generation module returns data from the webpage to the browser management module.

[0192] In step S818, the browser management module performs a display operation.

[0193] In step S819, the browser application displays the webpage.

[0194] For example, you can refer to interfaces 540 and 570 shown in Figure 5 from the webpage.

[0195] In step S820, after the browser application displays the webpage, the rendering instruction generation module can perform a screenshot operation on the webpage, generate a screenshot of the webpage, and store the screenshot of the webpage in the cache, along with the cache identifier D corresponding to the cache resource that generated the screenshot of the webpage.

[0196] The implementation method for this step can refer to step S810 above.

[0197] It should be understood that the screenshot taken by the rendering instruction generation module from the webpage does not include the icon of the user interface status bar. For example, please refer to Figure 9. For instance, when the rendering instruction generation module performs a screenshot operation on the webpage shown in Figure 9(b), it can copy the webpage data in S817, which does not include the icon of the user interface status bar, and then generate a screenshot of the webpage.

[0198] It should also be understood that the rendering instruction generation module stores screenshots of web pages in a cache. This creates a cached resource of the web page screenshot. The rendering instruction generation module can also generate a cache identifier D corresponding to the cached resource of the web page screenshot. This cache identifier D and the cached resource of the web page screenshot can be considered a key-value pair. Subsequently, the rendering instruction generation module can retrieve the web page screenshot from the cache using this key-value pair.

[0199] In some embodiments, the rendering instruction generation module can also store screenshots of the webpage into the cache resource corresponding to cache identifier B. As shown in Figure 7, the cache resource corresponding to cache identifier B originally stores the main resource, sub-resources, identifier of the webpage, and / or the last modification time of the main resource of the webpage, and the cache validity period and / or absolute time of cache expiration of the main resource of the webpage. After the rendering instruction generation module stores screenshots of the webpage into the cache resource corresponding to cache identifier B, the cache resource also includes screenshots of the webpage.

[0200] The above section, in conjunction with Figures 7 to 9, describes the implementation methods of steps S601 to S604 in Figure 6. The following section describes the implementation methods of steps S605 and S606 in Figure 6.

[0201] In step S605, the user's operation of returning from a subpage to the main page can refer to a right swipe operation performed by the user in interface 210 shown in Figure 2, or a right swipe operation performed by the user in interface 570 shown in Figure 5, etc. The user's operation of moving from the main page to a subpage can refer to a left swipe operation performed by the user in interface 590 shown in Figure 5, or a left swipe operation performed by the user in the main page 230 after returning to the main page 230 from a right swipe operation performed in interface 220 shown in Figure 2.

[0202] In step S606, the user stopping the operation of returning from the subpage to the mainpage can mean that the user performs a right swipe operation in interface 210 shown in Figure 2 and then lifts their finger, or it can mean that the user performs a right swipe operation in interface 570 shown in Figure 5 and then lifts their finger, etc. The user moving from the mainpage to the subpage can mean that the user performs a left swipe operation in interface 590 shown in Figure 5 and then lifts their finger, or it can mean that after the user performs a right swipe operation in interface 220 shown in Figure 2 to return to the mainpage 230, the user performs a left swipe operation in the mainpage 230 and then lifts their finger.

[0203] The specific implementation of steps S605 and S606 can be referred to Figure 10. Figure 10 is a schematic diagram of a process of returning from a sub-page to the main page according to an embodiment of this application. It should be noted that Figure 10 describes the specific implementation of steps S605 and S606 in conjunction with the software structure shown in Figure 4. This process includes S901 to S928.

[0204] Step S901: The browser application in the application layer receives the user operation 3 performed by the user, which involves returning from the webpage to the main webpage.

[0205] For an explanation of user operation 3, please refer to other embodiments, which will not be repeated here.

[0206] This step can be performed after step S819 shown in Figure 8. For example, assuming that the webpage displayed in step S819 is interface 210 shown in Figure 2, then in step S901, the user can perform a right swipe operation on interface 210 (webpage) shown in Figure 2 to return to interface 230 (main webpage) shown in Figure 2.

[0207] S902, The browser application sends an event notification to the event handler in the application framework layer.

[0208] It should be understood that when a user performs a user action on the browser interface, the browser application can send an event notification to the event handler. After receiving the event notification, the event handler triggers the corresponding logical operation.

[0209] For example, in step S901, user operation 3 is when the user performs a right swipe operation on the webpage. The right swipe operation can be divided into three stages.

[0210] In the first stage, when the user begins to swipe, the start of the touch action is detected when the user's finger begins to swipe right from the webpage. This triggers a swipe-back event, which is also a start-back event. This event is passed to the event handler, notifying that the swipe operation has begun. Upon receiving this notification, the event handler triggers logical operations such as constructing a stitched image. For ease of description, this embodiment refers to the event notification in the first stage as Event Notification 1. Event Notification 1 may carry an event type (e.g., the event type includes an event name, such as a swipe-back event and a start-back event), swipe parameters (e.g., the coordinates at the start of the swipe and the swipe direction), and page information (e.g., the identifiers of the secondary webpage and the main webpage). The coordinates at the start of the swipe may refer to the coordinates of the touch point when the user begins to touch. The swipe direction may be a horizontal swipe to the right. The identifiers of the secondary webpage and the main webpage may refer to the names of the secondary webpage and the main webpage, respectively.

[0211] The second stage is the swiping process. During the user's finger swipe, changes in finger position are continuously detected, generating a series of swipe events, such as swipe-back events and continuous swipe-back events. These events are continuously sent to the event handler to update the display position of the webpage in real time, achieving a smooth swipe effect. For example, whenever the finger moves a certain distance or within a certain time interval, a new swipe event is triggered, and an event notification is sent to the event handler. The event handler continuously adjusts the display state of the stitched image based on these event notifications, gradually moving it to the right. As described above, in the second stage, the event handler receives multiple event notifications. For ease of description, this embodiment refers to any one of the multiple event notifications in the second stage as event notification 2. Event notification 2 may carry an event type (e.g., the event type includes an event name, such as a swipe-back event and a continuous swipe-back event), swipe parameters (e.g., the starting coordinates of the swipe, the current swipe coordinates, and the swipe direction), page information (e.g., the identifier of the secondary webpage and the identifier of the primary webpage), where the identifier of the secondary webpage and the identifier of the primary webpage can refer to the names of the secondary webpage and the primary webpage, respectively. The coordinates of the current swipe can refer to the coordinates of the touch point when a new swipe event is triggered after the user's finger moves.

[0212] The third stage is when the swipe stops. When the user's finger leaves the screen and the swipe operation stops, the end of this touch action is detected, and a touch stop event is triggered. This touch stop event can be a swipe back event and a stop back event. This event is also passed to the event handler, notifying that the swipe operation has been completed. The event handler can trigger some follow-up processing based on this notification, such as swiping the webpage completely out of the user's view and displaying the main webpage. For ease of description, this embodiment of the application refers to the event notification in the third stage as event notification 3. Event notification 3 can carry event type (e.g., the event type includes an event name, such as a swipe back event and a stop back event), swipe parameters (e.g., the coordinates of the start of swipe, the coordinates of the stop of swipe, and the swipe direction), page information (e.g., the identifiers of the webpage and the main webpage), etc. Among them, the coordinates of the stop of swipe can refer to the coordinates of the touch point before the user's finger leaves the screen.

[0213] It should be noted that the event notification 1, event notification 2 and event notification 3 mentioned in the following embodiments can be referred to here, and will not be repeated.

[0214] In step S903, the event handler sends event notification 1 to the browser management module in the framework layer and event notification 1 to the rendering engine in the local layer.

[0215] In step S904, after receiving event notification 1, the browser management module creates a view area and sets the size and initial position of the view area.

[0216] It should be understood that the view area is for displaying the stitched image during swiping. For example, as the user swipes to the right on interface 220 (from the webpage) shown in Figure 2, the view area displays a stitched image composed of the webpage and the main webpage.

[0217] The browser management module can set the size of the view area based on the screen size. For example, please refer to Figure 11, which is an example diagram of setting the view area according to an embodiment of this application. The browser management module can first obtain the screen size, for example, the width of the screen obtained in Figure 11 is W1, and the height is H1. Secondly, the browser management module sets the width of the view area to a preset multiple of 1 of the screen width. Typically, the view area needs to display a stitched image, which can be composed of a screenshot of the main webpage and a screenshot of a secondary webpage. The width of the main webpage screenshot and the secondary webpage screenshot is usually the screen width. Therefore, the preset multiple 1 in this embodiment can be 2 times, for example, W2 = W1 × 2 as shown in Figure 11. Of course, in other embodiments, the preset multiple 1 can also be other values, without limitation. Then, the browser management module sets the height of the view area to a preset multiple of 2 of the screen width. As can be seen from Figure 9, when performing a screenshot operation, the status bar of the user interface needs to be excluded. That is, the status bar may not be displayed in the view area, and the height of the view area can be less than the screen height. For example, the preset multiplier 2 can be 0.8 times, 0.9 times, etc., as shown in Figure 11, where H2 = H1 × 0.9.

[0218] The browser management module can set the initial position of the view area based on the location of the screen's display area and the size of the view area. For example, assuming that the origin is D1 at the top left corner of the screen shown in Figure 11, the direction from D1 to D2 is the positive X-axis, and the direction from D1 to D3 is the positive Y-axis, then the coordinates of point D1 in the display area shown in Figure 11 are (0, 0), the coordinates of point D2 are (W1, 0), the coordinates of point D3 are (0, H1), and the coordinates of point D4 are (W1, H1). The browser management module can also set the initial position of the view area by specifying that the coordinates of the bottom right corner of the view area are the same as the coordinates of the bottom right corner of the display area, while other coordinates are adapted according to the size of the view area. For example, if the coordinates of the four points in the view area shown in Figure 11 are E1, E2, E3, and E4, then the coordinates of the bottom right corner of the view area, E4, are the same as the coordinates of the bottom right corner of the display area, both being (W1, H1). After adapting the other coordinates to the size of the view area, the coordinates of E1 are (-(W2-W1), H2-H1), E2 is (W1, H2-H1), and E3 is (-(W2-W1), H1). Of course, the browser management module can also set the initial position of the view area in other ways, without limitation.

[0219] In implementation, the browser management module can create a view area through the View component, the WebView component, or the SurfaceView component, etc. This application embodiment does not limit this.

[0220] The proposed solution uses multiple WebView instances to create multiple webpage view areas during the scrolling process, displaying a transition interface when switching between the main and secondary webpages. For example, two WebView instances are created to form two webpage view areas: one for displaying the secondary webpage and the other for displaying the main webpage. While this approach achieves a similar effect of splicing main and secondary webpages, the creation of multiple WebView instances means that each instance consumes CPU or GPU resources for tasks such as page rendering, script execution, and network requests. Each instance also requires memory to store page data, scripts, images, and other resources, and may initiate independent network requests to load page resources. This can lead to a series of problems, such as increased CPU or GPU load, increased memory usage, and increased network resource consumption. These issues can slow down browser application response, increase overall power consumption of electronic devices, and negatively impact the user experience.

[0221] In this embodiment, a single view area can be created during the scrolling process. This single view area displays a stitched image composed of screenshots from the main webpage and screenshots from secondary webpages, providing a transition interface when switching between the main and secondary webpages. Since a single view area can be created using a single View instance, a single WebView instance, or a single SurfaceView instance, the flexibility in creating view areas is increased. Furthermore, compared to solutions that create multiple webpage view areas using multiple WebView instances, this reduces CPU or GPU load, memory usage, and network resource consumption, thereby improving browser application response speed, reducing power consumption, and enhancing the user experience.

[0222] In step S905, in step S903 above, the event handler can also send event notification 1 to the rendering engine in the local layer. After receiving event notification 1, the rendering instruction generation module in the rendering engine locks the cached resources.

[0223] It should be understood that event notification 1 carries page information (such as the identifier of the webpage and the identifier of the main webpage). The rendering instruction generation module can lock the cache resources of the main webpage and the child webpage corresponding to the identifier based on the identifier of the webpage and the identifier of the main webpage, as well as the cache resources of the screenshot of the main webpage and the screenshot of the webpage corresponding to the identifier.

[0224] As can be seen from the above embodiments, for example, when the rendering instruction generation module shown in Figure 8 obtains the main resources and sub-resources of the main webpage through S803 and the main resources and sub-resources of the secondary webpage through S813, it can obtain them in the four ways shown in Figure 7. When obtaining them in the four ways shown in Figure 7, the obtained main resources and sub-resources can be stored in the cache to generate cached resources. In some related solutions, after the electronic device obtains the main resources and sub-resources, stores the main resources and resources in the cache, and displays the main webpage or secondary webpage based on the main resources and sub-resources, it may clear or modify the cached resources of the main webpage or secondary webpage. However, in the embodiments of this application, when moving from the main webpage to a secondary webpage or from a secondary webpage back to the main webpage, the cached resources of the main webpage or secondary webpage are still needed to display the main webpage or secondary webpage. Therefore, in order to prevent the cached resources of the main webpage and the secondary webpage from being accidentally cleared or modified, the embodiments of this application can lock the cached resources of the main webpage and the secondary webpage.

[0225] Similarly, in order to prevent the cached resources of the main webpage screenshot and the child webpage screenshot from being accidentally cleared or modified, the embodiments of this application can also lock the cached resources of the main webpage screenshot and the child webpage screenshot.

[0226] Locking cached resources ensures that cached resources will not become inconsistent or lost due to modification or clearing when accessing the cache, and can reduce the frequency of cache access, thereby improving the overall performance of the system.

[0227] In implementation, for example, the rendering instruction generation module can store the parsed, rendered, drawn, and composited main webpage data (such as the main webpage data generated in step S806) in the cache to lock the cached resources of the main webpage. It can also store the parsed, rendered, drawn, and composited secondary webpage data (such as the secondary webpage data generated in step S816) in the cache to lock the cached resources of the secondary webpage. This application embodiment does not limit this. It should be understood that storing cached resources of the main webpage screenshot or secondary webpage screenshot in the cache can be understood as locking the cached resources of the main webpage screenshot or secondary webpage screenshot.

[0228] In step S906, the rendering instruction generation module retrieves the main webpage screenshot from the cache based on the cache identifier of the main webpage screenshot, and retrieves the secondary webpage screenshot from the cache based on the cache identifier of the secondary webpage screenshot.

[0229] As shown in Figure 8 above, in the embodiment, when the rendering instruction generation module executes S810, it can perform a screenshot operation on the main webpage, generate a screenshot of the main webpage, and store the screenshot in the cache, along with the cache identifier C corresponding to the cache resource that generated the main webpage screenshot. When the rendering instruction generation module executes S820, it can perform a screenshot operation on the secondary webpage, generate a screenshot of the secondary webpage, and store the screenshot in the cache, along with the cache identifier D corresponding to the cache resource that generated the secondary webpage screenshot. The cache identifier C and the cache resource of the main webpage screenshot are a key-value pair, and the cache identifier D and the cache resource of the secondary webpage screenshot are also a key-value pair. Therefore, in the implementation, when the rendering instruction generation module executes step S906, it can obtain the main webpage screenshot and the secondary webpage screenshot through the cache identifiers C and D.

[0230] In step S907, the rendering instruction generation module sends a splicing instruction to the graphics library in the local layer, which carries a screenshot of the main webpage and a screenshot of the secondary webpage.

[0231] Step S908: The image library stitches together the screenshots from the main webpage and the screenshots from the secondary webpage to obtain the stitched image.

[0232] In implementation, graphics libraries can use classes such as SkCanvas and SkBitmap to stitch images together, and this application does not limit this implementation. For example, the stitched image shown in Figure 11 can be used as a reference.

[0233] In step S909, the graphics library sends the stitched image to the rendering instruction generation module, and the rendering instruction generation module sends the stitched image to the browser management module.

[0234] In step S910, after receiving the stitched image, the rendering instruction generation module can store the stitched image in the cache to obtain the cache resource of the stitched image and generate the cache identifier corresponding to the cache resource.

[0235] The cache identifier and the cache resource of the stitched image in step S910 can be considered as a set of key-value pairs.

[0236] In step S911, after receiving the stitched image, the browser management module can draw the stitched image in the view area.

[0237] In implementation, the browser management module can use classes such as Bitmap and Canvas to draw the stitched image on the view area, but this application embodiment does not limit this.

[0238] In step S912, the browser application in the application layer sends event notification 2 to the event handler in the application framework layer. The notification 2 carries the event type (e.g., the event type includes the event name, such as a swipe back event and a continuous back event), swipe parameters (e.g., the coordinates at which the swipe started, the coordinates at which the swipe is currently, and the swipe direction), and page information (e.g., the identifier of the secondary webpage and the identifier of the primary webpage). The identifier of the secondary webpage and the identifier of the primary webpage can refer to the name of the secondary webpage and the name of the primary webpage, etc.

[0239] Step S913: The event handler sends event notification 2 to the browser management module in the application framework layer.

[0240] In step S914, the browser management module determines the sliding distance 1 based on the coordinates of the start of sliding and the current sliding coordinates in event notification 2.

[0241] As can be seen from the above embodiments, event notification 2 is one of multiple event notifications received by the event handler during the second stage of user swiping. The browser management module continuously adjusts the display state of the stitched image based on multiple event notifications, gradually moving it to the right. This application embodiment uses the application scenario shown in Figure 2 above as an example to introduce this implementation process.

[0242] For example, please refer to Figure 12, which is an example diagram of displaying a stitched image provided by an embodiment of this application. The coordinate system, screen size, view area size and initial position, stitched image, etc. shown in Figure 12 can be referred to Figure 11, and will not be repeated here. It should be noted that the area enclosed by D1, D2, D3 and D4 shown in Figure 12 can be considered as the display area of ​​the screen, and the user can only see the content displayed in this area.

[0243] Assuming the browser management module draws the stitched image on the view area in step S911 as shown in Figure 12(a), the user can slide from point F1 to point F2 on the screen. The event handler can send event notification 2 to the browser management module, which carries the coordinates of points F1 and F2. The coordinates of point F1 can be considered as the starting coordinates of the slide, and the coordinates of point F2 can be considered as the current sliding coordinates. Based on the coordinates of points F1 and F2, the browser management module determines the horizontal sliding distance between points F1 and F2, for example, let's say the determined horizontal sliding distance is G1, and uses this horizontal sliding distance as sliding distance 1. Then, the browser management module changes the initial position of the view area containing the stitched image based on sliding distance 1 and the sliding direction in step S915, thus obtaining the changed position of the view area containing the stitched image. For example, referring to Figure 12(b), the changed position of the view area includes the coordinates of four points: E11, E21, E31, and E41. The coordinates of E11 are (-(W2-W1)+G1, H2-H1), E21 is (W1+G1, H2-H1), E31 is (-(W2-W1)+G1, H1), and E41 is (W1+G1, H1). Finally, the browser management module displays the stitched image shown in Figure 12(b) through the following steps S916 to S918. The user can only visually see a portion of the stitched image displayed within the screen's display area.

[0244] The user can continue swiping right from point F2 to point F3 on the screen shown in Figure 12(b). The event handler can send event notification 2 to the browser management module, which carries the coordinates of points F2 and F3. Based on the coordinates of points F2 and F3, the browser management module determines the horizontal swipe distance between points F2 and F3, for example, the determined horizontal swipe distance is G2, and this horizontal swipe distance is taken as swipe distance 1. Then, the browser management module changes the initial position of the view area containing the stitched image based on swipe distance 1 and swipe direction through the following step S915, to obtain the changed position of the view area containing the stitched image. For example, referring to Figure 12(c), the changed position of the view area includes the coordinates of four points: E12, E22, E32, and E42. The coordinates of E12 are (-(W2-W1)+G1+G2, H2-H1), E22 is (W1+G1+G2, H2-H1), E32 is (-(W2-W1)+G1+G2, H1), and E42 is (W1+G1+G2, H1). Finally, the browser management module displays the stitched image shown in Figure 12(c) through the following steps S916 to S918. The user can only visually see a portion of the stitched image displayed within the screen's display area.

[0245] In step S915, the browser management module changes the initial position of the view area containing the stitched image based on the sliding distance 1 and the sliding direction, thus obtaining the changed position of the view area containing the stitched image.

[0246] Step S916: The browser management module adjusts the layer containing the stitched image to be the top layer among multiple layers.

[0247] It should be understood that multiple layers have a hierarchical relationship, which refers to the vertical relationship between the layers when they are displayed. Generally, a layer above will partially or completely obscure the layers below it when displayed.

[0248] The purpose of adjusting the layer where the stitched image is located to be on top of multiple layers in the browser management module is to hide or obscure the main webpage or a secondary webpage.

[0249] For example, assuming that user operation 3 in step S901 is the user's swipe-to-right operation on webpage 210 as shown in Figure 2, the electronic device can adjust the layer containing webpage 210 to be the top layer among multiple layers when displaying webpage 210. During the user's swipe-to-right operation, the layer hierarchy can be adjusted. For instance, please refer to Figure 13, which is an example diagram of adjusting layer relationships provided in this application embodiment. The user can adjust the layer containing the stitched image to be above the layer containing the webpage, and the layer containing the stitched image to be the top layer among multiple layers, so that the stitched image hides or obscures the webpage, while still displaying the stitched image on the interface.

[0250] In step S917, the browser management module performs a display operation.

[0251] In practice, for example, the browser management module can send the stitched image to the screen to perform a display operation, but this application embodiment does not limit this.

[0252] In step S918, the browser application displays the stitched image.

[0253] In step S919, the browser application sends event notification 3 to the event handler in the application framework layer. The event notification carries the event type, sliding parameters (such as the coordinates at which the sliding starts, the coordinates at which the sliding stops, and the sliding direction), page information, etc.

[0254] Step S920: The event handler sends event notification 3 to the browser management module in the framework layer.

[0255] In step S921, the browser management module determines the sliding distance 2 based on the coordinates of the start and stop of sliding in event notification 3.

[0256] The implementation method for this step can refer to the method for determining the sliding distance 2 described above, and will not be repeated here.

[0257] In some embodiments, when the user stops swiping the screen, the screen may continue to swipe due to inertia. Therefore, when calculating the swipe distance 2 in this step, it is also necessary to consider the distance that the user's finger continues to swipe due to inertia after leaving the screen. For example, the swipe distance 2 can be calculated based on the coordinates of the start of swiping, the coordinates of the stop of swiping, and the distance that the user's finger continues to swipe due to inertia after leaving the screen.

[0258] In step S922, the browser management module determines whether the sliding distance 2 is greater than the threshold 1.

[0259] It should be understood that a swipe distance of 2 greater than threshold 1 is a switching condition for moving from the main webpage to a secondary webpage, or vice versa. Threshold 1 can refer to a proportion of the screen width or webpage width; for example, this proportion could be 55%, 60%, etc., without limitation.

[0260] If the browser management module determines that the sliding distance 2 is greater than the threshold 1, it proves that the switching condition is met, and the operation of moving forward from the main webpage to the secondary webpage or backward from the secondary webpage to the main webpage can be performed. If the browser management module determines that the sliding distance 2 is less than or equal to the threshold 1, it proves that the switching condition is not met, and the forward or backward operation is not performed.

[0261] In step S923, if the browser management module determines that the sliding distance 2 is greater than the threshold 1, it sends a back instruction to the rendering instruction generation module in the local layer.

[0262] In step S924, after receiving the back instruction, the rendering instruction generation module obtains the main resource A1 and sub-resource A11 of the main webpage to generate the main webpage data.

[0263] For example, after receiving a back instruction, the rendering instruction generation module can perform a back operation using WebView.goBack(). In a scenario where the user moves from the main webpage to a secondary webpage, the rendering instruction generation module also receives a forward instruction, which can be performed using WebView.goForward().

[0264] Specifically, when performing the back operation, the rendering instruction generation module can obtain the main resource A1 and sub-resource A11 of the main webpage to generate the main webpage data. Since the rendering instruction generation module locked the cached resources of the main resource A1 and sub-resource A11 in step S905 above, in step S924, the rendering instruction generation module can obtain the main resource A1 and sub-resource A11 of the main webpage from the cache, that is, it can obtain the main resource A1 and sub-resource A11 of the main webpage through methods two and three shown in Figure 7.

[0265] The method for generating main webpage data based on the main resource A1 and sub-resource A11 of the obtained main webpage can be referred to in steps S804 to S806 shown in Figure 8, and will not be repeated here.

[0266] In step S925, the browser application displays the main webpage.

[0267] It should be understood that after generating the main webpage data in step S924 through steps S804 to S806 shown in FIG8, steps S807 to S809 shown in FIG8 can also be executed to make the browser application display the main webpage in step S925.

[0268] It should also be understood that when displaying the main webpage, the browser management module can adjust the layer containing the main webpage to be located above the layer containing the stitched image, and at the very top of multiple layers, so as to hide the stitched image and display the main webpage when the interface is displayed. For details on how to adjust the layer hierarchy, please refer to the above embodiment; it will not be repeated here.

[0269] In the relevant solutions, only the sub-resources of the webpage are cached in the cache, not the main resources of the webpage. Therefore, when navigating back from the secondary webpage to the main webpage and displaying the main webpage, the sub-resources of the webpage are usually retrieved from the cache, but the main resources of the webpage still need to be requested and loaded. This increases the number of requests and the amount of data transmitted, which may lead to slower webpage loading speed, increased user waiting time, and other issues that affect the user experience.

[0270] In this embodiment of the application, when returning to the main webpage from the webpage and displaying the main webpage, the main resources and sub-resources of the main webpage that have not exceeded the cache period can be obtained from the cache. Therefore, the number of requests and the amount of data transmission can be reduced, the webpage loading speed can be improved, the user waiting time can be reduced, and problems such as abnormal webpage display and data inconsistency caused by cached resources exceeding the cache period can be avoided.

[0271] Furthermore, in this embodiment, if it is determined that the web page resources have been modified, the cached resources can be updated in a timely manner, and then the main resources and sub-resources of the main web page can be obtained from the updated cached resources. Alternatively, if it is determined that the web page resources have not been modified, the main resources and sub-resources of the main web page can be obtained directly from the cached resources. In other words, the obtained main resources and sub-resources of the main web page are the web page resources that have been updated in a timely manner. This can avoid abnormal web page display and ensure that the latest web page content is always displayed on the interface, thereby improving the user experience.

[0272] Step S926: The rendering instruction generation module releases the cached resources of the stitched image in the cache.

[0273] In implementation, for example, the rendering instruction generation module can query the cached resources of the stitched image in the cache based on the cache identifier corresponding to the cached resources of the stitched graphics, and then perform a release operation to release the cached resources of the stitched image. This application embodiment does not limit this.

[0274] Releasing cached resources in step S926 can optimize browser application performance, prevent memory leaks, and reduce the memory space occupied by cached resources of stitched images, thereby improving the response speed and stability of browser applications.

[0275] In step S927, if the rendering instruction generation module determines in step S922 that the sliding distance 2 is less than or equal to the threshold 1, it adjusts the layer where the webpage is located to be the top layer among multiple layers.

[0276] It should be understood that the purpose of adjusting the layer where the webpage is located to be at the top of multiple layers is so that when the user performs a back operation on the webpage, if the switching conditions are not met, that is, the sliding distance 2 is less than or equal to the threshold 1, the original webpage will still be displayed on the interface.

[0277] In step S928, the browser application displays the webpage.

[0278] As shown in Figure 1 above, in the relevant solutions, the browser achieves the forward or backward function by switching between the main and secondary web pages on the entire page. However, this method of switching the entire page may cause the web page to jump, affecting the user experience.

[0279] In this embodiment of the application, during the process of navigating back from a webpage to the main webpage (i.e., when the user swipes the webpage to the right), a stitched image composed of a screenshot of the main webpage and a screenshot of the secondary webpage can be displayed. This stitched image serves as a transition interface when switching between the main and secondary webpages, enabling a smooth transition between the two webpages and making it easier for users to receive changes in the webpage, thus improving the user experience.

[0280] It should be noted that Figures 10 to 13 above illustrate the implementation of steps S605 and S606 shown in Figure 6 by taking the example of going back from the webpage to the main webpage. The implementation of going forward from the main webpage to the secondary webpage can also be referred to Figure 10, and will not be repeated here.

[0281] The following section provides a summary of the above embodiments.

[0282] This application provides a webpage display method, which can be executed by the electronic device mentioned in the above embodiments, or by the processor or chip in the electronic device. This application does not impose any limitations. For ease of description, an electronic device is used as an example to illustrate the method in detail. The method includes:

[0283] An electronic device displays a main webpage, which includes a first control corresponding to a secondary webpage; in response to a first operation on the first control, the secondary webpage is displayed, the first operation indicating that the secondary webpage is opened within the main webpage; in response to a second operation on the secondary webpage, a stitched image is generated based on a first image and a second image, the second operation indicating a switch from the secondary webpage to the main webpage, the first image being obtained by cropping the main webpage and the second image being obtained by cropping the secondary webpage; during the switch from the secondary webpage to the main webpage, the stitched image is displayed; if the second operation is stopped, the main webpage is displayed.

[0284] The explanations regarding the main webpage and secondary webpages can be found in the embodiments described above, and will not be repeated here. The first control can refer to the navigation entry point of the secondary webpage embedded in the main webpage. For example, the main webpage can be interface 520 shown in Figure 5, and the first control can refer to the "News Title 1" control shown in interface 520. The main webpage can also refer to interface 550 shown in Figure 5, and the first control can refer to the "News Title 11" control shown in interface 550.

[0285] The first operation on the first control could refer to the user clicking the "News Headline 1" control shown in interface 520. In response to the user's click on the first control, the electronic device can display interface 540 (from a webpage). The first operation on the first control could also refer to the user clicking the "News Headline 11" control shown in interface 550. In response to the user's click on the first control, the electronic device can display interface 570 (from a webpage).

[0286] The second operation on the webpage can refer to a right-swiping operation performed by the user on interface 570 (from the webpage), or it can refer to a right-swiping operation performed by the user on interface 540 (from the webpage). In response to the second operation, the electronic device can generate a stitched image based on the first image and the second image. The first image can be a screenshot of the main webpage, such as the main webpage screenshot shown in Figure 9(a). The second image can be a screenshot of the secondary webpage, such as the secondary webpage screenshot shown in Figure 9(b). The stitched image is composed of the main webpage screenshot and the secondary webpage screenshot, such as the stitched image shown in Figure 11.

[0287] During the transition from a webpage to the main webpage, the spliced ​​image displayed can be referenced to the spliced ​​image displayed in the screen display area shown in Figures 12(a) and (b).

[0288] The second operation is stopped when the user lifts their finger after performing a right swipe. In this case, the main webpage displayed can be referenced from interface 590 in Figure 5 or interface 530 in Figure 2.

[0289] In the relevant solutions, the browser switches between main and secondary web pages to achieve forward or backward navigation. However, this method of switching between entire pages may cause the web page to jump, affecting the user experience.

[0290] In response to a second operation (switching from a webpage to the main webpage, or backtracking from a webpage to the main webpage), this application embodiment generates a stitched image based on a first image and a second image. During the switch from the webpage to the main webpage, the stitched image obtained by cropping the first image from the main webpage and the second image from the webpage is displayed. This stitched image serves as a transition interface when switching between the main and secondary webpages, enabling a smooth transition and making it easier for users to accept changes in the webpage, thus improving the user experience.

[0291] In other related solutions, during the transition from a secondary webpage to the primary webpage, electronic devices can achieve a similar display effect by compositing layers from both the primary and secondary webpages. However, this approach requires simultaneously processing and displaying portions of both layers and adjusting parameters such as layer transparency and position in real time. This necessitates strong graphics processing and computing capabilities from the electronic device. For some less powerful devices, this may cause lag and stuttering, negatively impacting the user experience.

[0292] In this embodiment, during the switching from a webpage to the main webpage, a spliced ​​image is displayed, consisting of a first image captured from the main webpage and a second image captured from the webpage. Only the parameters of this spliced ​​image need to be processed, such as moving the position of the spliced ​​image. There is no need to process and display the content of multiple layers simultaneously. Compared with related solutions, this reduces the performance requirements of electronic devices and avoids phenomena such as lag and delay in electronic devices.

[0293] In some embodiments, the electronic device generates a stitched image based on a first image and a second image, including:

[0294] The electronic device creates a view area for displaying the stitched image, and there is one view area; based on the first image and the second image, a stitched image is generated and drawn on the view area.

[0295] The created view area can be referenced from the view area shown in Figure 11. In implementation, for example, electronic devices can create view areas through View components, WebView components, or SurfaceView components, etc., and this application embodiment does not limit this.

[0296] In practice, for example, electronic devices can use classes such as Bitmap and Canvas to draw the stitched image on the view area, but this application does not limit this.

[0297] In some solutions, the transition between master and slave web pages is achieved by creating multiple WebView instances to create multiple webpage view areas, displaying a smooth interface during the switch. For example, two WebView instances are created to form two webpage view areas: one displaying the slave webpage and the other the master webpage. While this approach of creating multiple WebView instances can achieve a similar effect to a seamless transition between master and slave webpages, it also presents several problems. Each WebView instance consumes CPU or GPU resources for tasks such as page rendering, script execution, and network requests. Each instance also requires memory to store page data, scripts, images, and other resources, and may initiate independent network requests to load page resources. This can lead to a series of issues, including increased CPU or GPU load, increased memory usage, and increased network resource consumption. These problems can result in slower electronic device response, increased power consumption, and a negative impact on user experience.

[0298] In this embodiment, in response to a second operation (switching from a webpage to the main webpage, also known as a backtracking operation from a webpage to the main webpage), a view area is created, and the stitched image is drawn in this view area. During the switch from the webpage to the main webpage, the stitched image is displayed through this view area. Since a view area can be created by a View instance, a WebView instance, or a SurfaceView instance, the flexibility of creating view areas is increased. Furthermore, compared to related schemes that create multiple webpage view areas using multiple WebView instances, it can reduce CPU or GPU load, reduce memory usage, and reduce network resource consumption, thereby improving the response speed of electronic devices, reducing power consumption, and enhancing the user experience.

[0299] In some embodiments, when the second operation is stopped, the electronic device displays the main webpage, including:

[0300] When the second operation is stopped, the electronic device retrieves the main resources and sub-resources of the main webpage from the storage resources of the main webpage. The storage resources of the main webpage include the main resources and sub-resources of the main webpage. The main resources refer to the resources corresponding to the network address of the main webpage, and the sub-resources refer to the resources introduced in the main resources. Based on the main resources and sub-resources of the main webpage, the main webpage is displayed.

[0301] The main resources of the main webpage typically refer to the HTML document of the main webpage. This main resource can be retrieved for the first time by sending a request to the server using the webpage's network address. The sub-resources of the main webpage refer to CCS tables, JavaScript files, images, font files, audio and video files, etc., included in the HTML document.

[0302] It should be understood that when an electronic device displays the main webpage, it can store the main resources and sub-resources of the main webpage to obtain the main webpage's storage resources. For example, storing the main resources and sub-resources of the main webpage in the cache yields the cached resources of the main webpage; storing them in memory yields the memory resources of the main webpage, and so on. Then, when the second operation is stopped (when the user swipes to the right on the webpage and lifts their finger), the electronic device can retrieve the main resources and sub-resources of the main webpage from the cached resources, and then display the main webpage based on these resources. The implementation method for displaying the main webpage can be referred to steps S804 to S809 shown in Figure 8, and will not be elaborated here.

[0303] In the relevant solutions, electronic devices only store the sub-resources of web pages, not the main resources of the web pages. Therefore, when returning to the main web page from the secondary web page (in the case that the second operation is stopped), the sub-resources of the web page are usually obtained from the main web page's stored resources, but the main resources of the web page still need to be requested and loaded. This increases the number of requests and the amount of data transmission, which may slow down the loading speed of the main web page, increase the user's waiting time, and affect the user experience.

[0304] In this embodiment, when navigating back from a webpage to the main webpage and displaying the main webpage, the main resources and sub-resources of the main webpage can be obtained from the main webpage's storage resources. The main webpage is then displayed based on the obtained main resources and sub-resources. Compared to related solutions, there is no need to request and load the main resources of the webpage again, thus reducing the number of requests and the amount of data transmitted, improving the main webpage loading speed, and reducing user waiting time.

[0305] In some embodiments, the electronic device displays a main webpage, including:

[0306] Electronic devices obtain the main resources and sub-resources of a webpage from a server. The main resources refer to the resources corresponding to the webpage's network address, and the sub-resources refer to the resources incorporated within the main resources. The main resources and sub-resources of the main webpage are stored to obtain the stored resources of the main webpage. Based on the main resources and sub-resources of the main webpage, the main webpage is displayed; or...

[0307] The electronic device retrieves the main and sub-resources of the main webpage from its storage resources; and displays the main webpage based on the main and sub-resources.

[0308] In implementation, for example, please refer to Figure 7. The electronic device can obtain the main resources of the main webpage from the server through methods one and four shown in Figure 7, and then obtain the sub-resources of the main webpage based on the main resources. Then, in method one, the obtained main resources and sub-resources of the main webpage can be stored to obtain the storage resources of the main webpage. In method four, the storage resources of the main webpage can be updated based on the obtained main resources and sub-resources of the main webpage. Finally, the electronic device can display the main webpage based on the main resources and sub-resources of the main webpage obtained through methods one and four.

[0309] The electronic device can also obtain the main and sub-resources of the main webpage from the storage resources of the main webpage (e.g., the cache resources shown in Figure 7) through methods two and three shown in Figure 7, and then display the main webpage based on the main and sub-resources of the main webpage.

[0310] The proposed solution typically stores the child resources of the main webpage, but not the main webpage's main resources. The reasons are as follows: The main resources of the main webpage refer to HTML files, which are usually the core content of the webpage and their content may change frequently with page updates. If older versions of the HTML files are cached, users may see outdated page content, affecting user experience. On the other hand, child resources of the main webpage refer to CSS tables, JavaScript files, and images, which typically do not change frequently with webpage updates. Caching these resources can reduce network traffic to some extent.

[0311] Since the relevant solution only stores the sub-resources of the main webpage, the electronic device can obtain the sub-resources of the main webpage from the stored resources, but still needs to request and load the main webpage resources. This will increase the number of requests and the amount of data transmitted, which may slow down the loading speed of the main webpage, increase the user's waiting time, and affect the user experience.

[0312] In this embodiment, after obtaining the main resources and sub-resources of a main webpage from a server, the electronic device can store the main resources and sub-resources of the main webpage to obtain the storage resources of the main webpage; based on the main resources and sub-resources of the main webpage, the main webpage is displayed. When the electronic device needs to display the main webpage again, it can retrieve the main resources and sub-resources of the main webpage from the storage resources of the main webpage; based on the main resources and sub-resources of the main webpage, the main webpage is displayed. Since the electronic device can retrieve the main resources and sub-resources of the main webpage from the storage resources of the main webpage, the number of requests and data transmission volume can be reduced, the main webpage loading speed can be improved, and the user waiting time can be reduced.

[0313] In some embodiments, before displaying the main webpage if the second operation is stopped, the method further includes:

[0314] Lock the storage resources of the main webpage. The storage resources of the main webpage include the main resources and sub-resources of the main webpage. The main resources refer to the resources corresponding to the network address of the main webpage, and the sub-resources refer to the resources introduced in the main resources.

[0315] In implementation, for example, electronic devices can store the parsed, rendered, drawn, and composited main webpage data (such as the main webpage data generated in step S806) in a cache to lock the cached resources of the main webpage. This application embodiment does not limit this approach.

[0316] In this embodiment of the application, by locking the storage resources of the main webpage, the electronic device can ensure that when accessing the storage resources of the main webpage again, the storage resources of the main webpage will not become inconsistent or lost due to modification or deletion, thereby improving the overall performance of the electronic device.

[0317] In some embodiments, after the electronic device generates a stitched image based on the first image and the second image, the method further includes:

[0318] Electronic devices store the stitched images, thus obtaining storage resources for the stitched images; and,

[0319] If the second operation is stopped, after displaying the main webpage, the method further includes:

[0320] Electronic devices free up storage resources for stitched images.

[0321] The implementation method for storing the stitched image and obtaining the storage resources for the stitched image can be referred to the implementation method of step S910 shown in Figure 10. The implementation method for releasing the storage resources for the stitched image can be referred to the implementation method of step S926 shown in Figure 10.

[0322] In this embodiment of the application, after the main webpage is displayed when the second operation is stopped, the storage resources of the spliced ​​image can be released. This reduces the storage space occupied by the spliced ​​image, thereby improving the response speed and stability of the electronic device.

[0323] In some embodiments, the electronic device displays a spliced ​​image during the transition from a webpage to a main webpage, including:

[0324] When an electronic device switches from a webpage to the main webpage, the position of the view area changes; based on the changed position of the view area, a spliced ​​image is displayed.

[0325] For details on how this step is implemented, please refer to the implementation shown in S914 to S918 of Figure 10, which will not be repeated here.

[0326] In some embodiments, the second operation is a rightward swipe operation.

[0327] In some embodiments, the method further includes:

[0328] In response to a third operation on the main webpage, the electronic device generates a stitched image based on the first and second images. The third operation is used to indicate a switch from the main webpage to the secondary webpage. During the switch from the main webpage to the secondary webpage, the stitched image is displayed. If the third operation is stopped, the secondary webpage is displayed.

[0329] The third action could refer to the user's swipe-left action on the main webpage.

[0330] When a user swipes left on the main webpage, the electronic device can move from the main webpage to a secondary webpage, and a stitched image can be displayed during the swipe. For example, referring to Figure 5, the user can swipe left on interface 590 (main webpage). In response to the user's swipe, interface 580 shown in (h) of Figure 5 is displayed, which shows a stitched image composed of a first image (a screenshot of the main webpage) and a second image (a screenshot of the secondary webpage). When the user stops swiping, the device can move from interface 890 (main webpage) to interface 870 (secondary webpage).

[0331] For the technical details and effects of electronic devices moving from the main webpage to a secondary webpage, please refer to the above-mentioned technical details and effects of moving from a secondary webpage to the main webpage, which will not be repeated here.

[0332] It should be understood that the sequence number of each step in the above embodiments does not imply the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of this application.

[0333] This application provides a computer program product that, when run on an electronic device, causes the electronic device to execute the technical solutions described in the above embodiments. Its implementation principle and technical effects are similar to those of the related embodiments described above, and will not be repeated here.

[0334] This application provides a readable storage medium containing instructions that, when executed by an electronic device, cause the electronic device to perform the technical solution described in the above embodiments. The implementation principle and technical effects are similar and will not be repeated here.

[0335] This application provides a chip for executing instructions. When the chip is running, it executes the technical solutions described in the above embodiments. Its implementation principle and technical effects are similar and will not be repeated here.

[0336] In the above embodiments, implementation can be achieved, in whole or in part, through software, hardware, firmware, or any combination thereof. When implemented in software, it can be implemented, in whole or in part, as a computer program product. The computer program product includes one or more computer instructions. When the computer instructions are loaded and executed on a computer, all or part of the processes or functions described in the embodiments of this application are generated. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device. The computer instructions can be stored in a computer-readable storage medium or transmitted from one computer-readable storage medium to another. For example, the computer instructions can be transmitted from one website, computer, server, or data center to another via wired (e.g., coaxial cable, fiber optic, digital subscriber line (DSL)) or wireless (e.g., infrared, wireless, microwave, etc.) means. The computer-readable storage medium can be any available medium accessible to a computer or a data storage device such as a server or data center that integrates one or more available media. The available media may be magnetic media (e.g., floppy disks, hard disks, magnetic tapes), optical media (e.g., high-density digital video discs (DVDs)), or semiconductor media (e.g., solid-state disks (SSDs)).

[0337] It should be understood that the term "embodiment" throughout the specification means that a specific feature, structure, or characteristic related to an embodiment is included in at least one embodiment of this application. Therefore, various embodiments throughout the specification do not necessarily refer to the same embodiment. Furthermore, these specific features, structures, or characteristics can be combined in any suitable manner in one or more embodiments. It should be understood that in the various embodiments of this application, the sequence numbers of the above-described processes do not imply a sequential order of execution; the execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of this application.

[0338] In this application, the use of singular pronouns to denote "one or more" rather than "one and only one," unless otherwise specified. In this application, unless otherwise specified, "at least one" is intended to denote "one or more," and "more" is intended to denote "two or more."

[0339] In this document, the terms "at least one of..." or "at least one of..." refer to all or any combination of the listed items. For example, "at least one of A, B, and C" can mean: A exists alone, B exists alone, C exists alone, A and B exist simultaneously, B and C exist simultaneously, and A, B, and C exist simultaneously. Here, A can be singular or plural, B can be singular or plural, and C can be singular or plural.

[0340] Those skilled in the art will recognize that the units and algorithm steps of the various examples described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, or a combination of computer software and electronic hardware. Whether these functions are implemented in hardware or software depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to implement the described functions for each specific application, but such implementation should not be considered beyond the scope of this application.

[0341] 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 found in the corresponding processes in the foregoing method embodiments, and will not be repeated here.

[0342] 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 through some interfaces; the indirect coupling or communication connection between apparatuses or units may be electrical, mechanical, or other forms.

[0343] 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.

[0344] In addition, 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.

[0345] If the aforementioned functions are implemented as software functional units and sold or used as independent products, they 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 a portion of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods described in the various embodiments of this 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.

[0346] The same or similar parts between the various embodiments in this application can be referred to mutually. In the various embodiments of this application, and in the various implementation methods / methods / implementations within each embodiment, unless otherwise specified or logically conflicting, the terminology and / or descriptions between different embodiments and between the various implementation methods / methods / implementations within each embodiment are consistent and can be mutually referenced. The technical features in different embodiments and the various implementation methods / methods / implementations within each embodiment can be combined according to their inherent logical relationships to form new embodiments, implementation methods, methods, or implementation approaches. The above-described embodiments of this application do not constitute a limitation on the scope of protection of this application.

[0347] The above description is merely a specific embodiment of this application, but the scope of protection of this application is not limited thereto. Any variations or substitutions that can be easily conceived by those skilled in the art within the technical scope disclosed in this application should be included within the scope of protection of this application. Therefore, the scope of protection of this application should be determined by the scope of protection of the claims. In conclusion, the above description is merely a preferred embodiment of the technical solution of this application and is not intended to limit the scope of protection of this application. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of this application should be included within the scope of protection of this application.< / seconds>

Claims

1. A webpage display method, characterized in that, include: Display the main webpage, which includes a first control corresponding to the secondary webpage; In response to a first operation on the first control, the secondary webpage is displayed, the first operation being used to instruct the secondary webpage to be opened in the main webpage; In response to a second operation on the secondary webpage, a stitched image is generated based on a first image and a second image, the second operation being used to indicate a switch from the secondary webpage to the main webpage, the first image being obtained by cropping the main webpage, and the second image being obtained by cropping the secondary webpage; The spliced ​​image is displayed during the process of switching from the webpage to the main webpage; If the second operation is stopped, the main webpage is displayed.

2. The method according to claim 1, characterized in that, The process of generating a stitched image based on the first image and the second image includes: Create a view region for displaying the stitched image; the number of view regions is one. Based on the first image and the second image, the stitched image is generated and drawn in the view area.

3. The method according to claim 1 or 2, characterized in that, The step of displaying the main webpage when the second operation is stopped includes: If the second operation is stopped, the main resources and sub-resources of the main webpage are obtained from the storage resources of the main webpage. The storage resources of the main webpage include the main resources and sub-resources of the main webpage. The main resources refer to the resources corresponding to the network address of the main webpage, and the sub-resources refer to the resources introduced in the main resources. The main webpage is displayed based on its main resources and sub-resources.

4. The method according to any one of claims 1 to 3, characterized in that, The main webpage display includes: The main resources of the main webpage and the sub-resources of the main webpage are obtained through the server. The main resources refer to the resources corresponding to the network address of the main webpage, and the sub-resources refer to the resources introduced in the main resources. The main resources and sub-resources of the main webpage are stored to obtain the storage resources of the main webpage; Display the main webpage based on its main and sub-resources; or, Obtain the main resources and sub-resources of the main webpage from its storage resources; The main webpage is displayed based on its main resources and sub-resources.

5. The method according to any one of claims 1 to 4, characterized in that, Before displaying the main webpage when the second operation is stopped, the method further includes: The storage resources of the main webpage are locked. The storage resources of the main webpage include the main resources and sub-resources of the main webpage. The main resources refer to the resources corresponding to the network address of the main webpage, and the sub-resources refer to the resources introduced in the main resources.

6. The method according to any one of claims 1 to 5, characterized in that, After generating the stitched image based on the first image and the second image, the method further includes: The stitched image is stored to obtain storage resources for the stitched image; and, If the second operation is stopped, after displaying the main webpage, the method further includes: Release the storage resources of the stitched image.

7. The method according to any one of claims 2 to 6, characterized in that, The process of switching from the webpage to the main webpage, including displaying the spliced ​​image, includes: During the process of switching from the webpage to the main webpage, the position of the view area is changed; The stitched image is displayed based on the changed position of the view area.

8. The method according to any one of claims 1 to 7, characterized in that, The second operation is a rightward swipe.

9. The method according to any one of claims 1 to 8, characterized in that, The method further includes: In response to a third operation on the main webpage, the stitched image is generated based on the first image and the second image, the third operation being used to indicate a switch from the main webpage to the secondary webpage; The spliced ​​image is displayed during the process of switching from the main webpage to the secondary webpage; If the third operation is stopped, the webpage is displayed.

10. An electronic device, characterized in that, The electronic device includes: one or more processors, and memory; The memory is coupled to the one or more processors, the memory being used to store computer program code, the computer program code including computer instructions, the one or more processors invoking the computer instructions to cause the electronic device to perform the method as described in any one of claims 1 to 9.

11. A chip system, characterized in that, The chip system is applied to an electronic device, the chip system including one or more processors, the one or more processors being used to invoke computer instructions to cause the electronic device to perform the method as described in any one of claims 1 to 9.

12. A computer-readable storage medium, characterized in that, The computer-readable storage medium includes instructions that, when executed on an electronic device, cause the electronic device to perform the method as described in any one of claims 1 to 9.

Images