Page display method and device, equipment and storage medium
By creating a page rendering container at the time of application startup and preloading the static resources of the H5 pages, the problem of slow opening of H5 pages is solved, achieving faster page display and improving user experience.
Patent Information
- Application Number
- CN202411073271.X
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-08-06
- Publication Date
- 2024-12-31
AI Technical Summary
The development and rendering of H5 pages lead to the device needing to load rich content, resulting in slow page opening speed and large display delay, affecting the user experience.
Create a page rendering container when the application is started, and static resources are pre-determined and loaded from the server, pre-rendered, and generate a static page template. In response to the jump operation of the application page, the page is displayed directly using a static template.
By preplacing static resources and rendering processes, reduce page display latency and improve page opening speed and user experience.
Smart Images

Figure CN119226637A_ABST
Abstract
Description
Technical Field
[0001] The embodiments of the present application relate to the field of terminal technology, and in particular to a page display method, apparatus, device and storage medium. Background Art
[0002] H5, also known as HTML5, is the fifth version of HyperText Markup Language (HTML).
[0003] At present, H5 is often used to develop and render web pages and pages in applications. H5 pages usually refer to pages created using H5. However, since H5 provides relatively rich elements for page development and rendering, for example, H5 provides a variety of semantic tags, the ability to draw graphics and animations, and form controls such as date, email, and phone for page creation, when opening an H5 page, the device needs to load relatively rich content, resulting in a slow opening speed of the H5 page and a large display delay, which affects the user experience. Summary of the invention
[0004] The present application provides a page display method, apparatus, device and storage medium to increase page opening speed, reduce page display delay and improve user experience.
[0005] In a first aspect, the present application provides a page display method, the method comprising: creating a page rendering container in response to a startup operation of a target application; obtaining static resources of a target application page from a server, the server predetermining the static resources; loading and pre-rendering the static resources of the target application page according to the page rendering container to obtain a page static template of the target application page; and displaying the target application page according to the page static template in response to a jump operation to the target application page.
[0006] In a second aspect, the present application provides a page display device, comprising: a first creation module, used to: create a page rendering container in response to a startup operation of a target application; a first acquisition module, used to: obtain static resources of a target application page from a server, the server predetermines the static resources; a loading and rendering module, used to: load and pre-render the static resources of the target application page according to the page rendering container, and obtain a page static template of the target application page; a page display module, used to: display the target application page according to the page static template in response to a jump operation to the target application page.
[0007] In a third aspect, the present application provides an electronic device, comprising: a processor and a memory, the memory being used to store a computer program, the processor being used to call and run the computer program stored in the memory, and executing the method in the first aspect or its various implementations.
[0008] In a fourth aspect, the present application provides a computer-readable storage medium for storing a computer program, wherein the computer program enables a computer to execute the method in the first aspect or its various implementations.
[0009] In a fifth aspect, the present application provides a computer program product, comprising computer program instructions, which enable a computer to execute the method in the first aspect or its various implementations.
[0010] In a sixth aspect, the present application provides a computer program, which enables a computer to execute the method in the first aspect or its various implementations.
[0011] Through the technical solution of the present application, the terminal device can not only create a page rendering container when the application is started; it can also load and pre-render predetermined static resources according to the created page rendering container before opening the application page, so that when the application page is opened, the application page can be directly displayed according to the rendered static resources. That is to say, the present application not only puts the static resource determination process and the renderer creation process in front, but also the static resource loading and rendering process in front. Therefore, the effect of further reducing the page display delay can be achieved by putting multiple processes in front, thereby improving the page opening speed and user experience. BRIEF DESCRIPTION OF THE DRAWINGS
[0012] In order to more clearly illustrate the technical solutions in the embodiments of the present application, the drawings required for use in the description of the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without creative work.
[0013] Figure 1 A schematic diagram of an application scenario provided for an embodiment of the present application;
[0014] Figure 2 A flow chart of a page display method provided in an embodiment of the present application;
[0015] Figure 3 A schematic diagram of a page display method provided in an embodiment of the present application;
[0016] Figure 4 A schematic diagram of another page display method provided in an embodiment of the present application;
[0017] Figure 5 A schematic diagram of another page display method provided in an embodiment of the present application;
[0018] Figure 6A schematic diagram of another page display method provided in an embodiment of the present application;
[0019] Figure 7 A schematic diagram of a page display device 700 provided in an embodiment of the present application;
[0020] Figure 8 A schematic block diagram of an electronic device 800 provided in an embodiment of the present application. DETAILED DESCRIPTION
[0021] The following will be combined with the drawings in the embodiments of the present application to clearly and completely describe the technical solutions in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without making creative work are within the scope of protection of this application.
[0022] The following will be combined with the drawings in the embodiments of the present application to clearly and completely describe the technical solutions in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without making creative work are within the scope of protection of this application.
[0023] It should be noted that the terms "first", "second", etc. in the specification and claims of the present application and the above-mentioned drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. It should be understood that the data used in this way can be interchangeable where appropriate, so that the embodiments of the present application described herein can be implemented in an order other than those illustrated or described herein. In addition, the terms "including" and "having" and any of their variations are intended to cover non-exclusive inclusions, for example, a process, method, system, product or server that includes a series of steps or units is not necessarily limited to those steps or units clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products or devices.
[0024] As mentioned above, the existing page display method has the problems of low efficiency in symbol file acquisition and low efficiency in page display, and the system load is large and the system performance is low.
[0025] In order to solve the above technical problems, the invention concept of the present application is: the terminal device creates a page rendering container when the application is started; the static resources are pre-determined before opening the application page, and the page rendering container is used to load and pre-render the determined static resources; so that when the application page is opened, the application page is directly displayed according to the rendered static resources.
[0026] It should be understood that the technical solution of the present application can be applied to the following scenarios, but is not limited to:
[0027] In one embodiment, the present application can be applied to any application page display scenario, and specifically can be applied to: a page display scenario of an H5 page in an application.
[0028] Specifically, the application in the embodiments of the present application may be an application corresponding to a client such as a web page or a desktop, or may be an application corresponding to a mini-program, and the present application does not impose any restrictions on this.
[0029] In one embodiment, if Figure 1 As shown, the application scenario may include a terminal device 110 and a server 120, and the terminal device 110 and the server 120 may be connected via a wired network or a wireless network.
[0030] Exemplarily, the target application can be installed on the terminal device 110, and the server 120 can predetermine the static resources. The terminal device 110 can create a page rendering container in response to the start operation of the target application; obtain the static resources of the target application page from the server 120, load and pre-render the static resources of the target application page according to the page rendering container, and obtain the page static template of the target application page; then, the terminal device 110 can display the target application page according to the page static template in response to the jump operation to the target application page.
[0031] The server 120 may be a server, a server cluster consisting of multiple servers, or a cloud platform control center, but is not limited thereto. The terminal device 110 may be a mobile phone, a tablet computer, a laptop computer, or a desktop computer, but is not limited thereto.
[0032] It should be noted that Figure 1 The terminal devices and servers are merely exemplary. Specifically, other numbers or types of terminal devices or servers may also be included.
[0033] In addition, the technical solution of the present application can also be executed only through the terminal device. To avoid repetition, this application will not elaborate on this.
[0034] After introducing the application scenarios of the embodiments of the present application, the technical solution of the present application will be described in detail below:
[0035] Figure 2 This is a flow chart of a page display method provided in an embodiment of the present application. The method can be executed by the terminal device 110 in the above application scenario, but is not limited thereto. Figure 2 As shown, the method may include the following steps:
[0036] S210: In response to a start operation of a target application, create a page rendering container;
[0037] S220: Obtain static resources of the target application page from the server, where the server predetermines the static resources;
[0038] S230: Load and pre-render the static resources of the target application page according to the page rendering container to obtain a page static template of the target application page;
[0039] S240: In response to the jump operation to the target application page, display the target application page according to the page static template.
[0040] In one embodiment, a target application can be installed on a terminal device. When the target application obtains a user's startup operation for the target application, it can create a startup process based on the operating system of the terminal device; the operating system can monitor the creation and termination of all processes in the operating system, thereby being able to monitor the above startup process; then, the terminal device can create a page rendering container in response to the above startup operation.
[0041] The page rendering container is used to carry and render controls or elements of the application page. It can provide an area or context for the display of the application page, and render, display and manage the controls or elements of the application page in it.
[0042] Specifically, if the target application page is an H5 page, the page rendering container may be an H5 rendering container.
[0043] It can be understood that, compared to creating a page rendering container when jumping to the application page, the above embodiment can create a page rendering container when the application is started, that is, the page rendering container can be pre-created before opening the application page, thereby reducing the creation time when displaying the application page and improving the application page display efficiency.
[0044] It is understandable that the resources required to display the application page generally include two categories: static resources and dynamic resources.
[0045] Among them, static resources refer to resources that do not change due to different users and browsing scenarios. Static resources can provide basic structure, style, interaction and visual elements for application pages. Generally, they include: script language files, markup language files, static image resources, code and style files, etc.
[0046] Dynamic resources refer to resources that change due to different users or browsing scenarios. For example, dynamic resources can be: resources dynamically generated according to user behavior, such as account login status and transaction records, and dynamic resources such as stock prices provided through interfaces. Dynamic resources include but are not limited to: text resources, image resources, etc. For example, in the stock details page, dynamic resources include but are not limited to: text resources corresponding to the stock logo of a specific stock, image resources corresponding to the stock market K-line chart, and data resources corresponding to the indicator values of the stock under different indicators.
[0047] Exemplarily, an application may include a list page, which includes multiple specific items. By clicking on a specific item, you can jump to a corresponding detail page, which may correspond to a detail page of a specific item. The static resources of the list page and the detail page are different, and the static resources of multiple detail pages of the same page type are the same (for example, the page type may include but is not limited to: list type, stock type, indicator type, and information type); the dynamic resources of the list page and the detail page are different, and the dynamic resources of multiple detail pages are generally different.
[0048] For example, the list page includes two specific items: stock A and stock B. By clicking a specific item, you can jump to the application page corresponding to the specific item. The specific item stock A corresponds to the details page of stock A, and the specific item stock B corresponds to the details page of stock B. Among them: the dynamic resources between the list page, the details page of stock A, and the details page of stock B are different; the static resources between the details page of stock A and the details page of stock B are the same; the static resources between the list page, the details page of stock A, or the details page of stock B are different.
[0049] In one embodiment, the server can predetermine the static resources corresponding to each application page; when starting the application, the terminal device can pull the static resources of the target application page from the server. This can avoid the delay in application page display caused by pulling the static resources after receiving the trigger operation to open the target application page, thereby improving the application page display efficiency.
[0050] Furthermore, the terminal device can also load and pre-render the static resources of the target application page according to the pre-created page rendering container to obtain the static template of the target application page. This can further advance the loading and rendering steps of static resources, save the loading and rendering time, and further reduce the page display delay.
[0051] Furthermore, the terminal device can store the static template of the page to the hard disk or memory, and can directly obtain and use it when displaying the application page later.
[0052] For example, Figure 3 As shown, after the terminal device starts the application, it can request the server to obtain the static template of the application page. The static template is obtained by packaging all the static resources of the application page; if the static template exists on the server, the terminal device can pull the static template and decompress the static template to obtain the static resource; then, the terminal device can store the static resource to the device hard disk, or use the page rendering container to load and pre-render the static resource to obtain the page static template, and store the page static template to the device hard disk; then, when displaying the application page, the static template stored in the device hard disk or the page static template can be used.
[0053] In one embodiment, the terminal device can manage page static templates through a template pool and a template preheater. The template pool is used to store page static templates; the template preheater is used to create page static templates, that is, to render (i.e., preheat) static resources to obtain page static templates, and send the page static templates to the template pool.
[0054] Specifically, the template preheater can render static resources based on the page rendering container to obtain a page static template when the page rendering container is created and the application is initialized.
[0055] Furthermore, in one embodiment, the terminal device can detect the existing number of stored page static templates corresponding to different application pages; thereafter, in response to the existing number being less than an existing number threshold, it can trigger the creation and storage of a new page rendering container and obtain page static templates of other application pages through rendering of the new page rendering container.
[0056] Specifically, the template pool can also count the existing number of stored page static templates and determine the existing number threshold. In response to the existing number being less than the existing number threshold, the template pool can, on the one hand, send a notification message to the template preheater to notify the template preheater to add new page static templates to the template pool until the above existing number is equal to the existing number threshold; on the other hand, it can trigger the terminal device to create and store page rendering containers corresponding to other application pages, that is, new page rendering containers. After receiving the above notification message, the template preheater can render the static resources of other pages through the new page rendering container to obtain page static templates of other application pages; and store the page static templates of other application pages in the template pool.
[0057] Furthermore, the terminal device may destroy the page static template when the page static template has been used up or is not used, so as to avoid waste or occupation of the storage unit.
[0058] Specifically, in one embodiment, the terminal device may clear the page static template corresponding to the target application page in response to an exit operation on the target application page.
[0059] It should be noted that after the page static template in the template pool is obtained, the page static template in the template pool can be cleared; when exiting the target application page, the terminal device can clear the dynamic resources in the target application page and store the page static template back into the template pool to reduce the number of times the page static template is created and optimize the use of system resources.
[0060] For example, the page static template of the details page of stock A can be stored back in the template pool. Later, when the details page of stock B is displayed, the page static template of the details page of stock A can be directly used.
[0061] In one embodiment, Figure 4 As shown, when creating an application, the template pool can be initialized; then, the template pool can notify the template preheater to add the page static template to the template pool. When the H5 page of the application is opened, the terminal device can obtain the page static template corresponding to the H5 page from the template pool, and display the H5 page according to the page static template; then, the template pool can notify the template preheater to add the page static templates of other application pages to the template pool. Later, when closing the H5 page, the terminal device can destroy the page static template in the H5 page.
[0062] In one embodiment, before displaying the target application page according to the static template of the page, the terminal device may also determine the target page element related to the target application page in the previous application page in response to entering the target application page; then, the terminal device may obtain exposure information of the target page element; thereafter, the terminal device may preload the dynamic resources of the target application page in response to the exposure information being greater than the exposure information threshold.
[0063] Accordingly, the terminal device may display the target application page in response to the jump operation to the target application page according to the page static template and the preloaded dynamic resources of the target application page.
[0064] Exemplarily, the target page elements may be links, buttons, images, texts or other clickable or interactive elements related to the target application page in the front application page, but are not limited thereto.
[0065] For example, the target page element can be an element in the previous application page for jumping to the target application page. In combination with the above embodiment, assuming that the target application page is the details page of stock A, and the previous application page of the target application page is a list page, the target page element can be a specific item: stock A.
[0066] Exemplarily, the terminal device can parse the script language files and markup language files of the front application page to determine the target page elements in the front application page that are related to the target application page; then, the target page elements can be marked; thereafter, the terminal device can track and record the user's interaction events with the target page elements based on the above-mentioned marks; finally, the exposure information of the target page elements can be determined based on the event information of the interaction event.
[0067] Specifically, the above-mentioned interaction events may include any of the following, but are not limited thereto: a hover operation event (for example, the mouse pointer of a terminal device hovers over a target page element), a touch operation event (for example, a user touches the display screen of a terminal device), and a target page element stays in a specific area of the display screen of the terminal device (the specific area may be the upper-middle area of the display screen). Accordingly, the exposure information of the target page element may be determined based on event information such as the event duration of the interaction event; for example, the exposure information of the target page element may be determined based on the event duration of the target page element staying in a specific area of the display screen of the terminal device; for another example, the exposure information of the target page element may be determined based on event information of a touch operation event, such as the user's touch duration or number of touches on the area where the target page element is located.
[0068] Furthermore, the interaction event may also include a trigger event, such as an event that triggers a target page element to open a target application page. Accordingly, the exposure information of the target page element may be determined based on event information such as the number of interaction events. For example, the historical trigger information of the trigger event of the target page element may be obtained to determine the exposure information of the target page element in the current front-end application page based on the historical trigger information, wherein the historical trigger information refers to the number of times the target application page is opened by the target application within a historical time period, and the exposure information of the target page element in the above-mentioned front-end application page is determined based on the historical trigger information.
[0069] It is understandable that the exposure information of the target page element can be used to characterize the user's triggering probability of the target application page associated with the target page element. For example, the longer the event duration of the hover operation event, that is, the longer the user hovers over the target page element by controlling the mouse pointer, the more interested the user is in the target page element, and the higher the triggering probability of the target application page associated with the target page element is; for another example, the longer the event duration of the stay event, that is, the longer the target page element stays in a specific area of the display screen of the terminal device, that is, the longer the user browses the target page element, the more interested the user is in the target page element, and the higher the triggering probability of the target application page associated with the target page element is. Therefore, the terminal device can determine the triggering probability of the corresponding target application page according to the exposure information of the target page element. When the exposure information is greater than the exposure information threshold, that is, the higher the triggering probability of the target application page, the dynamic resources of the target application page corresponding to the target page element are loaded, so as to improve the accuracy of loading dynamic resources and avoid the waste of communication resources caused by the loading of redundant dynamic resources.
[0070] Exemplarily, the terminal device can determine the exposure information threshold corresponding to the preceding application page of the target application page based on the historical exposure information of the page elements corresponding to each subsequent application page in the preceding application page, thereby accurately predicting whether to preload dynamic resources.
[0071] Specifically, the terminal device may count the historical exposure information of multiple page elements respectively related to multiple post-application pages of the pre-application page; then, the terminal device may determine the median or average value of the multiple historical exposure information as the exposure information threshold corresponding to the pre-application page. The post-application page is the next-level application page of the pre-application page, that is, it is possible to jump from the pre-application page to the post-application page, and the post-application page includes the target application page.
[0072] In the above process, compared with loading the dynamic resources of the target application page only after receiving the jump operation for the target application page, the above embodiment can predict whether it is necessary to preload the dynamic resources based on the exposure information of the target page elements, and preload the dynamic resources when the exposure information is greater than the exposure information threshold, thereby not only improving the utilization rate of the loaded dynamic resources and reducing the invalid processing process of the device; but also advancing the loading process of the dynamic resources, reducing the display delay of the application page, and improving the user experience.
[0073] In one embodiment, Figure 5As shown, before starting the application, the terminal device can obtain exposure information of a target page element related to the target application page in a preceding application page of the target application page; then, after entering the preceding application page, the terminal device can, in response to the exposure information being greater than an exposure information threshold, preload dynamic resources of the target application page and store the dynamic resources of the target application page in memory; or, in response to the exposure information being less than or equal to the exposure information threshold, the terminal device does not preload dynamic resources of the target application page.
[0074] In one embodiment, before the terminal device preloads the dynamic resources of the target application page in response to exposure information being greater than an exposure information threshold, it may also first determine a hit rate detection duration; then, the total number of historical preloads for the target application page, the historical number of hits of the target application page using the preloaded resources, and the historical triggering information of the target application page within the hit rate detection duration may be obtained; then, the terminal device may obtain a first hit rate based on the historical number of hits and the total number of historical preloads; obtain a second hit rate based on the historical number of hits and the historical triggering information; thereafter, the terminal device may determine the dynamic resource preloading execution indicator value based on the first hit rate and / or the second hit rate.
[0075] Accordingly, after determining the dynamic resource preloading execution index value, the terminal device can preload the dynamic resources of the target application page in response to the exposure information being greater than the exposure information threshold and the dynamic resource preloading execution index value being greater than the execution index value threshold. Thus, the utilization rate of the loaded dynamic resources can be improved through multiple indicators and threshold conditions, and the invalid processing process of the device can be reduced.
[0076] Exemplarily, the above-mentioned total number of historical preloads for the target application page can be: the total number of preloads for the static resources and / or dynamic resources of the target application page in the historical time period of the hit rate detection time; the number of historical hits using the preloaded target application page can be: the number of times the target application page is rendered using the preloaded static resources and / or dynamic resources in the historical time period of the hit rate detection time. The historical trigger information can be: the number of times the target application page is opened in the historical time period of the hit rate detection time.
[0077] Exemplarily, the first hit rate can be calculated based on the ratio of the historical hit count to the total number of historical preloads: At the same time, the second hit rate can be calculated based on the ratio of the historical hit count to the historical trigger information: It can be understood that the first hit rate can be used to indicate the probability that the preloaded static resources and / or dynamic resources are ultimately used to generate the target application page within a historical time period that is the duration of the hit rate detection; the second hit rate is used to indicate the probability that the generated target application page is rendered by the preloaded static resources and / or dynamic resources within a historical time period that is the duration of the hit rate detection. The higher the first hit rate and the second hit rate, the higher the probability that the static resources and / or dynamic resources of the target application page are preloaded and ultimately used to generate the target application page. By determining the value of the dynamic resource preloading execution index through the first hit rate and / or the second hit rate, the utilization rate of the static resources and / or dynamic resources after being preloaded can be effectively judged.
[0078] Exemplarily, the terminal device may directly determine the first hit rate or the second hit rate as the dynamic resource preloading execution indicator value. Alternatively, the terminal device may determine the maximum value, minimum value or average value of the first hit rate and the second hit rate as the dynamic resource preloading execution indicator value.
[0079] Similar to the above, in one embodiment, the terminal device can also determine the static resource preloading execution index value based on the first hit rate and / or the second hit rate; then, the terminal device can obtain the static resources of the target application page from the server in response to the static resource preloading execution index value being greater than the execution index value threshold.
[0080] It should be noted that the content and effect corresponding to the static resource preloading execution indicator value determined by the terminal device are similar to the content and effect corresponding to the dynamic resource preloading execution indicator value determined as above. To avoid repetition, this application will not elaborate on this.
[0081] In one embodiment, when the terminal device displays the target application page according to the page static template and the preloaded dynamic resources of the target application page, the terminal device can first determine the first hash value corresponding to the dynamic resources of the preloaded target application page; then, obtain the second hash value corresponding to the latest dynamic resources of the target application page from the server; then, in response to the second hash value being different from the first hash value, the terminal device can pull the latest dynamic resources corresponding to the second hash value from the server; finally, the terminal device can display the target application page according to the page static template and the latest dynamic resources corresponding to the second hash value.
[0082] Alternatively, in response to the second hash value being the same as the first hash value, the terminal device may directly display the target application page according to the page static template and the preloaded dynamic resources of the target application page.
[0083] It is understandable that since the dynamic resources of the target application page are not determined in real time when the target application page is about to be displayed, but are asynchronous with the display of the target application page, the preloaded dynamic resources of the target application page may not be the most recent dynamic resources. The above embodiment can not only ensure that the dynamic resources used to display the target application page are the latest and ensure the correct display of the target application page, but also avoid useless updates of dynamic resources.
[0084] Exemplarily, the hash value may be a hash value determined based on an MD5 (Message-Digest Algorithm 5) digest algorithm, or a hash value determined based on a hash algorithm such as SHA-3, but is not limited thereto.
[0085] In one embodiment, the terminal device can also determine a preset template loading time threshold and determine the template loading time of the page static template of the target application page; thereafter, the terminal device can determine the page static template of the target application page in real time in response to the template loading time being greater than the preset template loading time threshold, and obtain the real-time page static template of the target application page; finally, the terminal device can display the target application page according to the real-time page static template in response to the jump operation to the target application page.
[0086] It can be understood that the determination of the static template of the page includes two steps: a loading step of obtaining static resources from the server, and a rendering step of loading and rendering the static resources into the static template of the page; then, accordingly, the template loading duration includes two durations: the resource loading duration for the loading step, and the resource rendering duration for the rendering step; the preset template loading duration threshold includes two duration thresholds: the resource loading duration threshold for the loading step, and the rendering duration threshold for the rendering step.
[0087] Correspondingly, in response to the template loading time being greater than a preset template loading time threshold, determining the page static template of the target application page in real time to obtain the real-time page static template of the target application page may include: in response to the resource loading time of the static resource being greater than the resource loading time threshold of the static resource, loading the page static template of the target application page in real time, and obtaining the real-time page static template of the target application page based on the real-time loaded page static template; and, in response to the rendering time of the loaded static resource being greater than the rendering time threshold of the loaded static resource, rendering the loaded static resource in real time, and obtaining the real-time page static template of the target application page based on the real-time rendered page static template.
[0088] Specifically, the above-mentioned real-time determination of the page static template of the target application page can be to send a network request to the server in real time, requesting to obtain static resources from the server; then, based on the static resources obtained in real time, the static resources can be loaded and pre-rendered again through the page rendering container to obtain a page resource template.
[0089] In combination with the above content, it can be understood that the loading and rendering of static resources by the terminal device are asynchronous, and the rendering of static resources and preloading of dynamic resources (or filling of dynamic resources) are asynchronous. Because, in order to ensure that the static resources have been loaded when rendering static resources, and to ensure that the static resources have been rendered when filling dynamic resources, that is, the static template of the page has been obtained, the terminal device can set a time threshold to determine whether it is necessary to determine the static template of the page in real time, avoid infinite loading and infinite rendering, and ensure the availability of the page function.
[0090] In one embodiment, when preloading the dynamic resources of the target application page, the terminal device can first determine the number of dynamic resources to be preloaded according to the current network status value of the terminal device; then, the terminal device can determine the dynamic resources to be loaded in the dynamic resources of the target application page according to the number of dynamic resources and the business display scenario of the target application page; thereafter, the terminal device can only preload the above-mentioned dynamic resources to be loaded in the dynamic resources of the target application page. Thus, the problem of long preloading time caused by network delay can be avoided.
[0091] Among them, the number of dynamic resources is used to indicate how many dynamic resources can be preloaded, that is, the corresponding number of dynamic resources can be determined according to the network status value of the terminal device; the dynamic resources to be loaded can be all dynamic resources of the target application page or part of the dynamic resources of the target application page.
[0092] Exemplarily, the current network status value may be a value used to represent the current network transmission effect. The larger the current network status value is, the better the current network transmission effect is. For example, the current network status value may be determined based on any of the following, but not limited to: network bandwidth, network delay, packet loss rate, network signal strength, and jitter.
[0093] Then, accordingly, the above-mentioned determination of the number of dynamic resources that need to be preloaded according to the current network status value of the terminal device may include: in response to the current network status value being greater than the state threshold, determining the number of dynamic resources that need to be preloaded as the total number of all dynamic resources in the target application page; in response to the current network status value being less than or equal to the state threshold, determining the number of dynamic resources according to the current network status value and the average of the resource amounts of all dynamic resources in the target application page. Among them, the resource amount of dynamic resources may refer to the data size information corresponding to the dynamic resources, and the average of the resource amounts of dynamic resources may refer to the average of the resource amounts corresponding to all dynamic resources in the target application page.
[0094] Furthermore, the above-mentioned determining the dynamic resources to be loaded in the dynamic resources of the target application page based on the number of dynamic resources and the business display scenario of the target application page may include: determining the priority of each dynamic resource of the target application page based on the page type of the target application page and the resource information of each dynamic resource; in response to the current network status value being less than or equal to the status threshold, determining the dynamic resources to be loaded based on the number of dynamic resources and the priority of each dynamic resource in the target application page.
[0095] Among them, application pages of different page types have different display priorities corresponding to different dynamic resources; for example, taking the application as a financial application as an example, the page types of the target application page include but are not limited to list type, individual stock type, information type and indicator type, among which, in the application page of the list type, the display priority of the text resource of the item name corresponding to each specific item is higher than the display priority of the image resource of the item avatar of the specific item; in the application page of the indicator type, the image resource of the indicator graph corresponding to different indicators has a higher display priority than the text resource of the corresponding indicator name; in the application page of the information type, the display priority of the text resource of the information text of different information is higher than the image resource of the information image.
[0096] The resource information of the dynamic resource includes but is not limited to the resource type, resource quantity and display location information of the dynamic resource. Specifically, the priority of each dynamic resource of the target application page can be determined by the following formula (1) according to the page type of the target application page and the resource information of each dynamic resource:
[0097]
[0098] Among them, α i Indicates the page type corresponding to the target application page, and the weight parameter of its impact on the i-th (i≤n, n is a positive integer) type of resource information (such as resource type); β i Represents the original weight parameter of the i-th category resource information, parai Represents the parameter value of the dynamic resource in the i-th category of resource information (such as resource type); wherein, the method for obtaining the parameter value of the dynamic resource in the i-th category of resource information may specifically be: sorting all the dynamic resources in the target application page based on the resource information, and determining the parameter value of the corresponding dynamic resource in the i-th category of resource information according to the sorting result. For example, taking the resource information as resource quantity as an example, all the dynamic resources in the target application page are sorted from large to small based on the size of the resource quantity, and then the parameter value of the corresponding dynamic resource in the resource information of resource quantity is determined according to the sorting result. wherein, the parameter value of the dynamic resource in the i-th category of resource information may also be a pre-set fixed value. For example, taking the resource information as resource type as an example, the parameter values of all dynamic resources in the resource information of resource type may be set to a fixed value.
[0099] After determining the priorities of the dynamic resources of the target application page, the dynamic resources with the highest priorities and corresponding numbers of dynamic resources are selected from the dynamic resources of the target application page according to the number of dynamic resources as the dynamic resources to be loaded.
[0100] In one embodiment, in combination with the above, Figure 6 As shown, the terminal device can create a page rendering container when starting the application; then, it can obtain the static resources of the target application page, and use the page rendering container to load and pre-render the static resources to obtain the page static template of the target application page; at the same time, the terminal device can also pre-load the dynamic resources of the target application page; then, when obtaining the jump operation of the target application page, the target application page is displayed according to the page static template and the pre-loaded dynamic resources of the target application page. In this process, if the target application page is an H5 page, the terminal device can, under the premise of retaining the dynamic deployment advantage of the H5 page, reduce the resource loading time required when actually opening the H5 page and optimize the opening speed of the H5 page by creating a page rendering container in advance, obtaining and rendering static resources, and pre-loading dynamic resources.
[0101] It should be noted that all the above technical solutions can be combined in any way to form optional embodiments of the present application, which will not be described one by one here.
[0102] It should be noted that in the specific implementation of this application, relevant data such as static resources, dynamic resources, exposure information and number of hits are involved. When the embodiments of this application are applied to specific products or technologies, user permission, consent or authorization is required, and the collection, use and processing of relevant data need to comply with relevant laws, regulations and standards of relevant countries and regions.
[0103] Figure 7Schematic diagram of a page display device 700 provided in an embodiment of the present application. Figure 7 As shown, the device 700 includes: a first creation module 701, a first acquisition module 702, a loading and rendering module 703, a page display module 704, a first determination module 705, a second acquisition module 706, a first loading module 707, a second determination module 708, a third acquisition module 709, a fourth acquisition module 710, a fifth acquisition module 711, a third determination module 712, a quantity detection module 713, a creation and rendering module 714, an exit and clearing module 715, a fourth determination module 716, a real-time determination module 717, and a jump display module 718.
[0104] In one embodiment, the first creation module 701 is used to: create a page rendering container in response to a startup operation of a target application; the first acquisition module 702 is used to: obtain static resources of a target application page from a server, and the server predetermines the static resources; the loading and rendering module 703 is used to: load and pre-render the static resources of the target application page according to the page rendering container to obtain a page static template of the target application page; the page display module 704 is used to: display the target application page according to the page static template in response to a jump operation to the target application page.
[0105] In one embodiment, the first determination module 705 is used to: in response to entering the previous application page of the target application page, determine the target page element related to the target application page in the previous application page; the second acquisition module 706 is used to: obtain exposure information of the target page element; the first loading module 707 is used to: in response to the exposure information being greater than the exposure information threshold, preload the dynamic resources of the target application page; accordingly, the page display module 704 is specifically used to: in response to the jump operation, display the target application page according to the page static template and the preloaded dynamic resources of the target application page.
[0106] In one embodiment, the second determination module 708 is used to determine the hit rate detection duration; the third acquisition module 709 is used to obtain the total number of historical preloading times for the target application page, the historical hit number of the target application page using the preloaded resources, and the historical trigger information of the target application page within the hit rate detection duration; the fourth acquisition module 710 is used to obtain the first hit rate based on the historical hit number and the total number of historical preloading times; the fifth acquisition module 711 is used to obtain the second hit rate based on the historical hit number and the historical trigger information; the third determination module 712 is used to determine the dynamic resource preloading execution index value based on the first hit rate and / or the second hit rate; accordingly, the first loading module 707 is specifically used to preload the dynamic resources of the target application page in response to the exposure information being greater than the exposure information threshold and the dynamic resource preloading execution index value being greater than the execution index value threshold.
[0107] In one embodiment, the first acquisition module 702 is specifically used to: determine the static resource preloading execution index value based on the first hit rate and / or the second hit rate; in response to the static resource preloading execution index value being greater than the execution index value threshold, obtain the static resources of the target application page from the server.
[0108] In one embodiment, the page display module 704 is specifically used to: determine a first hash value corresponding to a dynamic resource of a preloaded target application page; obtain a second hash value corresponding to the latest dynamic resource of the target application page from a server; in response to the second hash value being different from the first hash value, pull the latest dynamic resource corresponding to the second hash value from the server; and display the target application page according to the page static template and the latest dynamic resource corresponding to the second hash value.
[0109] In one embodiment, the quantity detection module 713 is used to: detect the existing quantity of page static templates corresponding to different stored application pages; create a rendering module 714, used to: in response to the existing quantity being less than the existing quantity threshold, trigger the creation and storage of a new page rendering container and obtain the page static templates of other application pages through the new page rendering container rendering; exit and clear module 715 is used to: in response to the exit operation on the target application page, clear the page static template corresponding to the target application page.
[0110] In one embodiment, the fourth determination module 716 is used to: determine a preset template loading time threshold and determine the template loading time of the page static template of the target application page; the real-time determination module 717 is used to: in response to the template loading time being greater than the preset template loading time threshold, determine the page static template of the target application page in real time to obtain the real-time page static template of the target application page; the jump display module 718 is used to: in response to the jump operation for the target application page, display the target application page according to the real-time page static template.
[0111] It should be understood that the device embodiment and the method embodiment may correspond to each other, and similar descriptions may refer to the method embodiment. To avoid repetition, they will not be described here. Specifically, Figure 7 The device 700 shown can execute the above method embodiments, and the above and other operations and / or functions of each module in the device 700 are respectively for implementing the corresponding processes in the above methods, which will not be repeated here for the sake of brevity.
[0112] The above describes the device 700 of the embodiment of the present application from the perspective of the functional module in conjunction with the accompanying drawings. It should be understood that the functional module can be implemented in hardware form, can be implemented by instructions in software form, and can also be implemented by a combination of hardware and software modules. Specifically, the steps of the method embodiment in the embodiment of the present application can be completed by the hardware integrated logic circuit and / or software form instructions in the processor, and the steps of the method disclosed in the embodiment of the present application can be directly embodied as a hardware decoding processor to perform, or a combination of hardware and software modules in the decoding processor to perform. Optionally, the software module can be located in a mature storage medium in the field such as a random access memory, a flash memory, a read-only memory, a programmable read-only memory, an electrically erasable programmable memory, a register, etc. The storage medium is located in a memory, and the processor reads the information in the memory, and completes the steps in the above method embodiment in conjunction with its hardware.
[0113] Figure 8 A schematic block diagram of an electronic device 800 provided in an embodiment of the present application.
[0114] like Figure 8 As shown, the electronic device 800 may include:
[0115] The memory 810 and the processor 820, the memory 810 is used to store the computer program and transmit the program code to the processor 820. In other words, the processor 820 can call and run the computer program from the memory 810 to implement the method in the embodiment of the present application.
[0116] For example, the processor 820 may be configured to execute the above method embodiments according to instructions in the computer program.
[0117] In some embodiments of the present application, the processor 820 may include but is not limited to:
[0118] General-purpose processor, digital signal processor (DSP), application-specific integrated circuit (ASIC), field programmable gate array (FPGA) or other programmable logic device, discrete gate or transistor logic device, discrete hardware components, etc.
[0119] In some embodiments of the present application, the memory 810 includes but is not limited to:
[0120] Volatile memory and / or non-volatile memory. Among them, the non-volatile memory can be read-only memory (ROM), programmable ROM (PROM), erasable programmable read-only memory (EPROM), electrically erasable programmable read-only memory (EEPROM) or flash memory. The volatile memory can be random access memory (RAM), which is used as an external cache. By way of example and not limitation, many forms of RAM are available, such as static random access memory (SRAM), dynamic random access memory (DRAM), synchronous dynamic random access memory (SDRAM), double data rate synchronous dynamic random access memory (DDR SDRAM), enhanced synchronous dynamic random access memory (ESDRAM), synchronous link dynamic random access memory (SL DRAM) and direct memory bus random access memory (DR RAM).
[0121] In some embodiments of the present application, the computer program may be divided into one or more modules, which are stored in the memory 810 and executed by the processor 820 to complete the method provided by the present application. The one or more modules may be a series of computer program instruction segments capable of completing specific functions, and the instruction segments are used to describe the execution process of the computer program in the electronic device.
[0122] like Figure 8 As shown, the electronic device may also include:
[0123] The transceiver 830 may be connected to the processor 820 or the memory 810 .
[0124] The processor 820 may control the transceiver 830 to communicate with other devices, specifically, to send information or data to other devices, or to receive information or data sent by other devices. The transceiver 830 may include a transmitter and a receiver. The transceiver 830 may further include an antenna, and the number of antennas may be one or more.
[0125] It should be understood that the various components in the electronic device are connected via a bus system, wherein the bus system includes not only a data bus but also a power bus, a control bus and a status signal bus.
[0126] The present application also provides a computer storage medium on which a computer program is stored, and when the computer program is executed by a computer, the computer can perform the method of the above method embodiment. In other words, the present application embodiment also provides a computer program product containing instructions, and when the instructions are executed by a computer, the computer can perform the method of the above method embodiment.
[0127] When software is used for implementation, it can be implemented in whole or in part in the form of a computer program product. The computer program product includes one or more computer instructions. When the computer program instruction is loaded and executed on a computer, the computer can be made to perform the corresponding flow in each method in the embodiment of the present application in whole or in part, and generate the functions that can be realized by each method in the embodiment of the present application. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable devices. The computer instruction can be stored in a computer-readable storage medium, or transmitted from one computer-readable storage medium to another computer-readable storage medium, for example, the computer instruction can be transmitted from a website site, computer, server or data center by wired (such as coaxial cable, optical fiber, digital subscriber line (Digital Subscriber Line, DSL)) or wireless (such as infrared, wireless, microwave, etc.) mode to another website site, computer, server or data center. The computer-readable storage medium can be any available medium that a computer can access or a data storage device such as a server, a data center, etc. that contains one or more available media integrations. The available medium may be a magnetic medium (eg, a floppy disk, a hard disk, a magnetic tape), an optical medium (eg, a digital video disc (DVD)), or a semiconductor medium (eg, a solid state disk (SSD)).
[0128] Those of ordinary skill in the art will appreciate that the modules and algorithm steps of each example described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, or a combination of computer software and electronic hardware. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professional and technical personnel can use different methods to implement the described functions for each specific application, but such implementation should not be considered to be beyond the scope of this application.
[0129] In the several embodiments provided in the present application, it should be understood that the disclosed systems, devices and methods can be implemented in other ways. For example, the device embodiments described above are only schematic. For example, the division of the module is only a logical function division. There may be other division methods in actual implementation, such as multiple modules or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be through some interfaces, indirect coupling or communication connection of devices or modules, which can be electrical, mechanical or other forms.
[0130] The modules described as separate components may or may not be physically separated, and the components displayed as modules may or may not be physical modules, that is, they may be located in one place, or they may be distributed on multiple network units. Some or all of the modules may be selected according to actual needs to achieve the purpose of the scheme of this embodiment. For example, each functional module in each embodiment of the present application may be integrated into a processing module, or each module may exist physically separately, or two or more modules may be integrated into one module.
[0131] The above are only specific implementations of the present application, but the protection scope of the present application is not limited thereto. Any person skilled in the art who is familiar with the present technical field can easily think of changes or substitutions within the technical scope disclosed in the present application, which should be included in the protection scope of the present application. Therefore, the protection scope of the present application should be based on the protection scope of the claims.
Claims
1. A page display method, characterized in that: include: In response to a start operation of the target application, creating a page rendering container; Acquire static resources of a target application page from a server, wherein the server predetermines the static resources; Loading and pre-rendering the static resources of the target application page according to the page rendering container to obtain a page static template of the target application page; In response to a jump operation to a target application page, the target application page is displayed according to the page static template.
2. The method according to claim 1, characterized in that In response to the jump operation to the target application page, before displaying the target application page according to the page static template, the method further includes: In response to entering a preceding application page of the target application page, determining a target page element in the preceding application page that is related to the target application page; Obtaining exposure information of the target page element; In response to the exposure information being greater than the exposure information threshold, preloading the dynamic resource of the target application page; Accordingly, in response to the jump operation to the target application page, displaying the target application page according to the page static template includes: In response to the jump operation, the target application page is displayed according to the page static template and the preloaded dynamic resources of the target application page.
3. The method according to claim 2, characterized in that Before preloading the dynamic resource of the target application page in response to the exposure information being greater than the exposure information threshold, the method further includes: Determine the duration of hit rate detection; Obtaining the total number of historical preloads for the target application page, the number of historical hits of the target application page using the preloaded resources, and historical trigger information on the target application page within the hit rate detection duration; Obtaining a first hit rate according to the historical hit count and the historical total preloading count; Obtaining a second hit rate according to the historical hit count and the historical trigger information; Determining a dynamic resource preloading execution indicator value according to the first hit rate and / or the second hit rate; Accordingly, in response to the exposure information being greater than the exposure information threshold, preloading the dynamic resource of the target application page includes: In response to the exposure information being greater than the exposure information threshold and the dynamic resource preloading execution indicator value being greater than the execution indicator value threshold, the dynamic resources of the target application page are preloaded.
4. The method according to claim 3, characterized in that The step of obtaining the static resources of the target application page from the server includes: Determine a static resource preloading execution index value according to the first hit rate and / or the second hit rate; In response to the static resource preloading execution indicator value being greater than the execution indicator value threshold, the static resource of the target application page is obtained from the server.
5. The method according to claim 2, characterized in that: The displaying of the target application page according to the page static template and the preloaded dynamic resource of the target application page includes: Determine a first hash value corresponding to the dynamic resource of the preloaded target application page; Obtaining a second hash value corresponding to the latest dynamic resource of the target application page from the server; In response to the second hash value being different from the first hash value, pulling the latest dynamic resource corresponding to the second hash value from the server; The target application page is displayed according to the page static template and the latest dynamic resource corresponding to the second hash value.
6. The method according to any one of claims 1 to 5, characterized in that: The method further comprises: Detect the existing number of static page templates corresponding to different application pages in storage; In response to the existing number being less than the existing number threshold, triggering creation and storage of a new page rendering container and rendering through the new page rendering container to obtain page static templates of other application pages; In response to an exit operation on the target application page, a page static template corresponding to the target application page is cleared.
7. The method according to any one of claims 1 to 5, characterized in that: Also includes: Determine a preset template loading time threshold and determine the template loading time of the page static template of the target application page; In response to the template loading time being longer than the preset template loading time threshold, determining the page static template of the target application page in real time to obtain the real-time page static template of the target application page; In response to a jump operation to a target application page, the target application page is displayed according to the real-time page static template.
8. A page display device, characterized in that: include: A first creation module is used to: create a page rendering container in response to a start operation of a target application; A first acquisition module is used to: acquire static resources of a target application page from a server, wherein the server predetermines the static resources; A loading and rendering module, used to: load and pre-render the static resources of the target application page according to the page rendering container to obtain a page static template of the target application page; The page display module is used to: in response to a jump operation to a target application page, display the target application page according to the page static template.
9. An electronic device, characterized in that: include: processor; as well as A memory, configured to store executable instructions of the processor; The processor is configured to perform the method of any one of claims 1 to 7 by executing the executable instructions.
10. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the method according to any one of claims 1 to 7 is implemented.
Citation Information
Cited By
Start control method and device, electronic equipment and computer readable storage medium
CN121050792A
