Page display method and electronic equipment

Abstract

The invention provides a page display method and electronic equipment, relates to the technical field of terminals, and can obtain dynamic resources corresponding to a to-be-displayed page from a server and static resources corresponding to the to-be-displayed page from the electronic equipment locally when a display operation of the to-be-displayed page is received, and render the dynamic resources and the static resources. According to the page loading method and device, the resource loading opportunity is advanced, parallel loading of the dynamic resources and the static resources is achieved, the page loading speed is increased, the page loading accuracy can be guaranteed by obtaining the dynamic resources from the server, and therefore the user experience is improved. Wherein the dynamic resources represent resources which change according to service requirements, and the static resources represent resources which do not change.

Description

Technical Field

[0001] This application relates to the field of terminal technology, and in particular to a page display method and an electronic device. Background Technology

[0002] With the development of the internet and the widespread adoption of mobile devices, web pages are no longer only used in desktop applications and browsers on personal computers (PCs), but also in applications and browsers on mobile devices such as smartphones and tablets (Android devices). When users load web pages on mobile devices, they need to retrieve web page resources from the server via the mobile network. The loading latency of web pages from the client to the server, a key indicator affecting user experience, is significantly impacted by the instability of mobile network quality, becoming a bottleneck for improving web page loading performance. This poses a significant risk and challenge to further enhancing user experience and improving product competitiveness in web applications.

[0003] Currently, web page loading speed can be improved through preloading. Preloading typically involves matching the requested resource with cached resources using a cache matcher after the page request. If a match is successful, the matching resource is returned; if a match fails, the requested resource is loaded from the server via a network request. However, this method does not significantly improve page loading speed and may also result in inaccurate page loading, affecting the user experience. Summary of the Invention

[0004] This application provides a page display method and an electronic device that advances the timing of resource loading and enables the parallel acquisition of static and dynamic resources. This method can quickly load all resources of the page, improve page loading speed, reduce the waiting time for resource loading during the rendering process, and thus improve the user experience.

[0005] To achieve the above objectives, the embodiments of this application adopt the following technical solutions:

[0006] In a first aspect, a page display method is provided for use in an electronic device. In this page display method, firstly, a first page is displayed; then, an operation triggered by a user on the first page to display a second page is received; dynamic resources corresponding to the second page are obtained from the server via a network request, and static resources corresponding to the second page are obtained from the local device; finally, the dynamic and static resources are rendered to display the second page.

[0007] Dynamic resources refer to resources on the second page that change according to business needs, while static resources refer to resources on the second page that do not change.

[0008] In the above page display method, upon receiving a user's trigger to display the second page, dynamic resources are obtained from the server and static resources are obtained locally from the electronic device. This advances the timing of resource loading, enables the parallel acquisition of dynamic and static resources, improves the page loading speed, and reduces the waiting time for resource loading during the rendering process. Furthermore, directly acquiring dynamic resources from the server can also improve the accuracy of page loading, thereby enhancing the user experience.

[0009] For example, the first page is the page currently displayed on the electronic device, and the second page can be the page to be displayed on the electronic device after the first page. For example, the first page can be an advertisement page after an application is launched, and the second page can be the homepage after the advertisement in the application has finished playing or after the advertisement has been closed / skipped. The business requirement can be the business party's requirement for the page display. For example, the business requirement can be that the user needs to display their username on the page after logging in. Receiving the user's action to trigger the display of the second page on the first page can be the user clicking on the first page or the user swiping on the first page.

[0010] In one possible implementation of the first aspect, the method further determines the first resource, second resource, and third resource corresponding to the second page, and then identifies the sub-resources in the first and second resources that fail validity validation as dynamic resources. Here, the first resource represents a resource on the second page whose content or position changes dynamically; the second resource represents a resource on the second page whose content or position does not change and is subject to validity validation; and the third resource represents a resource on the second page whose content or position does not change and is not subject to validity validation. It is evident that not only can the first resource be obtained from the server via a network request, but also the sub-resources in the second resource that fail validity validation can be obtained from the server via a network request. This parallel acquisition of multiple resources improves the page resource loading speed, and obtaining the sub-resources in the second resource that fail validity validation from the server can improve the accuracy and reliability of page resource loading.

[0011] In one possible implementation of the first aspect, the method further identifies the sub-resources that pass validity checks in the second resource and the third resource as static resources. It is evident that by acquiring resources without validity checks and those that pass validity checks locally and in parallel from the electronic device, the page resource loading speed is improved, and the resources that pass validity checks also ensure the accuracy and reliability of page resource loading.

[0012] In one possible implementation of the first aspect, sub-resources in the second resource that fail the validity check are resources whose usage time exceeds a preset duration; sub-resources in the second resource that pass the validity check are resources whose usage time does not exceed the preset duration. It is evident that the display method of a resource may change when the preset duration is exceeded. By using validity checks for the duration, the timeliness of the resource can be guaranteed, improving the accuracy and reliability of page loading.

[0013] In one possible implementation of the first aspect, sub-resources in the second resource that fail the validity check are resources whose usage time exceeds a preset time point; sub-resources in the second resource that pass the validity check are resources whose usage time does not exceed the preset time point. It is evident that validity checks at usage times can ensure the timeliness of resources, improve the accuracy and reliability of page loading, and further enhance the diversity of resource validity checks.

[0014] In one possible implementation of the first aspect, for a first resource, resource acquisition batch information of the first resource is obtained. Then, based on the resource acquisition batch information of the first resource, sub-resources belonging to the same batch of the first resource are retrieved from the server via a network request. The resource acquisition batch information of the first resource indicates the batches in which several sub-resources of the first resource are acquired. It is evident that if all sub-resources of the first resource are retrieved from the server simultaneously, when there are many sub-resources of the first resource, network congestion will inevitably occur, affecting not only the loading speed of the sub-resources of the first resource but also potentially causing the loss of some sub-resources. Therefore, retrieving sub-resources of the first resource in batches based on the resource acquisition batch information of the first resource can ensure both the loading speed and accuracy of the first resource.

[0015] In one possible implementation of the first aspect, the resource acquisition batch information of the first resource is determined based on at least one of the following: the concurrent number of sub-resources in the same batch within the first resource, the levels corresponding to several sub-resources within the first resource, and the priorities corresponding to several sub-resources within the first resource. It is evident that multiple methods can be used to divide the first resource into batches, increasing the diversity of first resource batch division to suit different business scenarios.

[0016] In one possible implementation of the first aspect, the sub-resources in the first resource to be acquired are divided according to the level corresponding to each sub-resource in the first resource, determining the sub-resources of each level in the first resource. The sub-resources of each level in the first resource to be acquired are then divided according to the concurrent access quantity of the sub-resources corresponding to the first resource, determining the sub-resources of each batch in the first resource. Sub-resources belonging to the same batch of the first resource are then acquired from the server via network requests. It is evident that by dividing the resource into batches and enabling parallel acquisition of sub-resources within the same batch, the efficiency of resource acquisition can be improved, thereby increasing page loading speed.

[0017] In one possible implementation of the first aspect, the sub-resources of each level in the first resource are divided according to the priority of each sub-resource of the corresponding level in the first resource and the concurrent number of sub-resources corresponding to the first resource, thereby determining the sub-resources in each batch of the first resource. It can be seen that the sub-resources of each level can also be divided into batches according to the order of priority, with higher-priority sub-resources being divided first, thus ensuring that higher-priority sub-resources of the same level are acquired, loaded, and displayed first, improving the user experience.

[0018] In one possible implementation of the first aspect, for the second resource, resource acquisition batch information of the second resource is obtained. Then, based on the resource acquisition batch information of the second resource, sub-resources belonging to the same batch of the second resource that failed validity verification are retrieved from the server via network requests, and sub-resources belonging to the same batch of the second resource that passed validity verification are retrieved from the local electronic device. The resource acquisition batch information of the second resource is used to indicate the batches in which several sub-resources of the second resource are acquired separately. It is evident that if all sub-resources of the second resource are retrieved simultaneously from the server, it will increase the time of unnecessary network requests and prolong the page loading time. If all sub-resources of the second resource are retrieved simultaneously from the electronic device, the loaded page will be inaccurate and unreliable. Moreover, when there are many sub-resources of the second resource, it will also cause network congestion, which will not only affect the loading speed of the sub-resources of the second resource, but may even lead to the loss of sub-resources. Therefore, by acquiring the sub-resources of the second resource in batches according to the resource acquisition batch information of the second resource, the loading speed and accuracy of the second resource can be guaranteed.

[0019] In one possible implementation of the first aspect, the resource acquisition batch information of the second resource is determined based on at least one of the following: the concurrent number of sub-resources in the same batch within the second resource, the levels corresponding to several sub-resources within the second resource, and the priorities corresponding to several sub-resources within the second resource. It is evident that multiple methods can be used for batch division of the second resource, increasing the diversity of second resource batch division to suit different business scenarios.

[0020] In one possible implementation of the first aspect, for a third resource, resource acquisition batch information of the third resource is obtained. Then, based on the resource acquisition batch information of the third resource, sub-resources belonging to the same batch of the third resource are acquired from the local electronic device. The resource acquisition batch information of the third resource indicates the batches in which several sub-resources of the third resource are acquired. It is evident that if all sub-resources of the third resource are acquired simultaneously from the local electronic device, network congestion will inevitably occur when there are many sub-resources of the third resource. This will not only affect the loading speed of the sub-resources of the third resource but may even lead to the loss of sub-resources. Therefore, acquiring the sub-resources of the third resource in batches based on the resource acquisition batch information of the third resource can ensure the loading speed and accuracy of the third resource.

[0021] In one possible implementation of the first aspect, the resource acquisition batch information of the third resource is determined based on at least one of the following: the concurrent number of sub-resources in the same batch within the third resource, the levels corresponding to several sub-resources within the third resource, and the priorities corresponding to several sub-resources within the third resource. It is evident that multiple methods can be used for batch division of the third resource, increasing the diversity of third resource batch division to suit different business scenarios.

[0022] In one possible implementation of the first aspect, the levels and priorities corresponding to the various sub-resources within the first resource are obtained from preset resource information. This preset resource information is determined based on at least one of the following: the display position of each sub-resource in the first, second, and third resources; the resource request time; the resource response time; and the type of the second page. Therefore, the determined preset resource information facilitates subsequent resource partitioning, thereby improving the efficiency of resource acquisition.

[0023] In one possible implementation of the first aspect, a resource information construction strategy for the second page is determined based on the type of the second page. Then, based on the resource request time and resource response time of each sub-resource in the first, second, and third resources, the corresponding level of each sub-resource in the first, second, and third resources is determined. Next, based on the display position of each sub-resource in the first, second, and third resources, the corresponding priority of each sub-resource in the first, second, and third resources is determined. Finally, based on the corresponding level and priority of each sub-resource in the first, second, and third resources and the resource information construction strategy of the second page, the preset resource information corresponding to the second page is determined. For example, the preset resource information can be represented as a tree structure, where each node represents a corresponding sub-resource, each level represents a corresponding level, and the order of each node in each level represents a corresponding priority. It is evident that the determined preset resource information facilitates resource management on the page, improving the convenience of resource management. Furthermore, the preset resource information directly identifies all resources to be loaded for the second page, eliminating the need to scan or parse the page after downloading to determine the resources to be loaded. This achieves parallel loading of the page and resources, allowing the loading of static resources, the validity verification of the second resource, and the network requests and connections for dynamic resources to be made earlier, significantly reducing the probability of subsequent rendering blockages and thus improving page loading performance.

[0024] In a second aspect, an electronic device is provided, the electronic device including a memory and one or more processors; the memory is coupled to the processors; wherein the memory stores computer program code, the computer program code including computer instructions, and when the computer instructions are executed by the processor, the electronic device performs a page display method as described in the first aspect and any implementation thereof.

[0025] Thirdly, a computer-readable storage medium is provided, including computer instructions that, when executed on an electronic device, cause the electronic device to perform a page display method as described in the first aspect and any implementation thereof.

[0026] Fourthly, a computer program product is provided that, when run on an electronic device, causes the electronic device to execute the page display method as described in the first aspect and any of its implementations.

[0027] The beneficial effects that the electronic device provided in the second aspect, the computer-readable storage medium provided in the third aspect, and the computer program product provided in the fourth aspect can achieve are similar to the beneficial effects that can be achieved in the first aspect and any of its implementations, and will not be repeated here. Attached Figure Description

[0028] Figure 1 This illustration shows one of the structural diagrams of a prior art web preloading method provided in an embodiment of this application;

[0029] Figure 2 This illustration shows a second structural diagram of a prior art web preloading method provided in an embodiment of this application;

[0030] Figure 3 A schematic diagram of the hardware structure of an electronic device provided in an embodiment of this application is shown;

[0031] Figure 4 A schematic diagram of the software structure of an electronic device provided in an embodiment of this application is shown;

[0032] Figure 5 A flowchart of a page display method provided in an embodiment of this application is shown;

[0033] Figure 6 This illustration shows one of the schematic diagrams of a page display provided in an embodiment of this application;

[0034] Figure 7 This illustration shows a second schematic diagram of a page display provided in an embodiment of this application;

[0035] Figure 8 This illustration shows one of the schematic diagrams of a dynamic resource and a static resource provided in an embodiment of this application;

[0036] Figure 9 This illustration shows a second diagram of a dynamic resource and a static resource provided in an embodiment of this application;

[0037] Figure 10 This is shown as a third schematic diagram of a dynamic resource and a static resource provided in an embodiment of this application;

[0038] Figure 11 A schematic diagram of a resource dependency tree provided in an embodiment of this application is shown;

[0039] Figure 12 A schematic diagram of a resource acquisition process provided in an embodiment of this application is shown;

[0040] Figure 13 A schematic diagram of the hardware structure of another electronic device provided in an embodiment of this application is shown. Detailed Implementation

[0041] The technical solutions of the embodiments of this application will be described below with reference to the accompanying drawings. In the description of this application, unless otherwise stated, " / " indicates that the objects before and after are in an "or" relationship. For example, A / B can represent A or B. "And / or" in this application is merely a description of the relationship between related objects, indicating that three relationships can exist. For example, A and / or B can represent: A alone, A and B simultaneously, and B alone, where A and B can be singular or plural. Furthermore, in the description of this application, unless otherwise stated, "multiple" refers to two or more. "At least one of the following" or similar expressions refer to any combination of these items, including any combination of single or plural items. For example, at least one of a, b, or c can represent: a, b, c, ab, ac, bc, or abc, where a, b, and c can be single or multiple. Furthermore, to facilitate a clear description of the technical solutions in the embodiments of this application, the terms "first" and "second" are used in the embodiments of this application to distinguish identical or similar items with substantially the same function and effect. Those skilled in the art will understand that the terms "first" and "second" do not limit the quantity or execution order, and that "first" and "second" are not necessarily different. Meanwhile, in the embodiments of this application, the terms "exemplary" or "for example" are used to indicate that something is being used as an example, illustration, or description. Any embodiment or design scheme described as "exemplary" or "for example" in the embodiments of this application should not be construed as being more preferred or advantageous than other embodiments or design schemes. Specifically, the use of terms such as "exemplary" or "for example" is intended to present related concepts in a concrete manner for ease of understanding.

[0042] Furthermore, the business scenarios described in the embodiments of this application are for the purpose of more clearly illustrating the technical solutions of the embodiments of this application, and do not constitute a limitation on the technical solutions provided by the embodiments of this application. As those skilled in the art will know, with the emergence of new business scenarios, the technical solutions provided by the embodiments of this application are also applicable to similar technical problems.

[0043] The key steps in web page loading include page download, Hypertext Markup Language (HTML) parsing, page resource download, execution of the web programming language (JavaScript), and layout rendering. Among these, page download and page resource download account for a significant portion of the overall page loading process and are directly related to network quality. In poor network conditions, performing page download before page resource download can block subsequent rendering processes, reducing web page loading performance.

[0044] Currently, the main method to improve resource loading speed is web preloading. After the page is downloaded, the page resources are scanned and network requests are initiated to download the page resources before HTML parsing. This method advances the entire page resource download process, which can shorten the waiting time of the subsequent HTML parsing and rendering process to a certain extent.

[0045] For example, a web preloading method using a local proxy is as follows: Figure 1 As shown, a local proxy can be understood as a service set up on a mobile device. The browser's main process in the local proxy sends page resource requests to the service process in the local proxy. The request interceptor in the service process intercepts the page resource requests. The cache matcher in the service process searches for a resource that matches the page resource request in the preload cache. That is, for each resource to be loaded in the page resource request, if the resource exists in the preload cache, the match is successful, and the resource in the preload cache is returned to the mobile device; if the resource does not exist in the preload cache, the match fails, and the cache matcher sends a network request to the web server through the local proxy's network process, establishing a network connection between the local proxy and the web server. This allows the service process to send a loading request for the resource to the web server and receive the resource downloaded from the web server. As can be seen, this method requires matching each resource to be loaded and sending network requests to the web server and establishing network connections for each resource that fails to match. This results in the process of sending network requests and establishing network connections accounting for a high proportion of page loading time. Furthermore, this matching method may lead to inaccurate page loading for dynamic resources that may change, affecting the user experience.

[0046] For example, a web preloading method using a dual-proxy architecture is as follows: Figure 2As shown, the dual-proxy architecture includes a cloud proxy deployed in the cloud and a local proxy deployed on the mobile device. The cloud proxy actively loads web pages from the web server, and a remote resource repository stores all resources downloaded when each page loads. A resource loading graph generator generates and manages the web page resource loading graph. Based on this graph, the cloud proxy can determine which resources are needed when a web page loads and in what order. Following this graph, the cloud proxy periodically fetches resources from the web server to update the remote resource repository, ensuring that the web client always receives the latest resources. Therefore, when a web client requests a webpage through a local proxy, the cloud proxy can immediately send the missing resources from the local proxy to the web client in the correct order via a resource synchronizer. The local proxy's local resource repository records all resources downloaded by the web client. When the web client requests the same webpage again, the local proxy intercepts the resource request and hands it over to a resource matcher for verification against the resource loading graph synchronized with the cloud. If a match is successful and the resource has not changed, the resource is retrieved from the local resource repository; if a match is successful but the cloud resource has been updated, the local proxy retrieves the cloud resource through the resource synchronizer; if a match fails, the local proxy forwards the request to the web server. This method requires the cloud to first determine the missing resources of the local proxy so that the local proxy records all resources. Although the cloud periodically and proactively updates resources, inaccurate page loading can still occur for dynamic resources that change at any time. Furthermore, when requesting the same page, each resource to be loaded needs to be matched sequentially, resulting in no significant improvement in page loading speed. In addition, cloud costs are high, making commercial implementation difficult and limiting its widespread applicability.

[0047] In view of this, this application provides a page display method. Taking its application in an electronic device as an example, it advances the timing of resource loading, realizes the parallel acquisition of static and dynamic resources, improves page loading speed, and thus improves user experience.

[0048] In some embodiments, taking the above page display method applied to an electronic device as an example, firstly, the electronic device displays a first page. Then, it receives an operation from the user on the first page to trigger the display of a second page. It then obtains dynamic resources corresponding to the second page from the server via a network request, and the electronic device also obtains static resources corresponding to the second page from its local storage. Dynamic resources refer to resources on the second page that change according to business requirements, while static resources refer to resources on the second page that do not change. Finally, the dynamic and static resources are rendered to display the second page.

[0049] For example, the first page is the page currently displayed on the electronic device, and the second page is the page to be displayed after the first page.

[0050] For example, resources are the various files and data used on a page to support its display and functionality. Resources include, but are not limited to, the following: 1. Images used to display visual content, such as background images and button icons; 2. Cascading Style Sheets (CSS) used to control the layout and style of the webpage, such as fonts, colors, and margins; 3. JavaScript files used to implement interactive functions of the webpage, such as form validation and dynamic content updates; 4. Other files used to support specific functions and user experience of the webpage, such as font files and audio files.

[0051] For example, business requirements can be understood as the business party's requirements for page display. For instance, in some cases, it is necessary to change a certain resource on a certain page, while in other cases, it is not necessary to change a certain resource.

[0052] For example, dynamic resources can be understood as resources that can display different data on the page according to different business needs, or resources whose display position on the page is not fixed each time the page is loaded, or resources that fail validity checks. For example, resources that display different data on the page could be resources corresponding to avatars and usernames, because different users have different avatars and usernames, so the avatars and usernames displayed on the same page in the same application are different. Or, the same user can change their avatar or username, so that the avatar or username displayed when the page is loaded again is different from the previous display. Resources corresponding to avatars and usernames are dynamic resources. For example, resources whose display position on the page is not fixed each time the page is loaded could be a recommended product on a shopping mall page. The corresponding resources may vary in position each time the store page loads, making them dynamic resources. For example, a resource requiring validity verification might be an advertisement in a specific display area of ​​a page. This advertisement is required to play for only 15 days, after which it will be replaced by another advertisement. Therefore, the validity of the resource corresponding to this advertisement needs to be verified over time. If the usage period of the resource corresponding to the advertisement is within 15 days, it means that the resource has passed the validity verification and remains unchanged, making it a static resource. If the usage period of the resource corresponding to the advertisement exceeds 15 days, it means that the resource has failed the validity verification and changes, making it a dynamic resource.

[0053] For example, static resources can be understood as resources whose content or location does not change. For instance, the resources corresponding to the navigation bar on a page, where the navigation bar displayed does not change each time different users or the same user loads the page, are static resources.

[0054] In the above method, the second page can be loaded as soon as the user triggers the display of the second page on the first page. This advances the timing of resource loading and enables the parallel acquisition of dynamic and static resources. This not only improves the resource loading speed but also ensures the accuracy of dynamic resource loading for the method of directly obtaining dynamic resources from the server, thereby improving the user experience.

[0055] The page display method provided in this application embodiment can be applied to electronic devices.

[0056] In some embodiments, such as Figure 3 As shown, the electronic device 100 may include a processor 110, an external memory interface 120, an internal memory 121, a universal serial bus (USB) interface 130, a charging management module 140, a power management module 141, a battery 142, an antenna 1, an antenna 2, a mobile communication module 150, a wireless communication module 160, an audio module 170, a sensor module 180, buttons 190, a motor 191, an indicator 192, a camera 193, a display screen 194, and a user identification module (SIM) card interface 195, etc.

[0057] It is understood that the structures illustrated in the embodiments of this application do not constitute a specific limitation on the electronic device 100. In other embodiments of this application, the electronic device 100 may include more or fewer components than illustrated, or combine some components, or split some components, or have different component arrangements. The illustrated components may be implemented in hardware, software, or a combination of software and hardware.

[0058] Processor 110 may include one or more processing units ( Figure 3 (Not shown in the image), for example, processor 110 may include an application processor (AP), a modem processor, a graphics processing unit (GPU), an image signal processor (ISP), a controller, memory, a video codec, a digital signal processor (DSP), a baseband processor, and / or a neural network processing unit (NPU), etc. Different processing units may be independent devices or integrated into one or more processors.

[0059] The controller can be the nerve center and command center of the electronic device 100. The controller can generate operation control signals according to the instruction opcode and timing signals to complete the control of fetching and executing instructions.

[0060] In some possible implementations, the controller can specifically control the electronic device 100 to obtain dynamic resources corresponding to the second page from the server via a network request when it receives an operation from the user to trigger the display of the second page on the first page, and to obtain static resources corresponding to the second page from the local device.

[0061] In some possible implementations, the controller can also control the electronic device 100 to render dynamic resources after acquiring them, and to render static resources after acquiring them, in order to display the second page.

[0062] The processor 110 may also include a memory for storing instructions and data. In some embodiments, the memory in the processor 110 is a cache memory. This memory can store instructions or data that the processor 110 has just used or that are used repeatedly. If the processor 110 needs to use the instruction or data again, it can retrieve it directly from the memory. This avoids repeated accesses, reduces the waiting time of the processor 110, and thus improves the efficiency of the system.

[0063] In some possible implementations, the memory can store static resources or preset resource information. The preset resource information is used to determine all the resources to be acquired for the page. The electronic device can directly determine all the resources to be loaded for the page without loading the page first, thereby achieving parallel loading of the page and resources and improving page loading efficiency.

[0064] In some embodiments, the processor 110 may include one or more interfaces (not shown). For example, the USB interface 130 is an interface conforming to the USB standard specification, specifically a Mini USB interface, a Micro USB interface, a USB Type-C interface, etc. The USB interface 130 can be used to connect a charger to charge the electronic device 100, and can also be used for data transfer between the electronic device 100 and peripheral devices. It can also be used to connect headphones for audio playback. This interface can also be used to connect other electronic devices, such as AR devices.

[0065] The charging management module 140 is used to receive charging input from the charger. The charger can be a wireless charger or a wired charger.

[0066] The power management module 141 is used to connect the battery 142, the charging management module 140, and the processor 110. The power management module 141 receives input from the battery 142 and / or the charging management module 140 to power the processor 110, internal memory 121, external memory, display 194, camera 193, and wireless communication module 160, etc.

[0067] The wireless communication function of electronic device 100 can be realized through antenna 1, antenna 2, mobile communication module 150, wireless communication module 160, modem processor and baseband processor, etc.

[0068] Antennas 1 and 2 are used to transmit and receive electromagnetic wave signals. The mobile communication module 150 can provide wireless communication solutions, including 2G / 3G / 4G / 5G, for use on the electronic device 100. The mobile communication module 150 can receive electromagnetic waves via antenna 1, and perform filtering, amplification, and other processing on the received electromagnetic waves before transmitting them to a modem processor for demodulation. The mobile communication module 150 can also amplify the signal modulated by the modem processor and convert it into electromagnetic waves for radiation via antenna 1.

[0069] The wireless communication module 160 can provide solutions for wireless communication applications on the electronic device 100, including wireless local area networks (WLANs) (such as wireless fidelity (Wi-Fi) networks), Bluetooth (BT), Global Navigation Satellite System (GNSS), frequency modulation (FM), near field communication (NFC), and infrared (IR) technologies. The wireless communication module 160 receives electromagnetic waves via antenna 2, modulates and filters the electromagnetic wave signals, and sends the processed signal to processor 110. The wireless communication module 160 can also receive signals to be transmitted from processor 110, modulate and amplify them, and then convert them into electromagnetic waves for radiation via antenna 2.

[0070] In some embodiments, antenna 1 of electronic device 100 is coupled to mobile communication module 150, and antenna 2 is coupled to wireless communication module 160, so that electronic device 100 can communicate with networks and other devices through wireless communication technology.

[0071] Electronic device 100 implements display functions through a GPU, a display screen 194, and an application processor. The GPU is a microprocessor for image processing, connected to the display screen 194 and the application processor. The GPU performs mathematical and geometric calculations for graphics rendering. Processor 110 may include one or more GPUs, which execute program instructions to generate or modify display information. Display screen 194 is used to display images, videos, etc. Display screen 194 includes a display panel.

[0072] In some possible implementations, the electronic device 100 may display a first page or a second page via a display screen 194.

[0073] It is understood that the display screen 194 mentioned herein can serve as the screen in the following embodiments.

[0074] Electronic device 100 can perform shooting functions through ISP, camera 193, video codec, GPU, display 194 and application processor.

[0075] The I SP is used to process data fed back from camera 193. Camera 193 is used to capture still images or videos.

[0076] A digital signal processor (DSP) is used to process digital signals, including digital image signals and other digital signals. A video codec is used to compress or decompress digital video. An NPU (Neural Processing Unit) is a neural network (NN) computing processor that, by borrowing the structure of biological neural networks, such as the transmission patterns between neurons in the human brain, rapidly processes input information and can continuously learn. NPUs enable intelligent cognitive applications in electronic devices, such as image recognition, facial recognition, speech recognition, and text understanding.

[0077] The external memory interface 120 can be used to connect an external memory card, such as a Micro SD card, to expand the storage capacity of the electronic device 100. The external memory card communicates with the processor 110 through the external memory interface 120 to perform data storage functions.

[0078] In some possible implementations, the electronic device 100 can store static resources via an external memory card, and the electronic device 100 can also store preset resource information via an external memory card.

[0079] Internal memory 121 can be used to store computer executable program code, which includes instructions. Processor 110 executes various functional applications and data processing of electronic device 100 by running the instructions stored in internal memory 121. Internal memory 121 may include a program storage area and a data storage area. The program storage area may store the operating system, at least one application program required for a function (such as sound playback, image playback, etc.), etc. The data storage area may store data created during the use of electronic device 100 (such as audio data, phonebook, etc.). Furthermore, internal memory 121 may include high-speed random access memory and may also include non-volatile memory, such as at least one disk storage device, flash memory device, universal flash storage (UFS), etc.

[0080] In some possible implementations, the electronic device 100 may also store static resources through the internal memory 121, and the electronic device 100 may also store preset resource information through the internal memory 121.

[0081] Electronic device 100 can implement audio functions through audio module 170 and application processor, such as music playback and recording. Audio module 170 is used to convert digital audio information into analog audio signals for output, and also to convert analog audio input into digital audio signals. Audio module 170 can also be used for encoding and decoding audio signals.

[0082] Buttons 190 include a power button, volume buttons, etc. Buttons 190 can be mechanical buttons or touch-sensitive buttons. Motor 191 can generate vibration alerts. Motor 191 can be used for incoming call vibration alerts or for touch vibration feedback. Indicator 192 can be an indicator light, used to indicate charging status, battery level changes, or to indicate messages, missed calls, notifications, etc. SIM card interface 195 is used to connect a SIM card.

[0083] based on Figure 3 The electronic device shown implements the page display method in the embodiments of this application, advances the timing of resource loading, and the parallel acquisition of dynamic and static resources further improves the page loading speed.

[0084] In some embodiments, the software system of the electronic device 100 may include a system library, and a service in the system library may implement the above-described page display method, advance the timing of resource loading, realize the parallel loading of dynamic and static resources, and improve page loading speed.

[0085] In some embodiments, the structure of the electronic device 100 may also be as follows: Figure 4As shown, the electronic device 100 includes an acquisition module, a network module, a local storage module, and a rendering module. The acquisition module is used to acquire dynamic resources through the network module and static resources through the local storage module; the network module is used to establish a network connection between the electronic device and the server; the local storage module is used to store the static resources; and the rendering module is used to render the acquired dynamic and static resources for display.

[0086] Dynamic resources include the first resource and the sub-resources in the second resource that failed the validity check; static resources include the sub-resources in the second resource that passed the validity check and the third resource.

[0087] In some embodiments, the local storage module includes a resource information storage unit and a resource cache unit; the resource information storage unit is used to store preset resource information; the resource cache unit is used to store static resources.

[0088] In some embodiments, the acquisition module includes a first unit and a resource parallel preloading unit; the first unit is used to acquire a page loading request from the browser or application of the electronic device 100, and acquire corresponding preset resource information from the resource information storage unit according to the page loading request; the resource parallel preloading unit is used to determine the first resource, the second resource and the third resource to be acquired according to the preset resource information, divide the first resource, the second resource and the third resource to be acquired into batches according to the preset resource information, determine the batches of sub-resources in the first resource, the batches of sub-resources in the second resource and the batches of sub-resources in the third resource, and send the determined sub-resources in the first resource and the sub-resources in the second resource to the network module according to the corresponding batches, and send the determined sub-resources in the third resource to the resource caching unit according to the corresponding batches; the resource caching unit is used to acquire the sub-resources of the third resource corresponding to the batch and send the acquired sub-resources of the third resource corresponding to the batch to the rendering module.

[0089] In some embodiments, the network module includes a resource verification unit and a network connection unit. The resource verification unit is used to verify the information of each sub-resource in each batch of the second resource to be acquired for each batch of the second resource to be acquired. The verification may be a validity verification of time, a security verification of whether it has been tampered with, etc. The verified sub-resources in each batch of the second resource to be acquired are sent to the resource caching unit, and the verified sub-resources in each batch of the second resource to be acquired are sent to the network connection unit. The resource caching unit is also used to acquire the verified sub-resources in the corresponding batch of the second resource and send the acquired verified sub-resources in the corresponding batch of the second resource to the rendering module. The network connection unit is used to establish a network connection between the electronic device and the server and acquire dynamic resources from the server, that is, to acquire the verified sub-resources in the second resource and the first resource in the corresponding batch from the server.

[0090] In some embodiments, the network module is further configured to receive response information from the server in response to a page loading request, send the response information to the first unit, and send the static resources in the response information to the resource caching unit; the first unit is further configured to create or update preset resource information based on the response information, and send the created or updated preset resource information to the resource information storage unit; the response information includes the response time and the dynamic resources and / or static resources corresponding to the page loading request.

[0091] In some embodiments, the resource information storage unit is further configured to receive and store preset resource information sent by the first unit after creation or update, so that when the page is loaded again in a subsequent manner, the electronic device can directly obtain the preset resource information from the resource information storage unit and determine all the resources to be loaded corresponding to the page.

[0092] based on Figure 4 The electronic device shown implements the page display method in the embodiments of this application, advances the timing of resource loading, realizes the parallel acquisition of static and dynamic resources, and further improves the efficiency of resource loading.

[0093] The aforementioned electronic devices can be mobile phones, tablets, wearable devices (such as smartwatches, smart bracelets, etc.), smart home devices (such as televisions, etc.), in-vehicle systems (such as vehicle terminals), etc. Among them, mobile phones can be foldable screen phones or non-foldable screen phones.

[0094] The following uses a mobile phone as an example to illustrate the page display method provided in the embodiments of this application.

[0095] See Figure 5 As shown, the above page display method may include the following steps S501-S503.

[0096] S501, the phone displays the first page.

[0097] In some embodiments, the first page may be the page or desktop currently displayed on the mobile phone. For example, the first page may be the page of a certain application, or it may be the advertisement page displayed by the application after it is opened.

[0098] S502: The mobile phone receives the user's operation of displaying the second page triggered on the first page, and obtains the dynamic resources corresponding to the second page from the server through network requests, as well as the static resources corresponding to the second page from the local mobile phone.

[0099] For example, the user's action to trigger the display of the second page on the first page can be a swipe operation on the first page or a click operation on the first page. The click operation can be a single click or a double click. The swipe operation and the click operation can be an operation with one finger, two fingers, or three fingers. This application embodiment does not impose specific limitations on this.

[0100] Among them, a network request is a resource loading request sent by the mobile phone to the server, so that the mobile phone can obtain the dynamic resources corresponding to the resource loading request from the server. Before this, the mobile phone also needs to send a request to the server to establish a network connection and communicate with the server. For example, the network connection between the mobile phone and the server is established through domain name system (DNS) resolution and socket connection.

[0101] In some embodiments, the second page can be a page to be displayed after the first page, or a page to be displayed before the first page. For example, such as Figure 5 As shown, if the first page is one of the desktops in a desktop scenario, the second page can be the homepage of the application the user clicked; if the first page is a page of a specific application, the second page can be the page to be displayed after swiping down or up from the first page, or it can be the next page to navigate to from the first page, such as... Figure 6 As shown, the first page is the "Home" page. After the user clicks the "Shop" icon, the phone jumps from the first page to the corresponding "Shop" page, which is the second page. If the first page is the advertising page displayed after the application is opened, the second page can be the page corresponding to the advertisement after the user triggers an ad, or it can be the application's homepage displayed after the advertisement on the advertising page has finished playing or after a user triggers an action to skip / close the advertisement. Figure 7 As shown, the first page is an advertisement page about the watch that appears after the application is opened. If the user clicks "Skip" on the first page, the application's homepage will appear. Figure 7 The page corresponding to "Home Furnishings" is the second page.

[0102] In some embodiments, dynamic resources refer to resources on the second page that change according to business needs. Dynamic resources include resources whose content changes with business needs, resources whose location changes with business needs, and resources that fail validity checks according to business needs. Static resources refer to resources on the second page that do not change. Static resources include resources whose content and location do not change and do not require validity checks, as well as resources whose content and location do not change and pass validity checks.

[0103] For example, resources whose content changes with business needs, such as Figure 8 (a) and Figure 8 As shown in (b), the business requirement is to display the corresponding username and avatar of different users on this page, such as... Figure 8 In (a) of this page, the username displayed is "111111", and the profile picture is of a short-haired girl. Figure 8 (b) in the example refers to another user whose username on this page is "222222" and whose profile picture is a male wearing glasses. Alternatively, business requirements may dictate that each user can modify their corresponding username and profile picture, as shown on this page. Figure 8 As shown in (a), the user changed their username from "111111" to "222222" and their profile picture from a short-haired girl to a boy wearing glasses. The page then reloads and displays as shown below. Figure 8 As shown in (b), the resources corresponding to usernames and avatars are dynamic resources; for example, resources whose location changes with business needs, such as... Figure 9 (a) and Figure 9 As shown in (b), the business requirement is to display recommended products in the "Good Products Testing" section of the e-commerce page. The position of the recommended products is not fixed each time the e-commerce page is loaded, such as... Figure 9 The first recommended product under the "Good Things Crowdsourcing" section shown in (a) is a projector. Reloading the page will show... Figure 9 As shown in (b), the projector displays the product in the second position within the "Good Things Crowdsourcing" area. The resources corresponding to the recommended products in the "Good Things Crowdsourcing" area are dynamic resources; for example, resources that undergo validity verification based on business needs, such as... Figure 10As shown, the business requirement is to generate the previous month's payslips on the 10th of each month. Therefore, the data in "My Payslips" changes every month, requiring validity validation of the resources corresponding to "My Payslips". If the current display time of the resource corresponding to "My Payslips" is before the 10th of the current month, it means that the resource corresponding to "My Payslips" has passed the validity validation and is a static resource. If the current display time of the resource corresponding to "My Payslips" is on or after the 10th of the current month, it means that the resource corresponding to "My Payslips" has failed the validity validation and is a dynamic resource. For example, resources that do not change and do not require validity validation could be the navigation bar on the page. The content and position of the navigation bar are fixed each time it is loaded and do not change over time, so no validity validation is required. The resource corresponding to the navigation bar is a static resource. Figure 8 (a) and Figure 8 Static resources marked with a dashed box in (b) of the text, such as Figure 9 (a) and Figure 9 Static resources marked with a dashed box in (b) and such Figure 10 Static resources marked with a dashed box.

[0104] In some embodiments, before the mobile phone requests the dynamic resources corresponding to the second page from the server via a network request, it first determines the first resource, the second resource, and the third resource corresponding to the second page, and then determines the sub-resources in the first resource and the second resource that fail the validity check as dynamic resources.

[0105] The first resource refers to resources whose content or position on the second page changes dynamically, such as user-customizable images, audio, and video resources on the page. The second resource refers to resources whose content or position on the second page does not change and are subject to validity verification, such as resources that are only updated when the page is upgraded. The third resource refers to resources whose content or position on the second page does not change and are not subject to validity verification, such as the content, icons, fonts, and styles of the navigation bar on a mobile application page.

[0106] As can be seen, dynamic resources not only include resources whose content or location changes dynamically, but also sub-resources in the second resource that failed the validity check. The way mobile phones obtain sub-resources that failed the validity check from the server can improve the accuracy and reliability of page resource loading. Furthermore, dynamic resources increase the types of sub-resources in the second resource that failed the validity check, allowing mobile phones to obtain the first resource, the sub-resources in the second resource that failed the validity check, and the sub-resources in both the first and second resources that failed the validity check in parallel from the server, thereby improving the efficiency of resource loading.

[0107] In some embodiments, before the mobile phone obtains the static resources corresponding to the second page from the local mobile phone, it determines the sub-resources and the third resource in the second resource that have passed the validity check as static resources.

[0108] As can be seen, the mobile phone can not only obtain resources without validation from the local device, but also obtain resources with validation. This enables the parallel acquisition of multiple resources, both those without and those with validation, improving the page resource loading speed. Furthermore, the resources with validation ensure the accuracy and reliability of page resource loading.

[0109] In some embodiments, a sub-resource in the second resource that fails the validity check is a resource whose usage time in the second resource exceeds a preset duration; a sub-resource in the second resource that passes the validity check is a resource whose usage time in the second resource does not exceed the preset duration.

[0110] For example, validity verification can be achieved by comparing the usage duration of a resource with a preset duration. If the mobile phone determines that the usage duration of a resource exceeds the preset duration, the display method of that resource may change. For instance, if the data displayed on the page is updated every six months, and the usage duration of the resource corresponding to the data on the page exceeds the preset duration (six months), it means that the resource corresponding to the data has failed the validity verification, and the mobile phone needs to retrieve the resource corresponding to the data from the server again. If the usage duration of the resource corresponding to the data does not exceed six months, it means that the resource corresponding to the data has passed the validity verification, and the mobile phone directly retrieves the resource corresponding to the data from the local machine and continues to display it. It can be seen that validity verification can ensure the timeliness of resources and improve the accuracy and reliability of page loading.

[0111] In some embodiments, a sub-resource in the second resource that fails the validity check is a resource whose usage time in the second resource exceeds a preset time point; a sub-resource in the second resource that passes the validity check is a resource whose usage time in the second resource does not exceed the preset time point.

[0112] For example, validity verification can also be performed by comparing the usage time of a resource with a preset time. When the mobile phone determines that the usage time of a certain resource exceeds the preset time, the display method of the resource may change. For example, when the page is upgraded, some resources need to be updated. If the usage time of this part of the resource exceeds the preset time (such as the upgrade time), it means that this part of the resource has failed the validity verification, and the mobile phone needs to retrieve this part of the resource from the server again. If the usage time of this part of the resource does not exceed the preset time, it means that this part of the resource has passed the validity verification, and the mobile phone directly retrieves this part of the resource from the local machine and continues to display it.

[0113] It is evident that using point-in-time validity checks can ensure the timeliness of resources, improve the accuracy and reliability of page loading, and further enhance the diversity of resource validity checks to make them suitable for different application scenarios.

[0114] It is understood that the validity verification in the embodiments of this application is not limited to the validity verification of time, but can also be other verifications, such as security verification, etc. The embodiments of this application do not impose specific restrictions on this.

[0115] For example, a mobile phone can verify the validity of a resource by checking if its security identifier matches a preset security identifier. If the security identifier matches the preset security identifier, the resource passes the security verification, and the phone retrieves the resource locally. If the security identifier does not match the preset security identifier, the resource fails the security verification, and the phone retrieves the resource from the server. For instance, media files such as images and videos displayed on a webpage are typically used to enhance user experience, but without security verification, they could be maliciously exploited, such as by injecting malicious code or modifying content to spread viruses or conduct other malicious activities. Similarly, CSS and JS files are used for the styling and functionality of webpages; if tampered with, they could execute malicious code or alter the normal function of the webpage, posing a security risk to users. Therefore, if the obtained security identifier does not match the preset security identifier, it indicates that the resource may have been maliciously tampered with, and the phone needs to re-download the resource from the server to improve its security.

[0116] S503, the mobile phone renders dynamic and static resources to display the second page.

[0117] It is understandable that the steps S501 to S502 above realize the acquisition of resources in the second page, and the step S503 is to render the acquired dynamic and static resources in the second page so that the second page can be displayed on the mobile phone screen.

[0118] The steps S501-S503 described above implement the page display method in this application embodiment. It can obtain dynamic resources from the server and static resources from the local electronic device and render them, thus advancing the timing of resource loading. Furthermore, the parallel acquisition of dynamic and static resources further improves the page loading speed. In addition, obtaining dynamic resources from the server can improve the accuracy of page loading.

[0119] In some embodiments, after the mobile phone determines the first resource, the second resource, and the third resource on the second page, it can further divide the first resource, the second resource, and the third resource.

[0120] In some embodiments, for a first resource, the mobile phone first obtains resource acquisition batch information of the first resource, and then, based on the resource acquisition batch information of the first resource, requests sub-resources belonging to the same batch as the first resource from the server via a network request.

[0121] Among them, the resource acquisition batch information of the first resource is used to indicate the batches of acquisition of several sub-resources in the first resource.

[0122] For example, all sub-resources in the first resource to be acquired can be divided into batches. Starting from the first batch of the first resource, all sub-resources in that batch of the first resource can be acquired from the server until the last batch of the first resource is reached. This can quickly and accurately acquire all sub-resources of the first resource.

[0123] It is evident that when there are many sub-resources of the first resource, simultaneously retrieving all sub-resources from the server will inevitably cause network congestion. This not only affects the loading speed of the sub-resources of the first resource, but also may result in the loss of some sub-resources in severe cases of network congestion. Therefore, by retrieving the sub-resources of the first resource in batches according to the resource retrieval batch information, the loss of sub-resources of the first resource can be avoided, ensuring the accuracy of the loading of the first resource. Furthermore, it enables the parallel retrieval of all sub-resources in the first resource, further improving the resource loading speed.

[0124] Similarly, in some embodiments, the mobile phone obtains resource acquisition batch information of the second resource for the second resource, and then, based on the resource acquisition batch information of the second resource, obtains the sub-resources that failed the validity check in the same batch belonging to the second resource from the server through a network request, and obtains the sub-resources that passed the validity check in the same batch belonging to the second resource from the mobile phone locally.

[0125] Among them, the resource acquisition batch information of the second resource is used to indicate the batches of acquisition of several sub-resources in the second resource.

[0126] It is evident that retrieving all sub-resources of the second resource simultaneously from the server would increase unnecessary network request time and prolong page loading time. Retrieving all sub-resources from the local mobile device simultaneously could lead to inaccurate and unreliable page loading. Furthermore, when there are many sub-resources in the second resource, it can cause network congestion, affecting not only the loading speed of the sub-resources but also potentially resulting in the loss of some sub-resources. Therefore, by using the resource retrieval batch information of the second resource to retrieve sub-resources in batches, parallel retrieval of valid sub-resources, parallel retrieval of invalid sub-resources, and parallel retrieval of both valid and invalid sub-resources is achieved, further improving the loading speed and accuracy of the second resource.

[0127] Similarly, in some embodiments, the mobile phone obtains resource acquisition batch information of the third resource, and then, based on the resource acquisition batch information of the third resource, obtains sub-resources belonging to the same batch of the third resource from the local mobile phone.

[0128] Among them, the resource acquisition batch information of the third resource is used to indicate the batches of acquisition of several sub-resources in the third resource.

[0129] It is evident that if all sub-resources of a third resource are simultaneously retrieved from the local storage of the phone, network congestion will inevitably occur when there are many sub-resources in the third resource. This will not only affect the loading speed of the sub-resources of the third resource, but may even result in the loss of some sub-resources. Therefore, by retrieving the resource retrieval batch information of the third resource in batches, the sub-resources in the third resource are retrieved in parallel, thereby achieving the parallel retrieval of all sub-resources in the third resource and further improving the loading speed and accuracy of the third resource.

[0130] In some embodiments, the resource acquisition batch information of the first resource is determined based on at least one of the following: the number of concurrent sub-resources in the same batch in the first resource, the level corresponding to several sub-resources in the first resource, and the priority corresponding to several sub-resources in the first resource.

[0131] For example, a level can represent the dependency relationship between several sub-resources, and a priority can represent the display order of several sub-resources.

[0132] Similarly, in some embodiments, the resource acquisition batch information of the second resource is determined based on at least one of the following: the concurrent number of sub-resources in the same batch in the second resource, the level corresponding to several sub-resources in the second resource, and the priority corresponding to several sub-resources in the second resource.

[0133] Similarly, in some embodiments, the resource acquisition batch information of the third resource is determined based on at least one of the following: the concurrent number of sub-resources in the same batch in the third resource, the level corresponding to several sub-resources in the third resource, and the priority corresponding to several sub-resources in the third resource.

[0134] For example, priority can represent the order in which sub-resources of the same type and level are divided. Sub-resources with higher priority are divided into batches first. The same type means that they belong to the first resource, or the second resource, or the third resource.

[0135] In some embodiments, the priority of sub-resources in the same level can be used to determine the number of concurrent sub-resources. If the priorities of sub-resources in the first level of the first resource are all high, the number of concurrent sub-resources in the first level of the first resource can be increased. If the priorities of sub-resources in the first level of the second resource are all low, the number of concurrent sub-resources in the first level of the second resource can be decreased. In this way, when multiple types of sub-resources are acquired in parallel, the high-priority first-level sub-resources can be acquired more quickly, while ensuring network quality.

[0136] As can be seen, there are multiple ways to divide the first, second, and third resources into batches, which increases the diversity of batch division and makes it suitable for different business scenarios.

[0137] The following explanation uses the first resource as an example to illustrate batch division. The resource acquisition batch information for the first resource can be determined using at least one of the following methods: the concurrent number of sub-resources within the same batch in the first resource, the corresponding levels of several sub-resources in the first resource, and the corresponding priorities of several sub-resources in the first resource. The batch division methods for the second and third resources are similar to those for the first resource and will not be elaborated upon here.

[0138] In some embodiments, the mobile phone can divide all sub-resources in the first resource to be acquired into batches according to the concurrency of sub-resources. The number of sub-resources in each batch of the first resource is the concurrency of sub-resources. For example, if the first resource includes 90 sub-resources and the concurrency of sub-resources is 30, then every 30 sub-resources in the first resource are divided into three batches, each containing 30 sub-resources. Alternatively, the mobile phone can divide all sub-resources in the first resource into batches according to the levels corresponding to certain sub-resources in the first resource. Sub-resources of the same level are grouped into batches. For example, if there are 10 levels in the first resource, the sub-resources in the first resource are divided into 10 batches according to the 10 levels, and the sub-resources in each batch are of one level. Alternatively, all sub-resources in the first resource can be divided into batches according to the priority of several sub-resources in the first resource. That is, sub-resources in the first resource that belong to the same priority are grouped into batches. For example, if there are 5 priorities in the first resource, the sub-resources in the first resource are divided into 5 batches according to the 5 priorities, and the sub-resources in each batch are of one priority.

[0139] In some embodiments, all sub-resources in the first resource can also be divided into batches according to the concurrency and level of the sub-resources. First, the mobile phone divides the sub-resources in the first resource to be acquired according to the level corresponding to each sub-resource in the first resource, determining the sub-resources of each level in the first resource. Then, the mobile phone divides the sub-resources of each level in the first resource to be acquired according to the concurrency of the sub-resources corresponding to the first resource, determining the sub-resources of each batch in the first resource. Finally, the mobile phone obtains the sub-resources of the same batch belonging to the first resource from the server through a network request. For example, if there are 3 levels of sub-resources in the first resource, with 40 sub-resources in level 1, 65 sub-resources in level 2, and 90 sub-resources in level 3, and the concurrency of sub-resources is 30, then every 30 sub-resources in level 1, level 2, and level 3 are divided into batches, determining 2 batches in level 1, 3 batches in level 2, and 3 batches in level 3, that is, all sub-resources in the first resource are divided into 8 batches.

[0140] In some embodiments, all sub-resources in the first resource can be divided according to the number of concurrent sub-resources, level, and priority. First, the mobile phone divides the sub-resources in the first resource to be acquired according to the level corresponding to each sub-resource in the first resource, and determines the sub-resources of each level in the first resource. Then, the mobile phone divides the sub-resources of each level in the first resource according to the priority corresponding to each sub-resource of the corresponding level in the first resource and the number of concurrent sub-resources corresponding to the first resource, and determines the sub-resources of each batch in the first resource. For example, if the first resource has two levels of sub-resources, with 40 sub-resources in the first level and 60 sub-resources in the second level, and the concurrent sub-resource capacity is 30, then the 40 sub-resources in the first level and the 60 sub-resources in the second level are sorted from highest to lowest priority. Then, the sorted sub-resources in each level are divided into batches of 30, thus determining the two batches (batch 1 and batch 2) of the first level and the two batches (batch 3 and batch 4) of the second level corresponding to the first resource. In this case, the priority of the sub-resources in batch 1 is higher than or equal to the priority of the sub-resources in batch 2, and the priority of the sub-resources in batch 3 is higher than or equal to the priority of the sub-resources in batch 4.

[0141] As can be seen, when dividing all resources to be acquired on the second page, they can be categorized into first, second, and third resources based on their type. Furthermore, each type of resource can be further divided based on resource acquisition batch information. For example, the sub-resources at each level under each type can be identified. Each level's sub-resources can then be batched according to priority and concurrent access levels, with higher-priority sub-resources being acquired first. This ensures that higher-priority sub-resources at the same level are acquired, loaded, and displayed more quickly, improving the user experience. By batching each resource and iterating through each batch of each resource, acquiring all sub-resources in the currently iterated batch in parallel, resource acquisition efficiency can be improved, thereby increasing page loading speed.

[0142] In some embodiments, the levels and priorities corresponding to the various sub-resources in the first resource are obtained from preset resource information. The preset resource information is determined based on at least one of the following: the display position of each sub-resource in the first, second, and third resources; the resource request time; the resource response time; and the type of the second page.

[0143] For example, a mobile phone can obtain a page loading request through a mobile browser or application, and obtain the corresponding preset resource information based on the page loading request; the page loading request can be a Uniform Resource Locator (URL) address, and the page loading request can include user information and page information. The user information can include username, login password, user's geographical location, etc., and the page information can include access domain name, current loading time, etc.; the preset resource information corresponding to the page stored locally on the mobile phone can be obtained through the page information and user information.

[0144] For example, the information in the preset resource information can be stored in the structure of an information set. The display position, resource request time, resource response time, level and priority of each sub-resource in the first resource, second resource and third resource are associated with the corresponding resource identifiers. These resource identifiers are then associated with the page identifier and type of the second page to form the information set corresponding to the second page. The information set corresponding to each page is determined as the preset resource information.

[0145] For example, the information in the preset resource information can also be stored in a tree structure, wherein the tree structure is as follows: Figure 11 As shown, nodes 1-8 in the tree structure represent corresponding sub-resources 1-8, and each level of the tree structure represents the level of the sub-resource. Figure 11 The nodes in the dashed boxes shown represent the first, second, third, and fourth levels of the tree structure. The order of each node from left to right in each level represents the priority of the sub-resource from high to low. For example, in the second level, the priority of sub-resource 2 is higher than that of sub-resource 3, and the priority of sub-resource 3 is higher than that of sub-resource 4. Each node can also be marked with the type of the corresponding sub-resource, for example, marking that the node belongs to the first resource, or the second resource, or the third resource.

[0146] For example, when loading a page for the first time or in the first few times, preset resource information corresponding to the page can be created and stored locally on the phone. When the page is loaded again in subsequent attempts, the preset resource information of the corresponding page can be obtained from the local phone. Thus, all resources to be loaded on the page can be determined without loading the page itself, achieving parallel loading of the page and resources. Furthermore, all resources to be loaded can be divided into batches, and sub-resources in each batch of each type of resource to be loaded can be obtained from the local phone or from the server, achieving parallel loading of resources.

[0147] In some embodiments, when loading a second page, such as when the phone loads the second page for the first time, or when the phone does not find the corresponding preset resource information for the second page locally, it is necessary to construct the preset resource information for the second page. First, the preset resource information needs to be calculated. The phone can determine the level and priority of each sub-resource by obtaining the resource request information. The resource request information includes the display position, resource request time, resource response time, and type of each sub-resource in the first, second, and third resources. Based on the resource request information and the determined level and priority of each sub-resource, a resource dependency tree (i.e., a tree-structured preset resource information) corresponding to the second page is constructed, and the constructed resource dependency tree is stored locally on the phone.

[0148] In some embodiments, when loading a second page, for example, when the mobile phone needs to update the preset resource information of the second page, the preset resource information needs to be calculated first. The mobile phone can determine the level and priority of each sub-resource by obtaining the resource request information. The resource request information includes the display position, resource request time, resource response time, and type of each sub-resource in the first, second, and third resources. Based on the resource request information and the determined level and priority of each sub-resource, the resource dependency tree corresponding to the second page is updated, and the updated resource dependency tree is stored locally on the mobile phone.

[0149] As can be seen, the resources to be acquired on the second page can be directly determined by the preset resource information, which facilitates the subsequent division of resource acquisition batches and thus improves the efficiency of resource acquisition.

[0150] In some embodiments, when a mobile phone determines preset resource information based on at least one of the display position, resource request time, resource response time, and type of the second page of each sub-resource in the first, second, and third resources, the mobile phone first determines the resource information construction strategy of the second page based on the type of the second page. Then, the mobile phone determines the level corresponding to each sub-resource in the first, second, and third resources based on the resource request time and resource response time corresponding to each sub-resource in the first, second, and third resources. Next, the mobile phone determines the priority corresponding to each sub-resource in the first, second, and third resources based on the display position of each sub-resource in the first, second, and third resources. Finally, the mobile phone determines the preset resource information corresponding to the second page based on the level and priority corresponding to each sub-resource in the first, second, and third resources and the resource information construction strategy of the second page.

[0151] For example, page types include e-commerce, social media, and news, and the page type can be identified based on the page content or URL.

[0152] For example, the resource information construction strategy represents the number of preset resource information items corresponding to the second page that needs to be constructed. The preset resource information items corresponding to this page can be one or more. For example, if the preset resource information is represented in a tree structure, for page types that do not change frequently, the resource selection threshold is small, and one resource dependency tree can be built. For page types that change frequently, such as social pages, the resource selection threshold is large, and multiple resource dependency trees can be built.

[0153] For example, if the page type is a frequently changing news type, and the resource information construction strategy for the news type is three resource dependency trees, then the resource dependency trees corresponding to the page can be built in the first three loads of the page to determine the three resource dependency trees corresponding to the page.

[0154] For example, resource request time represents the time it takes for the mobile phone to send a resource loading request to the server.

[0155] For example, resource response time represents the time it takes for the server to respond to the received resource loading request with the corresponding response information, which includes the type of resource, the corresponding resource, etc.

[0156] For example, if the preset resource information is presented in a tree structure, resources whose request time is longer than their response time can be designated as the next level node to determine the resource's level.

[0157] For example, the display position indicates the location where the resource is displayed on the page to determine whether the resource is within the display window of the page. If the resource is within the display window of the page, it needs to be displayed first and has a high priority. If the resource is not within the display window of the page, it does not need to be displayed first and has a relatively low priority.

[0158] In some embodiments, the mobile phone can also obtain the resource usage time. Resources that are used more frequently are loaded first and thus displayed first. Therefore, the usage time can also be used to determine the priority of each sub-resource at the same level. It is evident that resource priority can be determined not only by the display position of the resource but also by its usage time. The appropriate method for determining resource priority can be selected based on the application scenario.

[0159] In some embodiments, the preset resource information that is built or updated can be stored in the local resource information cache of the mobile phone after the page is loaded. Static resources in the obtained response information can be stored in the local resource cache of the mobile phone without relying on an external resource cache. In this way, the mobile phone does not need to be modified to adapt the application to different external resource caches, thus solving the problem of high communication overhead and maintenance costs, and has a certain degree of universality in improving network loading performance.

[0160] It is evident that the predetermined resource information facilitates resource management on the page, improving the convenience of resource management. Furthermore, the predetermined resource information allows for the direct identification of all resources to be loaded for the second page, eliminating the need to scan or parse the page after downloading to determine the resources to be loaded. This enables parallel loading of the page and resources, allowing the loading of static resources, the validity verification of the second resource, and the network requests and connections for dynamic resources to be made earlier, significantly reducing the probability of subsequent rendering blockages and thus improving page loading performance.

[0161] In some embodiments, when the second page is loaded again, the mobile phone obtains the URL in the browser / application, and queries the preset resource information corresponding to the second page locally on the mobile phone using the page information and user information in the URL. If there are multiple preset resource information corresponding to the second page, one of the preset resource information can be randomly selected from the multiple preset resource information corresponding to the second page to determine the resource to be loaded on the second page, or the most suitable preset resource information can be determined from the multiple preset resource information corresponding to the second page based on the current loading time in the URL, user's geographical location, page type, historical hit rate, etc., to determine the resource to be loaded on the second page.

[0162] For example, such as Figure 12As shown, when the preset resource information is a resource dependency tree, if the type of the second page is social, the resource information construction strategy corresponding to the social type is three resource dependency trees. When the phone loads the second page again, it first queries the resource information cache repository on the phone's local machine using the URL to find the three resource dependency trees corresponding to the second page. Then, the phone can randomly select one of the three resource dependency trees, or it can decide on the most suitable resource dependency tree based on the current loading time in the URL, the user's geographical location, the page type, historical hit rate, etc. Next, the phone uses this resource dependency tree to determine all the resources to be loaded on the second page and classifies them, identifying the first resource, the second resource, and the third resource. Each type of resource to be loaded is divided into batches, and the sub-resources of each batch under each type of resource to be loaded are determined. For example, all the sub-resources in the first resource to be loaded are divided into batches 1 to N1, and all the sub-resources in the second resource to be loaded are divided into batches N1 and N2 respectively. The resources are divided into batches N1 to N2, and all sub-resources in the third resource to be loaded are divided into batches N1 to N3. N1, N2, and N3 are positive integers, and N1, N2, and N3 can be the same or different. Next, the phone traverses each batch under each type of resource to be loaded and performs parallel pre-loading scheduling of the sub-resources in each batch under each type of resource to be loaded. Here, the phone also needs to perform validity verification on the sub-resources in the current batch of the second resource through cache management, determine the sub-resources in the current batch of the second resource that have not passed the validity verification and the sub-resources that have passed the validity verification, and obtain all the sub-resources in the current batch of the first resource and the sub-resources in the current batch of the second resource that have not passed the validity verification from the server. It also obtains the resources in the current batch of the second resource and the sub-resources in the current batch of the third resource from the local resource cache of the phone. Finally, the phone renders the obtained sub-resources so that the second page can be displayed on the phone interface.

[0163] It is understood that, in order to achieve the above functions, the aforementioned electronic device includes hardware and / or software modules corresponding to perform each function. Based on the algorithmic steps of the various examples described in conjunction with the embodiments disclosed herein, this application can be implemented in hardware or a combination of hardware and computer software. Whether a function is executed in 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, but such implementation should not be considered beyond the scope of this application.

[0164] This application embodiment can divide the electronic device into functional modules according to the above method example. For example, each function can be divided into its own functional module, or two or more functions can be integrated into one processing module. The integrated module can be implemented in hardware. It should be noted that the module division in this embodiment is illustrative and only represents one logical functional division. In actual implementation, there may be other division methods.

[0165] This application also provides an electronic device, such as... Figure 13 As shown, the electronic device may include one or more processors 1301, memory 1302 and communication interface 1303.

[0166] The memory 1302, communication interface 1303, and processor 1301 are coupled together. For example, the memory 1302, communication interface 1303, and processor 1301 can be coupled together via bus 1304.

[0167] The communication interface 1303 is used for data transmission with other devices. The memory 1302 stores computer program code. The computer program code includes computer instructions, which, when executed by the processor 1301, cause the electronic device to perform the page display method described in this embodiment.

[0168] The processor 1301 may be a processor or controller, such as a central processing unit (CPU), a general-purpose processor, a digital signal processor (DSP), an application-specific integrated circuit (ASIC), a field-programmable gate array (FPGA), or other programmable logic devices, transistor logic devices, hardware components, or any combination thereof. It can implement or execute the various exemplary logic blocks, modules, and circuits described in conjunction with this disclosure. The processor may also be a combination that implements computational functions, such as a combination of one or more microprocessors, a combination of a DSP and a microprocessor, etc.

[0169] The bus 1304 can be a Peripheral Component Interconnect (PCI) bus or an Extended Industry Standard Architecture (EISA) bus, etc. The bus 1304 can be divided into address bus, data bus, control bus, etc. For ease of representation, Figure 13 The bus is represented by a single thick line, but this does not mean that there is only one bus or one type of bus.

[0170] This application also provides a computer-readable storage medium storing computer program code. When the processor executes the computer program code, the electronic device executes the relevant method steps in the above method embodiments.

[0171] The electronic devices and computer storage media provided in this application are used to execute the corresponding methods provided above. Therefore, the beneficial effects they can achieve can be referred to the beneficial effects of the corresponding methods provided above, and will not be repeated here.

[0172] Through the above description of the embodiments, those skilled in the art can clearly understand that, for the sake of convenience and brevity, only the division of the above functional modules is used as an example. In actual applications, the above functions can be assigned to different functional modules as needed, that is, the internal structure of the device can be divided into different functional modules to complete all or part of the functions described above.

[0173] In the several embodiments provided in this application, it should be understood that the disclosed apparatus and methods can be implemented in other ways. For example, the apparatus embodiments described above are merely illustrative; for instance, the division of modules or 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 device, or some features may be ignored or not executed. Furthermore, the mutual coupling or direct coupling or communication connection shown or discussed may be through some interfaces; the indirect coupling or communication connection between devices or units may be electrical, mechanical, or other forms.

[0174] The units described as separate components may or may not be physically separate. A component shown as a unit can be one or more physical units; that is, it can be located in one place or distributed in multiple different locations. Some or all of the units can be selected to achieve the purpose of this embodiment according to actual needs.

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

[0176] If the integrated unit is implemented as a software functional unit and sold or used as an independent product, it can be stored in a readable storage medium. Based on this understanding, the technical solution of the embodiments of this application, in essence, or the part that contributes, or all or part of the technical solution, can be embodied in the form of a software product. This software product is stored in a storage medium and includes several instructions to cause a device (which may be a microcontroller, chip, etc.) or processor 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.

[0177] 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 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 the claims.

Claims

1. A page display method, characterized in that, Applied to electronic devices, including: Display the first page; The system receives a user's action to trigger the display of a second page on the first page, retrieves dynamic resources corresponding to the second page from the server via a network request, and retrieves static resources corresponding to the second page from the local device of the electronic device; the dynamic resources refer to resources on the second page that change according to business needs, and the static resources refer to resources on the second page that do not change. The dynamic and static resources are rendered to display the second page.

2. The method according to claim 1, characterized in that, Before retrieving the dynamic resources corresponding to the second page from the server via a network request, the method further includes: Determine the first resource, second resource, and third resource corresponding to the second page; the first resource represents a resource on the second page whose content or position changes dynamically, the second resource represents a resource on the second page whose content or position does not change and is subject to validity verification, and the third resource represents a resource on the second page whose content or position does not change and is not subject to validity verification. The sub-resources that fail the validity check in the first resource and the second resource are identified as the dynamic resources.

3. The method according to claim 2, characterized in that, Before retrieving the static resources corresponding to the second page from the local electronic device, the method further includes: The sub-resources that pass the validity check in the second resource and the third resource are identified as the static resources.

4. The method according to claim 2 or 3, characterized in that, Sub-resources in the second resource that fail the validity check are resources whose usage time in the second resource exceeds a preset duration; sub-resources in the second resource that pass the validity check are resources whose usage time in the second resource does not exceed the preset duration.

5. The method according to any one of claims 2-4, characterized in that, The step of obtaining the dynamic resources corresponding to the second page from the server via a network request includes: Regarding the first resource, Obtain the resource acquisition batch information of the first resource, wherein the resource acquisition batch information of the first resource is used to indicate the batches in which several sub-resources in the first resource are acquired respectively; Based on the resource batch information obtained from the first resource, sub-resources belonging to the same batch as the first resource are obtained from the server via a network request.

6. The method according to claim 5, characterized in that, The resource acquisition batch information of the first resource is determined based on at least one of the following: the concurrent number of sub-resources in the same batch in the first resource, the level corresponding to each of the sub-resources in the first resource, and the priority corresponding to each of the sub-resources in the first resource.

7. The method according to claim 3, characterized in that, The step of obtaining the static resources corresponding to the second page from the local device includes: Regarding the aforementioned third resource, Obtain the resource acquisition batch information of the third resource, wherein the resource acquisition batch information of the third resource is used to indicate the batches in which several sub-resources in the third resource are acquired respectively; Based on the resource acquisition batch information of the third resource, sub-resources belonging to the same batch as the third resource are obtained locally from the electronic device.

8. The method according to claim 6, characterized in that, The levels and priorities of the sub-resources in the first resource are obtained from preset resource information. The preset resource information is determined based on at least one of the following: the display position of each sub-resource in the first resource, the second resource, and the third resource; the resource request time; the resource response time; and the type of the second page.

9. An electronic device, characterized in that, include: The device includes a processor, a memory, and a bus. The memory stores machine-readable instructions executable by the processor. When the electronic device is running, the processor communicates with the memory via the bus, and the machine-readable instructions are executed by the processor to perform the steps of the page display method as described in any one of claims 1-8.

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

Images