Front-end picture optimization intelligent loading method and system

Abstract

The application discloses a front-end picture optimization intelligent loading method and system, and specifically comprises the following steps: based on an initial state, collecting user browsing interaction features, and inputting the initial state and the user browsing interaction features into a client lightweight prediction model to obtain a prediction probability of a candidate picture entering a viewport; based on the prediction probability, determining an attention weight by using a camera gaze result or hovering, touch pressing and text selection behaviors authorized by the user, correcting the prediction probability according to the attention weight to generate a loading priority; generating a hierarchical loading instruction according to the loading priority, an importance label and multi-target strategy parameters; obtaining a loading execution feedback corresponding to the hierarchical loading instruction, and calculating reward values corresponding to a first screen time delay, interaction fluency and traffic consumption according to the loading execution feedback. The application can realize accurate on-demand loading of picture resources and intelligent upgrading of quality according to attention on the premise of guaranteeing the first screen speed and the interaction fluency.

Description

Technical Field

[0001] This invention relates to the field of Internet front-end performance optimization technology, and in particular to a front-end image optimization intelligent loading method and system. Background Technology

[0002] With the widespread adoption of mobile internet and rich media applications, the proportion of bandwidth and rendering resources occupied by images on web pages continues to rise. To improve loading performance and user experience, the industry commonly adopts solutions such as first-screen priority loading, lazy loading of images, preloading based on viewport distance, and dynamically selecting image quality based on network bandwidth. Some solutions also adjust the order of image requests based on factors such as user scrolling speed and terminal resolution.

[0003] However, the existing solutions mentioned above still generally have the following shortcomings in actual deployment: First, the user browsing intent recognition dimension is too narrow: it relies solely on scrolling speed or the relative position of the viewport and the image to determine whether loading is needed. This makes it difficult to effectively distinguish between different browsing behavior patterns such as fast browsing, inertial scrolling, reviewing content, and focusing on a local area. This can easily lead to a large amount of invalid preloading or loading delays on content that users are actually interested in.

[0004] Second, resource scheduling lacks comprehensive constraints on terminal status: existing solutions typically do not fully consider factors such as terminal processor load, memory pressure, battery power, power saving mode, ambient light, and screen display capabilities. This results in high-quality image decoding and transmission being triggered even under unfavorable conditions such as high load or low battery, further exacerbating the system burden and affecting the smoothness of page interaction.

[0005] Third, core images and decorative images are not effectively distinguished: the main images of articles, main images of products, advertising images, background images, and decorative images on the page often use the same loading rules. Core content images may not be displayed clearly in time because decorative images occupy bandwidth, while decorative images may be given too high a loading priority, resulting in wasted resources.

[0006] Fourth, there is a lack of attention-based quality scheduling mechanisms: even if an image has entered the viewport, it does not necessarily mean that it has gained the user's visual attention; on the contrary, the area pointed to by the user through hovering, long pressing, text selection, or eye gaze often requires higher quality image content. Existing technologies struggle to dynamically adjust image quality upgrade strategies based on the user's focus of attention.

[0007] Fifth, the loading strategy relies on fixed thresholds and has poor adaptability: common solutions use fixed thresholds such as scrolling speed and viewport distance to determine whether to load low-resolution or high-resolution images, which makes it difficult to dynamically adapt to different network environments, device capabilities, page layouts and individual browsing habits, resulting in the loading strategy being rigid in complex and ever-changing real-world applications.

[0008] Sixth, lack of closed-loop optimization capability: Existing methods usually only focus on the single loading process, without systematically evaluating and providing feedback on first-screen latency, interaction stuttering, actual traffic consumption, and the proportion of invalid preloading, and cannot dynamically correct and evolve subsequent strategies based on historical loading performance.

[0009] The aforementioned problems make it difficult for existing image loading solutions to meet the growing user experience requirements in terms of accuracy, smoothness, resource efficiency, and personalization. Summary of the Invention

[0010] The purpose of this invention is to provide a front-end image optimization intelligent loading method and system that can achieve on-demand accurate loading of image resources and intelligent quality upgrade based on user attention, while ensuring first-screen speed and smooth interaction, thereby solving at least one of the aforementioned problems in the prior art.

[0011] In a first aspect, the present invention provides a front-end image optimization intelligent loading method, the method specifically including: The characteristics of the terminal's operating environment are obtained, and an initial state is formed by combining the page area where the image is located, its importance tag, and historical browsing preference parameters. Based on the initial state, user browsing interaction features are collected, and the initial state and user browsing interaction features are input into the client's lightweight prediction model to obtain the predicted probability of candidate images entering the viewport. Based on the predicted probability, attention weights are determined using user-authorized camera gaze results or hovering, touch pressing, and text selection behaviors. The predicted probability is then adjusted based on the attention weights to generate a loading priority. A tiered loading instruction is generated based on loading priority, importance label, and multi-objective strategy parameters. The tiered loading instruction is used to request the lowest quality version of the candidate image and to request a high-quality version when the quality upgrade conditions are met. Obtain the loading execution feedback corresponding to the hierarchical loading instruction, and calculate the reward value corresponding to the first screen latency, interaction smoothness and traffic consumption based on the loading execution feedback. The reward value is used to update the multi-objective strategy parameters and historical browsing preference parameters to adjust the hierarchical loading instructions of subsequent candidate images.

[0012] Secondly, this invention provides a front-end image optimization intelligent loading system, the system specifically comprising: The initial state determination module is used to obtain the characteristics of the terminal's operating environment and combine them with the page area where the image is located, its importance tag, and historical browsing preference parameters to form the initial state; The prediction probability calculation module is used to collect user browsing interaction features based on the initial state, and input the initial state and user browsing interaction features into the client's lightweight prediction model to obtain the predicted probability of candidate images entering the viewport. The priority generation module is used to determine attention weights based on the predicted probability, using user-authorized camera gaze results or hovering, touch pressing and text selection behaviors, and to adjust the predicted probability according to the attention weights to generate loading priority. The hierarchical loading instruction module is used to generate hierarchical loading instructions based on loading priority, importance labels and multi-objective strategy parameters. The hierarchical loading instructions are used to request the lowest quality version of the candidate image and request a high quality version when the quality upgrade conditions are met. The execution feedback update module is used to obtain the loading execution feedback corresponding to the hierarchical loading instructions, and calculate the reward value corresponding to the first screen latency, interaction smoothness and traffic consumption based on the loading execution feedback. The reward value is used to update the multi-objective strategy parameters and historical browsing preference parameters to adjust the hierarchical loading instructions of subsequent candidate images.

[0013] Thirdly, the present invention provides a computer device, including: a memory and a processor, and a computer program stored in the memory, wherein when the computer program is executed on the processor, it implements the front-end image optimization intelligent loading method as described in any of the above methods.

[0014] Fourthly, the present invention provides a computer-readable storage medium having a computer program stored thereon, wherein the computer program, when executed by a processor, implements the front-end image optimization intelligent loading method as described in any of the above methods.

[0015] Compared with the prior art, the present invention has at least one of the following technical effects: 1. By integrating terminal environment awareness, user intent prediction, attention awareness, image importance classification, and multi-objective adaptive decision-making, and achieving continuous optimization through closed-loop feedback, a highly intelligent, highly responsive, and low-consumption front-end image loading method is constructed. It can achieve on-demand precise loading of image resources and intelligent quality upgrade based on attention, while ensuring the speed of the first screen and the smoothness of interaction, significantly improving the user experience, and effectively reducing invalid traffic and terminal resource consumption.

[0016] 2. By comprehensively analyzing behavioral data such as page displacement changes, interaction positions, and duration, features such as browsing direction, rhythm, and tendency to linger in certain areas are extracted. Combined with terminal environment, page area, and historical preferences, a lightweight model is used to predict the probability of an image entering the viewport, effectively distinguishing between intentions such as fast scrolling, inertial browsing, looking back, and focusing, significantly reducing invalid preloading and improving the first-screen hit rate.

[0017] 3. Incorporate device performance level, available memory, power supply status, energy-saving limits, display capabilities, and network quality into the initial state, and set quality upgrade conditions based on terminal resource reserves and network status in the hierarchical loading instruction to avoid triggering unreasonable high-quality image requests in scenarios such as high load and low power, ensuring smooth interaction and saving system resources and traffic.

[0018] 4. Use importance tags to distinguish the criticality of images, and adjust the generated loading priority by attention weight and prediction probability to ensure that core images with high importance and high priority are loaded first and upgraded in quality first, while decorative images are delayed or loaded only in low quality, so as to ensure that key information is presented to users first and clearly.

[0019] 5. Quantify user attention weights by tracking gaze coordinates, gaze duration, or behaviors such as hovering, touch input, and text selection. Use this data to adjust predicted probabilities, ensuring that loading priority truly reflects the user's focus. Images within the viewport that are not receiving attention can be kept at low quality to save bandwidth, while attentive areas are promptly upgraded to high-quality versions, improving the visual experience and responsiveness.

[0020] 6. By introducing multi-objective strategy parameters such as first-screen latency, interaction smoothness, and traffic consumption, the timing of requests and quality upgrade conditions can be dynamically configured, enabling the loading strategy to be flexibly adjusted according to environmental conditions, user behavior, and terminal capabilities. It does not rely on any preset fixed thresholds and has good adaptability to different networks, devices, page structures, and browsing habits.

[0021] 7. Calculate the reward value for each objective dimension by loading execution feedback, and update the multi-objective strategy parameters and historical browsing preference parameters accordingly. Construct a closed-loop system of "perception-decision-feedback-optimization" so that the loading strategy can continuously optimize itself as it is used, becoming more and more in line with the user's personalized needs. Attached Figure Description

[0022] To more clearly illustrate the technical solutions in the embodiments of this application, the drawings used in the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0023] Figure 1 This is a flowchart illustrating a front-end image optimization intelligent loading method according to an embodiment of the present invention; Figure 2 This is a schematic diagram of the initial state formation process provided in an embodiment of the present invention; Figure 3 This is a schematic diagram of a user browsing interaction feature collection process provided in an embodiment of the present invention; Figure 4 This is a schematic diagram of the structure of a front-end image optimization intelligent loading system provided in an embodiment of the present invention; Figure 5 This is a schematic diagram of the structure of a computer device provided in an embodiment of the present invention. Detailed Implementation

[0024] In the following description, specific details such as particular system architectures and techniques are set forth for illustrative purposes and not for limitation, in order to provide a thorough understanding of the embodiments of this application. However, those skilled in the art will understand that this application may also be implemented in other embodiments without these specific details. In other instances, detailed descriptions of well-known systems, apparatuses, circuits, and methods have been omitted so as not to obscure the description of this application with unnecessary detail.

[0025] References to "one embodiment" or "some embodiments" as described in this specification mean that one or more embodiments of this application include a specific feature, structure, or characteristic described in connection with that embodiment. Therefore, the phrases "in one embodiment," "in some embodiments," "in other embodiments," "in still other embodiments," etc., appearing in different parts of this specification do not necessarily refer to the same embodiment, but rather mean "one or more, but not all, embodiments," unless otherwise specifically emphasized. The terms "comprising," "including," "having," and variations thereof mean "including but not limited to," unless otherwise specifically emphasized.

[0026] In this embodiment, the execution entity of the process includes a terminal device. This terminal device includes, but is not limited to, mobile terminals, tablet terminals, personal computers, and other terminal devices capable of running browsers or web applications. The web application can be a news page, product detail page, information feed page, social media page, image and text content page, or other pages containing multiple image resources. The image resources include main article images, product images, thumbnails, advertising images, background images, and decorative images, etc. Figure 1 A flowchart illustrating a front-end image optimization intelligent loading method according to an embodiment of the present invention is shown below: S101, obtain the characteristics of the terminal's operating environment, and combine the page area where the image is located, its importance tag, and historical browsing preference parameters to form an initial state.

[0027] In this embodiment, when a page is initialized, page scrolling begins, or an image loading task is triggered, the client obtains the current operating environment characteristics of the terminal. These characteristics include device performance level, processor load, available memory, power supply status, battery level, network connection quality, display resolution, screen size, ambient light conditions, and energy-saving limitations. Network connection quality can be characterized by the current network type, network transmission rate, network latency, and network fluctuations.

[0028] Meanwhile, the client determines the page area and importance tag of an image from the page structure, image resource attributes, or semantic tags pre-defined during page development. For example, images located on the first screen, in the main text area, or in the product display area can be marked as higher importance; images located in the sidebar, page background, or decorative areas can be marked as lower importance. Historical browsing preference parameters can be obtained from the user-authorized local browsing history, such as the user's average dwell time on different page areas, frequently browsed directions, frequently viewed image types, historical image click behavior, and image quality preferences.

[0029] The client associates terminal operating environment characteristics, page areas, importance tags, and historical browsing preference parameters with each image resource to form an initial state for each candidate image. Based on this initial state, the content value, terminal resource conditions, and potential user interests of different images can be preliminarily identified before the images are loaded.

[0030] S102: Based on the initial state, collect user browsing interaction features, and input the initial state and user browsing interaction features into the client's lightweight prediction model to obtain the predicted probability of candidate images entering the viewport.

[0031] In this embodiment, the client listens for page scrolling events and interactive events such as touch, mouse, and pointer events on the current page to obtain interactive behavior data such as page displacement changes, scrolling direction, scrolling speed, interaction position, interaction duration, and operation type during the user's browsing process. The client aggregates the interactive behavior data according to a preset time window and combines it with the positional relationship between candidate images and the current viewport to generate user browsing interaction characteristics that reflect the user's browsing direction, browsing rhythm, interaction area, and content dwell tendency.

[0032] Subsequently, the client inputs its initial state and user browsing interaction characteristics into a pre-deployed lightweight client-side prediction model. This lightweight prediction model can be trained on user-authorized and anonymized historical browsing data, and then filtered, compressed, or lightweighted to suit inference execution on the terminal. The model outputs the predicted probability of each candidate image entering the current viewport within a preset prediction time range. This avoids preloading based solely on a fixed distance between the image and the viewport, improving the ability to recognize different browsing behaviors such as rapid scrolling, rewinding, and partial pauses.

[0033] S103, based on the predicted probability, uses the user-authorized camera gaze result or hover, touch press and text selection behavior to determine the attention weight, and adjusts the predicted probability according to the attention weight to generate the loading priority.

[0034] In this embodiment, the client first determines whether it has obtained authorization from the user to collect camera gaze information. If authorization is obtained, the client acquires the user's gaze coordinates, gaze duration, and gaze stability within a preset observation time window, and maps the gaze coordinates to page coordinates, thereby determining the degree of gaze correlation between the candidate image and the user's gaze area.

[0035] When authorization to collect camera gaze information is not obtained, the client does not collect camera information. Instead, it determines the behavioral correlation of candidate images through non-camera interaction behaviors such as hovering over, touching, pressing, and selecting text in the corresponding area of ​​the candidate image. The behavioral correlation can be determined by combining the number of times the behavior occurs, the duration of the behavior, and the positional relationship between the behavior and the candidate image.

[0036] The client combines the predicted probabilities of candidate images with the degree of gaze relevance or behavioral relevance to obtain attention weights for each candidate image. Then, the predicted probabilities are adjusted based on these attention weights to obtain priority evaluation values ​​for the candidate images. These priority evaluation values ​​then divide the candidate images into priority loading sets, pre-loading sets, and deferred loading sets. This allows images that the user is actually paying attention to or may be about to pay attention to to receive higher loading priority.

[0037] S104, Generate a hierarchical loading instruction based on loading priority, importance label and multi-objective strategy parameters. The hierarchical loading instruction is used to request the lowest quality version of the candidate image and request a high quality version when the quality upgrade conditions are met.

[0038] In this embodiment, the multi-objective strategy parameters include first-screen latency constraints, interaction smoothness constraints, and traffic consumption constraints. The client determines the loading level of an image based on its loading priority and importance label. For candidate images with higher loading levels and higher importance labels, the client generates a first-level loading instruction. The first-level loading instruction includes an immediate request flag, a minimum quality version flag, and priority quality upgrade conditions. The client first requests the minimum quality version of the candidate image to ensure faster image display; when network conditions are good, the image enters the viewport, attention weight increases, and terminal resource reserves meet preset conditions, the client then requests the corresponding high-quality version.

[0039] For the remaining candidate images, the client generates a second-tier loading instruction. This instruction includes a delayed request flag, a minimum quality version flag, and conditions for delayed quality upgrades. For these images, the minimum quality version can be requested when the page is idle, the user's browsing trend is close to the image area, or network resources are sufficient. A higher quality version will be requested after the delayed quality upgrade conditions are met. This method avoids decorative or low-importance images prematurely consuming bandwidth and decoding resources.

[0040] S105, obtain the loading execution feedback corresponding to the hierarchical loading instruction, and calculate the reward value corresponding to the first screen latency, interaction smoothness and traffic consumption based on the loading execution feedback. The reward value is used to update the multi-objective strategy parameters and historical browsing preference parameters to adjust the hierarchical loading instructions of subsequent candidate images.

[0041] In this embodiment, after executing the tiered loading instruction, the client records information such as the version request time, resource response time, rendering completion time, image version request result, actual data transmission volume, and repeated request data volume of the candidate images, forming loading execution feedback. The client determines the first-screen latency based on the time relationship between the rendering completion time of the first-screen image and the page start loading time; determines the interaction smoothness based on the page frame rate, interaction event response duration, and number of interaction interruptions during image loading; and determines the traffic consumption based on the actual data transmission volume, repeated request data volume, and high-quality version data transmission volume.

[0042] Subsequently, the client compares the initial screen latency, interaction smoothness, and data consumption with their respective target ranges, generating latency reward values, smoothness reward values, and data consumption reward values. Based on these reward values, it updates the multi-objective strategy parameters and historical browsing preference parameters. For example, when upgrading to high-quality images causes page interaction lag, subsequent strategies can reduce the likelihood of high-quality upgrades on the corresponding terminal; when users frequently linger in a certain page area and view images, the preloading tendency for related images in that page area can be increased.

[0043] The method in this embodiment can comprehensively consider terminal operating status, image content importance, user browsing behavior, user attention, and historical feedback data to implement differentiated hierarchical loading and quality upgrade control for different candidate images. This improves the first-screen loading efficiency while also taking into account page interaction smoothness, data consumption, and personalized user browsing experience.

[0044] In some embodiments, step S101 above, which involves obtaining terminal operating environment characteristics and combining the page area where the image is located, its importance tag, and historical browsing preference parameters to form an initial state, specifically includes: When a page is initialized or an image loading task is triggered, terminal operating environment characteristics reflecting the current operating conditions of the terminal are collected. These terminal operating environment characteristics include device performance level, available memory, power supply status, display capability, network connection quality, and energy-saving limitation status. Determine the corresponding page area and importance tag for each image based on the page structure and image resource attributes; Extract browsing preference parameters from locally stored user browsing history records; The terminal operating environment characteristics, page area, importance tags, and historical browsing preference parameters are associated and encoded according to the image resources to generate the initial state corresponding to each candidate image.

[0045] In this embodiment, the client initiates the terminal operating environment feature collection process during page initialization, or when image loading tasks such as page scrolling, page area switching, or dynamic insertion of image resources are triggered. The terminal operating environment features reflect the resource conditions currently available for image transmission, decoding, and rendering on the terminal, and include at least device performance level, available memory, power supply status, display capabilities, network connection quality, and energy-saving limitations.

[0046] Among these, device performance level can be determined based on the terminal's processor capabilities, graphics processing capabilities, preset performance grading information corresponding to the device model, or the current operating load; available memory can be characterized by remaining memory information, memory pressure level, or available cache space obtainable from the terminal or browser operating environment; power supply status includes external power supply status, battery power supply status, and remaining power range; display capabilities include screen resolution, pixel density, display size, or high dynamic range display support status; network connection quality includes network type, network transmission rate, network latency, connection stability, or network fluctuation level; energy saving limit status includes whether system energy saving mode, browser energy saving mode, background restriction status, or data saving mode is enabled. For terminal parameters that cannot be directly obtained, preset level identifiers or status identifiers inferred from obtainable parameters can be used for characterization, thereby avoiding dependence on specific operating system interfaces.

[0047] The client also determines the corresponding page area and importance tag for each image based on the page structure and image resource attributes. Page areas include the first screen area, main text area, product display area, list area, sidebar area, footer area, background area, and advertising area. Importance tags characterize the image's contribution to the main content display of the page and can be determined based on resource identifiers set during page development, document object model hierarchy, the relationship between the image and the main text content, image display size, the area where the image is located, and image resource attributes. For example, images located in the first screen area of ​​an article's main text or the main image on a product details page can be identified as high-importance images; background images, decorative images, or non-core advertising images can be identified as low-importance images.

[0048] Furthermore, the client extracts historical browsing preference parameters from locally stored, user-authorized browsing history. These parameters include the user's average dwell time on different page areas, the frequency of viewing different types of images, the frequency of image clicks or zooms, common browsing directions, common scrolling rhythms, and historical image quality upgrade behaviors. Historical browsing history is preferably stored and processed locally on the terminal, and a time decay method can be used to reduce the impact of earlier historical records on current preference parameters, ensuring that the historical browsing preference parameters reflect the user's recent browsing habits.

[0049] After obtaining the above information, the client establishes associations according to the image resources. Specifically, for each candidate image, the corresponding page area, importance tag, page-level or terminal-level terminal operating environment characteristics, and user-level historical browsing preference parameters are associated and encoded to generate the initial state corresponding to the candidate image. The association encoding can be a processing method that converts different categories of information into unified data fields, state identifiers, or feature sequences, so that the environmental information, content information, and user preference information of the same candidate image can be uniformly accessed. Thus, different candidate images on the page can each have different initial states, rather than using a uniform default loading rule.

[0050] like Figure 2 As shown, page initialization or image loading task trigger events are used to trigger the collection of terminal runtime environment features and the construction of initial state. Figure 2 The "Terminal Operating Environment Characteristics" module on the left corresponds to the current operating conditions of the terminal, such as device performance level, available memory, power supply status, display capabilities, network connection quality, and energy-saving limitations. The "Page and Image Resources" module provides the page area and importance tags for each image. The "Local Browsing History" module provides browsing preference parameters based on user authorization.

[0051] All three types of information are input into the "Association Encoding Module". The Association Encoding Module uses image resources as the association object, combining and encoding terminal operating environment characteristics, page areas, importance tags, and historical browsing preference parameters accordingly. After processing by this module, it outputs the initial state for candidate image one, candidate image two, and so on up to candidate image N. This initial state reflects the initial loading conditions of each candidate image under the current terminal conditions, current page semantics, and current user preferences, and serves as the basic input for subsequently predicting the probability of candidate images entering the viewport.

[0052] In some embodiments, step S102 above, which involves collecting user browsing interaction features based on the initial state, specifically includes: Determine the interactive collection range corresponding to the current page and candidate images based on the initial state; Within the scope of interactive data collection, interactive behavior data of the user during browsing is obtained by listening to page scrolling events and touch, mouse or pointer interaction events. The interactive behavior data includes page displacement changes, interaction position, interaction duration and operation type. Interactive behavior data is aggregated according to a preset time window, and the positional relationship between candidate images and the current viewport is associated to generate user browsing interaction features that characterize browsing direction, browsing rhythm, interaction area, and content dwell tendency.

[0053] In this embodiment, after obtaining the initial state corresponding to each candidate image, the client first determines the interactive collection range of the current page and the candidate images based on the initial state. The interactive collection range does not necessarily cover the entire page, but can be determined based on the page area where the candidate image is located, the importance label of the candidate image, the distance between the candidate image and the current viewport, the current network connection quality, and the terminal resource status.

[0054] For example, candidate images located within the current viewport, at the edge of the current viewport, or within a preset range in front of the current browsing direction can be assigned a higher priority for interactive data collection. Candidate images located on the opposite side of the user's current scrolling direction, at a greater distance, and with lower importance can have their collection frequency reduced or be temporarily excluded from the current interactive data collection scope. For page areas with high importance tags, such as the main text area and product image area, the corresponding interactive data collection scope can be appropriately expanded; for image areas with lower importance, such as background images and decorative images, the collection scope can be correspondingly reduced. Through these settings, interactive data collection resources can be focused on page areas that influence candidate image loading decisions, reducing the consumption of terminal resources caused by processing irrelevant interactive data.

[0055] After determining the interaction collection range, the client listens for page scrolling events and touch, mouse, or pointer interaction events within that range to acquire user interaction data during browsing. For page scrolling events, the client records changes in the page's position at different sampling times to reflect page displacement and browsing direction. For touch, mouse, or pointer interaction events, the client records the location of the interaction, its duration, and the type of operation. These operation types include swiping, clicking, hovering, pressing, long-pressing, dragging, text selection, and pointer hovering.

[0056] To ensure a identifiable correspondence between interactive data and candidate images, the client converts the interaction location into page coordinates of the current page and determines whether the interaction location is within the candidate image display area, a preset area surrounding the candidate image, or within the same content block as the candidate image. When the interaction location and the candidate image have a preset positional association, the corresponding interaction data is marked as interaction data related to that candidate image. For page scrolling, the change in the candidate image's position relative to the viewport before and after scrolling can be used to determine whether the user's browsing trend is towards that candidate image.

[0057] The client aggregates the collected interaction data according to a preset time window. The preset time window can be a continuous short time interval and can be adjusted according to page type, terminal performance level, or current browsing status. Within each time window, the client summarizes the page displacement direction and degree of change, interaction position distribution, interaction duration, and operation type, and associates the positional relationship between candidate images and the current viewport to generate user browsing interaction characteristics.

[0058] The user browsing interaction features include browsing direction, browsing rhythm, interaction area, and content dwell tendency. Browsing direction represents the overall direction of the user's current page movement; browsing rhythm represents the continuity, speed, and presence of pauses in user scrolling or operations; interaction area represents the region or candidate image on the page where user interaction is concentrated; and content dwell tendency represents whether the user continuously lingers, repeatedly views, long-presses, hovers, or selects text near a particular image, text area, or content block. The generated user browsing interaction features can be stored or associated separately according to candidate images, allowing the subsequent lightweight prediction model on the client to predict the viewport probability for different candidate images.

[0059] like Figure 3As shown, the "Current Page and Current Viewport" on the left indicates the area of ​​the page the user is currently browsing. Candidate image A is located within the current viewport, and candidate image B is located below the current viewport. The text content area, candidate image area, and subsequent page content together constitute the page content available for the user to browse. The scrolling direction indicated by the arrows in the diagram represents the user's current page movement trend, and the "touch" icon near candidate image A indicates that this area can be interacted with by touch, mouse, or pointer.

[0060] Figure 3 The "Interaction Acquisition Range" shown in the dashed box at the bottom center represents the interaction acquisition area determined based on the initial state. It covers at least the current page, the current viewport, and the page area related to the candidate image loading decision. Scroll events, touch events, mouse events, or pointer events in the current page and the current viewport are collected by the "Interaction Event Listening" module, forming "Interaction Behavior Data" containing displacement, position, duration, and operation type.

[0061] The "Time Window Aggregation" module summarizes interactive behavior data within a preset time window and correlates the summarized results with the positional relationship of candidate images relative to the current viewport, ultimately outputting "User Browsing Interaction Characteristics." These characteristics include browsing direction, browsing pace, interaction area, and content dwell tendency, reflecting the user's current actual browsing trend and potential attention level to candidate images.

[0062] In some embodiments, step S102 above, which involves inputting the initial state and user browsing interaction features into a lightweight prediction model on the client side to obtain the predicted probability of a candidate image entering the viewport, specifically includes: Based on the terminal operating environment characteristics, page area, importance label and historical browsing preference parameters in the initial state of candidate image association, as well as the browsing direction, browsing rhythm, interaction area and content dwell tendency in the user browsing interaction characteristics, the association features are obtained. Vectorize the associated features to form the model input features; The model input features are fed into a lightweight prediction model on the client side for inference, and the predicted probability of each candidate image entering the current viewport within a preset prediction time range is output.

[0063] In this embodiment, after obtaining the initial state and user browsing interaction characteristics of each candidate image, the client establishes feature associations based on the candidate images. Specifically, for any candidate image, the client extracts the corresponding terminal operating environment characteristics, page area, importance label, and historical browsing preference parameters from the initial state of the candidate image; simultaneously, it extracts the browsing direction, browsing rhythm, interaction area, and content dwell tendency corresponding to the candidate image from the current user browsing interaction characteristics.

[0064] Among them, the terminal operating environment characteristics are used to reflect whether the current terminal is suitable for performing operations such as image preloading, image decoding, and high-quality version upgrades; the page area is used to represent the page position or content block where the candidate image is located; the importance tag is used to distinguish images of different content values, such as main content images, product main images, list thumbnails, advertising images, background images, and decorative images; and the historical browsing preference parameter is used to represent the user's historical browsing preferences for the corresponding page area or image type.

[0065] Browsing direction indicates whether the user's current browsing trend is towards the area where the candidate image is located. For example, when the user scrolls down and the candidate image is below the current viewport, the candidate image can be considered to have a high degree of relevance to the current browsing direction; when the user looks back and the candidate image is above the viewport, it can also be determined that it has a high degree of relevance. Browsing rhythm indicates the continuity, speed changes, and pauses during the user's scrolling process; interactive area indicates the page location where the user's touch, hover, click, press, or pointer stays; content dwell tendency indicates whether the user continuously dwells on, repeatedly views, long-presses, or selects text in the area where the candidate image is located or adjacent content blocks.

[0066] The client can associate the aforementioned user browsing interaction characteristics with candidate images based on their position relative to the current viewport. For example, for candidate images below the current viewport, the association focuses on the continuity of the user's downward browsing, the user's interaction in the bottom area of ​​the current viewport, and the user's tendency to linger on adjacent content blocks; for candidate images within the current viewport, the association focuses on whether the user lingers, clicks, hovers, or presses within the image area or adjacent text areas; for candidate images above the current viewport, the association can be based on the user's scroll direction, scroll speed, and historical viewing behavior. Thus, different candidate images can obtain association characteristics that match their position and content attributes.

[0067] After forming the associated features, the client performs vectorization processing on these features to form the model input features. This vectorization processing refers to converting terminal operating environment features, page regions, importance labels, historical browsing preference parameters, and user browsing interaction features into a feature expression form that can be uniformly processed by the prediction model. For example, discrete category information such as device performance level, network connection quality, importance labels, and page regions can be converted into corresponding category identifiers; continuous information such as available memory, page displacement changes, interaction duration, image distance from the viewport, and dwell time can be processed by interval division, normalization, or hierarchical processing; and behavioral information such as browsing direction, operation type, and interaction area can be represented according to preset state identifiers.

[0068] To avoid inconsistencies in feature meanings due to differences in page structures, screen sizes, or image sizes, the positional relationship between the candidate image and the current viewport can be represented using a relative positional approach. For example, positional features can be generated based on whether the candidate image is located within, above, below, or adjacent to the viewport edge. Alternatively, the relative distance between the candidate image and the viewport edge, as well as the proportion of the image's display area to the page's visible area, can be further considered. These processed features are then combined in a preset order to form the model input features corresponding to the candidate image.

[0069] The client inputs the model's input features into a lightweight prediction model for local inference, outputting the predicted probability that the candidate image will enter the current viewport within a preset prediction time range. This preset prediction time range can be the browsing time range of the page in the short following period, such as a time range of several seconds to tens of seconds in the future. Its specific length can be dynamically determined based on page type, network status, terminal performance level, or current browsing pace. The prediction probability is used to characterize the likelihood of the candidate image entering the current viewport within the predicted time range.

[0070] The lightweight prediction model on the client side can be a classification prediction model suitable for running locally on the terminal, such as a cropped or compressed neural network model, tree model, linear prediction model, or other lightweight machine learning model. The model can be trained based on user-authorized, de-identified historical page browsing samples. Positive samples in the training samples can be candidate images that actually entered the viewport within the corresponding prediction time range, while negative samples can be candidate images that did not enter the viewport or entered the viewport after a longer period. After the model is deployed to the client, it only needs to use the features of the current page for inference, without needing to upload real-time interaction behavior data to the server, thus reducing data transmission volume and protecting user browsing behavior privacy.

[0071] For multiple candidate images on the same page, the client can construct input features for each image and obtain corresponding predicted probabilities. For example, a main text image located below the current viewport and in the direction the user is continuously scrolling downwards typically has a higher predicted probability of entering the viewport; decorative images located on the opposite side of the user's current scrolling direction, at a greater distance, and with lower importance, will have a lower predicted probability. The client associates and stores the predicted probabilities of each candidate image with its corresponding image resource and outputs this information to subsequent attention weight correction and loading priority generation processes.

[0072] In some embodiments, the pre-construction step of the client-side lightweight prediction model in step S102 specifically includes: Based on authorized and anonymized historical browsing records, feature data is generated by extracting terminal operating environment characteristics, image page areas, importance tags, historical browsing preference parameters, and user browsing interaction characteristics. Based on whether the candidate image enters the user's viewport within the preset prediction time range, corresponding training annotation results are generated. The feature data is associated with the training annotation results to form training samples, and the selected candidate prediction model is trained based on the training samples; Candidate prediction models are screened and compressed based on prediction accuracy, model capacity, inference latency, and resource consumption to obtain lightweight prediction models for the client.

[0073] In this embodiment, the lightweight prediction model on the client side is used to predict the probability that candidate images on the page will enter the user's current viewport within a preset prediction time range. The training, filtering, and compression processes of the model can be completed on the server side, a cloud training platform, or an offline training environment with high computing power. After completion, the model that meets the client deployment requirements is distributed to the browser, web application, or client application for local inference.

[0074] First, an original dataset is constructed based on user-authorized and anonymized historical browsing records. These records can originate from page structure information, image resources, terminal operating status information, and interaction behavior information collected during the user's browsing process. Anonymization includes deleting or replacing information that directly identifies the user, such as account identifiers, phone numbers, precise geographical locations, and unique device identifiers. For terminal information and browsing behavior information required for statistical analysis, hierarchical, interval-based, aggregated, or randomized processing can be used to preserve the behavioral patterns needed for model training while reducing the risk of personal information identification.

[0075] Feature data is extracted from historical browsing records. This feature data includes terminal operating environment characteristics, image page areas, importance tags, historical browsing preference parameters, and user browsing interaction characteristics. Terminal operating environment characteristics may include device performance level, available memory range, power supply status, display capability level, network connection quality level, and energy-saving limitation status; image page areas may include the first screen area, main text area, product display area, list area, side area, footer area, and background area; importance tags may include high importance, medium importance, and low importance, or use subdivided tags adapted to the page's business type.

[0076] Historical browsing preference parameters can be obtained statistically based on users' browsing behavior on historical pages, such as the average dwell time in different page areas, the viewing frequency of different image types, image click frequency, image zoom frequency, common scrolling directions, and scrolling rhythm. User browsing interaction features can be extracted from a preset observation time range before the prediction start time corresponding to the candidate image, including page displacement changes, browsing direction, browsing rhythm, interaction location, interaction duration, operation type, interaction area, and content dwell tendency. To avoid using behavioral data occurring after the prediction time point during the training process, user browsing interaction features are constructed only based on interaction behavior data generated before the prediction start time.

[0077] Secondly, training annotation results are generated. For each candidate image in the historical pages, the current viewport position at the corresponding moment is used as the prediction starting position, and a preset prediction time range is set. It is determined whether the candidate image has at least partially entered the user's viewport within the preset prediction time range: if it has entered the viewport, a positive training annotation result indicating "entered the viewport" is generated; if it has not entered the viewport, a negative training annotation result indicating "not entered the viewport" is generated. Entering the viewport can be defined as an overlap of more than a preset proportion between the image display area and the viewport area, or the entry of a preset key area of ​​the image into the viewport. Using a preset proportion avoids the problem of only a very small edge pixel entering the viewport being considered as the user actually viewing the image.

[0078] Subsequently, the feature data corresponding to the same candidate image at the prediction start time is associated with the training annotation results to form training samples. Each training sample contains at least the candidate image identifier or image category information, the candidate image's location and importance information, terminal operating environment characteristics, historical browsing preference parameters, user browsing interaction characteristics at the prediction start time, and the corresponding training annotation results. Samples formed for the same candidate image at different browsing times can be treated as different training samples to reflect the impact of changes in user interaction state during browsing on the probability of the image entering the viewport.

[0079] The selected candidate prediction models are trained based on the training samples. These candidate prediction models include lightweight tree models, linear classification models, Naive Bayes models, lightweight neural network models, or structure-pruned sequence prediction models. During training, the training samples can be divided into training, validation, and test sets, and further divided according to different page types, terminal performance levels, network quality levels, and image regions to ensure comprehensive coverage and prevent the model from being applicable only to specific pages or terminal conditions. For cases where the number of samples entering and not entering the viewport is significantly imbalanced, sample balancing, class weight adjustment, or stratified sampling can be used to improve the model's ability to recognize different categories of samples.

[0080] After training the candidate prediction models, each model is evaluated and selected. Evaluation metrics include prediction accuracy, model capacity, inference latency, and resource consumption. Prediction accuracy evaluates the model's ability to predict whether a candidate image will enter the viewport; model capacity evaluates the model file size and runtime memory usage; inference latency evaluates the time required for the model to complete a prediction for one or more candidate images; resource consumption includes processor usage, memory usage, and power consumption. Candidate prediction models that meet the preset prediction accuracy requirements, have smaller capacity, lower inference latency, and lower resource consumption are preferentially selected.

[0081] For the initially selected candidate prediction models, further lightweight compression processing can be performed. This compression processing includes one or more of the following: model parameter quantization, redundant structure pruning, feature quantity filtering, model distillation, rule simplification, or model structure replacement. After compression, the model's prediction accuracy, inference latency, memory usage, and terminal power consumption are verified again. When the model meets a preset performance threshold, it is determined as a lightweight prediction model for the client and packaged and deployed to the client. During actual runtime, the client uses this model to perform local inference on candidate images on the current page, thereby reducing network dependence and data upload requirements while achieving real-time prediction of the probability of candidate images entering the viewport.

[0082] In some embodiments, step S103 above, which involves determining attention weights based on predicted probabilities using user-authorized camera gaze results or hovering, touch-pressing, and text selection behaviors, specifically includes: Determine whether authorization has been obtained to collect camera gaze information; If authorized, the gaze coordinates, gaze duration, and gaze stability within the preset observation time window are obtained, and the gaze coordinates are mapped to page coordinates to determine the gaze correlation of the candidate images; Otherwise, hovering, touch pressing, and text selection behaviors in the corresponding area of ​​the candidate image are collected to determine the degree of behavioral correlation. The degree of behavioral correlation includes the number of occurrences, duration, and positional correlation of each behavior with the candidate image. The attention weights of candidate images are obtained by normalizing the degree of gaze association or behavioral association by combining the predicted probability.

[0083] In this embodiment, after obtaining the predicted probability of each candidate image entering the current viewport within a preset prediction time range, the client first determines whether it has obtained valid authorization from the user for collecting camera gaze information. The valid authorization can be an explicit authorization made by the user for this browsing session, the current application runtime, a preset validity period, or a specific functional scenario. If authorization is not obtained, the user withdraws authorization, the camera is unavailable, the camera is occupied by other applications, or the terminal is in privacy protection mode, the client will not collect camera images or gaze information and will proceed to the attention analysis process based on non-camera interaction behavior.

[0084] When authorization to collect camera gaze information is granted and the camera is available, the client acquires gaze coordinates, gaze duration, and gaze stability within a preset observation time window. Gaze coordinates represent the position of the user's gaze within the terminal's display area; gaze duration represents the length of time the user's gaze remains at the same or adjacent position; and gaze stability represents the magnitude of change in the gaze's focal point within the preset time. Generally, a longer gaze duration within a smaller area with minimal positional change corresponds to higher gaze stability, indicating stronger visual attention from the user to that area.

[0085] To ensure that gaze information corresponds to page content, the client maps gaze coordinates to page coordinates based on the mapping relationship between the current page scroll position, page zoom level, terminal screen display area, and page coordinate system. When the page scrolls, the client completes the coordinate mapping based on the page scroll position corresponding to the gaze information acquisition time, avoiding mismatches between the gaze position and the candidate image position due to page displacement. Subsequently, it is determined whether the mapped page coordinates are within the candidate image display area or within a preset associated area surrounding the candidate image. The preset associated area includes the edge extension area of ​​the candidate image, the image title area, the image description text area, or an interactive area within the same content card as the image.

[0086] The client determines the gaze correlation of a candidate image based on its positional relationship with the gaze coordinates, gaze duration, and gaze stability. For example, a higher gaze correlation is determined when the gaze point is within the candidate image's display area, lasts for a longer duration, and is highly stable; a lower gaze correlation is determined when the gaze point only briefly passes through the edge area of ​​the candidate image. For multiple gaze behaviors occurring within the same observation time window, the client can perform cumulative or aggregate processing to reflect whether the user has continuous or repeated attention to the candidate image.

[0087] When authorization to collect camera gaze information is not obtained, the client collects hover, touch, and text selection behaviors in the corresponding area of ​​the candidate image to determine the degree of behavioral correlation. Among them, hover behavior includes the mouse pointer, stylus pointer, or other pointer staying in the candidate image display area or its preset associated area; touch and press behavior includes operations such as clicking, short pressing, long pressing, and dragging to start pressing; text selection behavior includes selection operations on the candidate image title, descriptive text, adjacent body content, or text within the same content card.

[0088] For each type of behavior, the client records its frequency, duration, and positional relevance to the candidate image. Positional relevance characterizes the correspondence between the behavior's location and the candidate image's display area: a high positional relevance is determined when the behavior occurs within the candidate image; a medium positional relevance is determined when the behavior occurs within the candidate image's title, description, or the same content card; and a low positional relevance is determined when the behavior occurs in the surrounding area of ​​the candidate image but not within the same content block. For discrete operations such as touch presses or text selections, the user's level of attention to the candidate image's related content can be further determined by combining the operation location, number of operations, press duration, and whether the page remains active after the operation.

[0089] After obtaining the gaze correlation or behavioral correlation, the client normalizes the predicted probability of the candidate image to obtain its attention weight. Specifically, the predicted probability reflects the likelihood of a candidate image entering the current viewport within a preset time frame; the gaze correlation or behavioral correlation reflects the actual intensity of user attention to the candidate image or its associated content. The client can jointly evaluate both: for candidate images with high predicted probabilities and strong gaze or behavioral correlation, a higher attention weight is assigned; for candidate images with low predicted probabilities and lacking effective gaze or interaction correlation, a lower attention weight is assigned.

[0090] Normalization transforms the joint evaluation results of different candidate images into a unified and comparable weight range, enabling subsequent modules to sort and load images hierarchically based on attention weights. Normalization can be performed within the same current page, the same page area, or the same batch of candidate images, and minimum, maximum, or default weights can be set to avoid weight anomalies due to missing gaze information, limited interaction, or a small number of candidate images. For candidate images that have not received camera authorization and for which hovering, touch, or text selection behavior has not been detected, the client can generate basic attention weights based on predicted probabilities to ensure the continuous execution of the image loading strategy.

[0091] In this embodiment, camera gaze information is collected only with explicit user authorization, and preferably, gaze coordinate extraction, page coordinate mapping, and attention weight calculation are performed locally on the client side, without uploading the original camera image or video data. When the user does not authorize the collection, the system uses existing interactive behaviors such as hovering, touch pressing, and text selection as substitute information, thereby determining the attention weight of candidate images while protecting user privacy and ensuring the user's right to choose.

[0092] In some embodiments, step S103 above, which involves correcting the predicted probability based on attention weights to generate a loading priority, specifically includes: The attention weight of each candidate image is associated with its corresponding prediction probability, and the prediction probability is adjusted by gain based on the attention weight to obtain the priority evaluation value of the candidate image. Candidate images are sorted according to priority evaluation values, and then divided into priority loading set, preloading set and delayed loading set based on preset prediction probability thresholds. Priority identifiers are assigned to candidate images in the priority loading set, preloading set, and delayed loading set, and the request order and quality upgrade order of candidate images are determined based on the priority identifiers.

[0093] In the aforementioned processing, the client has obtained the predicted probability of each candidate image entering the current viewport within a preset prediction time range, as well as the attention weight representing the user's level of attention to the candidate images or their associated content. This embodiment generates a loading priority for candidate images based on the above information, so that resources such as network requests, image decoding, cache usage, and image quality upgrades are prioritized for images that the user is more likely to browse and pay attention to.

[0094] For each candidate image, the client associates the attention weight corresponding to that candidate image with its predicted probability. The predicted probability reflects the likelihood that the candidate image will enter the current viewport within a preset prediction time range; the attention weight reflects the intensity of the user's attention to the content area where the candidate image is located during the current or recent browsing process. The client adjusts the predicted probability based on the attention weight to obtain a priority evaluation value for the candidate image.

[0095] Specifically, a higher attention weight indicates that the user has a high potential level of interest in the candidate image or its related content, and the client accordingly increases the priority evaluation value corresponding to the predicted probability of that candidate image. A lower attention weight results in a smaller increase in the predicted probability, or no increase at all. Preferably, the priority evaluation value after gain correction is kept within a preset effective range to avoid the priority evaluation value exceeding the maximum allowable value due to abnormally high attention weight, and also to prevent candidate images with low original predicted probabilities from being unreasonably elevated to a high priority simply because of occasional interaction.

[0096] In one implementation, the client can use the predicted probability of candidate images as the basic evaluation criterion and determine the corresponding gain level based on the attention weights. For example, attention weights can be divided into high, medium, and low levels: a higher gain level is used for candidate images with high attention weights; a medium gain level is used for candidate images with medium attention weights; and a low gain level or the original predicted probability is maintained for candidate images with low attention weights or lacking effective attention information. By adopting a hierarchical gain approach, the terminal's computational overhead can be reduced, and it is easier to adjust the priority strategy according to page type, network status, and device performance.

[0097] After obtaining the priority evaluation value of each candidate image, the client sorts the candidate images according to the priority evaluation value. Candidate images with higher priority evaluation values ​​are ranked first, indicating that these images are more likely to enter the viewport and gain user attention in the near future. For candidate images with the same priority evaluation value or a difference within a preset range, a secondary sort can be performed based on the image's relative distance from the current viewport, image importance tag, page area, image resource size, cached status, or the original page arrangement order. For example, when priority evaluation values ​​are similar, candidate images that are closer to the current viewport, belong to the main content of the text or the main product image, and have not yet finished loading can be prioritized.

[0098] The client further divides candidate images into a priority loading set, a preloading set, and a delayed loading set by combining preset prediction probability thresholds. The preset prediction probability thresholds include a first threshold and a second threshold, with the first threshold being higher than the second threshold. Candidate images whose predicted probability or priority evaluation value after attention weight correction reaches the first threshold can be included in the priority loading set; those reaching the second threshold but not the first threshold can be included in the preloading set; and those below the second threshold can be included in the delayed loading set. Preferably, the priority evaluation value is used as the primary basis for actual division, with the original prediction probability as a constraint, to avoid attention gain causing images with a very low probability of entering the viewport to be incorrectly included in the priority loading set.

[0099] Candidate images in the priority loading set typically include images that have not yet finished loading in the current viewport, images expected to enter the viewport soon and with high attention weight, and images directly related to the user's current operating area. For candidate images in this set, the client can prioritize resource requests, prioritize the allocation of decoding resources, and prioritize requesting higher-quality image versions when network conditions permit. Candidate images in the preload set have a certain probability of entering the viewport, but their urgency is lower than that of the priority loading set. The client can initiate preloading when the request tasks for the priority loading set are completed, the network is idle, the processor load is low, or there is available cache space. Candidate images in the deferred loading set have a low probability of entering the viewport. The client does not initiate requests for them temporarily, or only retains low-cost resource description information, and re-evaluates them after the user's browsing direction, page position, or attention state changes.

[0100] After dividing the images into sets, the client assigns priority identifiers to candidate images in the priority loading set, preloading set, and delayed loading set. Priority identifiers include high-priority, medium-priority, and low-priority identifiers, and can also be represented using multiple continuous or discrete levels. Specifically, the priority loading set corresponds to the high-priority identifier, the preloading set to the medium-priority identifier, and the delayed loading set to the low-priority identifier. For candidate images within the same set, sub-priority identifiers can also be assigned according to the priority evaluation value to further distinguish the order of requests.

[0101] The client determines the request order and quality upgrade order of candidate images based on the priority identifiers. For candidate images corresponding to high priority identifiers, the client prioritizes creating or maintaining resource request tasks and may prioritize loading a target resolution version suitable for the current display area; for candidate images corresponding to medium priority identifiers, the client may first request thumbnails, low-resolution versions, or progressive image data, and then perform quality upgrades after the image is close to the viewport or its priority is increased; for candidate images corresponding to low priority identifiers, the client delays the request, or loads them only when the network status and device resource status meet preset conditions.

[0102] The order of quality upgrades can be related to, but not identical to, the order of requests. For example, candidate images that have already been loaded in low-resolution versions and are about to enter the viewport can be upgraded to high-resolution versions first; candidate images that have not yet been loaded in any version but are far from the viewport, even if they are in the pre-loaded set, can have their quality upgrades performed later than the aforementioned candidate images. In this way, the client can, under the conditions of limited network bandwidth, processor power, and memory resources, prioritize the display quality of images that the user is about to view and is of great interest, and reduce the resource consumption caused by invalid loading of images that the user is unlikely to view in the short term.

[0103] In some embodiments, step S104 above, which involves generating hierarchical loading instructions based on loading priority, importance labels, and multi-objective strategy parameters, specifically includes: The loading level of candidate images is determined based on loading priority and importance tags; Based on the first-screen latency, interaction smoothness and traffic consumption constraints in the multi-objective strategy parameters, the loading level is configured with request timing, minimum quality version and quality upgrade conditions. The quality upgrade conditions include network status, image entering viewport status, and the status of attention weight changes and terminal resource reserves meeting the corresponding constraints. For the first candidate image with a high loading level and a high importance label, a first hierarchical loading instruction is generated. The first hierarchical loading instruction is a hierarchical loading instruction that includes an immediate request identifier, a minimum quality version identifier, and a priority quality upgrade condition. For the candidate images other than the first candidate image, a second hierarchical loading instruction is generated. The second hierarchical loading instruction is a hierarchical loading instruction that includes a delayed request identifier, a minimum quality version identifier, and a delayed quality upgrade condition.

[0104] In this embodiment, the tiered loading instruction is used to control the timing of resource requests for candidate images, the initial loading quality, and the timing of subsequent quality upgrades, so that the client can load image resources while taking into account the first screen display speed, page interaction smoothness, and traffic consumption.

[0105] The client first obtains the loading priority and importance tag for each candidate image. The loading priority is determined based on the candidate image's predicted probability, attention weight, and priority evaluation value, including high, medium, and low priority, or more granular priority levels. The importance tag characterizes the image's business importance within the page content and can be categorized as high, medium, and low importance. High-importance images may include, for example, the main visual image on the first screen, the main product image, key operation guidance images, core content images, or images directly related to the user's current interaction area.

[0106] The client determines the loading level of candidate images based on their loading priority and importance tags. Preferably, the loading levels include high and non-high loading levels, which can also be further divided into high, medium, and low loading levels. Candidate images with both high loading priority and high importance tags are determined to be of high loading level; candidate images with high loading priority but low importance tags, or high importance tags but insufficient loading priority, are determined to be of medium loading level; and candidate images with both low loading priority and low importance tags are determined to be of low loading level. By considering both loading priority and importance tags simultaneously, resource allocation based solely on short-term user browsing predictions can be avoided, thus preventing the neglect of displaying key page content.

[0107] After determining the loading level, the client configures the request timing, minimum quality version, and quality upgrade conditions for each loading level according to the multi-objective strategy parameters. These multi-objective strategy parameters include first-screen latency constraints, interaction smoothness constraints, and data consumption constraints. First-screen latency constraints limit the time allowed for key content on the first screen to reach a displayable state; interaction smoothness constraints limit the processor or memory impact of image requests, decoding, and rendering processes on page scrolling, clicking, touching, and animation interactions; and data consumption constraints limit the amount of image data allowed to be transmitted per unit page, unit time period, or under the current network environment.

[0108] The request timing is used to determine when to initiate an image resource request to the resource server or local cache. For candidate images with higher loading levels, the request timing can be configured to request immediately, meaning that the image resource request is initiated first after the tiered loading instruction is generated. For candidate images with lower loading levels, the request timing can be configured to request with a delay, meaning that the request is initiated only after a preset delay condition is met. The delay conditions include the completion of requests for key resources on the first screen, the current number of network requests being lower than a preset number, the user stopping continuous rapid scrolling, the candidate image approaching the viewport, or the terminal resource reserve recovering to a preset level.

[0109] The minimum quality version is used to determine the image version loaded during the initial request for candidate images. Image resources can be provided in multiple quality versions in advance, such as thumbnail versions, low-resolution versions, standard-resolution versions, and high-resolution versions. The client selects the minimum quality version that meets the basic requirements for legibility and page layout display based on the candidate image's loading level, display area size, terminal screen capabilities, and current network status. For high-loading-level images, a standard-resolution version suitable for the current display size can be selected, or a low-resolution version that can be displayed quickly can be requested first and upgraded as soon as possible; for non-high-loading-level images, a thumbnail version or low-resolution version is usually requested to reduce network traffic and image decoding pressure during the initial screen loading phase.

[0110] The quality upgrade conditions are used to determine when a candidate image that has completed initial loading should request a higher quality version. These conditions include network status, image entry into the viewport status, attention weight changes, and the state where terminal resource availability meets corresponding constraints. Network status includes network connectivity availability, network quality reaching a preset level, available bandwidth meeting upgrade requirements, and low load on the current request queue. Image entry into the viewport status includes the candidate image having entered the viewport, being expected to enter the viewport within a preset time period, or being less than a preset distance from the viewport. Attention weight changes include the candidate image's attention weight rising to a preset threshold, or maintaining a high level for multiple consecutive observation periods. Terminal resource availability includes available memory, processor idle capacity, battery status, and device temperature meeting preset requirements.

[0111] For the first candidate image with a high loading level and high importance label, the client generates a first-level loading instruction. The first candidate images include key images on the first screen, main images within the user's current key interaction area, and high-importance images expected to enter the viewport soon and possessing high attention weight. The first-level loading instruction includes at least an immediate request flag, a minimum quality version flag, and a priority quality upgrade condition. The immediate request flag instructs the resource scheduling module to place the image resource in a higher-priority request queue; the minimum quality version flag indicates the initial image version loaded; and the priority quality upgrade condition indicates that, given relatively lenient network conditions and resource availability, and when the image has entered or is about to enter the viewport, or maintains a high attention weight, a higher quality version should be requested first.

[0112] For candidate images other than the first candidate image, the client generates a second-tier loading instruction. This second-tier loading instruction includes at least a delayed request flag, a minimum quality version flag, and a delayed quality upgrade condition. The delayed request flag indicates that the candidate image should not compete with the first candidate image for critical resources on the first screen; the minimum quality version flag typically corresponds to a thumbnail version or a low-resolution version; and the delayed quality upgrade condition indicates that a quality upgrade should only be performed when the first candidate image loading task is essentially complete, the network condition is good, the candidate image has actually entered the viewport or its attention weight has significantly increased, and the terminal has sufficient resource reserves.

[0113] In this embodiment, the tiered loading instructions can be dynamically updated based on changes in page scrolling position, user interaction behavior, network status, terminal resource availability, and attention weight. For example, a candidate image originally belonging to the second tiered loading instruction can be reclassified as the first candidate image after the user quickly approaches the image area, the prediction probability increases, or the attention weight rises. Its tiered loading instruction is then updated to the first tiered loading instruction, which includes an immediate request flag and priority quality upgrade conditions. Conversely, for candidate images that the user has quickly passed or whose attention weight has decreased, their loading level can be reduced or subsequent quality upgrades can be paused, thereby improving the adaptability of image resource loading and resource utilization efficiency.

[0114] In some embodiments, step S105 above, which involves obtaining the loading execution feedback corresponding to the hierarchical loading instruction and calculating the reward values ​​corresponding to the first-screen latency, interaction smoothness, and traffic consumption based on the loading execution feedback, specifically includes: After executing the hierarchical loading instruction, the version request time, response time, rendering completion time, version request result, and actual data transmission amount of the candidate image are recorded to form loading execution feedback; The first screen latency is determined based on the time difference between when the rendering of the first screen image is completed and when the page begins to load; The smoothness of the interaction is determined based on the page frame rate, the response time of interactive events, and the number of interaction interruptions during image loading; the traffic consumption is determined based on the actual amount of data transmitted and the amount of data requested repeatedly. The initial screen latency, interaction smoothness, and data consumption are compared with their respective target ranges to generate latency reward values, smoothness reward values, and data consumption reward values.

[0115] In this embodiment, the reward value can be used to evaluate the execution effect of the current hierarchical loading strategy and serve as the data basis for subsequent strategy parameter adjustments, loading level adjustments, or model training.

[0116] After executing the tiered loading instruction, the client records the corresponding loading execution information for each candidate image, forming loading execution feedback. This loading execution information includes the request time, response time, rendering completion time, version request result, and actual data volume for each quality version of the candidate image. Specifically, the request time refers to the moment the client initiates a request to obtain the image version from its local cache, browser cache, content delivery network, or resource server; the response time refers to the moment the client receives the image resource response header, the first valid data packet, or the complete image resource; and the rendering completion time refers to the moment the image is decoded, drawn to the target display area of ​​the page, and reaches the visible state of the corresponding quality version.

[0117] The version request result indicates whether the image resource request was successful and the corresponding result type. Result types include cache hit, network request success, network request failure, request timeout, request cancellation, request replacement, successful loading of a low-quality version, and successful upgrade of a high-quality version. The actual data transmission volume indicates the amount of network data actually consumed during this image loading process. This may include the main image resource data, request and response data directly related to image loading, and additional transmission data generated due to retries, version switching, or cache invalidation. For image resources directly obtained from local cache or browser cache, their actual network transmission volume can be recorded as zero or close to zero, and the cache hit status can be recorded separately.

[0118] The client determines the first-screen latency based on the time difference between the completion of rendering the first-screen image and the start of page loading. The start of page loading can be the start of page navigation, the start of page document parsing, the start of main page content loading, or the moment the user triggers a page switching operation. The first-screen image refers to the candidate image to be displayed within the initial viewport of the page, or an image marked as a key resource for the first screen. If there are multiple key images in the first screen, the moment the last key image completes rendering can be used as the first-screen image rendering completion moment, thus reflecting the time required for all key images on the first screen to reach a displayable state. Optionally, if non-critical decorative images have not yet finished loading, they will not be used as a basis for determining the first-screen latency to avoid unreasonably affecting the evaluation of the first-screen display effect.

[0119] During image loading, the client monitors page frame rate, interaction event response time, and the number of interaction interruptions to determine the smoothness of the interaction. Page frame rate reflects the stability of screen refresh during page scrolling, animation, layout updates, and image rendering; interaction event response time reflects the time required for the page to respond effectively to user clicks, touches, swipes, inputs, or selections; and the number of interaction interruptions records the number of times scrolling stutters, unresponsive clicks, touch delays, or noticeable animation pauses occur due to image requests, image decoding, page reflow, memory constraints, or main thread blocking.

[0120] Specifically, a high level of interactive smoothness can be determined when the page frame rate remains consistently high and stable, interactive events respond quickly, and there are few interactive interruptions. Conversely, a low level of interactive smoothness is determined when there are continuous frame drops during image loading, long interactive response times, or multiple interactive interruptions. To mitigate the impact of differences in terminal performance, appropriate smoothness evaluation benchmarks can be set based on the terminal's screen refresh rate or performance level. For example, for high refresh rate terminals and ordinary refresh rate terminals, frame rate target ranges appropriate to their display capabilities can be used for evaluation.

[0121] The client determines traffic consumption based on the actual amount of data transmitted and the amount of data requested repeatedly. The actual amount of data transmitted refers to the actual network data generated by image resource requests within the current page or the current observation period. The amount of data requested repeatedly refers to the data generated by repeatedly downloading the same candidate image, the same quality version, or equivalent image resources that can be reused within a short period. Repeated requests may be caused by cache invalidation, requests being canceled and then re-initiated, unreasonable image version switching, network anomaly retries, or repeated loading after page state recovery. Lower traffic consumption and a smaller proportion of repeated request data indicate better image resource scheduling and cache reuse; conversely, higher traffic consumption suggests that the tiered loading strategy may have issues with over-preloading, repeated requests, or unnecessary quality upgrades.

[0122] After obtaining the initial screen latency, interaction smoothness, and data consumption, the client compares each metric with its corresponding target range to generate latency reward values, smoothness reward values, and data consumption reward values. The target range can be determined by pre-configured performance targets, terminal type, network type, page service type, or user experience requirements. Specifically, the initial screen latency target range limits the expected time range for displaying key content on the initial screen; the interaction smoothness target range limits the acceptable range of page frame rate, event response time, and number of interaction interruptions; and the data consumption target range limits the allowed amount of network data for loading page images and the range of data requested repeatedly.

[0123] A higher latency reward value is generated when the initial screen latency is within or better than the target range; a lower latency reward value is generated when the initial screen latency exceeds the target range, and the reward value can be further reduced depending on the degree of exceedance. A higher smoothness reward value is generated when the interaction smoothness meets the target range, such as stable page frame rate, timely response, and few interruptions; a lower smoothness reward value is generated when there is obvious stuttering, response delay, or interaction interruption. A higher traffic reward value is generated when traffic consumption is within the target range and the amount of repeated data requests is small; a lower traffic reward value is generated when the actual amount of data transmitted is too large, there are many repeated requests, or unnecessary high-quality version downloads occur.

[0124] In this embodiment, the latency reward value, smoothness reward value, and traffic reward value can be output separately for subsequent strategy modules to adjust independently according to different optimization objectives; alternatively, they can be comprehensively evaluated after setting corresponding target weights. By recording request, response, rendering, interaction, and traffic data during the actual loading process and comparing the execution results with the target range, quantifiable feedback on the actual effect of the hierarchical loading instructions can be generated, thus providing a reliable basis for the continuous optimization of the image hierarchical loading strategy.

[0125] In one implementation, under the independent adjustment method, the client uses latency reward value, smoothness reward value and traffic reward value as the evaluation criteria for the corresponding optimization dimensions, and performs targeted adjustments for dimensions whose reward values ​​do not reach the preset target, so as to avoid the abnormality of one indicator being masked by other indicators.

[0126] When the delay reward value is lower than the corresponding target value, it indicates that the current image loading strategy failed to render the key images on the first screen within the expected time, or that the loading process of the key images on the first screen has an excessively long waiting time. In this case, the strategy adjustment module can increase the request priority of images on the first screen, high-loading-level images, and high-importance images, adjusting their request timing to an earlier time; it can also appropriately increase the initial quality version of key images on the first screen, or reduce the restrictions on network status and terminal resource availability when upgrading the quality of such images. For non-first-screen images, low-importance images, or images with a low predicted probability of entering the viewport, their request timing can be delayed accordingly to reduce their bandwidth and decoding resource consumption on key resources on the first screen. Thus, the strategy adjustment module can prioritize improving the arrival and rendering efficiency of images on the first screen.

[0127] When the smoothness bonus value is lower than the corresponding target value, it indicates that the image request, decoding, rendering, or quality upgrade process may significantly affect page interaction, such as causing frame drops, scrolling stutters, click response delays, or interaction interruptions. In this case, the strategy adjustment module can reduce the number of image requests, image decodings, or quality upgrades allowed to be executed within the same time period. For terminals in a fast scrolling state, continuous touch operation state, or page animation execution state, quality upgrades for non-critical images can be paused or postponed. Furthermore, the minimum quality version of some medium-load or low-load-level images can be adjusted to a version with a smaller data volume, and high-quality version requests can be executed only when the terminal processor is idle, available memory is sufficient, the user stops continuous operation, or the image actually enters the viewport. For image version request tasks that cause multiple interaction interruptions, their scheduling priority can be reduced, or they can be split and executed in subsequent idle periods.

[0128] When the traffic reward value is lower than the corresponding target value, it indicates that the actual data transmission volume of the images on the current page is too high, or there are situations such as duplicate requests, premature requests for high-quality versions, or invalid preloading. In this case, the strategy adjustment module can improve the network conditions, viewport entry status, and attention weight conditions required for image quality upgrades. For example, for candidate images that have not entered the viewport and whose attention weight has not reached the preset threshold, only thumbnail or low-resolution versions are allowed to be requested; high-quality version requests are temporarily not allowed. For images that have been requested but not yet displayed, incomplete high-quality requests can be canceled when the user quickly scrolls past the image area. Simultaneously, the client can increase the cache reuse priority and suppress duplicate requests for the same image resource, the same quality version, or alternative versions, thereby reducing the amount of data requested repeatedly. For scenarios involving low-bandwidth networks, billed networks, or when users are set to save traffic, the range of candidate images allowed for high-quality upgrades can be further narrowed.

[0129] Specifically, the strategy adjustment module allows setting corresponding adjustment periods and magnitudes for each reward value. For metrics that directly impact the current page experience, such as first-screen latency, rapid adjustments can be made during the current page loading process. For metrics that require multiple request tasks to be fully reflected, such as traffic consumption, adjustments can be made after the current page finishes loading, the preset time window ends, or multiple page samples accumulate. To avoid over-adjustment due to single network fluctuations, occasional page lag, or resource server anomalies, the client can update the strategy based on the reward change trend of multiple consecutive valid loading samples. A significant strategy adjustment is only executed when a reward value is continuously lower than the target value, or when the degree of lowering the target value reaches a preset level; for slight deviations from the target value, a smaller adjustment is executed or the current strategy is maintained.

[0130] In another implementation, under the comprehensive evaluation method, the client determines the target weights of latency reward value, smoothness reward value, and traffic reward value based on the current optimization goal, and obtains the comprehensive evaluation result of the current hierarchical loading strategy based on each reward value and its target weight. The target weights are used to reflect the importance of each optimization goal under different business scenarios. The comprehensive evaluation result can be used to select a target strategy that is suitable for the current scenario from multiple candidate strategies, or it can be used to determine whether the current strategy needs to be updated as a whole.

[0131] For example, in scenarios such as the first page opening, the first screen content display, or the main image display on the product details page, the client can increase the target weight of the latency reward value to prioritize the rapid presentation of key images on the first screen; in scenarios where users perform continuous scrolling, dragging, zooming, or content browsing operations, the target weight of the smoothness reward value can be increased to reduce the impact of image loading on the interactive experience; in weak network environments, mobile cellular network environments, roaming network environments, or data-saving modes, the target weight of the data reward value can be increased to suppress unnecessary preloading and high-quality version transmission.

[0132] To ensure comparability of reward values ​​across different dimensions, the client can convert latency reward values, smoothness reward values, and traffic reward values ​​into a unified evaluation range before conducting a comprehensive evaluation, based on their respective target ranges. For metrics exceeding the target range, their evaluation level can be lowered accordingly; for metrics meeting or exceeding the target range, a higher evaluation level can be maintained. The client then determines the comprehensive evaluation result based on the weight of each target. A high comprehensive evaluation result indicates that the current tiered loading strategy effectively balances first-screen latency, interaction smoothness, and traffic consumption; a low comprehensive evaluation result indicates that there are areas in the current strategy that need optimization.

[0133] Furthermore, during the comprehensive evaluation process, constraint priority rules can be set to prevent a key indicator from being offset by higher reward values ​​from other indicators, even if it has already severely impacted the user experience. For example, when the first-screen latency exceeds the preset maximum tolerance range, even if the smoothness reward value and traffic reward value are high, the current strategy can be judged as not meeting the first-screen experience requirements, and the first-screen latency optimization strategy can be executed first. When the number of interaction interruptions exceeds the preset limit, image decoding and quality upgrade tasks can be restricted first. When traffic consumption exceeds the user-set traffic budget, high-quality version requests and non-critical image preloading can be restricted first.

[0134] The client can use both independent adjustment results and comprehensive evaluation results for policy updates. Independent adjustment results are used to pinpoint specific weaknesses in first-screen latency, interaction smoothness, or data consumption, and implement targeted optimizations. Comprehensive evaluation results are used to make an overall selection among multiple optional loading strategies. For example, the client can choose the strategy with the highest comprehensive evaluation result and that meets key constraints from among "first-screen priority strategy," "interaction priority strategy," "data saving strategy," and "balanced strategy" as the execution strategy for subsequent pages or subsequent loading cycles. Through this approach, the tiered loading strategy can continuously adapt to different page, network, and terminal scenarios based on actual execution results.

[0135] Reference Figure 4 An embodiment of the present invention provides a front-end image optimization intelligent loading system 4, the system specifically including: The initial state determination module 401 is used to obtain the characteristics of the terminal operating environment and combine them with the page area where the image is located, the importance label, and the historical browsing preference parameters to form the initial state. The prediction probability calculation module 402 is used to collect user browsing interaction features based on the initial state, and input the initial state and user browsing interaction features into the client lightweight prediction model to obtain the predicted probability of candidate images entering the viewport. The priority generation module 403 is used to determine the attention weight based on the predicted probability using the user-authorized camera gaze result or hover, touch press and text selection behavior, and to correct the predicted probability according to the attention weight to generate the loading priority. The hierarchical loading instruction module 404 is used to generate hierarchical loading instructions based on loading priority, importance label and multi-objective strategy parameters. The hierarchical loading instructions are used to request the lowest quality version of the candidate image and request a high quality version when the quality upgrade conditions are met. The execution feedback update module 405 is used to obtain the loading execution feedback corresponding to the hierarchical loading instruction, and calculate the reward value corresponding to the first screen latency, interaction smoothness and traffic consumption based on the loading execution feedback. The reward value is used to update the multi-objective strategy parameters and historical browsing preference parameters to adjust the hierarchical loading instructions of subsequent candidate images.

[0136] It is understandable that, such as Figure 1 The content of the front-end image optimization intelligent loading method embodiment shown is applicable to this front-end image optimization intelligent loading system embodiment. The specific functions implemented by this front-end image optimization intelligent loading system embodiment are the same as those shown below. Figure 1 The front-end image optimization intelligent loading method shown in the embodiment is the same, and the beneficial effects achieved are the same as those shown. Figure 1 The beneficial effects achieved by the front-end image optimization intelligent loading method embodiment shown are also the same.

[0137] It should be noted that the information interaction and execution process between the above systems are based on the same concept as the method embodiments of the present invention. For details on their specific functions and technical effects, please refer to the method embodiments section, which will not be repeated here.

[0138] Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the above-described division of functional units and modules is merely an example. In practical applications, the above functions can be assigned to different functional units and modules as needed, that is, the internal structure of the system can be divided into different functional units or modules to complete all or part of the functions described above. The functional units and modules in the embodiments can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The integrated unit can be implemented in hardware or as a software functional unit. Furthermore, the specific names of the functional units and modules are only for easy differentiation and are not intended to limit the scope of protection of this application. The specific working process of the units and modules in the above system can be referred to the corresponding process in the foregoing method embodiments, and will not be repeated here.

[0139] Reference Figure 5 The present invention also provides a computer device 5, including: a memory 502 and a processor 501, and a computer program 503 stored in the memory 502. When the computer program 503 is executed on the processor 501, it implements the front-end image optimization intelligent loading method as described in any of the above methods.

[0140] The computer device 5 may be a desktop computer, laptop, handheld computer, or cloud server, etc. The computer device 5 may include, but is not limited to, a processor 501 and a memory 502. Those skilled in the art will understand that... Figure 5 The computer device 5 is merely an example and does not constitute a limitation on the computer device 5. It may include more or fewer components than shown, or combinations of certain components, or different components, such as input / output devices, network access devices, etc.

[0141] The processor 501 can be a Central Processing Unit (CPU), but it can also be other general-purpose processors, digital signal processors (DSPs), application-specific integrated circuits (ASICs), field-programmable gate arrays (FPGAs), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. The general-purpose processor can be a microprocessor or any conventional processor.

[0142] In some embodiments, the memory 502 may be an internal storage unit of the computer device 5, such as a hard disk or memory of the computer device 5. In other embodiments, the memory 502 may be an external storage device of the computer device 5, such as a plug-in hard disk, smart media card (SMC), secure digital (SD) card, flash card, etc., equipped on the computer device 5. Further, the memory 502 may include both internal and external storage units of the computer device 5. The memory 502 is used to store the operating system, applications, boot loader, data, and other programs, such as the program code of the computer program. The memory 502 can also be used to temporarily store data that has been output or will be output.

[0143] This invention also provides a computer-readable storage medium storing a computer program thereon, which, when executed by a processor, implements the front-end image optimization intelligent loading method as described in any of the above methods.

[0144] In this embodiment, if the integrated unit is implemented as a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, all or part of the processes in the methods of the above embodiments can be implemented by a computer program instructing related hardware. The computer program can be stored in a computer-readable storage medium, and when executed by a processor, it can implement the steps of the various method embodiments described above. The computer program includes computer program code, which can be in the form of source code, object code, executable files, or certain intermediate forms. The computer-readable medium includes at least: any entity or device capable of carrying the computer program code to a photographing device / terminal device, a recording medium, a computer memory, a read-only memory (ROM), a random access memory (RAM), an electrical carrier signal, a telecommunication signal, and a software distribution medium. Examples include USB flash drives, portable hard drives, magnetic disks, or optical disks. In some jurisdictions, according to legislation and patent practice, computer-readable media cannot be electrical carrier signals or telecommunication signals.

[0145] In the above embodiments, the descriptions of each embodiment have different focuses. For parts that are not described in detail or recorded in a certain embodiment, please refer to the relevant descriptions of other embodiments.

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

[0147] The units described as separate components may or may not be physically separate. The components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the units can be selected to achieve the purpose of this embodiment according to actual needs.

Claims

1. A front-end image optimization and intelligent loading method, characterized in that, The method specifically includes: The characteristics of the terminal's operating environment are obtained, and an initial state is formed by combining the page area where the image is located, its importance tag, and historical browsing preference parameters. Based on the initial state, user browsing interaction features are collected, and the initial state and user browsing interaction features are input into the client's lightweight prediction model to obtain the predicted probability of candidate images entering the viewport. Based on the predicted probability, attention weights are determined using user-authorized camera gaze results or hovering, touch pressing, and text selection behaviors. The predicted probability is then adjusted based on the attention weights to generate a loading priority. A tiered loading instruction is generated based on loading priority, importance label, and multi-objective strategy parameters. The tiered loading instruction is used to request the lowest quality version of the candidate image and to request a high-quality version when the quality upgrade conditions are met. Obtain the loading execution feedback corresponding to the hierarchical loading instruction, and calculate the reward value corresponding to the first screen latency, interaction smoothness and traffic consumption based on the loading execution feedback. The reward value is used to update the multi-objective strategy parameters and historical browsing preference parameters to adjust the hierarchical loading instructions of subsequent candidate images.

2. The method according to claim 1, characterized in that, The process of acquiring terminal operating environment characteristics, combined with the page area where the image is located, its importance tag, and historical browsing preference parameters to form an initial state, specifically includes: When a page is initialized or an image loading task is triggered, terminal operating environment characteristics reflecting the current operating conditions of the terminal are collected. These terminal operating environment characteristics include device performance level, available memory, power supply status, display capability, network connection quality, and energy-saving limitation status. Determine the corresponding page area and importance tag for each image based on the page structure and image resource attributes; Extract browsing preference parameters from locally stored user browsing history records; The terminal operating environment characteristics, page area, importance tags, and historical browsing preference parameters are associated and encoded according to the image resources to generate the initial state corresponding to each candidate image.

3. The method according to claim 1, characterized in that, The process of collecting user browsing interaction features based on the initial state specifically includes: Determine the interactive collection range corresponding to the current page and candidate images based on the initial state; Within the scope of interactive data collection, interactive behavior data of the user during browsing is obtained by listening to page scrolling events and touch, mouse or pointer interaction events. The interactive behavior data includes page displacement changes, interaction position, interaction duration and operation type. Interactive behavior data is aggregated according to a preset time window, and the positional relationship between candidate images and the current viewport is associated to generate user browsing interaction features that characterize browsing direction, browsing rhythm, interaction area, and content dwell tendency.

4. The method according to claim 1, characterized in that, The step of inputting the initial state and user browsing interaction features into the client-side lightweight prediction model to obtain the predicted probability of candidate images entering the viewport specifically includes: Based on the terminal operating environment characteristics, page area, importance label and historical browsing preference parameters in the initial state of candidate image association, as well as the browsing direction, browsing rhythm, interaction area and content dwell tendency in the user browsing interaction characteristics, the association features are obtained. Vectorize the associated features to form the model input features; The model input features are fed into a lightweight prediction model on the client side for inference, and the predicted probability of each candidate image entering the current viewport within a preset prediction time range is output.

5. The method according to claim 4, characterized in that, The pre-construction steps of the client-side lightweight prediction model specifically include: Based on authorized and anonymized historical browsing records, feature data is generated by extracting terminal operating environment characteristics, image page areas, importance tags, historical browsing preference parameters, and user browsing interaction characteristics. Based on whether the candidate image enters the user's viewport within the preset prediction time range, corresponding training annotation results are generated; The feature data is associated with the training annotation results to form training samples, and the selected candidate prediction model is trained based on the training samples; Candidate prediction models are screened and compressed based on prediction accuracy, model capacity, inference latency, and resource consumption to obtain lightweight prediction models for the client.

6. The method according to claim 1, characterized in that, The determination of attention weights based on predicted probabilities, using user-authorized camera gaze results or hovering, touch pressing, and text selection behaviors, specifically includes: Determine whether authorization has been obtained to collect camera gaze information; If authorized, the gaze coordinates, gaze duration, and gaze stability within the preset observation time window are obtained, and the gaze coordinates are mapped to page coordinates to determine the gaze correlation of the candidate images; Otherwise, hovering, touch pressing, and text selection behaviors in the corresponding area of ​​the candidate image are collected to determine the degree of behavioral correlation. The degree of behavioral correlation includes the number of occurrences, duration, and positional correlation of each behavior with the candidate image. The attention weights of candidate images are obtained by normalizing the degree of gaze association or behavioral association by combining the predicted probability.

7. The method according to claim 1, characterized in that, The step of adjusting the predicted probability based on attention weights to generate loading priorities specifically includes: The attention weight of each candidate image is associated with its corresponding prediction probability, and the prediction probability is adjusted by gain based on the attention weight to obtain the priority evaluation value of the candidate image. Candidate images are sorted according to priority evaluation values, and then divided into priority loading set, preloading set and delayed loading set based on preset prediction probability thresholds. Priority identifiers are assigned to candidate images in the priority loading set, preloading set, and delayed loading set, and the request order and quality upgrade order of candidate images are determined based on the priority identifiers.

8. The method according to claim 1, characterized in that, The process of generating hierarchical loading instructions based on loading priority, importance tags, and multi-objective strategy parameters specifically includes: The loading level of candidate images is determined based on loading priority and importance tags; Based on the first-screen latency, interaction smoothness and traffic consumption constraints in the multi-objective strategy parameters, the loading level is configured with request timing, minimum quality version and quality upgrade conditions. The quality upgrade conditions include network status, image entering viewport status, and the status of attention weight changes and terminal resource reserves meeting the corresponding constraints. For the first candidate image with a high loading level and a high importance label, a first hierarchical loading instruction is generated. The first hierarchical loading instruction is a hierarchical loading instruction that includes an immediate request identifier, a minimum quality version identifier, and a priority quality upgrade condition. For the candidate images other than the first candidate image, a second hierarchical loading instruction is generated. The second hierarchical loading instruction is a hierarchical loading instruction that includes a delayed request identifier, a minimum quality version identifier, and a delayed quality upgrade condition.

9. The method according to claim 1, characterized in that, The process of obtaining the loading execution feedback corresponding to the hierarchical loading instruction, and calculating the reward values ​​corresponding to the first-screen latency, interaction smoothness, and data consumption based on the loading execution feedback, specifically includes: After executing the hierarchical loading instruction, the version request time, response time, rendering completion time, version request result, and actual data transmission amount of the candidate image are recorded to form loading execution feedback; The first screen latency is determined based on the time difference between when the rendering of the first screen image is completed and when the page begins to load; The smoothness of the interaction is determined based on the page frame rate, the response time of interactive events, and the number of interaction interruptions during image loading; the traffic consumption is determined based on the actual amount of data transmitted and the amount of data requested repeatedly. The initial screen latency, interaction smoothness, and data consumption are compared with their respective target ranges to generate latency reward values, smoothness reward values, and data consumption reward values.

10. A front-end image optimization intelligent loading system, characterized in that, The system specifically includes: The initial state determination module is used to obtain the characteristics of the terminal's operating environment and combine them with the page area where the image is located, its importance tag, and historical browsing preference parameters to form the initial state; The prediction probability calculation module is used to collect user browsing interaction features based on the initial state, and input the initial state and user browsing interaction features into the client's lightweight prediction model to obtain the predicted probability of candidate images entering the viewport. The priority generation module is used to determine attention weights based on the predicted probability, using user-authorized camera gaze results or hovering, touch pressing and text selection behaviors, and to adjust the predicted probability according to the attention weights to generate loading priority. The hierarchical loading instruction module is used to generate hierarchical loading instructions based on loading priority, importance labels and multi-objective strategy parameters. The hierarchical loading instructions are used to request the lowest quality version of the candidate image and request a high quality version when the quality upgrade conditions are met. The execution feedback update module is used to obtain the loading execution feedback corresponding to the hierarchical loading instructions, and calculate the reward value corresponding to the first screen latency, interaction smoothness and traffic consumption based on the loading execution feedback. The reward value is used to update the multi-objective strategy parameters and historical browsing preference parameters to adjust the hierarchical loading instructions of subsequent candidate images.

Images