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

Abstract

The invention relates to the technical field of development assistance, is applied to page loading scenes of online businesses such as financial science and technology and medical health care, realizes automatic optimization of resource loading priorities, resource loading strategies and memory occupation, can greatly shorten first screen loading time and reduce memory occupation, and greatly improves page resource loading efficiency. Relates to a page loading method and device, equipment and a medium. The method comprises the following steps: determining user interaction data corresponding to a to-be-loaded target page in a display interface; analyzing a browser rendering pipeline of the display interface to obtain a rendering state of the display interface; determining a resource priority of each element in the target page according to the user interaction data and the rendering state; according to the resource priority of each element, determining a resource loading strategy and a memory level-to-level management strategy corresponding to each element; and carrying out resource loading or resource unloading on the target page based on the resource loading strategy and the memory hierarchical management strategy corresponding to each element.

Description

Technical Field

[0001] The present application relates to the field of development-assisted technology and can be applied to the fields of financial technology, medical care, health care and elderly care, and in particular to a page loading method, device, computer equipment and computer-readable storage medium. Background Art

[0002] In most business platforms (e.g., insurance, banking, healthcare, and e-commerce), it is often necessary to load long pages, single pages, and data reports in the browser. For example, in the page loading scenarios of online businesses such as financial technology, healthcare, and e-commerce, the relevant technologies are through traditional methods (such as <link rel＝"preload"> ) relies on developers to manually set priorities, resulting in low resource loading efficiency and inability to dynamically adapt to the actual needs of the page rendering stage.

[0003] Therefore, how to improve the resource loading efficiency of the page becomes an urgent problem to be solved. Summary of the Invention

[0004] The present application provides a page loading method, apparatus, computer device and readable storage medium, which can realize automatic optimization of resource loading priority, resource loading strategy and memory usage, significantly shorten the first screen loading time and reduce memory usage, and greatly improve the resource loading efficiency of the page.

[0005] In a first aspect, the present application provides a page loading method, the method comprising:

[0006] Determine user interaction data corresponding to a target page to be loaded in a display interface; parse the browser rendering pipeline of the display interface to obtain a rendering state of the display interface; determine the resource priority corresponding to each element in the target page based on the user interaction data and the rendering state; determine the resource loading strategy and memory hierarchical management strategy corresponding to each element based on the resource priority corresponding to each element; and load or unload resources for the target page based on the resource loading strategy and memory hierarchical management strategy corresponding to each element.

[0007] In a second aspect, the present application further provides a page loading device, the page loading device comprising:

[0008] A user interaction data determination module is used to determine the user interaction data corresponding to the target page to be loaded in the display interface;

[0009] A rendering pipeline parsing module, configured to parse the browser rendering pipeline of the display interface to obtain a rendering state of the display interface;

[0010] A resource priority determination module, configured to determine the resource priority corresponding to each element in the target page according to the user interaction data and the rendering state;

[0011] A strategy determination module, configured to determine a resource loading strategy and a memory hierarchical management strategy corresponding to each element according to the resource priority corresponding to each element;

[0012] The resource management module is configured to load or unload resources for the target page based on the resource loading strategy and the memory hierarchical management strategy corresponding to each element.

[0013] In a third aspect, the present application further provides a computer device, comprising a memory and a processor;

[0014] The memory is used to store computer programs;

[0015] The processor is configured to execute the computer program and implement the above-mentioned page loading method when executing the computer program.

[0016] In a fourth aspect, the present application further provides a computer-readable storage medium, wherein the computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the processor implements the page loading method as described above.

[0017] The present application discloses a page loading method, apparatus, computer equipment and readable storage medium, the method comprising: determining user interaction data corresponding to a target page to be loaded in a display interface; parsing the browser rendering pipeline of the display interface to obtain the rendering state of the display interface; determining the resource priority corresponding to each element in the target page according to the user interaction data and the rendering state; determining the resource loading strategy and memory hierarchical management strategy corresponding to each element according to the resource priority corresponding to each element; and loading or unloading resources for the target page based on the resource loading strategy and the memory hierarchical management strategy corresponding to each element. The embodiment of the present application determines the resource priority corresponding to each element in the target page according to the user interaction data and the rendering state, determines the resource loading strategy and memory hierarchical management strategy corresponding to each element according to the resource priority corresponding to each element, and loads or unloads resources for the target page based on the resource loading strategy and the memory hierarchical management strategy corresponding to each element. It can dynamically perceive user interaction data and rendering state, realize automatic optimization of resource loading priority, resource loading strategy and memory occupancy, significantly shorten the first screen loading time and reduce memory occupancy, and greatly improve the resource loading efficiency of the page. BRIEF DESCRIPTION OF THE DRAWINGS

[0018] In order to more clearly illustrate the technical solutions of the embodiments of the present application, the following is a brief introduction to the drawings required for use in the description of the embodiments. Obviously, the drawings described below are some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without any creative work.

[0019] Figure 1 This is a schematic diagram of the structure of a computer device provided in an embodiment of the present application;

[0020] Figure 2 This is a schematic flow chart of a page loading method provided in an embodiment of the present application;

[0021] Figure 3 This is a schematic flowchart of the sub-steps of resource blocking tracing provided by an embodiment of the present application;

[0022] Figure 4 This is a schematic flowchart of sub-steps for determining resource priorities provided in an embodiment of the present application;

[0023] Figure 5 This is a schematic diagram of scheduling resource priorities based on a state machine provided in an embodiment of the present application;

[0024] Figure 6 This is a schematic block diagram of a page loading device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0025] The following will be combined with the drawings in the embodiments of this application to clearly and completely describe the technical solutions in the embodiments of this application. Obviously, the embodiments described are part of the embodiments of this application, not all of them. Based on the embodiments in this application, all other embodiments obtained by ordinary technicians in this field without making creative efforts are within the scope of protection of this application.

[0026] The flowcharts shown in the accompanying drawings are for illustrative purposes only and do not necessarily include all contents and operations / steps, nor must they be executed in the order described. For example, some operations / steps may be decomposed, combined, or partially merged, so the actual execution order may vary depending on the actual situation.

[0027] It should be understood that the terms used in this specification are only for the purpose of describing specific embodiments and are not intended to limit the present application. As used in this specification and the appended claims, the singular forms "a", "an", and "the" are intended to include the plural forms unless the context clearly indicates otherwise.

[0028] It will also be understood that the term "and / or" used in this specification and the appended claims refers to and includes any and all possible combinations of one or more of the associated listed items.

[0029] At present, in online business platforms such as financial technology, medical health and elderly care, and e-commerce, when loading long pages, single pages, and data reports, the relevant technologies are through traditional methods (such as <link rel＝"preload"> ) relies on developers to manually preset priorities, resulting in inefficient resource loading and an inability to dynamically adapt to actual page rendering needs. For example, in a page load test of over 100 typical single-page web applications (SPAs), delays in loading first-screen resources resulted in an average Largest Contentful Paint (LCP) of 2.8 seconds, exceeding the 2.5-second threshold recommended by Google Web Vitals by 12%. During long page scrolling, non-viewport resource loading accounted for 45%, of which 30% were invalid requests. Furthermore, due to the failure to promptly release cached non-viewport resources, memory wasted (an average of 30%) during use, leading to excessive memory usage. Furthermore, the synchronous loading of critical resources (such as CSS and first-screen images) blocks the LCP, affecting the LCP and causing delays in first-screen rendering, which also reduces page resource loading efficiency. Actual tests showed that invalid cache usage reached 35% for typical large-screen report pages, peak memory usage exceeded 150MB for complex SPA applications, and the mobile Out-of-Memory (OOM) crash rate increased by 27%. Furthermore, after resources are moved out of the viewport, they must wait for garbage collection (GC) to be triggered before they can be released, with a delay of 5-10 seconds.

[0030] To this end, the embodiments of the present application provide a page loading method, apparatus, computer equipment, and readable storage medium. The page loading method can be applied to a computer device, by determining the resource priority corresponding to each element in the target page based on user interaction data and rendering status, determining the resource loading strategy and memory hierarchical management strategy corresponding to each element based on the resource priority corresponding to each element, and loading or unloading resources for the target page based on the resource loading strategy and memory hierarchical management strategy corresponding to each element. The method can dynamically perceive user interaction data and rendering status, realize automated optimization of resource loading priority, resource loading strategy, and memory usage, significantly shorten the first screen loading time and reduce memory usage, and greatly improve the resource loading efficiency of the page.

[0031] For example, a computer device can be a server or a terminal. The server can be a standalone server or a cloud server that provides basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, security services, content delivery networks (CDNs), and big data and artificial intelligence platforms. The terminal can be an electronic device such as a smartphone, tablet computer, laptop computer, or desktop computer.

[0032] See also Figure 1 , Figure 1 1 is a schematic diagram of a computer device according to an embodiment of the present invention. The computer device may include a processor and a memory, wherein the processor and the memory may be connected via a bus, which may be any suitable bus such as an Inter-Integrated Circuit (I2C) bus.

[0033] The memory may include a storage medium and an internal memory. The storage medium may be a non-volatile storage medium or a volatile storage medium. The storage medium may store an operating system and a computer program, and the internal memory provides an environment for running the computer program in the storage medium. The computer program includes program instructions that, when executed, cause the processor to execute the page loading method described in any embodiment.

[0034] The processor is used to provide computing and control capabilities and support the operation of the entire computer equipment.

[0035] The processor may be 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, discrete gate or transistor logic devices, discrete hardware components, etc. The general-purpose processor may be a microprocessor, or any conventional processor.

[0036] In one embodiment, the processor is configured to execute a computer program stored in the memory to implement the following steps:

[0037] Determine user interaction data corresponding to the target page to be loaded in the display interface; parse the browser rendering pipeline of the display interface to obtain the rendering status of the display interface; determine the resource priority corresponding to each element in the target page based on the user interaction data and the rendering status; determine the resource loading strategy and memory hierarchical management strategy corresponding to each element based on the resource priority corresponding to each element; load or unload resources for the target page based on the resource loading strategy and memory hierarchical management strategy corresponding to each element.

[0038] In one embodiment, when determining the user interaction data corresponding to the target page to be loaded in the display interface, the processor is configured to implement:

[0039] Obtain scrolling behavior data when the user scrolls the target page; determine the click hotspot in the target page based on the user's click operation on the target page; obtain environmental parameters of the display interface; generate user interaction data based on the scrolling behavior data, click hotspot and environmental parameters.

[0040] In one embodiment, the scrolling behavior data includes scrolling speed and scrolling acceleration; when the processor obtains the scrolling behavior data when the user scrolls the target page, it is configured to:

[0041] The target page is captured based on a preset frame rate to obtain at least one frame of page content; the scrolling speed is calculated based on the viewport vertical offset and time difference between two adjacent frames of page content to obtain the scrolling speed; and the scrolling acceleration is determined based on the rate of change of the scrolling speed.

[0042] In one embodiment, the browser rendering pipeline includes at least one processing stage, and the rendering status includes whether a resource blocking event occurs for an element in the display interface. When the processor parses the browser rendering pipeline of the display interface to obtain the rendering status of the display interface, it is configured to implement:

[0043] Get the processing time of each processing stage; if the processing time of at least one processing stage is greater than the preset duration, execute the resource blocking tracing process to determine whether a resource blocking event occurs for an element in the display interface and the blocking duration of the target element where the resource blocking event occurs.

[0044] In one embodiment, when implementing a resource blocking tracing process to determine whether an element in a display interface has a resource blocking event and the blocking duration of the element that has the resource blocking event, the processor is configured to implement:

[0045] Determine the target rendering engine used by the display interface; based on the correspondence between the preset rendering engine and the detection object and the blocking trigger condition, determine the target detection object and the target blocking trigger condition for detecting whether a resource blocking event occurs for the element in the target detection object according to the target rendering engine; if the processing time of the target detection object meets the target blocking trigger condition, determine that a resource blocking event occurs for the element in the target detection object, and record the blocking duration of the element where the resource blocking event occurs.

[0046] In one embodiment, the user interaction data includes scrolling behavior data and click hotspots, and the rendering state includes the blocking duration of an element in the display interface where a resource blocking event occurs. When determining the resource priority corresponding to each element in the target page based on the user interaction data and the rendering state, the processor is configured to implement:

[0047] Determine the viewport distance value corresponding to each element based on the scrolling behavior data; determine the importance score corresponding to each element based on the scrolling behavior data and click hot spots; determine the rendering blocking score corresponding to each element based on the blocking duration of each element where a resource blocking event occurs; determine the resource priority corresponding to each element based on the viewport distance value, importance score, and rendering blocking score corresponding to each element.

[0048] In one embodiment, the scrolling behavior data includes scrolling speed and scrolling acceleration; when determining the viewport distance value corresponding to each element based on the scrolling behavior data, the processor is configured to implement:

[0049] Obtain the current viewport of the display interface; determine the predicted viewport of the display interface within a preset time period in the future based on the current viewport, scrolling speed, and scrolling acceleration; and determine the viewport distance value of each element based on the overlapping area between each element and the predicted viewport.

[0050] The following describes some embodiments of the present application in detail with reference to the accompanying drawings. In the absence of conflict, the following embodiments and features of the embodiments can be combined with each other. Figure 2 , Figure 2 This is a schematic flow chart of a page loading method provided in an embodiment of the present application. Figure 2 As shown, the page loading method may include steps S101 to S105.

[0051] Step S101: Determine user interaction data corresponding to a target page to be loaded in a display interface.

[0052] The page loading method provided in the embodiment of the present application can be applied to various business platforms to improve the resource loading efficiency of the pages in the business platform. For example, when a user browses a page on the display interface of a business platform, the user interaction data and rendering status can be dynamically perceived, and the resource loading priority, resource loading strategy and memory usage can be automatically optimized, which can significantly shorten the first screen loading time and reduce memory usage, greatly improve the resource loading efficiency of the page, and thus improve the user experience. Among them, the business platform may include but is not limited to financial technology, insurance, banking, medical health and elderly care, e-commerce, travel and so on.

[0053] In some embodiments, when a user browses a page through a browser in a business platform, the currently browsed page may be determined as a target page, and user interaction data corresponding to the target page may be detected.

[0054] Exemplarily, user interaction data may include scrolling behavior data, click hotspots, and environmental parameters. The scrolling behavior data may include the scrolling speed and acceleration of a user scrolling or sliding a target page using a mouse, finger, or stylus. A click hotspot refers to a specific interactive area set by a user on a display interface. When a user clicks, touches, or hovers over the area, a preset action (such as redirecting a link, displaying information, executing a function, etc.) is triggered. Environmental parameters may include network status and device performance.

[0055] For example, in a fintech business scenario, when a user inquires about a claim on a car insurance claim platform, the platform can load a claim details page containing information such as the ID number, license plate number, policy number, images of damaged parts of the vehicle, and images of the on-site environment in real time. The embodiment of the present application can dynamically perceive the user interaction data and rendering status of the claim details page to achieve automated optimization of resource loading priority, resource loading strategy, and memory usage. This can significantly shorten the first screen loading time of the claim details page and reduce memory usage, greatly improving the resource loading efficiency of the claim details page and avoiding loading delays on the claim details page.

[0056] For example, in a healthcare and elderly care business scenario, for example, when a user searches and browses electronic medical records (Electronic Healthcare Record) and electronic personal health records on a healthcare and elderly care platform, the display interface of the healthcare and elderly care platform can load a personal health information page containing a series of electronic records with preservation value, such as medical records, electrocardiograms, and medical images. The embodiment of the present application can realize automatic optimization of resource loading priority, resource loading strategy, and memory usage by dynamically sensing user interaction data and rendering status of the personal health information page, which can significantly shorten the first screen loading time of the personal health information page and reduce memory usage, greatly improve the resource loading efficiency of the personal health information page, and avoid the phenomenon of loading delay of the personal health information page.

[0057] In some embodiments, determining user interaction data corresponding to a target page to be loaded in a display interface may include: obtaining scrolling behavior data when a user scrolls the target page; determining a click hot zone in the target page based on a user's click operation on the target page; obtaining environmental parameters of the display interface; and generating user interaction data based on the scrolling behavior data, click hot zone, and environmental parameters.

[0058] Among them, obtaining the scrolling behavior data when the user scrolls the target page may include: capturing the target page based on a preset frame rate to obtain at least one frame of page content; calculating the scrolling speed based on the viewport vertical offset and time difference between two adjacent frames of page content to obtain the scrolling speed; and determining the scrolling acceleration based on the rate of change of the scrolling speed.

[0059] For example, the browser's native event monitoring mechanism (e.g., scroll event) can be combined with requestAnimationFrame to achieve a high frame rate (e.g., 60Hz) to capture the page content of the target page, and calculate the scrolling speed and scrolling acceleration based on the page content with an accuracy of 0.1px / ms2. The scrolling speed can be calculated based on the vertical offset and time difference of the viewport between the two adjacent frames of page content, and the unit of the scrolling speed is px / s. Then, the scrolling acceleration is calculated based on the rate of change of the scrolling speed, and the unit of the scrolling acceleration is px / s. 2 Among them, the scrolling acceleration is used to determine the user's operation intention. For example, fast sliding indicates that browsing efficiency is prioritized.

[0060] For example, when determining a click hotspot on a target page based on a user's click operation on the target page, the target DOM layer of the click operation (e.g., Event.path) can be parsed, the depth of the target DOM layer can be calculated, and the click hotspot can be determined by combining the depth of the target DOM layer and the weight of the CSS selector. The weight of the CSS selector can be pre-marked, for example, the weight of .product-image on an e-commerce page is higher than the weight of .pagination.

[0061] For example, when obtaining the environmental parameters of the display interface, the NetworkInformation API can be used to obtain real-time bandwidth (downlink) and round-trip delay (Round Rrip Time, RTT) to distinguish network status, for example, 4G or Wi-Fi environment; the number of CPU cores can also be obtained through navigator.hardwareConcurrency, combined with GPU Detect to judge device performance, such as graphics processing capabilities. Among them, the network status is used to dynamically adjust the preloading threshold. For example, the preloading range is expanded to 3 screens in a 4G environment. Device performance can be used to dynamically adjust the resolution of graphics resources to achieve an intelligent balance between image quality and performance.

[0062] Step S102: parse the browser rendering pipeline of the display interface to obtain the rendering status of the display interface.

[0063] In an embodiment of the present application, by parsing the browser rendering pipeline of the display interface, it is possible to determine whether a resource blocking event occurs for an element in the display interface, and then the element that has a resource blocking event can be loaded first.

[0064] It should be noted that the browser rendering pipeline refers to the series of ordered processing stages by which the browser converts web page resources (such as HTML, CSS, JavaScript, images, etc.) into pixel images visible on the screen. The browser rendering pipeline can include at least one processing stage. For example, the browser rendering pipeline includes five core processing stages: DOM / CSSOM construction, render tree generation, layout, paint, and composite. The rendering status includes whether resource blocking occurs and the processing stage in which resource blocking occurs.

[0065] In some embodiments, parsing the browser rendering pipeline of the display interface to obtain the rendering status of the display interface may include: obtaining the processing time of each processing stage; if there is at least one processing stage whose processing time is greater than a preset duration, executing a resource blocking tracing process to determine whether a resource blocking event occurs for an element in the display interface and the blocking duration of the target element where the resource blocking event occurs.

[0066] For example, PerformanceObserver can be used to monitor processing stages such as render, layout, and paint, capturing the processing time of each stage. When the processing time of a stage exceeds a preset duration, the resource blocking tracing process is triggered. The preset duration can be set based on actual conditions, and the specific value is not limited here. For example, the preset duration can be 50ms.

[0067] See also Figure 3 , Figure 3 This is a schematic flow chart of the sub-steps of resource blocking tracing provided by an embodiment of the present application. Figure 3 As shown, it may include steps S1021 to S1023.

[0068] Step S1021: Determine the target rendering engine used by the display interface.

[0069] For example, the function detectRendererEngine() can be used to identify the target rendering engine used by the display interface. The types of rendering engines may include but are not limited to Blink, WebKit, and Gecko.

[0070] Step S1022: Based on the preset correspondence between the rendering engine, the detection object, and the blocking trigger condition, the target rendering engine determines the target detection object to be detected and the target blocking trigger condition for detecting whether an element in the target detection object has a resource blocking event.

[0071] In the embodiments of the present application, the correspondence between rendering engines, detection objects, and blocking trigger conditions can be pre-set. When tracing resource blocking, different tracing strategies can be adopted for different types of rendering engines. Detection objects can include, but are not limited to, DOM / CSSOM construction, render tree generation, layout, paint, composite, and other processing stages, as well as images, fonts, scripts, and so on.

[0072] For example, as shown in Table 1 below, based on the type of rendering engine, different detection objects may be monitored and different blocking triggering conditions may be used to determine whether a resource blocking event occurs.

[0073] Table 1

[0074]

[0075] For example, as shown in Table 1, for the Blink rendering engine, the target detection object is the layout reflow time, and the target blocking trigger condition is that the layout phase time is >80ms for three consecutive times; for the WebKit rendering engine, the target detection object is the layer synthesis time, and the target blocking trigger condition is that the number of layers exceeds 200 and the synthesis time is >60ms; for the Gecko rendering engine, the target detection object is the font, and the target blocking trigger condition is that the @font-face loading delay exceeds 1 second.

[0076] Step S1023: If the processing time of the target detection object meets the target blocking trigger condition, it is determined that a resource blocking event occurs in the element in the target detection object, and the blocking duration of the element where the resource blocking event occurs is recorded.

[0077] For example, if the target detection object is layout reflow, if the layout reflow processing time satisfies three consecutive layout phases taking > 80ms, it can be determined that a resource blocking event has occurred for the element in the layout reflow, that is, a resource blocking event has occurred for the element in the layout processing phase. For example, resource blocking events may occur for elements such as images, scripts, and fonts in the layout processing phase. At this point, the blocking duration of the element that has experienced the resource blocking event can also be recorded. It should be noted that the blocking duration is used to subsequently determine the element's rendering blocking score.

[0078] In the above embodiment, by detecting whether a resource blocking event occurs to an element in the display interface and the blocking duration of the target element where the resource blocking event occurs, the resource priority corresponding to the element where the resource blocking event occurs can be adjusted subsequently, for example, the resource priority corresponding to the element where the resource blocking event occurs can be adjusted to an emergency or core priority.

[0079] Step S103: Determine the resource priority corresponding to each element in the target page according to the user interaction data and the rendering status.

[0080] Exemplarily, after determining the user interaction data corresponding to the target page and determining the resource priority corresponding to each element in the target page, the resource priority corresponding to each element in the target page can be determined based on the user interaction data and the rendering status. In an embodiment of the present application, resources can be divided into four priorities: Critical (urgent or core), High (high), Low (low), and Idle (idle). Among them, Critical-level resources refer to elements or resources that directly affect the first screen rendering or key functions; High-level resources refer to resources that will enter the viewport or may be quickly accessed by users; Low-level resources refer to non-critical resources that may be accessed in the short term; Idle-level resources refer to resources that are invisible for a long time and cannot be accessed.

[0081] See also Figure 4 , Figure 4 This is a schematic flow chart of the sub-steps of determining resource priority provided by an embodiment of the present application. Figure 4 As shown, step S103 may include steps S1031 to S1034.

[0082] Step S1031: Determine the viewport distance value corresponding to each element according to the scrolling behavior data.

[0083] In some embodiments, determining the viewport distance value corresponding to each element based on the scrolling behavior data may include: obtaining the current viewport of the display interface; determining the predicted viewport of the display interface within a preset time period in the future based on the current viewport, scrolling speed, and scrolling acceleration; and determining the viewport distance value of each element based on the overlapping area between each element and the predicted viewport.

[0084] For example, a viewport dynamic prediction algorithm can be used to predict elements that may enter the viewport within the next 500ms based on scrolling speed and scrolling acceleration, and then IntersectionObserver V2 can be used to monitor the viewport distance value of the element, also known as the visibility weight (0-1, fully visible is 1).

[0085] For example, the prediction formula for the predicted viewport is as follows:

[0086] predictedViewport=currentViewport+(velocity*t+0.5*acceleration*t 2 ),

[0087] Where predictedViewport represents the predicted viewport, currentViewport represents the current viewport, velocity is the scrolling speed, acceleration is the scrolling acceleration, and t = 0.5s.

[0088] For example, getBoundingClientRect() can be used to calculate the overlapping area between the element and the predicted viewport to obtain the viewport distance value, also known as the visibility weight (0-1, where fully visible is 1).

[0089] Step S1032: Determine the importance score corresponding to each element based on the scrolling behavior data and the click hotspot.

[0090] For example, the importance score of an element can be determined based on the scrolling speed, scrolling acceleration, and whether the element is in a click hotspot. For example, an element that triggers a click operation may be assigned an importance score of 0.3, while an element in a click hotspot with fast scrolling (e.g., scrolling speed > 150px / s) may be assigned an importance score of 0.2.

[0091] Step S1033: Determine a rendering blocking score corresponding to each element based on the blocking duration of each element where a resource blocking event occurs.

[0092] For example, for elements that experience resource blocking events, a rendering blocking score corresponding to each element can be determined based on the element's blocking duration. The rendering blocking score can be the ratio of the blocking duration to the total rendering time. The longer the element's blocking duration, the higher the rendering blocking score.

[0093] Step S1034: Determine the resource priority corresponding to each element according to the viewport distance value, importance score, and rendering blocking score corresponding to each element.

[0094] For example, the total score corresponding to each element can be calculated based on the viewport distance value, importance score, rendering blocking score and their respective weight values, and then the total score can be mapped to the resource priority. Among them, the weight values ​​of the viewport distance value, importance score and rendering blocking score can be set according to actual conditions, and the specific values ​​are not limited here. For example, the weight value of the viewport distance value can be 0.5, the weight value of the importance score can be 0.3, and the weight value of the rendering blocking score can be 0.2. When the total score corresponding to an element is greater than 0.8, the resource priority corresponding to the element can be determined to be Critical; when the total score corresponding to the element is greater than 0.5 and not greater than 0.8, the resource priority corresponding to the element can be determined to be High; when the total score corresponding to the element is greater than 0.2 and not greater than 0.5, the resource priority corresponding to the element can be determined to be Low; when the total score corresponding to the element is not greater than 0.2, the resource priority corresponding to the element can be determined to be Idle.

[0095] In the embodiment of the present application, after determining the resource priority corresponding to each element, the resource priority can also be scheduled based on the state machine. Figure 5 , Figure 5 This is a schematic diagram of scheduling resource priorities based on a state machine provided in an embodiment of the present application.

[0096] For example, Figure 5 As shown, when the resource priority of an element is Idle, if the element enters the potential viewport (also known as predicted viewport) range (for example, within the next 500ms), the element resource priority can be scheduled to Low. When the resource priority of an element is Low, if the element enters the 200px range within the viewport, the element resource priority can be scheduled to High. When the resource priority of an element is High, if it is detected that a resource blocking event occurs for the element (for example, an unloaded first screen image), the element resource priority can be scheduled to Critical. When the resource priority of an element is Critical, if it is detected that the element is rendered and non-blocked (for example, the image is loaded), the element resource priority can be scheduled to High. When the resource priority of an element is High, if it is detected that the element moves out of the viewport but is within 2 screen heights (for example, retaining a temporary cache), the element resource priority can be scheduled to Low. When the resource priority of an element is Low, if it is detected that the element has been out of the viewport for more than 5 seconds without entering the viewport or the user has no interaction, the element resource priority can be scheduled to Idle.

[0097] The above embodiment can realize automatic scheduling of resource priorities by determining the resource priority corresponding to each element in the target page according to user interaction data and rendering status, without the need for developers to manually set priorities, thereby effectively improving the resource loading efficiency of the page.

[0098] Step S104: Determine the resource loading strategy and memory hierarchical management strategy corresponding to each element according to the resource priority corresponding to each element.

[0099] Exemplarily, after determining the resource priority corresponding to each element in the target page according to the user interaction data and the rendering status, the resource loading strategy and the memory hierarchical management strategy corresponding to each element can be determined according to the resource priority corresponding to each element.

[0100] In some embodiments, resource loading policies may include urgent loading policies, delayed loading policies, and bandwidth adaptation policies, and memory hierarchical management policies may include resident memory policies, cache policies, temporary cache policies, and immediate release policies, and so on.

[0101] For example, for an element with a resource priority of Critical, its resource loading strategy can be an urgent loading strategy. For the urgent loading strategy, you can use <link rel＝"preload"> Force insertion into the header and set as="document" priority.

[0102] For example, for an element with an Idle resource priority, its resource loading strategy can be a delayed loading strategy. For the delayed loading strategy, IntersectionObserver can be used to listen and load only when the user stays for more than 3 seconds.

[0103] For example, for bandwidth adaptation strategies, resource versions can be selected based on network conditions. For example, in a weak network environment (e.g., bandwidth < 1 Mbps), image resources are automatically replaced with WebP format and the resolution is reduced to 720p.

[0104] In an embodiment of the present application, the memory hierarchical management strategy may be a four-level cache system, as shown in Table 2 below.

[0105] Table 2

[0106]

[0107] For example, as shown in Table 2, the memory hierarchical management policy may include a resident memory policy, a cache policy, a temporary cache policy, and an immediate release policy. When the resource priority of an element is Critical, the corresponding memory hierarchical management policy is the resident memory policy; when the resource priority of an element is High, the corresponding memory hierarchical management policy is the cache policy; when the resource priority of an element is Low, the corresponding memory hierarchical management policy is the temporary cache policy; and when the resource priority of an element is Idle, the corresponding memory hierarchical management policy is the immediate release policy.

[0108] Different memory hierarchical management strategies correspond to different clearing trigger conditions. For example, the clearing trigger condition for the resident memory strategy is to release memory when the page is unloaded, and typical resources are the home screen CSS or key words. Another example is the clearing trigger condition for the temporary cache strategy, which is to clear every 5 seconds, and typical resources are paged data.

[0109] The above embodiment can realize automatic optimization of resource loading strategy and memory usage by determining the resource loading strategy and memory usage corresponding to each element according to the resource priority corresponding to each element, which can significantly shorten the first screen loading time and reduce memory usage, greatly improving the resource loading efficiency of the page.

[0110] Step S105: Load or unload resources on the target page based on the resource loading strategy and memory hierarchical management strategy corresponding to each element.

[0111] Exemplarily, after determining the resource loading strategy and memory hierarchical management strategy corresponding to each element based on the resource priority corresponding to each element, resources can be loaded or unloaded from the target page based on the resource loading strategy and memory hierarchical management strategy corresponding to each element. For example, for element A in the target page, if the resource loading strategy corresponding to element A is an urgent loading strategy, and the memory hierarchical management strategy corresponding to element A is a resident memory strategy, element A in the target page can be loaded based on the urgent loading strategy and the resident memory strategy, and the memory can be released when the target page is unloaded.

[0112] It should be noted that in online business scenarios such as financial technology and medical health and elderly care, for example, when loading a long report on a web page on a car insurance claims platform or a medical health and elderly care platform, compared with the traditional page loading method, the page loading method provided in the embodiment of the present application can significantly shorten the first screen loading time and reduce memory usage, greatly improving the resource loading efficiency of the page. As shown in Table 3 below, compared with the first screen loading time of 3.6s when loading a page by the traditional page loading method, the first screen loading time of the page loading method provided in the embodiment of the present application is 2.1s when loading a page, an improvement of 41.7%; compared with the peak memory usage of 180M when loading a page by the traditional page loading method, the peak memory usage of the page loading method provided in the embodiment of the present application is 102M when loading a page, an improvement of 43.3%, and the traditional page loading method manually sets the priority of resources, while the page loading method provided in the embodiment of the application can automatically grade and downgrade.

[0113] Table 3

[0114] index Traditional methods This application Improvement First page load time (LCP) 3.6s 2.1s 41.7％ Peak memory usage 180M 102M 43.3％ compatibility Manual adaptation is required Automatic grading and degrading -

[0115] The above embodiment provides a page loading method, which determines the resource priority corresponding to each element in the target page according to user interaction data and rendering status, determines the resource loading strategy and memory hierarchical management strategy corresponding to each element according to the resource priority corresponding to each element, and loads or unloads resources for the target page based on the resource loading strategy and memory hierarchical management strategy corresponding to each element. It can dynamically perceive user interaction data and rendering status, realize automatic optimization of resource loading priority, resource loading strategy and memory occupancy, and can significantly shorten the first screen loading time and reduce memory occupancy. The first screen loading time is shortened by more than 40% and the memory occupancy is reduced by more than 25%, greatly improving the resource loading efficiency of the page.

[0116] See also Figure 6 , Figure 6 The embodiment of the present application further provides a schematic block diagram of a page loading device 1000, which is used to execute the aforementioned page loading method. The page loading device 1000 can be configured in a computer device.

[0117] like Figure 6 As shown, the page loading device 1000 includes: a user interaction data determination module 1001, a rendering pipeline analysis module 1002, a resource priority determination module 1003, a strategy determination module 1004 and a resource management module 1005.

[0118] The user interaction data determination module 1001 is configured to determine user interaction data corresponding to a target page to be loaded in the display interface.

[0119] The rendering pipeline parsing module 1002 is used to parse the browser rendering pipeline of the display interface to obtain the rendering status of the display interface.

[0120] The resource priority determination module 1003 is configured to determine the resource priority corresponding to each element in the target page according to the user interaction data and the rendering status.

[0121] The strategy determination module 1004 is used to determine the resource loading strategy and memory hierarchical management strategy corresponding to each element according to the resource priority corresponding to each element.

[0122] The resource management module 1005 is used to load or unload resources for the target page based on the resource loading strategy and memory hierarchical management strategy corresponding to each element.

[0123] It should be noted that those skilled in the art will clearly understand that, for the convenience and brevity of description, the specific working processes of the above-described devices and modules can refer to the corresponding processes in the aforementioned method embodiments and will not be repeated here.

[0124] A computer-readable storage medium is also provided in an embodiment of the present application. The computer-readable storage medium stores a computer program. The computer program includes program instructions. The processor executes the program instructions to implement any page loading method provided in the embodiment of the present application.

[0125] For example, when the program is loaded by the processor, the following steps may be performed:

[0126] Determine user interaction data corresponding to the target page to be loaded in the display interface; parse the browser rendering pipeline of the display interface to obtain the rendering status of the display interface; determine the resource priority corresponding to each element in the target page based on the user interaction data and the rendering status; determine the resource loading strategy and memory hierarchical management strategy corresponding to each element based on the resource priority corresponding to each element; load or unload resources for the target page based on the resource loading strategy and memory hierarchical management strategy corresponding to each element.

[0127] The computer-readable storage medium may be an internal storage unit of the computer device in the aforementioned embodiment, such as a hard disk or memory of the computer device. The computer-readable storage medium may also be an external storage device of the computer device, such as a plug-in hard disk, a smart memory card (SMC), a secure digital card (SD card), a flash memory card, etc. equipped on the computer device.

[0128] Furthermore, the computer-readable storage medium may mainly include a program storage area and a data storage area, wherein the program storage area may store an operating system, an application required for at least one function, etc.; the data storage area may store data created according to the use of the blockchain node, etc.

[0129] The blockchain referred to in this application is a new application model for computer technologies such as distributed data storage, peer-to-peer transmission, consensus mechanisms, and encryption algorithms. Blockchain is essentially a decentralized database, a series of data blocks generated using cryptographic methods. Each data block contains information about a batch of network transactions, which is used to verify the validity of this information (to prevent counterfeiting) and generate the next block. Blockchain can include the underlying blockchain platform, the platform product service layer, and the application service layer.

[0130] The above are only specific embodiments of the present application, but the scope of protection of the present application is not limited thereto. Any person skilled in the art can easily conceive of various equivalent modifications or substitutions within the technical scope disclosed in this application, and such modifications or substitutions should be included in the scope of protection of this application. Therefore, the scope of protection of this application should be based on the scope of protection of the claims.

Claims

1. A page loading method, characterized in that: The method comprises: Determine user interaction data corresponding to the target page to be loaded in the display interface; Parsing the browser rendering pipeline of the display interface to obtain the rendering status of the display interface; Determining the resource priority corresponding to each element in the target page according to the user interaction data and the rendering state; Determine the resource loading strategy and memory hierarchical management strategy corresponding to each element according to the resource priority corresponding to each element; Based on the resource loading strategy and the memory hierarchical management strategy corresponding to each element, resources are loaded or unloaded on the target page.

2. The page loading method according to claim 1, characterized in that: The determining of user interaction data corresponding to the target page to be loaded in the display interface includes: Obtaining scrolling behavior data when a user performs a scrolling operation on the target page; Determining a click hotspot in the target page based on a click operation of the user on the target page; Acquiring environmental parameters of the display interface; The user interaction data is generated according to the scrolling behavior data, the click hotspots, and the environmental parameters.

3. The page loading method according to claim 2, characterized in that: The scrolling behavior data includes scrolling speed and scrolling acceleration; the acquiring of the scrolling behavior data when the user performs a scrolling operation on the target page includes: Capturing the target page based on a preset frame rate to obtain at least one frame of page content; Calculating the scrolling speed based on the vertical offset of the viewport and the time difference between the page contents of two adjacent frames to obtain the scrolling speed; The scrolling acceleration is determined according to the rate of change of the scrolling speed.

4. The page loading method according to claim 1, wherein: The browser rendering pipeline includes at least one processing stage, and the rendering status includes whether a resource blocking event occurs for an element in the display interface; parsing the browser rendering pipeline of the display interface to obtain the rendering status of the display interface includes: Obtaining the processing time of each of the processing stages; If the processing time of at least one of the processing stages is greater than the preset duration, a resource blocking tracing process is executed to determine whether a resource blocking event occurs for an element in the display interface and the blocking duration of the target element where the resource blocking event occurs.

5. The page loading method according to claim 4, characterized in that: The executing resource blocking tracing process to determine whether a resource blocking event occurs to an element in the display interface and the blocking duration of the element where the resource blocking event occurs includes: Determining a target rendering engine used by the display interface; Based on a preset correspondence between a rendering engine, a detection object, and a blocking trigger condition, determining, according to the target rendering engine, a target detection object and a target blocking trigger condition for detecting whether an element in the target detection object has a resource blocking event; If the processing time of the target detection object meets the target blocking trigger condition, it is determined that a resource blocking event occurs for an element in the target detection object, and the blocking duration of the element where the resource blocking event occurs is recorded.

6. The page loading method according to claim 1, characterized in that: The user interaction data includes scrolling behavior data and click hot spots, and the rendering status includes the blocking duration of the element on the display interface where a resource blocking event occurs; Determining the resource priority corresponding to each element in the target page according to the user interaction data and the rendering state includes: Determine a viewport distance value corresponding to each element according to the scrolling behavior data; Determine the importance score corresponding to each element according to the scrolling behavior data and the click hot zone; Determining a rendering blocking score corresponding to each element based on a blocking duration of each element where a resource blocking event occurs; The resource priority corresponding to each element is determined according to the viewport distance value, the importance score, and the rendering blocking score corresponding to each element.

7. The page loading method according to claim 6, characterized in that: The scrolling behavior data includes scrolling speed and scrolling acceleration; Determining the viewport distance value corresponding to each element according to the scrolling behavior data includes: Obtaining the current viewport of the display interface; Determining a predicted viewport of the display interface within a future preset time period based on the current viewport, the scrolling speed, and the scrolling acceleration; A viewport distance value of each element is determined according to an overlapping area between each element and the predicted viewport.

8. A page loading device, characterized in that: include: A user interaction data determination module is used to determine the user interaction data corresponding to the target page to be loaded in the display interface; A rendering pipeline parsing module, configured to parse the browser rendering pipeline of the display interface to obtain a rendering state of the display interface; A resource priority determination module, configured to determine the resource priority corresponding to each element in the target page according to the user interaction data and the rendering state; A strategy determination module, configured to determine a resource loading strategy and a memory hierarchical management strategy corresponding to each element according to the resource priority corresponding to each element; The resource management module is configured to load or unload resources for the target page based on the resource loading strategy and the memory hierarchical management strategy corresponding to each element.

9. A computer device, characterized in that: The computer device includes a memory and a processor; The memory is used to store computer programs; The processor is configured to execute the computer program and implement the page loading method according to any one of claims 1 to 7 when executing the computer program.

10. A computer-readable storage medium, characterized in that The computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the processor implements the page loading method according to any one of claims 1 to 7.

Images