A webpage media resource self-adaptive management method and system based on memory pre-warning

Abstract

The application discloses a webpage media resource self-adaptive management method and system based on memory early warning. The method constructs a closed-loop control system with resource configuration information as a data hub, including resource registration and grading, real-time memory monitoring, pressure evaluation with a hysteresis threshold, strategy decision, resource scheduling execution and closed-loop feedback recovery steps. The system actively performs release or degradation operation on the media resource according to the real-time memory pressure, and smoothly recovers after the pressure is relieved. The application upgrades the memory management from passive response to active prevention, effectively prevents the webpage from freezing or crashing due to high memory occupation, realizes the global optimization of resource value and the smooth degradation of user experience, and has high stability and universality.

Description

Technical Field

[0001] This invention relates to the field of webpage performance optimization and memory management technology, specifically to an adaptive management method and system for webpage media resources based on memory warning. Background Technology

[0002] With the rapid development of web technology, modern web applications are becoming increasingly complex, containing more and more high-definition images, videos, and other media resources. These resources consume a large amount of browser memory, especially on mobile devices or low-spec terminals, which can easily lead to page lag, slow response, or even crashes due to memory overflow, seriously damaging the user experience.

[0003] Currently, common browser memory management mechanisms are passive. When memory pressure is too high, the operating system or browser will forcibly reclaim memory or directly terminate the page process. Developers have limited proactive intervention options, such as lazy loading or manually listening for simple events. Existing technologies have the following shortcomings: 1) Passivity, lacking proactive scheduling capabilities based on early warnings; 2) Single strategy, failing to differentiate processing based on resource value; 3) Lack of closed-loop feedback, unable to recover smoothly, easily leading to frequent system state fluctuations; 4) Poor versatility, strongly coupled with specific frameworks or business logic.

[0004] Therefore, there is an urgent need for a general-purpose web media resource management solution that can provide proactive early warning, intelligent hierarchical classification, and closed-loop control. Summary of the Invention

[0005] To address the shortcomings of existing technologies, this invention provides a method and system for adaptive management of web media resources based on memory early warning, aiming to construct a closed-loop control system for monitoring, evaluation, decision-making, execution, and feedback with resource configuration information as the data center.

[0006] To achieve the above objectives, this invention provides a method for adaptive management of web media resources based on memory warning, characterized by the following steps: Resource registration and grading steps: Scan media elements in the webpage, assign resource grades to each media element according to preset priority rules, and generate a resource configuration information table; the resource configuration information table shall at least include a unique identifier, DOM (Document Object Model) reference, original resource address, current resource address, resource grade, and current status of each media element; Real-time memory monitoring steps: Obtain memory usage data of the current page through the browser performance interface and calculate memory usage rate; Memory stress level assessment steps: Using a state machine model with hysteresis threshold, the memory occupancy rate is converted into a system stress level. Each stress level has an entry threshold and an exit threshold, and the state transition is determined based on the current level and the comparison result between the memory occupancy rate and the corresponding threshold. Strategy decision-making steps: Based on the current system pressure level, query the predefined strategy mapping table and combine it with the resource configuration information table to generate an instruction queue consisting of one or more atomic operation instructions; Resource scheduling and execution steps: sequentially execute atomic operation instructions in the instruction queue, perform resource release or resource degradation operations by manipulating DOM elements, and synchronously update the current resource address and current status of the corresponding resource in the resource configuration information table; Closed-loop feedback and recovery steps: When the system pressure level recovers to the lowest level and remains stable for more than a preset time window, a recovery strategy is triggered to restore the media resources that have been degraded or released in sequence, and to update the resource configuration information table.

[0007] Furthermore, each record in the resource configuration information table also includes the visibility state of the media element relative to the viewport, which is dynamically updated by listening to page scrolling and the Intersection Observer API.

[0008] Furthermore, in the resource registration and classification steps, the priority rule for allocating resource levels is as follows: the resource level and degraded resource address (i.e., low-resolution or low-quality version resource address) declared in the element's inline annotation are given priority; if there is no inline annotation, matching is performed according to the preloaded CSS selector rule set.

[0009] Furthermore, the real-time memory monitoring step employs an adaptive sampling frequency: when the system stress level is at its lowest level, a first sampling frequency is used; when the system stress level is higher than the lowest level, a second sampling frequency higher than the first sampling frequency is used.

[0010] Furthermore, the hysteresis threshold state machine model in the memory pressure level assessment step specifically includes: presetting multiple pressure levels, each level being configured with an independent entry threshold and exit threshold, and the exit threshold of the same level being lower than its entry threshold; state switching only occurs when the current memory occupancy exceeds the entry threshold of the adjacent level or falls below the exit threshold of the current level.

[0011] Furthermore, the strategy mapping table uses pressure level as the key, with each pressure level corresponding to a set of action sequences; the strategy decision step searches for the corresponding action sequence based on the current pressure level, and filters out resource records that meet the conditions in the resource configuration information table, generating an atomic operation instruction for each record.

[0012] Furthermore, the atomic operation instructions are sorted according to the completeness of their release of resource occupation, wherein the release operation has a higher priority than the degradation operation, ensuring that all release instructions in the instruction queue are executed before degradation instructions.

[0013] Furthermore, the preset time window in the closed-loop feedback and recovery steps is a preset duration, and if the system pressure level rises above the lowest level within the time window, the timer is reset; the recovery strategy is as follows: according to the resource level from high priority to low priority, all resources with the status of "degraded" are restored to their original resource addresses, and for resources with the status of "released", they are loaded on demand when they re-enter the viewport.

[0014] This invention also provides a memory-based adaptive management system for web media resources, used to implement the method described in any of the above-mentioned embodiments, characterized in that the system comprises: Resource registration and classification module: used to scan web media elements, assign resource levels, and generate and dynamically maintain resource configuration information tables; Memory monitoring module: used to acquire memory usage data and calculate memory utilization rate with an adaptive sampling frequency; Stress assessment module: Internally maintains a state machine model with hysteresis thresholds to output a stable system stress level based on memory usage. Strategy Engine Module: Stores a strategy mapping table, used to generate an atomic operation instruction queue based on the current system stress level and resource configuration information table; Resource Coordinator: Used to execute atomic operation instructions sequentially, manipulate DOM elements, and synchronously update the resource configuration information table; Closed-loop feedback and recovery module: used to monitor the stability of the system after the pressure level is restored, and to trigger the recovery strategy when the conditions are met.

[0015] The beneficial effects of this invention are as follows: Proactive: Based on real-time memory alerts, it proactively intervenes before the system is about to crash, realizing a shift from passive response to proactive preventative management.

[0016] Smooth and elegant: It adopts a multi-level degradation strategy based on resource priority, which releases low-value resources first and degrades high-value resources, thus achieving a smooth degradation of user experience.

[0017] Global optimization: The decision-making process is based on the memory status of the entire page and the global resource configuration information table to perform unified scheduling, thereby achieving the global optimal allocation of system resources.

[0018] High stability: By designing hysteresis thresholds and stable time windows, frequent fluctuations in system state are effectively avoided, ensuring the robustness of the system.

[0019] High versatility: Based on standard Web API and DOM manipulation, it is not coupled to any specific front-end framework, has strong universality, and is easy to integrate and promote. Attached Figure Description

[0020] Figure 1 This is a schematic diagram of the method flow of the present invention.

[0021] Figure 2 This is a system schematic diagram of the present invention. Detailed Implementation

[0022] The technical solutions in the embodiments of the present invention are clearly and completely described in the following description. Obviously, the described embodiments are only a part of the embodiments of the present invention, and not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those of ordinary skill in the art without creative effort are within the scope of protection of the present invention.

[0023] Example 1: To make the objectives, technical solutions and advantages of the present invention clearer, the present invention will be further described in detail below with reference to the accompanying drawings and specific embodiments.

[0024] like Figure 1 As shown, this embodiment provides a web media resource adaptive management method based on memory warning, which specifically includes the following steps: I. Resource Registration and Classification Steps This step first scans and identifies media resources on the webpage, assigns a resource level representing the importance of each resource based on inline annotations or external rule sets, and generates a dynamically maintained global resource configuration information table as the data basis for all subsequent decisions.

[0025] After the webpage's DOM (Document Object Model) has finished loading, initialization is automatically performed by listening to the DOMContentLoaded event (document load complete event). Specifically, it calls document.querySelectorAll (the method to query all elements in the document) to scan all media elements on the page, including... (Image elements) <video>(Video elements) <audio>(Audio elements) <canvas>(canvas element) etc. For each scanned element, hierarchical information is extracted according to the following priority rules: (1) Explicit annotation by inline tags: read custom attributes on the element (such as the data-priority data priority attribute and the data-low-src data low-quality source address attribute). This is the highest priority, allowing developers to precisely control critical resources. For example: <!-- Example: Specify resource level L0 and degraded address through inline annotation --> CSS selector matching: if there is no inline annotation, match with the preloaded rule set in JSON (JavaScript Object Notation) format. This rule set centrally manages resource policies. For example, the rule set can be stored in the file resource-policy.config.json, with the following content: { "rules": { "selector": ".main-products .swiper-slide-active img", "priority":"L0", "lowSrc": " / low-res / products.png"}, { "selector": ".products-description img", "priority": "L1", "lowSrc": " / low-res / description.jpg"} } A configuration object is created for each resource, and all objects form a "resource configuration information table". The structure of each object is as shown in the following example: { "id": "unique_id_123", / / Unique identifier of the resource, used for quick lookup in the table "element": DOM reference, / / Points to the actual web page element (DOM node) "originalSrc": "https: / / example.com / high.jpg", / / Original address of the high-quality resource "currentSrc": "https: / / example.com / high.jpg", / / Currently actually used resource address ​"priority": "L0", / / Resource level, L0 is the highest, L1, L2, L3 decrease in that order. "lowSrc": "https: / / example.com / low.jpg", / / Degraded resource URL (low-quality version) "state": "registered", / / Current state: registered (already registered) / degraded (already degraded) / released (already released) "visibility": "visible" / / Visibility state: visible (visible) / invisible (invisible) } The visibility state reflects the visibility of media elements relative to the viewport. The viewport refers to the visible area in a browser window used to display webpage content. Media elements are considered "visible" when they appear within the viewport, and "invisible" otherwise. This state is dynamically updated to this table by listening for scroll events and using the cross-observer API. This table serves as the system's data hub, and all decisions are based on this authoritative data source.

[0026] II. Real-time memory monitoring steps This step involves periodically collecting memory usage data and calculating memory occupancy by calling the browser's underlying performance interface. The sampling frequency can be adaptively adjusted according to the current memory stress level: low frequency during low stress and high frequency when stress increases.

[0027] This step calls the window.performance.memory API (browser performance memory interface) to obtain usedJSHeapSize (used JavaScript heap size) and totalJSHeapSize (total JavaScript heap size), and calculates memory usage: Memory usage = usedJSHeapSize / totalJSHeapSize The sampling frequency employs an adaptive strategy: when the system is initially under "low" memory pressure, a lower sampling frequency (e.g., once per second) is used by default; when the pressure assessment module outputs a "medium" or higher level, the sampling frequency is automatically increased to a higher level (e.g., four times per second). This saves computing resources when memory is ample and improves monitoring sensitivity when memory is tight.

[0028] III. Steps for Assessing Memory Stress Levels This step utilizes a state machine model with hysteresis thresholds (hysteresis comparators) to transform continuous memory usage into discrete and stable system stress levels. Each level has independent entry and exit thresholds, with the exit threshold being lower than the entry threshold, forming a hysteresis interval to prevent frequent state fluctuations.

[0029] Stress levels are categorized as low (relaxed), medium (moderate), high (stressful), and critical (urgent). Example configuration: low: enter=0.00, exit=0.65 medium: enter=0.75, exit=0.72 (hysteresis interval 3%) high: enter=0.85, exit=0.80 (hysteresis interval 5%) Critical: Enter = 0.93, Exit = 0.88 (5% hysteresis) State machine transition logic: Relaxed → Medium: Memory usage ≥ Medium. (enter (0.75)) Medium → Stressful: Memory usage ≥ Stressful.enter (0.85); Medium → Relaxed: Memory usage < Medium.exit (0.72) Stress → Urgent: Memory usage ≥ Urgent.enter (0.93); Stress → Moderate: Memory usage < Stress.exit (0.80) Urgent → Strained: Memory usage < Urgent.exit (0.88) The following code implements this state machine: / ** * A stress estimator class that implements a state machine with a hysteresis threshold. * Function: Determines whether to switch stress levels based on current memory usage and stress level, and eliminates status jitter through hysteresis intervals. / class PressureEvaluator { / ** * Constructor: Initializes the entry / exit thresholds for each pressure level. / constructor() { / / Lag threshold configuration: Each level includes an entry threshold and an exit threshold. / / Entry threshold: The minimum memory usage required to advance from a lower level to this level. / / Exit threshold: The maximum memory usage level required to revert from this level to a lower level (exit only occurs if the memory usage drops below this value). this.thresholds = { low: { enter: 0.00, exit: 0.65}, / / lenient level: exit threshold 0.65 medium: { enter: 0.75, exit: 0.72}, / / Medium level: 0.75 for entry, 0.72 for exit high: { enter: 0.85, exit: 0.80}, / / Tension level: 0.85 upon entry, 0.80 upon exit critical: { enter: 0.93, exit: 0.88} / / Emergency level: Enter 0.93, Exit 0.88 }; this.currentLevel = 'low'; / / Current stress level, initially set to 'loose'. } / ** * Assess memory usage, return the new stress level, and see if it has changed. * @param {number} memoryUsageRatio - Memory usage ratio, value range 0~1 * @returns {object} returns an object that contains three properties: * level: New stress level string ('low' / 'medium' / 'high' / 'critical') * changed: Boolean value, indicating whether the pressure level has changed. * ratio: Original memory usage (for easy logging by the caller) / evaluate(memoryUsageRatio) { let newLevel = this.currentLevel; / / Based on the current level, determine whether a state transition is needed. switch (this.currentLevel) { case 'low': / / Upgrade from low: Use the entry threshold for medium if (memoryUsageRatio >= this.thresholds.medium.enter) newLevel = 'medium'; break case 'medium': / / Upgrade to high: Use the high entry threshold if (memoryUsageRatio >= this.thresholds.high.enter) newLevel = 'high'; / / Downgrade back to low: Use the exit threshold of medium (lagging, requires below 72%) else if (memoryUsageRatio < this.thresholds.medium.exit) newLevel = 'low'; break case 'high': / / Upgrade to critical: Use the critical entry threshold if (memoryUsageRatio >= this.thresholds.critical.enter) newLevel = 'critical'; / / Downgrade back to medium: Use the exit threshold of high else if (memoryUsageRatio < this.thresholds.high.exit) newLevel = 'medium'; break case 'critical': / / Degrade to high only when the exit threshold is below critical. if (memoryUsageRatio < this.thresholds.critical.exit) newLevel = 'high'; break } / / If the level changes, update the current level and return the change information. if (newLevel !== this.currentLevel) { this.currentLevel = newLevel; return { level: newLevel, changed: true, ratio: memoryUsageRatio}; } return { level: this.currentLevel, changed: false, ratio:memoryUsageRatio}; } } This hysteresis threshold design ensures that the system state remains unchanged when memory usage fluctuates within the hysteresis range, effectively preventing frequent state jitter and guaranteeing system stability.

[0030] Strategic decision-making steps This step receives the current stable system pressure level, queries the predefined policy mapping table, combines it with the resource configuration information table to filter the affected resources, generates atomic operation instructions for each resource, and forms an instruction queue by sorting them according to the completeness of the operation release.

[0031] The policy engine maintains a policy matrix that maps stress levels to specific action sequences. For example, a policy configuration for a "stress" level could specify that low-priority and invisible resources should be released first, and then visible medium-priority resources should be degraded.

[0032] / ** * Strategy Mapping Table: Defines the sequence of operations to be performed under different pressure levels. * The key is a stress level string (e.g., 'high'), and the value is an object containing an array of actions. Each action contains a target (filter criteria) and an operation (operation type). / const policyMatrix = { high: { / / Perform the following actions when the stress level is "tense"} actions: [ { target: { priority: ['L3'], visibility: 'invisible'}, / / Filter criteria: resource level L3 and invisible operation: 'RELEASE' / / Perform a release operation (completely release the memory) }, { target: { priority: ['L2'], visibility: 'visible'}, / / Filter criteria: resource level L2 and visible operation: 'DEGRADE' / / Perform a degradation operation (replace with a lower-quality resource). } ] }, / / Other pressure levels (such as medium and critical) can be defined similarly, and are omitted here. }; Upon receiving a new pressure level, the engine searches the policyMatrix for the corresponding actions array. For each action, it filters the resource configuration information table to select all resource records that meet the target conditions (such as resource level and visibility), and generates an atomic operation instruction for each record. For example, the release instruction generated for a certain resource is as follows: { "command": "RELEASE", / / Operation command: Release "resourceId": "img_123", / / Unique identifier of the target resource "targetSrc": null, / / The deallocation operation does not require the target address. "expectedNewState": "released" / / Expected new state } After all instructions are generated, they are sorted according to the thoroughness of their resource release (release operations that completely release memory have higher priority than degraded operations that only reduce memory quality), forming an instruction queue which is then sent to the resource scheduler. This design decouples stress states from specific operations and has good configurability.

[0033] Resource scheduling and execution steps This step executes the instruction queue sequentially, directly manipulates DOM elements to release or degrade resources, and synchronously updates the resource configuration information table to ensure that it always reflects the true state.

[0034] The resource scheduler executes each atomic instruction in the instruction queue sequentially. Internally, the executor performs the corresponding operation based on the command field of the instruction and updates the resource configuration information table synchronously.

[0035] The `RELEASE` operation first searches for the corresponding record in the resource configuration information table based on the resource ID; then, it sets the `src` attribute of the media element to a 1×1 pixel transparent placeholder image (embedded as a DataURL, without generating a network request); if it is a video element, it calls its `pause()` method to pause playback; finally, it sets the `currentSrc` of the record to null and the `state` to "released". Example code is as follows: / / Assuming resourceConfigTable is an array of resource configuration information tables, and instruction is the current instruction. / / Look up the corresponding resource record in the configuration table based on the resourceId in the command. const record = resourceConfigTable.find(r => r.id ===instruction.resourceId); if (record) { / / Set the source address of the media element to a transparent placeholder image (a 1x1 pixel GIF image in DataURL format). / / This placeholder image uses almost no memory and does not generate network requests. record.element.src = 'data:image / gif;base64,R0lGODlhAQABAIAAAAAAAP / / / yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'; / / If it is a video element, pause playback to free up additional resources such as the video decoder and buffer. if (record.element instanceof HTMLVideoElement) { record.element.pause(); } / / Synchronize and update the current address and status in the resource configuration information table. record.currentSrc = null; / / Set the current resource address to null record.state = 'released'; / / Update the state to "Released" } (2) Degradation operation: Modify the src attribute of the media element to the resource address with lower resolution or quality (i.e., lowSrc) preset in the configuration information table, and synchronously update the currentSrc and state fields in the configuration information table: const record = resourceConfigTable.find(r => r.id ===instruction.resourceId); if (record) { / / Modify the source address of an element to a low-quality resource address (such as a low-resolution image or a low-bitrate video). / / instruction.targetSrc usually comes from the lowSrc field in the configuration table. record.element.src = instruction.targetSrc; / / Update configuration information table record.currentSrc = instruction.targetSrc; / / Change the current address to a lower quality address record.state = 'degraded'; / / Update the status to "degraded" } After each instruction is executed, the status of the corresponding resource in the resource configuration information table is updated immediately to ensure that the table is always the only authoritative source of the actual status of the page and to avoid incorrect scheduling caused by status lag.

[0036] VI. Closed-loop feedback and recovery steps This step continuously monitors the system stress level. When the stress level returns to its lowest level, a stabilization timer is started. Recovery is only triggered after the system has stabilized for more than a preset time window. During recovery, degraded resources are restored to their original quality first, while released resources are loaded on demand as they re-enter the viewport.

[0037] The closed-loop feedback module continuously monitors memory monitoring data. When the stress level returns to low, a stabilization timer (with a preset time window, e.g., 2000 milliseconds) is started. If the stress level rises above low within this window, the timer is reset. Recovery is only triggered after the low state has stabilized for more than this window. The following code implements this logic: let recoveryTimer = null; / / Recovery timer flag used for delayed recovery operations / ** * Callback function when pressure level changes * @param {string} newLevel - New stress level ('low' / 'medium' / 'high' / 'critical') / function onPressureLevelChanged(newLevel) { if (newLevel === 'low') { / / The level is changed to relaxed, and a stable window timer is started (preset to trigger recovery after 2000 milliseconds). / / Use setTimeout to delay the trigger; recovery will only be executed if memory pressure remains low for a period of time. This avoids frequent restore-degrade loops and prevents system state jitter. recoveryTimer = setTimeout(() => { triggerRecovery(); / / Trigger the recovery strategy }, 2000); } else { / / The level has been raised back to above the "relaxed" level (i.e., memory pressure has increased again), and the previous timer has been cancelled. / / Prevents incorrect resource recovery when memory pressure is unstable. if (recoveryTimer) { clearTimeout(recoveryTimer); recoveryTimer = null; } } } Upon recovery being triggered, the module sends a dummy {level: 'recovery'} signal to the policy engine. The policy engine then performs recovery in the following order: First, according to resource priority from high to low (L0→L1→L2→...), restore all resources with a status of "degraded" to their originalSrc (original resource address). This operation ensures that the most important content is restored to its highest quality first.

[0038] Secondly, for resources with a "released" status, they are not loaded immediately. Instead, their status is reset to "registered," and they are loaded on demand when they re-enter the viewport, relying on a lazy loading mechanism. "Re-entering the viewport" means that the media element reappears in the visible area of ​​the browser window, at which point loading is triggered to avoid restoring all resources at once and causing new memory pressure.

[0039] All recovery operations are also executed through the resource scheduler, and the resource configuration information table is updated synchronously (currentSrc is changed back to originalSrc, and state is changed back to registered), thereby starting a new round of closed-loop control.

[0040] Through the above six steps, the system forms a complete closed loop of "monitoring-evaluation-decision-execution-feedback", realizing adaptive management of web media resources. Example

[0041] This invention also provides a memory-based adaptive management system for web media resources to implement the above method. The system adopts a modular architecture, with each module responsible for one link in the closed loop. The following is combined with... Figure 2 Each module is described in detail.

[0042] System Overall Architecture The system comprises the following six core modules: Resource Registration and Classification Module Memory monitoring module Stress assessment module Strategy Engine Module Resource Coordinator Closed-loop feedback and recovery module These modules exchange data and synchronize their states through a shared resource configuration information table. This table is stored in memory and can be read and updated by all modules (consistency is guaranteed through atomic operations).

[0043] Each module's function and collaborative work are completed.

[0044] Resource Registration and Classification Module Function: After the webpage has finished loading, scan the DOM tree to identify all media elements. , <video> , <audio> , <canvas>The module assigns a resource level (L0~L3) to each element based on inline annotations or external CSS rule sets, and generates an initial resource configuration information table. Simultaneously, the module continuously monitors DOM changes (e.g., through MutationObserver, an interface for monitoring DOM tree changes), dynamically registering newly added media resources or removing deleted resources to ensure the configuration table is always up-to-date.

[0045] Input: Web page DOM tree, external strategy configuration file (JSON format).

[0046] Output: Resource configuration information table.

[0047] Memory monitoring module Functionality: Periodically calls the window.performance.memory API (browser performance memory interface) to obtain memory usage data and calculate the current memory utilization rate. The sampling frequency is adaptively adjustable: it defaults to a low frequency (1 time / second), automatically switching to a high frequency (4 times / second) when the stress assessment module's output level is ≥medium. This module also provides a real-time memory utilization query interface for use by other modules.

[0048] Input: None (directly reads the browser API).

[0049] Output: Memory usage (a floating-point number between 0 and 1).

[0050] Stress assessment module Functionality: Internally, this module maintains a state machine with a hysteresis threshold (similar to the PressureEvaluator class in the method embodiment). It receives memory usage data from the memory monitoring module and outputs a stable system stress level (low / medium / high / critical). This module implements a hysteresis comparator to avoid frequent state switching due to minor memory fluctuations.

[0051] Input: Memory usage.

[0052] Output: System pressure level and level change indicator.

[0053] Strategy Engine Module Functionality: Stores a predefined policy matrix. When a new stress level is received from the stress assessment module, it looks up the corresponding action sequence based on the level, filters affected resources using the resource configuration information table, and generates atomic operation instructions for each resource. After instruction generation, they are sorted by release completeness to form an instruction queue and sent to the resource coordinator. Additionally, the policy engine can process recovery signals (level: 'recovery') and generate corresponding recovery instructions.

[0054] Input: System stress level, resource configuration information table.

[0055] Output: Atomic operation instruction queue.

[0056] Resource Coordinator Functionality: Receives a queue of instructions and executes each instruction sequentially. During execution, it directly manipulates DOM element attributes (such as src) or methods (such as pause() for video) to release or degrade resources. After each instruction is executed, the currentSrc and state fields of the corresponding resource in the resource configuration information table are immediately updated. This module guarantees the atomicity and sequentiality of operations, avoiding race conditions.

[0057] Input: Atomic operation instruction queue.

[0058] Output: Updated resource configuration information table, actual DOM changes.

[0059] Closed-loop feedback and recovery module.

[0060] Function: Monitors the stress level output by the stress assessment module. When the level drops to low, a stabilization timer is started; if the level rises again within a preset window, the timer is reset; if stability is maintained beyond the window, recovery is triggered. During recovery, a recovery signal is sent to the policy engine, which generates recovery instructions (first recovering degraded resources, then loading and releasing resources as needed). This module also manages interruptions and retries during the recovery process.

[0061] Input: System pressure level.

[0062] Output: recovery signal, recovery command.

[0063] This invention is not limited to the specific embodiments described above. The invention extends to any new feature or combination disclosed in this specification, as well as any new method or process step or combination disclosed herein.< / canvas> < / audio> < / video> < / canvas> < / audio> < / video>

Claims

1. A method for adaptive management of web media resources based on memory warning, characterized in that, Includes the following steps: Resource registration and grading steps: Scan media elements in the webpage, assign resource level to each media element according to preset priority rules, and generate a resource configuration information table; the resource configuration information table shall at least include the unique identifier, DOM reference, original resource address, current resource address, resource level, and current status of each media element; Real-time memory monitoring steps: Obtain memory usage data of the current page through the browser performance interface and calculate memory usage rate; Memory stress level assessment steps: Using a state machine model with hysteresis thresholds, the memory occupancy rate is converted into a system stress level, wherein each stress level has an entry threshold and an exit threshold, and the state transition is determined based on the current level and the comparison result between the memory occupancy rate and the corresponding threshold. Strategy decision-making steps: Based on the current system pressure level, query the predefined strategy mapping table and combine it with the resource configuration information table to generate an instruction queue consisting of one or more atomic operation instructions; Resource scheduling and execution steps: sequentially execute atomic operation instructions in the instruction queue, perform resource release or resource degradation operations by manipulating DOM elements, and synchronously update the current resource address and current status of the corresponding resource in the resource configuration information table; Closed-loop feedback and recovery steps: When the system pressure level recovers to the lowest level and remains stable for more than a preset time window, a recovery strategy is triggered to restore the media resources that have been degraded or released in sequence, and to update the resource configuration information table.

2. The method according to claim 1, characterized in that, Each record in the resource configuration information table also contains the visibility status of the media element relative to the viewport, which is dynamically updated by listening to page scrolling and the cross-observer API.

3. The method according to claim 1, characterized in that, In the resource registration and classification steps, the priority rule for allocating resource levels is as follows: the resource level and degraded resource address declared in the element's inline annotation are used first; if there is no inline annotation, the matching is performed according to the preloaded CSS selector rule set.

4. The method according to claim 1, characterized in that, The real-time memory monitoring step uses an adaptive sampling frequency: when the system stress level is at the lowest level, a first sampling frequency is used; when the system stress level is higher than the lowest level, a second sampling frequency higher than the first sampling frequency is used.

5. The method according to claim 1, characterized in that, The hysteresis threshold state machine model in the memory pressure level assessment step specifically includes: multiple preset pressure levels, each level configured with independent entry and exit thresholds, and the exit threshold of the same level is lower than its entry threshold; state switching only occurs when the current memory occupancy exceeds the entry threshold of the adjacent level or falls below the exit threshold of the current level.

6. The method according to claim 1, characterized in that, The strategy mapping table uses pressure level as the key, with each pressure level corresponding to a set of action sequences. Each action includes target resource filtering conditions and operation type. The strategy decision step searches for the corresponding action sequence based on the current pressure level. For each action, resource records that meet the target resource filtering conditions are filtered in the resource configuration information table, and an atomic operation instruction is generated for each resource record. The atomic operation instruction includes at least the operation command, the unique identifier of the resource, and the expected new state.

7. The method according to claim 6, characterized in that, The atomic operation instructions are ordered according to the thoroughness of their release of resource occupancy, with release operations having higher priority than degrade operations.

8. The method according to claim 1, characterized in that, The preset time window in the closed-loop feedback and recovery step is a preset duration, and if the system pressure level rises back to above the lowest level within the time window, the timer is reset.

9. The method according to claim 8, characterized in that, The recovery strategy is as follows: in order of resource priority from high to low, all resources with a status of "degraded" are restored to their original resource addresses, and resources with a status of "released" are loaded on demand when they re-enter the viewport.

10. A webpage media resource adaptive management system based on memory warning, used to implement the method of any one of claims 1 to 9, characterized in that, The system includes: Resource registration and classification module: used to scan web media elements, assign resource levels, and generate and dynamically maintain resource configuration information tables; Memory monitoring module: used to acquire memory usage data and calculate memory utilization rate with an adaptive sampling frequency; Stress assessment module: Internally maintains a state machine model with hysteresis thresholds to output a stable system stress level based on memory usage. Strategy Engine Module: Stores a strategy mapping table, used to generate an atomic operation instruction queue based on the current system stress level and resource configuration information table; Resource Coordinator: Used to execute atomic operation instructions sequentially, manipulate DOM elements, and synchronously update the resource configuration information table; Closed-loop feedback and recovery module: used to monitor the stability of the system after the pressure level is restored, and to trigger the recovery strategy when the conditions are met.

Images