Web resource intelligent priority loading method, system and device based on user behavior prediction and computer readable storage medium

Abstract

The application discloses a kind of based on user behavior prediction's Web resource intelligent priority loading method, system, equipment and computer readable storage medium, it is related to Web resource loading optimization technical field, to solve the problems of passive response loading, lag behind browsing rhythm, resource waste and poor experience in prior art.The method is by analyzing Web page structure and calculating the initial weight of logic area, track user behavior data and predict the area of attention, combined with initial weight, behavior prediction result and mouse data to calculate the final priority of resource loading;Adapt to network real-time state, user scrolling speed and page type dynamically adjust loading strategy, update priority in real time through event-driven mechanism.The application realizes resource forward-looking scheduling, improves loading efficiency, reduces loading delay and resource waste, adapts to different scenarios, optimizes user browsing smoothness.

Description

Technical Field

[0001] This application relates to the field of Web resource loading optimization technology, specifically to a method, system, device, and computer-readable storage medium for intelligent priority loading of Web resources based on user behavior prediction. Background Technology

[0002] With the rapid development of internet technology and the widespread adoption of smart mobile terminals, the use cases of web applications continue to expand, covering various forms such as static information display, dynamic interaction, rich media presentation, and infinite scrolling, becoming the core carrier for users to obtain information and achieve interaction. Users' demands for page loading speed and smooth interaction are increasing. Core WebVitals metrics (such as LCP maximum content rendering and INP input delay) not only directly affect user retention and satisfaction but also become key factors influencing website search rankings. Optimizing web page resource loading has become a core direction for enhancing the competitiveness of web applications. Currently, mainstream web resource loading technologies mainly include traditional viewport lazy loading and the Intersection Observer API solution. Traditional viewport lazy loading listens to page scrolling events and uses the getBounding Client Rect() method to calculate the element's position relative to the viewport, triggering resource loading when the element enters the viewport. The Intersection Observer API, as a native browser interface, asynchronously observes the intersection state changes of the target element and the viewport, triggering callback functions to achieve resource loading when the element enters or leaves the viewport.

[0003] However, these existing technologies have significant drawbacks. They all employ passive, responsive loading logic, triggering loading only based on the current viewport position. They cannot predict future user scrolling behavior or focus of interest. When users scroll quickly, resource loading often lags behind their browsing pace, resulting in blank gaps or loading delays, severely impacting user experience. For example, in social media or news applications, images and videos fail to load promptly when users scroll quickly, causing visual gaps and missing content. The loading timing is poorly designed, ignoring the time consumed by network request transmission and resource rendering. Loading typically only begins when an element just enters the viewport, meaning the user may have already scrolled away before the resources are fully loaded, resulting in wasted resources and unnecessary bandwidth consumption. They lack in-depth analysis and utilization of user behavior patterns, failing to intelligently adjust resource loading priorities based on multi-dimensional data such as scrolling speed, direction, mouse movement trajectory, and hover time. The loading strategy lacks flexibility and cannot adapt to different users' browsing habits and changing scenarios. It is difficult to balance performance optimization with user experience. Conservative loading strategies easily lead to untimely resource loading, affecting content visibility; aggressive strategies may cause redundant consumption of bandwidth and computing resources, reducing overall page performance. In summary, existing Web resource loading technologies rely on passive triggering mechanisms, lack the ability to accurately predict user behavior and intelligent scheduling mechanisms, resulting in low resource loading efficiency, poor user experience, and an inability to effectively adapt to different browsing scenarios and network conditions. Consequently, they fail to meet the comprehensive requirements of current Web applications for high performance, superior experience, and low resource consumption. Summary of the Invention

[0004] The purpose of this application is to provide a method, system, device, and computer-readable storage medium for intelligent priority loading of Web resources based on user behavior prediction, which has the advantages of improving resource loading efficiency, reducing loading latency, enhancing user experience, and adapting to different browsing scenarios and network conditions.

[0005] This application provides a method for intelligent priority loading of web resources based on user behavior prediction, including the following steps: Step S1. Perform structural analysis on the web application's pages, identify logical areas of the page and associate them with loadable resources, and calculate the initial weight of each logical area; Step S2. Track user behavior data on the user's end and predict the user's attention area based on the user behavior data; Step S3. Calculate the final priority of resource loading by combining the initial weights, user behavior prediction results, and mouse behavior data; Step S4. Obtain the real-time network status and schedule resource loading based on the real-time network status and final priority; Step S5. Switch the loading mode according to the user's scrolling speed to adapt to different browsing scenarios; Step S6. Identify the page types of the web application and adjust the loading strategy for different page types; Step S7. Update the final priority in real time through an event-driven mechanism to dynamically adjust resource loading and scheduling.

[0006] Further, step S1 includes: S11. Identify elements with the data-section attribute, data-zone attribute, semantic HTML elements, and elements with grid layout characteristics on the page as logical areas; S12. Identify loadable resources with the data-src attribute on the page and associate the loadable resources with the nearest logical region; S13. Calculate the initial weights of each logical region.

[0007] Furthermore, the initial weights in step S13 are calculated using the following formula: ; Among them, W_base is the base weight, with a value of 50; W_position is the position weight, with a value of 40 for the first screen area, 20 for the second screen area, and -10 for more distant positions; W_semantic is the semantic weight, with a value of 30 for the main element and -20 for the aside element; W_content is the content weight, with a value of min(number of media elements in the logical area × 5, 30).

[0008] Further, step S2 includes: S21. Listen for page scrolling events, mouse movement events, and mouse enter / exit events using passive event listeners, and collect scrolling speed, scrolling direction, mouse position, and hover time as user behavior data; S22. Perform flow limiting and debouncing processing on user behavior data, and use a FIFO queue to retain the 5 most recent scrolling history records; S23. Predict the user's attention area based on user behavior data and scrolling history.

[0009] Further, step S23 includes: S231. Through formula Calculate the scrolling speed, where distance is the difference between the current scrolling position and the previous scrolling position, and timeDiff is the difference between the current time and the previous scrolling time. S232. Through formula Calculate the average scrolling speed, where i ranges from 1 to n-1, and n is the number of scrolling history records; S233. Through formula Calculate the predicted rolling distance, where T_deceleration is the deceleration time factor, which is 300ms when the number of historical rolling records is ≥2, and 200ms otherwise. S234. Through formula Calculate the target scroll position, where P_last is the last scroll position, Direction is the scroll direction (1 for downward, -1 for upward), and α is the magnification factor. S235. Will The area to be focused on by the user is defined, where H_viewport is the viewport height.

[0010] Further, step S3 includes: S31. Through formula Calculate the mouse distance factor, where distance is the distance between the mouse and the resource; S32. Through formula Calculate the mouse hover time factor, where hoverTime is the mouse hover time; S33. Through formula Calculate the final priority, where W_zone is the initial weight, F_scroll is the scroll factor, and F_mouse is the sum of the mouse distance factor and the mouse hover time factor.

[0011] Further, step S4 includes: S41. Obtain the real-time network status through the Network Information API. The real-time network status includes effectiveType, downlink, and isSlow flag. The isSlow flag is true when effectiveType is slow-2g or 2g, and false otherwise. S42. Determine the maximum concurrent load count based on the isSlow flag. The maximum concurrent load count is 2 when the isSlow flag is true, and 5 otherwise. S43. When the final priority is ≥50, the corresponding resource is loaded immediately; when the final priority is <50, the corresponding resource is loaded through the requestIdleCallback method with a timeout of 2000ms. S44. The actual number of loads is determined by the formula: actual number of loads = min(maximum concurrent loads, mode limit).

[0012] Further, step S5 includes: S51. When the scrolling speed is greater than 2, switch to conservative mode, with a conservative mode limit of 3; when the scrolling speed is less than or equal to 2, switch to aggressive mode, with the mode limit being the number of resources to be loaded. S52. In conservative mode, the rolling factor is calculated using the following strategy: When the rect.bottom of the element containing the resource is greater than or equal to 0 and the rect.top is less than or equal to H_viewport. ; When the center of the resource element is located within the user's area of ​​focus. , where d_target is the distance from the center of the element to the center of the user's attention area; When the rect.top of the element containing the resource is greater than documentHeight - 2 × H_viewport, F_scroll = 5; In other cases, F_scroll = 0; S53. In aggressive mode, when the element containing the resource is within the user's attention area, the scrolling factor is calculated using the formula... calculate.

[0013] Further, step S6 includes: S61. Identify whether the page type is a static page or a dynamically loaded page; S62. Static page adaptation strategy: The initial weight W_base is kept at 50, the loading mode switching threshold is set to 2.0, and the priority update frequency is set to 100ms; S63. Dynamic page loading adaptation strategy: Listen for newly added DOM elements, reduce the initial weight of newly inserted logical areas by 20%, set the loading mode switching threshold to 2.5, and set the priority update frequency to 150ms.

[0014] Further, step S7 includes: S71. When the area a user is following is updated, a scroll Prediction Update event is generated and dispatched; S72. Listen for the scroll Prediction Update event to trigger a recalculation of the final priority; S73. Dynamically adjust the resource loading and scheduling strategy based on the recalculated final priority.

[0015] This application also provides a web resource intelligent priority loading system based on user behavior prediction, comprising: a page structure analysis module for performing structural analysis on the pages of a web application, identifying logical areas of the page and associating them with loadable resources, and calculating the initial weight of each logical area; a user behavior tracking and prediction module for tracking user behavior data on the user's end and predicting the areas of interest for the user based on the user behavior data; a priority calculation module for calculating the final priority of resource loading by combining the initial weights, user behavior prediction results, and mouse behavior data; a network status adaptation module for obtaining the real-time network status and scheduling resource loading according to the real-time network status and the final priority; a loading mode switching module for switching the loading mode according to the user's scrolling speed to adapt to different browsing scenarios; a page type adaptation module for identifying the page type of the web application and adjusting the loading strategy for different page types; and a real-time update module for updating the final priority in real time through an event-driven mechanism and dynamically adjusting resource loading scheduling.

[0016] This application also provides an apparatus including a processor and a memory; wherein the memory is used to store a computer program, and the processor is used to call and run the computer program from the memory, so that the apparatus executes the above-described intelligent priority loading method for Web resources based on user behavior prediction.

[0017] This application also provides a computer-readable storage medium storing instructions that, when executed on a computer, cause the computer to perform the above-described intelligent priority loading method for Web resources based on user behavior prediction.

[0018] Compared with the prior art, this application has the following beneficial effects: This application provides a method, system, device, and computer-readable storage medium for intelligent priority loading of web resources based on user behavior prediction. The method includes: performing structural analysis on the web application's page, identifying logical areas of the page and associating them with loadable resources, and calculating the initial weight of each logical area; tracking user behavior data on the user's end and predicting the user's focus areas based on the user behavior data; calculating the final priority of resource loading by combining the initial weights, user behavior prediction results, and mouse behavior data; acquiring real-time network status and scheduling resource loading according to the real-time network status and the final priority; switching loading modes according to the user's scrolling speed to adapt to different browsing scenarios; identifying the page type of the web application and adjusting the loading strategy for different page types; and updating the final priority in real time through an event-driven mechanism to dynamically adjust resource loading scheduling. By predicting user behavior and dynamically adjusting priorities and loading strategies, this method solves the problems of loading lag and poor user experience in existing technologies, and has the advantages of improving resource loading efficiency, reducing loading latency, enhancing user experience, and adapting to different browsing scenarios and network conditions. Attached Figure Description

[0019] The following description, in conjunction with the accompanying drawings, further illustrates this application: Figure 1 This is a flowchart illustrating a method for intelligent priority loading of Web resources based on user behavior prediction, provided as one embodiment of the present invention. Figure 2 This is a flowchart illustrating a method for intelligent priority loading of Web resources based on user behavior prediction, provided as one embodiment of the present invention. Figure 3 A schematic diagram of the structure of a Web resource intelligent priority loading system based on user behavior prediction, provided in one embodiment of the present invention; Figure 4 This is a schematic diagram of the structure of a device provided in one embodiment of the present invention. Detailed Implementation

[0020] The technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only a part of the embodiments of the present invention, and not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those of ordinary skill in the art without creative effort are within the scope of protection of the present invention.

[0021] It should be noted that if the embodiments of the present invention involve directional indicators (such as up, down, left, right, front, back, etc.), the directional indicators are only used to explain the relative positional relationship and movement of the components in a specific posture. If the specific posture changes, the directional indicators will also change accordingly.

[0022] Furthermore, if the embodiments of this invention involve descriptions such as "first" or "second," these descriptions are for descriptive purposes only and should not be construed as indicating or implying their relative importance or implicitly specifying the number of technical features indicated. Thus, features defined with "first" or "second" may explicitly or implicitly include at least one of those features. Additionally, the use of "and / or" or "and / or" throughout the text implies three parallel solutions. For example, "A and / or B" includes solution A, solution B, or a solution where both A and B are satisfied. Furthermore, the technical solutions of the various embodiments can be combined, but this must be based on the ability of those skilled in the art to implement them. When the combination of technical solutions is contradictory or impossible to implement, it should be considered that such a combination of technical solutions does not exist and is not within the scope of protection claimed by this invention.

[0023] Existing web resource loading technologies, such as viewport lazy loading and the Intersection Observer API, all employ passive, reactive loading logic. This fails to anticipate future user scrolling behavior and focus of interest, resulting in resource loading lagging behind the user's browsing pace, leading to blank spaces or loading delays. Inappropriate loading timing design also wastes resources. Furthermore, the lack of in-depth analysis and utilization of user behavior patterns results in inflexible loading strategies, making it difficult to balance performance optimization and user experience.

[0024] In this regard, such as Figure 1 As shown, this application proposes a method for intelligent priority loading of Web resources based on user behavior prediction, including the following steps: Step S1. Perform structural analysis on the web application's pages, identify logical areas of the page and associate them with loadable resources, and calculate the initial weight of each logical area; Step S2. Track user behavior data on the user's end and predict the user's attention area based on the user behavior data; Step S3. Calculate the final priority of resource loading by combining the initial weight, user behavior prediction results, and mouse behavior data; Step S4. Obtain the real-time network status, and schedule resource loading based on the real-time network status and the final priority; Step S5. Switch the loading mode according to the user's scrolling speed to adapt to different browsing scenarios; Step S6. Identify the page types of the web application and adjust the loading strategy for different page types; Step S7. Update the final priority in real time through an event-driven mechanism to dynamically adjust resource loading and scheduling.

[0025] In this embodiment, regarding page structure analysis, the web application's page structure is analyzed to identify logical regions and associate them with loadable resources, and the initial weight of each logical region is calculated. Specifically, page structure analysis can be achieved by traversing the DOM tree or parsing the HTML document to identify different content blocks on the page. For example, elements with specific tags can be identified as logical regions. Loadable resources can be identified by examining element attributes and associated with the nearest logical region. The initial weight can be calculated by simply assigning values ​​based on factors such as the logical region's position on the page, its size, or the amount of text it contains.

[0026] In user behavior tracking and prediction, user behavior data is tracked on the user's end, and this data is used to predict the user's area of ​​interest. User behavior data can be collected through browser APIs, such as listening to page scroll events and mouse movement events to obtain information such as the user's scroll position and mouse coordinates. Based on this collected data, heuristic rules or simple statistical models can be used to predict the page areas that the user is likely to focus on. For example, the current mouse position or the area recently scrolled to can be used as the user's area of ​​interest.

[0027] In terms of priority calculation, the final priority for resource loading is calculated by combining the initial weight, user behavior prediction results, and mouse behavior data. The initial weight reflects the inherent importance of the page content, the user behavior prediction results indicate the user's current focus of interest, and the mouse behavior data provides real-time feedback on the user's interaction with page elements. This information can be simply weighted and summed, or combined according to preset priority rules, to generate a comprehensive priority value for each loadable resource.

[0028] Regarding network state adaptation, the system obtains the real-time network status and schedules resource loading based on this status and the final priority. The real-time network status can be obtained through the browser's network information interface or by sending probe requests, such as determining whether the current network is fast or slow. Resource loading scheduling can determine which resources are loaded immediately, which are loaded late, and the number of resources loaded simultaneously, based on their final priority. For example, high-priority resources can be requested immediately, while low-priority resources can be loaded when the network is idle.

[0029] In some implementations, the loading mode switching is based on the user's scrolling speed to adapt to different browsing scenarios. The user's scrolling speed can be calculated from continuous scrolling events. When the user scrolls quickly, a loading mode can be switched to, in which resource loading may be more conservative to avoid unnecessary resource requests; when the user scrolls slowly or stops, another loading mode can be switched to, in which resource loading may be more aggressive to ensure that the content the user is about to see is presented in a timely manner.

[0030] Furthermore, regarding page type adaptation, the page types of the web application are identified, and loading strategies are adjusted for different page types. Page types can be identified by analyzing the page's URL, HTML structure, or content characteristics, such as distinguishing between news article pages and product list pages. Different loading strategies can be preset for different page types. For example, for pages with frequently updated content, resource status checks may need to be performed more frequently; for static pages, a more stable loading strategy can be adopted.

[0031] Finally, regarding the real-time update mechanism, the final priority is updated in real time through an event-driven mechanism to dynamically adjust resource loading scheduling. This event-driven mechanism can be implemented by triggering custom events when key user actions occur (such as scrolling or mouse hovering). When these events are triggered, the final priority of resources can be recalculated, and ongoing or upcoming resource loading tasks can be dynamically adjusted based on the new priority. For example, when a user suddenly hovers their mouse over a certain area, the priority of resources within that area can be immediately increased.

[0032] This embodiment effectively solves the problems of slow resource loading, low efficiency, and poor user experience in existing technologies by performing structural analysis of web pages, predicting user-focused areas, calculating resource loading priorities based on multi-dimensional data, and dynamically adjusting loading strategies according to network status, user scrolling speed, and page type. This achieves intelligent and proactive scheduling of web resource loading, significantly improving page loading speed and interaction smoothness, reducing unnecessary resource consumption, and thus optimizing the user browsing experience.

[0033] In the intelligent priority loading method for web resources, structural analysis of the web application's pages, identification of logical page regions and association with loadable resources, and calculation of the initial weight of each logical region are fundamental to determining the resource loading order. Therefore, the steps for structural analysis of the web application's pages, identification of logical page regions and association with loadable resources, and calculation of the initial weight of each logical region include: S11. Identify elements with the data-section attribute, data-zone attribute, semantic HTML elements, and elements with grid layout characteristics on the page as logical areas.

[0034] Logical regions refer to sections within a web page that have independent content or function, and are the focus of user attention. Identifying these regions helps in a more accurate understanding of the page structure. The `data-section` and `data-zone` attributes are custom data attributes that developers typically use to explicitly mark logical sections of a page; they can be identified through DOM traversal or selector queries. Semantic HTML elements, such as ``` <article> `、` <section> `、` <aside> `、` <nav> `、` <main> `、` <header> `、` <footer>Tags like `` inherently possess structural and semantic information, representing different content blocks or functional areas on a page, and can be directly identified through these tags. Elements with grid layout characteristics refer to visual areas formed by layout techniques such as CSSGrid or Flexbox. Whether an element constitutes a logical area can be inferred by analyzing its CSS styles (such as `display:grid;` or `display:flex;` and the layout of its child elements). For example, a `div` element whose child elements are arranged in a grid layout and which itself occupies a significant area on the page can be considered a logical area.

[0035] S12. Identify loadable resources with the data-src attribute on the page and associate the loadable resources with the nearest logical region.

[0036] Loadable resources refer to content such as images, videos, scripts, and stylesheets that need to be retrieved via network requests and rendered on the page. The `data-src` attribute is commonly used in lazy loading scenarios and indicates the actual URL of the resource. By DOM traversal or selector queries, all elements with the `data-src` attribute can be found; these elements typically represent resources that need to be loaded. For each identified loadable resource, its position on the page layout needs to be determined. This is done by calculating the geometric distance between the resource element and various logical area elements (e.g., center-to-center distance, overlap), or by using the DOM tree structure (e.g., which logical area the resource element is a child or sibling of), and associating it with the nearest logical area in the DOM tree structure or visual layout. For example, one can traverse the ancestor nodes of the resource to find the nearest logical area element; or calculate the overlap area or distance between the bounding box of the resource element and the bounding boxes of all logical areas to select the best match.

[0037] S13. Calculate the initial weights of each logical region.

[0038] Initial weight is a fundamental metric for measuring the importance of a logical region during the initial page load. It does not rely on real-time user behavior but is based on the page's structure and content characteristics. Its purpose is to provide an objective, pre-defined benchmark for subsequent dynamic priority adjustments, ensuring initial intelligent loading even in the absence of user behavior data. The calculation of initial weight can consider multiple factors. For example, a default base weight can be set for all logical regions to ensure each region has a non-zero initial priority. Simultaneously, different positional weights can be assigned based on the logical region's location on the page; for example, regions on the first screen are generally considered more important than those on other screens. Furthermore, the semantic information of the logical region can be considered, such as semantic elements containing core content (e.g., ```). <main>`) can obtain higher semantic weight, while auxiliary content (such as `) <aside>A content area containing `) might receive a lower weight. Content weight can be determined based on the number of media elements or the amount of text contained within the area, reflecting its content richness. By weighting these factors, an initial weight value reflecting the inherent importance of the logical area can be obtained.

[0039] Through the above embodiments, the identification method of logical regions is clearly defined. For example, by utilizing the data-section attribute, data-zone attribute, semantic HTML elements, and grid layout features, this application can more accurately divide the web page structure and avoid the inaccuracies caused by fuzzy identification. Simultaneously, associating loadable resources with the data-src attribute with the nearest logical region ensures the accuracy of resource attribution, allowing each resource to be correctly included in the priority management scope of its respective region. Based on this, the initial weight of each logical region is calculated, providing a solid and reasonable benchmark for subsequent dynamic priority adjustments based on user behavior. This refined page structure analysis and resource association mechanism significantly improves the accuracy and rationality of the initial priority calculation, thus laying an efficient and reliable foundation for the entire intelligent priority loading method for web resources, effectively avoiding problems such as low resource loading efficiency or poor user experience caused by inaccurate initial judgments.

[0040] Some implementations propose performing structural analysis on web application pages to identify logical regions and associate them with loadable resources, and calculating the initial weight of each logical region. However, in practical applications, how to scientifically and reasonably determine the initial weights of these logical regions to accurately reflect their inherent importance on the page is crucial to the accuracy of subsequent resource loading priority. Improperly set initial weights may lead to non-critical resources being loaded first, while resources in areas that users truly care about may experience loading delays, thus impacting user experience.

[0041] The initial weight W_initial is calculated using the following formula: .

[0042] Specifically, W_base is the base weight, with a value of 50. The base weight provides a unified and fixed initial importance benchmark for all logical regions, ensuring that each region has a certain initial priority without considering other factors. This avoids some regions being completely ignored due to other factors having too low a weight, thus providing a stable basis for subsequent priority adjustments.

[0043] `W_position` represents the positional weight, assigning different weight values ​​based on the logical area's visual location on the page. For example, the first screen area has a value of 40, the second screen area has a value of 20, and further positions have a value of -10. Positional weights aim to reflect user browsing habits; users typically prioritize the content on the first screen, followed by the content on the next screen. The first screen area generally refers to the portion the user sees immediately after the page loads without scrolling, determined by comparing the top position of the logical area (`rect.top`) with the current viewport height (`H_viewport`). The second screen area refers to the area immediately below the first screen, reachable by a slight scroll. By setting differentiated weights for areas in different positions, it ensures that content seen first by the user receives a higher loading priority.

[0044] W_semantic is the semantic weight, which is determined based on the semantic information of the HTML element corresponding to the logical region. For example, when the logical region corresponds to the `main` element, its value is 30; when the logical region corresponds to the `aside` element, its value is -20. Semantic weights utilize the element semantics defined in standards such as HTML5. The `main` element usually carries the main content of the page, so it is given a higher weight to ensure that core information is loaded first; while the `aside` element usually contains auxiliary information related to the main content but not core (such as sidebars, advertisements, etc.), so it is given a lower or even negative weight to reduce its initial loading priority.

[0045] W_content is the content weight, and its value is min(number of media elements in the logical area × 5, 30). The content weight is used to evaluate the richness of media elements within the logical area. Media elements typically include images (` `), video (` <video>`), audio (` <audio>The weight is calculated by counting the number of media elements within a logical area and multiplying it by a coefficient (e.g., 5) to quantify the information density and potential user appeal of that area. Setting a maximum value of 30 (e.g., when the number of media elements reaches 6) is to prevent an area from receiving an excessively high weight due to containing too many media elements, thus maintaining a balance in priority allocation.

[0046] Through the above embodiments, the initial weight calculation of logical regions is refined into a comprehensive consideration of basic weight, positional weight, semantic weight, and content weight. Basic weight ensures the minimum importance of all regions; positional weight assigns different priorities based on the visibility of regions within the viewport, giving higher initial weights to the first screen and regions about to enter the viewport; semantic weight utilizes the semantic information of HTML elements to increase the weight of core content regions (such as the `main` element) while decreasing the weight of auxiliary content regions (such as the `aside` element); and content weight reflects the information richness of a region based on the number of media elements within it. This multi-dimensional and refined initial weight calculation method can more accurately assess the inherent importance of each logical region of a web page, thus providing a more reasonable and reliable benchmark for subsequent resource loading priority calculations. This effectively solves the problem of low resource loading efficiency caused by improper initial weight settings, ensuring that the content that users are most likely to focus on and need is loaded first, significantly improving the loading efficiency of web resources and the user experience. In some implementations, the step of tracking user behavior data on the user end and predicting the user's attention area based on the user behavior data includes: listening to page scrolling events, mouse movement events, and mouse enter / leave events through a passive event listener, and collecting scrolling speed, scrolling direction, mouse position, and hover time as the user behavior data; performing rate limiting and debouncing processing on the user behavior data, and using a FIFO queue to retain the most recent 5 scrolling history records; and predicting the user's attention area based on the user behavior data and the scrolling history records.

[0047] S21. Listen for page scrolling events, mouse movement events, and mouse enter / exit events using passive event listeners, and collect scrolling speed, scrolling direction, mouse position, and hover time as user behavior data.

[0048] Passive event listeners are a special event listening mechanism that allows the browser to complete default behaviors, such as page scrolling, before the event handlers execute. This avoids page stuttering or delays that event handlers might cause, significantly improving page responsiveness and user experience. Page scrolling events, mouse movement events, and mouse enter / leave events are the most direct and frequent signals of user interaction with web pages, reflecting user browsing habits and potential interests. These events allow for real-time acquisition of the user's scrolling speed, scrolling direction, current mouse position, and the time spent on specific elements (hover time). This data forms the basis for building user behavior models and predicting areas of user interest. For example, rapid scrolling down might indicate that the user is looking for specific content, while a prolonged mouse hover over an area might suggest that the user is interested in the content within that area.

[0049] S22. Perform rate limiting and debouncing processing on user behavior data, and use a FIFO queue to retain the most recent 5 scrolling history records.

[0050] Since events like scrolling and mouse movement can be triggered frequently within a short period, neglecting to handle them would result in significant computational overhead and negatively impact page performance. Throttle mechanisms ensure that event handlers execute only once within a certain time interval, such as processing scroll events every 100 milliseconds, preventing excessively frequent triggering. Debounce mechanisms, on the other hand, only execute the handler once after a certain period of inactivity when events are triggered continuously, such as processing scroll events only 200 milliseconds after the user stops scrolling. This helps to capture the final state of user behavior. These two approaches effectively reduce unnecessary computation and improve data processing efficiency. Furthermore, using a first-in, first-out (FIFO) queue to retain the five most recent scrolling records ensures that the data used for prediction is always up-to-date and highly relevant, providing sufficient contextual information for analyzing user behavior trends while avoiding resource waste caused by storing excessive historical data.

[0051] S23. Predict the user's attention area based on user behavior data and scrolling history.

[0052] Based on collected and optimized user behavior data and scrolling history, various algorithms and models can be used to predict the page areas that users are currently or will be focusing on. These predictions can be based on heuristics; for example, if a user scrolls down quickly, their area of ​​focus is predicted to be a certain distance below the current viewport; if the mouse hovers over a certain area for a longer period, that area is considered the user's area of ​​focus. More sophisticated machine learning models can also be combined to identify the user's potential intent by analyzing historical behavior patterns. The goal of predicting user focus areas is to identify the parts of the page that users are most likely to view, read, or interact with, thereby providing precise guidance for subsequent resource loading priority scheduling.

[0053] Through the above embodiments, passive event listeners are used to capture user scrolling and mouse behavior in real time and comprehensively without affecting page smoothness, ensuring a smooth user experience. Rate limiting and debouncing effectively filter redundant data and reduce system load, while the FIFO queue mechanism ensures that the prediction model is always based on the latest and most representative user behavior history. This optimized user behavior data and scrolling history provides a solid and reliable foundation for subsequent prediction of user-focused areas, enabling the system to more accurately determine the user's browsing intent and interests. Therefore, in subsequent resource loading priority calculations, higher priority can be more accurately assigned to resources that the user is about to focus on, avoiding loading resources in areas the user is not interested in, significantly improving the loading efficiency of web resources and user-perceived performance, thereby optimizing the overall web application experience.

[0054] In some implementations, the specific method for predicting the user's area of ​​interest includes the following steps: S231. Through formula The scrolling speed is calculated, where `distance` is the difference between the current scroll position and the previous scroll position, and `timeDiff` is the difference between the current time and the previous scroll time. This step aims to quantify the instantaneous speed of user scrolling in real time, providing foundational data for subsequent predictions. By monitoring user scrolling events on the page, the system can capture dynamic changes in user scrolling behavior, thus laying the foundation for more refined user behavior analysis.

[0055] S232. Through formula The average scrolling speed is calculated, where i ranges from 1 to n-1, and n is the number of historical scrolling records. This step effectively smooths out fluctuations in the user's instantaneous scrolling speed by averaging historical scrolling data over a period of time, resulting in a more stable average speed that better reflects the user's overall scrolling trend. This averaging process helps reduce prediction errors caused by user input jitter or brief pauses, making the prediction results more robust.

[0056] S233. Through formula The predicted scrolling distance is calculated, where T_deceleration is the deceleration time factor, which is 300ms when the number of scrolling history records is ≥2, and 200ms otherwise. This step estimates the distance the user might continue scrolling before stopping, based on the user's average scrolling speed and a dynamically adjusted deceleration time factor. The deceleration time factor is adjusted according to the number of scrolling history records, reflecting adaptability to user behavior patterns: when there is sufficient historical data, a longer deceleration time factor is used for a longer prediction; otherwise, a shorter factor is used for a more conservative prediction.

[0057] S234. Through formula The target scroll position is calculated, where P_last is the last scroll position, Direction is the scroll direction (1 for downward, -1 for upward), and α is the magnification factor. This step, based on the user's last scroll position and combining the predicted scroll distance and direction, accurately calculates the target position where the user is likely to stop scrolling. The magnification factor α allows for fine-tuning of the predicted target position according to the actual application scenario and user experience requirements, ensuring that the preloaded area coverage is neither too large (leading to resource waste) nor too small (leading to insufficient preloading).

[0058] S235. Will The area of ​​interest for the user is determined, where H_viewport is the viewport height. This step, based on the calculated target scroll position and the current viewport height, defines a rectangular area as the region where the user is most likely to focus. This area is defined considering the user's typical downward scrolling habit; therefore, the target position is used as a reference point, extending upwards by half a viewport height and downwards by 1.5 viewport heights, forming an asymmetrical area of ​​interest. This asymmetrical design more accurately covers the content the user is about to see, optimizing the effectiveness of resource preloading.

[0059] By accurately calculating scroll speed, average scroll speed, and predicted scroll distance, and combining this with scroll direction and a dynamically adjusted deceleration time factor, the target scroll position that the user is about to focus on can be more accurately inferred. In particular, defining the user's focus area as an asymmetrical region centered on the target scroll position and extending downwards further better aligns with the user's actual browsing habits, especially when scrolling downwards, ensuring that content the user is about to see is loaded first. This refined prediction method significantly improves the accuracy of the user's focus area, enabling web resources to be preloaded more intelligently and promptly, effectively reducing user waiting time and improving overall browsing smoothness and user experience. In some implementations, mouse behavior data is incorporated when calculating the final priority of resource loading. Specifically, the method includes the following steps: S31. Through formula Calculate the mouse distance factor, where distance is the distance between the mouse and the resource; S32. Through formula Calculate the mouse hover time factor, where hoverTime is the mouse hover time; S33. Through formula Calculate the final priority, where W_zone is the initial weight, F_scroll is the scroll factor, and F_mouse is the sum of the mouse distance factor and the mouse hover time factor.

[0060] The mouse distance factor F_distance quantifies the spatial proximity between the mouse pointer and a specific loadable resource. This factor reflects the likelihood that a user's attention to a resource is higher the closer the mouse is to it. In its implementation, this is achieved through the formula... The calculation is performed. Here, `distance` represents the shortest distance between the mouse pointer and the boundary of the resource element. The closer the mouse is to the resource, the smaller the `distance` value and the larger the `F_distance` value, up to a maximum of 20. When the distance exceeds a certain threshold (e.g., 500 pixels), `F_distance` will approach 0, indicating that the mouse distance is too far and its impact on resource priority is negligible. This calculation method ensures that this factor only has a positive impact on priority when the mouse is sufficiently close to the resource, and the degree of impact increases as the distance decreases.

[0061] The mouse hover time factor F_hover quantifies the duration the mouse pointer stays over a specific loadable resource. This factor reflects the likelihood that a user will observe or contemplate a resource for an extended period; a longer hover time indicates greater user interest. In its implementation, this is achieved through a formula... The calculation is performed. Here, `hoverTime` represents the duration (in milliseconds) the mouse pointer remains over a resource element. This factor is set to a maximum value of 15 to prevent excessive priority inflation due to excessive hover time. When `hoverTime` reaches 2000 milliseconds (i.e., 2 seconds), `F_hover` reaches its maximum value of 15. This calculation method ensures that the longer the hover time, the larger the `F_hover` value, thus positively impacting resource priority, but its impact has an upper limit to balance other priority factors.

[0062] The final priority P_final is a metric used to determine the final loading order of each loadable resource after comprehensively considering multiple dimensions of information, including page structure, user scrolling behavior, and real-time mouse interaction. A higher value indicates that the resource should be loaded with higher priority. In the specific implementation, this is achieved through a formula... The calculation is performed. Here, W_zone is the initial weight, reflecting the static importance of the logical region where the resource resides. F_scroll is the scrolling factor, which dynamically adjusts the priority based on the user's scrolling speed and the resource's position relative to the viewport. F_mouse is the sum of the mouse distance factor and the mouse hover time factor, directly quantifying the impact of the user's real-time, fine-grained mouse interaction behavior on resource attention.

[0063] By introducing mouse distance and mouse hover time factors, real-time, fine-grained user mouse interaction behavior can be incorporated into the calculation of resource loading priority. Specifically, the mouse distance factor captures the spatial proximity between the user's mouse pointer and the resource; the closer the distance, the greater the user's potential interest. The mouse hover time factor reflects the user's intention to observe or think about a specific resource for a longer period; the longer the hover time, the clearer the interest. This real-time mouse behavior data is combined with existing initial weights and scrolling factors to calculate the final priority of resources through a weighted summation. This comprehensive priority calculation method allows the system to not only predict based on the static structure of the page and the user's macro-scrolling behavior but also to respond instantly to the user's micro-level, instantaneous interaction signals, thereby more accurately determining the resources that the user is currently most interested in. Therefore, this method can significantly improve the accuracy and responsiveness of resource loading, ensuring that resources that users are most likely to view or interact with immediately are loaded first, thus effectively improving the user experience and reducing the waiting time caused by resource loading delays.

[0064] In some implementations, step S4 includes: S41. Obtain the real-time network status through the Network Information API. The real-time network status includes effectiveType, downlink, and isSlow flag. The isSlow flag is true when effectiveType is slow-2g or 2g, and false otherwise. S42. Determine the maximum concurrent loading number based on the isSlow flag. When the isSlow flag is true, the maximum concurrent loading number is 2; otherwise, it is 5. S43. When the final priority is ≥50, the corresponding resource is loaded immediately; when the final priority is <50, the corresponding resource is loaded through the requestIdleCallback method, with a timeout of 2000ms. S44. The actual number of loads is determined by the formula: actual number of loads = min(maximum concurrent loads, mode limit).

[0065] In step S41, the real-time network status is obtained through the Network Information API. The Network Information API is a Web API that allows web applications to access information about a user's network connection, such as connection type, effective connection type (effectiveType), and downlink speed. Obtaining this real-time network status information, especially effectiveType and downlink, helps the system determine the quality of the current network environment. The isSlow flag is a Boolean value derived from effectiveType. When effectiveType is slow-2g or 2g, it indicates a slow network connection speed, and the isSlow flag is set to true; otherwise, it is false. This provides a simplified and intuitive basis for judging network quality, facilitating subsequent adjustments to the loading strategy.

[0066] In step S42, the maximum concurrent loading count is determined based on the isSlow flag. The maximum concurrent loading count refers to the number of resources that can be loaded concurrently at the same time. Dynamically adjusting the maximum concurrent loading count based on the isSlow flag is a key strategy for adapting to different network environments. When the isSlow flag is true, indicating a poor network environment, the maximum concurrent loading count is set to 2 to reduce network congestion and prevent further slowdowns in loading speed due to excessive simultaneous resource requests, thus ensuring the smooth loading of a small number of high-priority resources. When the isSlow flag is false, indicating a good network environment, the maximum concurrent loading count is set to 5 to fully utilize bandwidth, accelerate resource loading, and improve overall page rendering efficiency.

[0067] In step S43, resources are loaded differentially based on their final priority. Resources with a final priority ≥ 50 are considered highly relevant to the user or crucial to the core functionality of the page, and are therefore loaded immediately to ensure they are presented to the user as quickly as possible. Resources with a final priority < 50 are relatively less important and can be loaded later. The `requestIdleCallback` method is a browser API that allows developers to execute low-priority tasks when the browser is idle without blocking critical rendering paths. Setting a 2000ms timeout means that if the browser does not have enough time to execute the callback within 2000ms, it will still be forced to execute, preventing indefinite delays in resource loading. This strategy balances user experience and system resource utilization.

[0068] In step S44, the actual number of resources loaded is determined by the formula: Actual Loading Quantity = min(Maximum Concurrent Loading Quantity, Mode Limit Quantity). The determination of the actual loading quantity takes into account both network status and loading mode limitations. The maximum concurrent loading quantity is determined by the real-time network status (isSlow flag), reflecting the upper limit of concurrent requests that the current network environment can handle. The mode limit quantity may be determined by other factors (such as the loading mode determined by user scrolling speed, such as conservative or aggressive mode), reflecting a loading strategy based on user behavior. By taking the minimum of the two, it is ensured that resource loading will neither exceed the current network environment's carrying capacity nor violate the user behavior-based loading strategy, thereby achieving smarter and more robust resource scheduling.

[0069] By acquiring the valid type and download speed of network connections and determining network slowness accordingly, the system can intelligently adjust the maximum concurrent loading count. This avoids network congestion caused by excessive requests when network conditions are limited, prioritizing the loading of critical resources. Conversely, when network conditions are favorable, it fully utilizes bandwidth to accelerate overall resource loading. Furthermore, by considering the final priority of resources, high-priority resources are loaded immediately, while low-priority resources are loaded during browser idle time, further optimizing the timing and efficiency of resource loading. This adaptive resource loading scheduling mechanism significantly improves the user's browsing experience under different network environments and effectively balances resource loading speed with system performance consumption.

[0070] In some implementations, a loading mode is switched based on the user's scrolling speed to adapt to different browsing scenarios. Specifically, this solution includes the following steps: The system dynamically switches loading modes based on the user's scrolling speed. When the scrolling speed is greater than 2, the system switches to conservative mode, where the limit value is 3. This means that when the user quickly browses the page, the system limits the number of resources loaded simultaneously to avoid unnecessary resource consumption and prioritizes the rapid rendering of resources within the current viewport. Conversely, when the scrolling speed is less than or equal to 2, the system switches to aggressive mode, where the limit value is the number of resources to be loaded. This means that when the user browses slowly or lingers, the system more actively preloads resources to ensure that the content the user is about to see is rendered in a timely manner, improving browsing smoothness.

[0071] In conservative mode, the calculation of the scroll factor F_scroll employs a more refined strategy. When the rect.bottom of the resource element is greater than or equal to 0 and the rect.top is less than or equal to H_viewport, i.e., when the resource element is located within or partially within the current viewport, the formula for calculating F_scroll is as follows: This formula causes the resource priority within the viewport to decrease appropriately as the scrolling speed v_scroll increases, to accommodate scenarios where users browse quickly. When the center of the resource element is located within the user's attention area, the formula for calculating F_scroll is... Where d_target is the distance from the center of the element to the center of the user's attention region. This ensures that even in conservative mode, resources within the user's predicted attention region receive higher priority, with resources closer to the center of the attention region having even higher priority. When the rect.top of the element containing the resource is greater than... When resource elements are located near the bottom of the page, F_scroll is set to 5. This provides a basic loading priority for resources at the bottom of the page, preventing delayed loading of bottom content. Otherwise, F_scroll is set to 0, indicating a lower loading priority.

[0072] In aggressive mode, when the element containing the resource is located within the user's attention area, the scroll factor F_scroll is determined by the formula... The system performs calculations. In this mode, the system tends to aggressively load resources within the user's area of ​​interest. The slower the scrolling speed (v_scroll), the larger the scrolling speed (F_scroll), thus giving these resources a higher loading priority to maximize the preloading effect and reduce user waiting time.

[0073] Through the above embodiments, when a user scrolls quickly, the system enters a conservative mode, limiting the number of concurrent loads and finely calculating the scroll factor to prioritize loading core resources within the viewport and predicted areas of interest. This effectively avoids unnecessary resource waste and improves page responsiveness. When the user scrolls slowly or stays on the page, the system switches to an aggressive mode, more proactively preloading resources within the user's area of ​​interest, significantly reducing user waiting time and providing a smoother and more seamless browsing experience. This dynamically adaptive loading mechanism not only optimizes network resource utilization but also significantly improves users' perceived performance and satisfaction with web applications.

[0074] This embodiment presents a web resource intelligent priority loading method based on user behavior prediction. It analyzes the structure of a web application page, identifies logical areas and associates them with loadable resources, and calculates the initial weight of each logical area. It tracks user behavior data on the user's end and predicts the user's focus areas based on this data. It then calculates the final priority of resource loading by combining the initial weights, user behavior prediction results, and mouse behavior data. The method acquires real-time network status and schedules resource loading according to the real-time network status and the final priority. It switches loading modes based on user scrolling speed to adapt to different browsing scenarios. Finally, it updates the final priority in real-time through an event-driven mechanism to dynamically adjust resource loading scheduling. However, in practical applications, web pages exist in various types, such as static pages with relatively fixed content and dynamically loaded pages with frequently updated content. Using a uniform loading strategy may not adequately adapt to the characteristics of different page types, leading to poor resource loading efficiency or a degraded user experience. For example, for dynamically loaded pages, their DOM structure may change frequently; without differentiation, newly inserted DOM elements may not receive timely or appropriate priority processing.

[0075] To further optimize the resource loading strategy, step S6 includes: S61. Identifying whether the page type is a static page or a dynamically loaded page; S62. Static page adaptation strategy: the initial weight W_base is kept at 50, the loading mode switching threshold is set to 2.0, and the priority update frequency is set to 100ms; S63. Dynamic page adaptation strategy: listening for newly added DOM elements, reducing the initial weight of newly inserted logical areas by 20%, setting the loading mode switching threshold to 2.5, and setting the priority update frequency to 150ms.

[0076] Specifically, in step S61, the page type is identified as either a static page or a dynamically loaded page. Page type identification aims to distinguish between static pages with relatively fixed content and a stable DOM structure, and dynamically loaded pages where content updates dynamically based on user interaction or asynchronous requests, and the DOM structure changes frequently. This can be achieved by analyzing the initial loading behavior of the page, such as whether there are numerous asynchronous data requests (e.g., AJAX, Fetch API) or frequent DOM operations (e.g., monitoring DOM changes via Mutation Observer). Additionally, preset page routing rules or URL pattern matching can also be used to assist in the judgment. For example, single-page applications (SPAs) are typically identified as dynamically loaded pages, while news or article detail pages in traditional multi-page applications may be identified as static pages.

[0077] In step S62, a specific adaptation strategy is adopted for static pages. Because static pages have relatively stable content and structure, user behavior prediction and resource priority calculation can be based on relatively fixed parameters. Specifically, the initial weight W_base is kept at 50, meaning that for static pages, the basic importance of all logical areas remains consistent with the baseline value when calculating the initial weight, and does not change due to page type. The loading mode switching threshold is set to 2.0. This threshold is used to determine the user's scrolling speed. When the scrolling speed exceeds 2.0, the system may switch from aggressive mode to conservative mode. For static pages, users typically browse at a relatively stable speed, and the threshold of 2.0 can effectively balance the needs of preloading and on-demand loading. The priority update frequency is set to 100ms. This frequency determines the cycle in which the system recalculates resource loading priorities. For static pages with little content change, a 100ms update frequency is sufficient to respond to changes in user behavior while avoiding unnecessary frequent calculation overhead.

[0078] In step S63, a different adaptation strategy is adopted for dynamically loaded pages. Dynamically loaded pages, due to their potentially frequent changes in content and structure, require a more flexible strategy to handle new content and adapt to user behavior. Specifically, by listening for newly added DOM elements, changes in the DOM tree can be monitored in real time, allowing the system to detect when new DOM elements are added to the page. This can be achieved using the Mutation Observer API. The initial weight of newly inserted logical areas is reduced by 20%, because these areas are often content that the user hasn't directly focused on yet, or content that loads only after the user scrolls to a specific position. Reducing their initial weight avoids assigning them high priority too early, thus prioritizing loading existing content on the page that is more likely to be noticed by the user. For example, if the initial weight W_initial of a newly inserted logical area was originally 100, it will be reduced by 20% to 80. The loading mode switching threshold is set to 2.5, as users of dynamically loaded pages may scroll faster while waiting for content to load or refresh compared to static pages. Raising the threshold to 2.5 allows users to maintain an aggressive loading mode even at slightly faster scrolling speeds, addressing the user experience challenges posed by dynamic content loading. A priority update frequency of 150ms is set because dynamically loaded page content changes frequently, and user behavior may be more complex. The 150ms update frequency is slightly lower than that of static pages, aiming to balance responsiveness and computational overhead. A slightly longer update cycle avoids priority calculation jitter caused by frequent DOM changes, while still providing good responsiveness to user behavior.

[0079] Through the above embodiments, for static pages, stable parameter configurations ensure efficient and stable resource loading, avoiding unnecessary computational resource consumption. For dynamically loaded pages, by real-time monitoring of newly added DOM elements and adjusting their initial weights, premature loading of newly inserted content that has not yet been noticed by the user is effectively avoided, thereby optimizing resource allocation. Simultaneously, adjusting the loading mode switching threshold and priority update frequency for different page types allows the system to better adapt to users' browsing habits and interaction patterns on different types of pages. This ensures that web resources are loaded more intelligently and efficiently, significantly improving the user's browsing experience in various web application scenarios.

[0080] In some implementations, the final priority is updated in real time through an event-driven mechanism to dynamically adjust resource loading scheduling. Specifically, when the user's attention area is updated, the system generates and dispatches a "scroll Prediction Update" event. "User attention area update" refers to a significant change in the area of ​​the page the system re-predicts based on real-time user scrolling speed, scrolling direction, mouse position, hover time, and other behavioral data compared to the previously predicted area. For example, if a user quickly scrolls the page and then suddenly stops, or if the mouse hovers over a new area for an extended period, the system will re-evaluate and determine the new user attention area. After detecting an update to the user attention area, the system creates a custom event called "scroll Prediction Update". This event carries information about the updated user attention area and is broadcast to all modules in the system that have registered the event listener through an event dispatch mechanism (e.g., using the browser's `CustomEvent` interface or an internal publish / subscribe pattern). This ensures that other relevant components in the system can promptly detect changes in the user's attention area.

[0081] Subsequently, the system listens for the scroll Prediction Update event, triggering a recalculation of the final priority. Specifically, "listening for the scroll Prediction Update event" means that the priority calculation module or other related scheduling modules in the system continuously monitor and wait for the occurrence of the "scroll Prediction Update" event. Once this event is dispatched, the listener will immediately capture this signal. Upon receiving the "scroll Prediction Update" event, the system will immediately initiate a re-evaluation process of the "final priority" of all resources to be loaded. This process will again comprehensively consider the latest initial weights, user behavior prediction results (especially the updated user attention area), and mouse behavior data to generate a new resource loading priority that reflects the current user intent.

[0082] Based on the recalculated final priority, the system dynamically adjusts its resource loading scheduling strategy. "Based on the recalculated final priority" means using the latest resource priority list reflecting the user's current focus as the basis. "Dynamically adjusting the resource loading scheduling strategy" means the system modifies or optimizes the current resource loading plan in real time based on this latest priority set. This may include: immediately pausing loading resources whose priority has been reduced, and prioritizing resources with significantly increased priority; adjusting the order of resources in the concurrent loading queue; or re-determining which resources need to be loaded immediately and which can be delayed based on the new priority threshold. This dynamic adjustment ensures that the resource loading process can flexibly adapt to rapid changes in user behavior, always placing the most relevant resources in a priority loading position.

[0083] Through the above embodiments, when the system detects an update in the user's area of ​​interest, it immediately generates and dispatches a `scroll Prediction Update` event. The priority calculation module listens for this event in real time, and upon receiving it, triggers a recalculation of the "final priority" of all resources to be loaded. Based on these latest and most accurate priorities, the resource loading scheduling strategy can be dynamically adjusted in real time. This mechanism ensures that resource loading is always highly consistent with the user's real-time focus, avoiding loading delays or invalid loading caused by changes in user behavior. For example, when a user quickly scrolls to a new area of ​​the page, the system can quickly identify and prioritize loading resources in that area, instead of wasting bandwidth loading resources in areas the user has already scrolled through, thereby significantly improving the user's perceived page loading speed and smoothness, and greatly optimizing the user experience.

[0084] like Figure 2 As shown, this application also proposes a Web resource intelligent priority loading system based on user behavior prediction. This system includes a page structure analysis module for analyzing the structure of a Web application's page, identifying logical areas of the page and associating them with loadable resources, and calculating the initial weight of each logical area; a user behavior tracking and prediction module for tracking user behavior data on the user's end and predicting the user's focus area based on this data; a priority calculation module for calculating the final priority of resource loading by combining the initial weights, user behavior prediction results, and mouse behavior data; a network status adaptation module for obtaining real-time network status and scheduling resource loading based on the real-time network status and the final priority; a loading mode switching module for switching loading modes according to the user's scrolling speed to adapt to different browsing scenarios; a page type adaptation module for identifying the page type of the Web application and adjusting the loading strategy for different page types; and a real-time update module for updating the final priority in real-time through an event-driven mechanism to dynamically adjust resource loading scheduling.

[0085] like Figure 3 As shown in the embodiments of this application, a device is also disclosed, including a processor 20 and a memory 10; wherein, the memory is used to store a computer program 30, and the processor 20 is used to call and run the computer program 30 from the memory 10, so that the device executes the above-described intelligent priority loading method for Web resources based on user behavior prediction.

[0086] By combining the processor and memory to collaboratively execute intelligent loading logic, the user behavior prediction mechanism is deeply integrated into the device's operational layer. This solves the key problems of resource loading lag, inefficiency, and insufficient scenario adaptation caused by passive responsive loading in existing technologies, achieving the effect of proactively scheduling web resources and significantly improving page loading speed and interaction smoothness. Specifically, the device uses a computer program pre-stored in the memory to enable the processor to dynamically analyze the initial weights of page logical areas, track user behavior data to predict user attention areas, and calculate the final priority of resource loading based on mouse behavior data and real-time network status. Based on this, the processor automatically switches between conservative and aggressive modes according to the user's scrolling speed, while identifying page types to adapt to differentiated strategies for static or dynamically loaded pages. Finally, an event-driven mechanism updates priorities in real time and dynamically adjusts resource loading scheduling.

[0087] This application also provides a computer-readable storage medium storing instructions that, when executed on a computer, cause the computer to perform the aforementioned intelligent priority loading method for Web resources based on user behavior prediction. The core innovation of this embodiment lies in storing the intelligent priority loading method for Web resources based on user behavior prediction as instructions in a computer-readable storage medium, thereby achieving accurate prediction of user behavior and intelligent resource scheduling, thus improving resource loading efficiency and optimizing user experience. Specifically, the computer-readable storage medium, through the stored instructions, enables the computer to execute a complete technical process including page structure analysis, user behavior tracking and prediction, priority calculation, network status adaptation, loading mode switching, page type adaptation, and real-time updates. Because this technical solution comprehensively utilizes user behavior prediction and dynamic priority scheduling mechanisms, it can proactively predict user-focused areas and intelligently adjust the resource loading order, effectively avoiding the resource loading lag and blank gap problems caused by traditional passive responsive loading. Simultaneously, by combining real-time network status and page type characteristics for adaptive strategy adjustment, it ensures an optimal balance between resource loading efficiency and user experience under different network environments and browsing scenarios. Through the above embodiments, unnecessary resource requests and bandwidth consumption are significantly reduced, page loading speed and interaction smoothness are improved, and ultimately intelligent and forward-looking scheduling of Web resource loading is achieved.

[0088] The above description is merely an embodiment of this application and is not intended to limit the scope of protection of this application. Various modifications and variations can be made to this application by those skilled in the art. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of this application should be included within the scope of protection of this application.< / audio> < / video> < / aside> < / main> < / footer> < / header> < / main> < / nav> < / aside> < / section> < / article>

Claims

1. A method for intelligent priority loading of Web resources based on user behavior prediction, characterized in that, Includes the following steps: Step S1. Perform structural analysis on the web application's pages, identify logical areas of the page and associate them with loadable resources, and calculate the initial weight of each logical area; Step S2. Track user behavior data on the user end, and predict the user's attention area based on the user behavior data; Step S3. Calculate the final priority of resource loading by combining the initial weights, user behavior prediction results, and mouse behavior data; Step S4. Obtain the real-time network status, and schedule resource loading according to the real-time network status and the final priority; Step S5. Switch the loading mode according to the user's scrolling speed to adapt to different browsing scenarios; Step S6. Identify the page types of the web application and adjust the loading strategy for different page types; Step S7. Update the final priority in real time through an event-driven mechanism to dynamically adjust resource loading and scheduling.

2. The intelligent priority loading method for Web resources based on user behavior prediction as described in claim 1, characterized in that, Step S1 includes: S11. Identify elements with data-section attributes, data-zone attributes, semantic HTML elements, and elements with grid layout characteristics on the page as the logical area; S12. Identify loadable resources with the data-src attribute in the page, and associate the loadable resources with the nearest logical region; S13. Calculate the initial weights of each logical region; Step S2 includes: S21. Listen for page scrolling events, mouse movement events, and mouse enter / leave events using a passive event listener, and collect scrolling speed, scrolling direction, mouse position, and hover time as the user behavior data; S22. Perform flow limiting and debouncing processing on the user behavior data, and use a FIFO queue to retain the most recent 5 scrolling history records; S23. Predict the user's attention area based on the user behavior data and scrolling history.

3. The intelligent priority loading method for Web resources based on user behavior prediction as described in claim 1, characterized in that, Step S3 includes: S31. Through formula Calculate the mouse distance factor, where distance is the distance between the mouse and the resource; S32. Through formula Calculate the mouse hover time factor, where hoverTime is the mouse hover time; S33. Through formula Calculate the final priority, where W_zone is the initial weight, F_scroll is the scroll factor, and F_mouse is the sum of the mouse distance factor and the mouse hover time factor.

4. The intelligent priority loading method for Web resources based on user behavior prediction as described in claim 1, characterized in that, Step S4 includes: S41. Obtain the real-time network status through the Network Information API. The real-time network status includes effectiveType, downlink, and isSlow flag. The isSlow flag is true when effectiveType is slow-2g or 2g, and false otherwise. S42. Determine the maximum concurrent loading number based on the isSlow flag. When the isSlow flag is true, the maximum concurrent loading number is 2; otherwise, it is 5. S43. When the final priority is ≥50, the corresponding resource is loaded immediately; when the final priority is <50, the corresponding resource is loaded through the requestIdleCallback method, with a timeout of 2000ms. S44. The actual number of loads is determined by the formula: actual number of loads = min(maximum concurrent loads, mode limit).

5. The intelligent priority loading method for Web resources based on user behavior prediction as described in claim 1, characterized in that, Step S5 includes: S51. When the scrolling speed > 2, switch to conservative mode, and the conservative mode limit value is 3; when the scrolling speed ≤ 2, switch to aggressive mode, and the mode limit value is the number of resources to be loaded. S52. In conservative mode, the rolling factor is calculated using the following strategy: When the rect.bottom of the element containing the resource is greater than or equal to 0 and the rect.top is less than or equal to H_viewport. When the center of the element containing the resource is located within the user's attention area. Where d_target is the distance from the center of the element to the center of the user-focused area; When the rect.top of the element containing the resource is greater than documentHeight - 2 × H_viewport, F_scroll = 5; In other cases, F_scroll = 0; S53. In aggressive mode, when the element containing the resource is located within the user's attention area, the scrolling factor is calculated using the formula... calculate.

6. The intelligent priority loading method for Web resources based on user behavior prediction as described in claim 1, characterized in that, Step S6 includes: S61. Identify whether the page type is a static page or a dynamically loaded page; S62. Static page adaptation strategy: The initial weight W_base is kept at 50, the loading mode switching threshold is set to 2.0, and the priority update frequency is set to 100ms; S63. Dynamic page loading adaptation strategy: Listen for newly added DOM elements, reduce the initial weight of newly inserted logical areas, and set the loading mode switching threshold and priority update frequency.

7. The intelligent priority loading method for Web resources based on user behavior prediction as described in claim 1, characterized in that, Step S7 includes: S71. When the user's attention area is updated, a scroll Prediction Update event is generated and dispatched; S72. Listen for the scroll Prediction Update event and trigger a recalculation of the final priority; S73. Adjust the resource loading and scheduling strategy dynamically based on the recalculated final priority.

8. A Web resource intelligent priority loading system based on user behavior prediction, characterized in that, include: The page structure analysis module is used to perform structural analysis on the pages of web applications, identify logical areas of the page and associate them with loadable resources, and calculate the initial weight of each logical area. The user behavior tracking and prediction module is used to track user behavior data on the user end and predict the user's attention area based on the user behavior data. The priority calculation module is used to calculate the final priority of resource loading by combining the initial weight, user behavior prediction results, and mouse behavior data. The network status adaptation module is used to obtain the real-time network status and schedule resource loading according to the real-time network status and the final priority. The loading mode switching module is used to switch the loading mode according to the user's scrolling speed to adapt to different browsing scenarios; The page type adaptation module is used to identify the page types of a web application and adjust the loading strategy for different page types. The real-time update module is used to update the final priority in real time through an event-driven mechanism and dynamically adjust the resource loading schedule.

9. A device, characterized in that, Including processor and A memory; wherein the memory is used to store a computer program, and the processor is used to call and run the computer program from the memory, causing the device to execute the intelligent priority loading method for Web resources based on user behavior prediction as described in any one of claims 1-7.

10. A computer-readable storage medium, characterized in that, The storage medium stores instructions that, when executed on a computer, cause the computer to perform the intelligent priority loading method for Web resources based on user behavior prediction as described in any one of claims 1-7.

Images