Component cleaning method, device, apparatus, and readable storage medium
By identifying the resource entities of component instances and their dependencies, breaking reference links, and cleaning up in reverse topology order, the memory leak problem caused by component instances in large single-page applications is solved, ensuring thorough resource cleanup and improving memory utilization and application stability.
Patent Information
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- 创优数字科技(广东)有限公司
- Filing Date
- 2026-05-13
- Publication Date
- 2026-07-31
AI Technical Summary
The memory leak problem caused by the surge in the number of component instances in large single-page applications is particularly prominent on mobile and low-power devices. Existing technologies are unable to effectively clean up residual component references and event bindings, resulting in memory resource consumption and performance degradation.
By identifying the resource entities of the component instances to be cleaned up, obtaining the resource dependency graph of the resource dependencies and cleanup callback functions, breaking the reference links, and cleaning up in reverse topology order, the thorough cleanup of resource entities is ensured.
It achieves targeted and thorough component cleanup, avoids memory leaks, improves application memory utilization and operational stability, and reduces memory consumption.
Smart Images
Figure CN122489153A_ABST
Abstract
Description
Technical Field
[0001] This application relates to the field of data processing technology, and more specifically, to a component cleaning method, apparatus, device, and readable storage medium. Background Technology
[0002] As front-end applications become increasingly complex and interactive, large single-page applications frequently involve dynamic component loading, route switching, and real-time data updates, leading to a surge in the number of component instances. If not cleaned up in a timely manner, residual component references and event bindings will continuously consume memory, easily causing memory leaks, which manifest as a gradual decline in application performance, UI lag, or even crashes. This problem is particularly pronounced on mobile and low-power devices where memory resources are limited. Therefore, a component cleanup method is urgently needed to promptly remove component instances and prevent memory leaks. Summary of the Invention
[0003] In view of this, this application provides a component cleanup method, apparatus, device, and readable storage medium for cleaning up component instances to avoid memory leaks.
[0004] To achieve the above objectives, the following solution is proposed:
[0005] A component cleanup method includes:
[0006] Identify the resource entities corresponding to the component instances to be cleaned up;
[0007] Obtain a resource dependency graph that records the dependencies between various resource entities and the corresponding cleanup callback function for each resource entity;
[0008] Disconnect the reference link between each resource entity and the component instance to be cleaned, and clean up the resource entity in reverse topological order according to the resource dependency graph, based on the cleanup callback function of each resource entity.
[0009] Optionally, determining the resource entities corresponding to the component instance to be cleaned includes:
[0010] The independent resource pool provided by the resource registrar for the component instance to be cleaned during the component creation phase is obtained. The independent resource pool is used to record all the first resource entities corresponding to the component instance to be cleaned.
[0011] Determine whether the component instance to be cleaned has any child component instances;
[0012] If so, then obtain all second resource entities from the independent resource pools corresponding to all sub-component instances of the component instance to be cleaned; combine each first resource entity and each second resource entity to form each resource entity;
[0013] If not, then each primary resource entity will be directly treated as a resource entity.
[0014] Optionally, determining whether the component instance to be cleaned has child component instances includes:
[0015] Based on the component reference relationships and virtual DOM tree of the component instance to be cleaned during runtime, identify whether the component instance to be cleaned is associated with child component instances.
[0016] Optionally, obtaining the resource dependency graph used to record the dependencies between various resource entities and the cleanup callback function corresponding to each resource entity includes:
[0017] Identify the resource type of each resource entity, and determine the cleanup callback function for that resource entity based on its resource type;
[0018] Based on the calling relationships of various resource entities during the operation of the component instance to be cleaned, the various resource entities and their cleanup callback functions are integrated to form a resource dependency graph.
[0019] Optionally, determining the cleanup callback function for each resource entity based on its resource type includes:
[0020] If any resource entity's resource type is a DOM event listener, then a cleanup callback function for that resource entity is generated based on the element reference, event type, listener function, and event delegate usage status of that resource entity.
[0021] Optionally, determining the cleanup callback function for each resource entity based on its resource type includes:
[0022] If any resource entity's resource type is global event subscription, then a cleanup callback function for that resource entity is generated based on its event name, callback function, and unbinding method.
[0023] Optionally, disconnecting the reference links between each resource entity and the instance of the component to be cleaned, and cleaning up the resource entity according to the resource dependency graph in reverse topological order based on the cleanup callback function of each resource entity, includes:
[0024] Suspend resource registration for the component instances to be cleaned up;
[0025] Based on the resource type of each resource entity, disconnect the reference link between that resource entity and the instance of the component to be cleaned up;
[0026] Based on the resource dependency graph, the cleanup of each resource entity is performed sequentially according to the cleanup callback function of each resource entity in reverse topological order.
[0027] A component cleaning device, comprising:
[0028] The determination module is used to identify the resource entities corresponding to the component instances to be cleaned up;
[0029] The acquisition module is used to acquire a resource dependency graph that records the dependencies between various resource entities and the corresponding cleanup callback function for each resource entity.
[0030] The cleanup module is used to disconnect the reference links between each resource entity and the component instance to be cleaned, and clean up the resource entity according to the resource dependency graph in reverse topological order based on the cleanup callback function of each resource entity.
[0031] A component cleaning device includes a memory and a processor;
[0032] The memory is used to store programs;
[0033] The processor is used to execute the program to implement each step of the component cleanup method described above.
[0034] A readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the various steps of the component cleanup method described above.
[0035] As can be seen from the above technical solutions, the component cleanup method provided in this application, by identifying each resource entity corresponding to the component instance to be cleaned, can locate all resource entities associated with the component instance to be cleaned, such as DOM event listeners and global event subscriptions, exclude resources unrelated to the component instance to be cleaned, prevent the accidental cleanup of normally functioning resources from causing application abnormalities, and provide clear operation objects for subsequent targeted cleanup, ensuring that the cleanup operation is highly targeted and without omissions, and avoiding memory leaks caused by ineffective cleanup; subsequently, this application can break the reference links between each resource entity and the component instance to be cleaned, thereby breaking the resource... The association between source entities and components facilitates the identification and marking of recyclable resources. By obtaining a resource dependency graph that records the dependencies between various resource entities and the corresponding cleanup callback functions for each resource entity, and performing resource entity cleanup in reverse topological order, cleanup failures or resource residues caused by cleaning dependent resources first are avoided. For example, cleaning child resources first and then parent resources prevents the problem of child resources not being able to be located after the parent resource is cleaned up. Furthermore, the cleanup callback function corresponding to each resource entity completes the targeted cleanup of that resource, ensuring that each resource entity is thoroughly cleaned up, fundamentally solving the problem of residual resources occupying memory, and achieving the goal of reducing memory consumption. It can be seen that this application can utilize a resource dependency graph containing dependencies and cleanup callback functions to achieve fully automatic and orderly resource reclamation, completely eliminating the need for manual management, eliminating reference residency and resource leaks, reducing memory overhead, and improving application memory utilization and operational stability. Attached Figure Description
[0036] To more clearly illustrate the technical solutions in the embodiments of this application or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are only embodiments of this application. For those skilled in the art, other drawings can be obtained based on the provided drawings without creative effort.
[0037] Figure 1 This is a flowchart of a component cleanup method disclosed in an embodiment of this application;
[0038] Figure 2 This is a structural block diagram of a component cleaning device disclosed in an embodiment of this application;
[0039] Figure 3 This is a hardware structure block diagram of a component cleaning device disclosed in an embodiment of this application. Detailed Implementation
[0040] The technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, and not all embodiments. Based on the embodiments of this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.
[0041] This application provides a component cleanup method, which can be applied to various component management systems or memory management systems, as well as to various computer terminals or smart terminals. The executing entity can be the processor or server of the computer terminal or smart terminal.
[0042] Next, combine Figure 1 The component cleanup method described in this application is detailed below, including the following steps:
[0043] Step S1: Determine the resource entities corresponding to the component instances to be cleaned up.
[0044] Specifically, all independent resource pools corresponding to the component instance to be cleaned can be identified, and all resource entities corresponding to the component instance to be cleaned can be obtained from each independent resource pool.
[0045] Step S2: Obtain a resource dependency graph that records the dependencies between various resource entities and the cleanup callback function corresponding to each resource entity.
[0046] Specifically, the dynamic dependencies of each resource entity during the execution of the instance to be cleaned can be determined;
[0047] Determine a unique identifier and creation timestamp for each resource entity;
[0048] Determine the cleanup callback function for each resource entity;
[0049] A resource dependency graph is constructed based on dynamic dependencies, unique identifiers for each resource entity, creation timestamps, and cleanup callback functions.
[0050] Step S3: Disconnect the reference link between each resource entity and the instance of the component to be cleaned, and clean up the resource entity according to the cleanup callback function of each resource entity in reverse topological order based on the resource dependency graph.
[0051] Specifically, the reference links between each resource entity and the component instance to be cleaned can be disconnected first to prevent business logic from calling the resource entity during the cleanup process, which could cause cleanup errors.
[0052] Cleanup operations can be performed by sequentially calling the cleanup callback function corresponding to each resource entity, starting from the top-level resource entity and following the reverse topological order of the resource dependency graph.
[0053] This ensures that every resource entity associated with the component instance to be cleaned can be accurately cleaned, preventing issues such as resource location failure or incomplete cleanup due to incorrect dependency order, and ultimately completing the full resource reclamation of the entire component instance to be cleaned.
[0054] As can be seen from the above technical solutions, the component cleanup method provided in this application, by identifying each resource entity corresponding to the component instance to be cleaned, can locate all resource entities associated with the component instance to be cleaned, such as DOM event listeners and global event subscriptions, exclude resources unrelated to the component instance to be cleaned, prevent the accidental cleanup of normally functioning resources from causing application abnormalities, and provide clear operation objects for subsequent targeted cleanup, ensuring that the cleanup operation is highly targeted and without omissions, and avoiding memory leaks caused by ineffective cleanup; subsequently, this application can break the reference links between each resource entity and the component instance to be cleaned, thereby breaking the resource... The association between source entities and components facilitates the identification and marking of recyclable resources. By obtaining a resource dependency graph that records the dependencies between various resource entities and the corresponding cleanup callback functions for each resource entity, and performing resource entity cleanup in reverse topological order, cleanup failures or resource residues caused by cleaning dependent resources first are avoided. For example, cleaning child resources first and then parent resources prevents the problem of child resources not being able to be located after the parent resource is cleaned up. Furthermore, the cleanup callback function corresponding to each resource entity completes the targeted cleanup of that resource, ensuring that each resource entity is thoroughly cleaned up, fundamentally solving the problem of residual resources occupying memory, and achieving the goal of reducing memory consumption. It can be seen that this application can utilize a resource dependency graph containing dependencies and cleanup callback functions to achieve fully automatic and orderly resource reclamation, completely eliminating the need for manual management, eliminating reference residency and resource leaks, reducing memory overhead, and improving application memory utilization and operational stability.
[0055] In some embodiments of this application, the process of step S1, determining the resource entities corresponding to the component instance to be cleaned, is described in detail as follows:
[0056] S10. Obtain the independent resource pool provided by the resource registrar for the component instance to be cleaned during the component creation phase. The independent resource pool is used to record all the first resource entities corresponding to the component instance to be cleaned.
[0057] Specifically, during the component creation phase, the Vue plugin mechanism can be used to extend the component lifecycle hooks to automatically initialize the resource registry.
[0058] An independent resource pool can be obtained from the resource registrar for the component instance to be cleaned during the component creation phase.
[0059] Each independent resource pool can include any one or more of the following: DOM event listeners, timers, animation frames, asynchronous requests, global event subscriptions, Vuex subscriptions, and third-party library instances.
[0060] The registry provides a unified resource registration interface. Components can register resources by calling this interface and associate cleanup callback functions.
[0061] The JavaScript WeakMap in the resource registry can be used to maintain the mapping relationship between each component instance and each independent resource pool, avoiding circular references that hinder garbage collection.
[0062] During the component update phase, Vue's reactive system can be used to monitor component state changes, determine resource dependencies, and ensure that resources are synchronized with the component lifecycle.
[0063] Different resource entities can correspond to different registration record data.
[0064] For example, when registering an event listener, the original listener function can be automatically encapsulated, and its DOM element and event type can be recorded.
[0065] For example, when registering a timer, you can record the timer ID and the clearing method.
[0066] All entities contained in the independent resource pool of the component instance to be cleaned can be used as the first resource subject.
[0067] S11. Determine whether the component instance to be cleaned has any child component instances. If yes, obtain all second resource entities from the independent resource pools corresponding to all child component instances of the component instance to be cleaned; combine each first resource entity with each second resource entity to form each resource entity; otherwise, directly use each first resource entity as each resource entity.
[0068] Specifically, the component tree structure of the component instance to be cleaned can be traversed, and all nested child component instances can be searched recursively layer by layer. If a child component instance is found, all entities are extracted from the independent resource pool corresponding to each child component instance as the second resource body. The first resource body is merged with all the second resource bodies to obtain all resource entities corresponding to the component instance to be cleaned, so as to avoid missing the resources associated with the child components and causing incomplete cleanup.
[0069] If a component instance cannot be found, the first resource body can be directly used as the resource entity.
[0070] The first resource entity refers to the resource entity extracted from the independent resource pool of the component instance to be cleaned up;
[0071] The second-choice entity refers to the resource entity extracted from the independent resource pool of the sub-component instance corresponding to the component instance to be cleaned.
[0072] As can be seen from the above technical solution, this embodiment provides an optional method for determining the resource entities corresponding to the component instance to be cleaned. This method ensures that all associated resources, including nested sub-components, are completely collected, preventing resource residue due to missing sub-level resources, thus further improving the thoroughness of component cleanup and effectively avoiding memory leaks.
[0073] In some embodiments of this application, the process of determining whether the component instance to be cleaned has a child component instance in step S11 is described in detail, and the steps are as follows:
[0074] S110. Based on the component reference relationships and virtual DOM tree of the component instance to be cleaned during operation, identify whether the component instance to be cleaned is associated with child component instances.
[0075] Specifically, in composite component scenarios, a parent component instance may dynamically load or render multiple child component instances. Therefore, it is necessary to ensure that all child component instances are cleaned up in a chain when the parent component instance is destroyed.
[0076] By referencing Vue components and traversing the virtual DOM tree, you can identify all child component instances of the component instance to be cleaned during its runtime, establish the association between the component instance to be cleaned and its child component instances, and determine the resource registration events of the child component instances.
[0077] For conditional rendering and loop rendering components, independent resource pools can be dynamically maintained through Vue's reactive update mechanism.
[0078] As can be seen from the above technical solution, this embodiment provides an optional method for determining whether the component instance to be cleaned has child component instances. Through this method, resource aggregation and component tree-level memory management can be achieved, ensuring that the destruction of any component completely releases its entire subtree resources, effectively avoiding memory leaks caused by residual child component resources, and further guaranteeing the thoroughness of the cleanup.
[0079] In some embodiments of this application, the process of step S2, obtaining a resource dependency graph that records the dependencies between various resource entities and the cleanup callback function corresponding to each resource entity, is described in detail below:
[0080] S20. Identify the resource type of each resource entity, and determine the cleanup callback function for that resource entity based on its resource type.
[0081] Specifically, the resource type of each resource entity can be determined, and based on the resource type, the corresponding cleanup parameters of the resource entity can be determined;
[0082] Based on the various cleanup parameters of each resource entity, a cleanup callback function for the corresponding resource entity can be constructed.
[0083] S21. Based on the calling relationship of each resource entity during the operation of the component instance to be cleaned, integrate each resource entity and its cleanup callback function to form a resource dependency graph.
[0084] Specifically, it can obtain the latest call relationships of each resource entity when the component instance to be cleaned ends its runtime;
[0085] Using the identifier of each resource entity and its corresponding callback function as graph nodes, a resource dependency graph can be constructed based on the latest call relationships.
[0086] As can be seen from the above technical solution, this embodiment provides an optional method for obtaining a resource dependency graph that records the dependencies between various resource entities and the corresponding cleanup callback function for each resource entity. Through this method, the actual dependencies between various resource entities can be recorded, and the corresponding cleanup callback functions can be bound, providing an accurate basis for subsequent cleanup in dependency order, avoiding errors in the cleanup order due to incorrect dependency recording, and ensuring the orderly progress of the cleanup process.
[0087] In some embodiments of this application, the process of step S20, identifying the resource type of each resource entity, and determining the cleanup callback function for each resource entity based on its resource type, is described in detail below:
[0088] S200. If the resource type of any resource entity is a DOM event listener, then a cleanup callback function for that resource entity is generated based on the element reference, event type, listener function, and event delegate usage status of that resource entity.
[0089] Specifically, the element reference, event type, listener function, and event delegate usage state are the complete parameter object required to remove the DOM event listener.
[0090] Element references can be used to directly call the native API for removing event listeners to complete cleanup;
[0091] If event delegation is used, the corresponding listeners bound to the delegation container must be removed synchronously to avoid event listeners continuously residing and triggering unnecessary callbacks, thus consuming additional resources.
[0092] Even if a DOM node has been removed along with the component, the corresponding cleanup steps will still be performed to remove the listener function reference, completely eliminating the risk of reference persistence.
[0093] S201. If the resource type of any resource entity is global event subscription, then generate a cleanup callback function for that resource entity based on its event name, callback function, and unbinding method.
[0094] Specifically, the event name, callback function, and unbinding method are the parameter objects required to remove the global event subscription.
[0095] S202. If the resource type of any resource entity is a timer or animation frame, then generate a cleanup callback function for that resource entity based on its timer ID, delayed execution code API type, and cleanup function.
[0096] Specifically, the API type for delayed code execution can be apisetTimeout, setInterval, requestAnimationFrame, etc.
[0097] S203. If the resource type of any resource entity is an asynchronous request, then generate a cleanup callback function for that resource entity based on its request cancellation token and abort method.
[0098] S203. If the resource type of any resource entity is a Vuex subscription or a third-party library instance, then a cleanup callback function for that resource entity is generated based on the subscription identifier and cancellation function of that resource entity.
[0099] As can be seen from the above technical solution, this embodiment provides an optional method for identifying the resource type of each resource entity and determining the cleanup callback function for that resource entity based on its resource type. Through this method, matching cleanup callback functions can be generated for different types of resource entities, allowing each type of resource to be cleaned up in an adaptive manner. This avoids incomplete cleanup caused by general cleanup methods being unable to adapt to specific resource types, further ensuring that each resource can be accurately recycled and reducing the possibility of resource residue.
[0100] In some embodiments of this application, the process of step S3, disconnecting the reference link between each resource entity and the instance of the component to be cleaned, and cleaning up the resource entity according to the cleanup callback function of each resource entity in reverse topological order based on the resource dependency graph, is described in detail as follows:
[0101] S30. Suspend the resource registration of the component instance to be cleaned.
[0102] Specifically, resource registration for the component instance to be cleaned and its child component instances can be paused to prevent new resources from being added during the cleanup process.
[0103] S31. Based on the resource type of each resource entity, disconnect the reference link between the resource entity and the component instance to be cleaned.
[0104] Specifically, for DOM event listeners, the implicit reference to the component's `this` in its function closure can be removed;
[0105] For global event subscriptions, the component context binding in the callback function can be removed;
[0106] For Vuex subscriptions and third-party library instances, you can unsubscribe the component from the observer subscription of the reactive object.
[0107] The reference disconnector intercepts resource access via a proxy and sets all related references to null after cleanup.
[0108] Furthermore, the garbage collection cycle can be proactively triggered by periodically calling garbage collection suggestions.
[0109] Large resource groups can be released in batches during idle time using requestIdleCallback to avoid interface lag.
[0110] After the cleanup is complete, the independent resource pool can be compared with the initial resource pool to identify unreleased resources.
[0111] By using the performance.memory API to perform regular memory snapshots and heap analysis, the residual ratio of component instances is calculated, and an alert is triggered if an abnormal increase is detected.
[0112] In development mode, detailed warning information can be output to the console, including the type and quantity of uncleaned resources and the names of associated components, along with suggested remedial measures.
[0113] In a production environment, data can be reported to a monitoring platform for analysis by operations and maintenance personnel.
[0114] S32. Clean up the resource entity according to the resource dependency graph in reverse topological order based on the cleanup callback function of each resource entity.
[0115] Specifically, you can first remove the DOM event listener and cancel the timer, then unbind the global event subscription and stop the asynchronous request, and finally release the third-party library instance.
[0116] For asynchronous request cancellation operations, you can wait for the asynchronous task to complete or force an interruption upon timeout to avoid cleanup blockage.
[0117] It can also be integrated with Vue route guards to automatically trigger the cleanup logic of currently active components when switching routes, ensuring that there is no memory residue when single-page application pages jump.
[0118] In addition, it can handle abnormal component destruction scenarios, such as accidental uninstallation caused by errors, and ensure that cleanup is always performed through global error capture.
[0119] As can be seen from the above technical solution, this embodiment provides an optional method to disconnect the reference link between each resource entity and the component instance to be cleaned, and to clean up the resource entity sequentially according to the resource dependency graph in reverse topological order based on the cleanup callback function of each resource entity. This method can prevent omissions caused by newly added resources during the cleanup process. By disconnecting references first and then cleaning up in reverse dependency order, it avoids closures holding component references from hindering garbage collection, ensures that each resource is accurately located and released through orderly cleanup, and further improves the stability and reliability of the cleanup process through batch release, exception fallback, and exception monitoring, avoiding interface lag and ensuring that resources are thoroughly cleaned up in any scenario, significantly improving the stability of application operation.
[0120] Next, we will combine Figure 2 The component cleaning apparatus provided in this application is described in detail below. The component cleaning apparatus described below can be compared with the component cleaning method described above.
[0121] See Figure 2 It can be observed that the component cleaning device may include:
[0122] Module 10 is used to determine the resource entities corresponding to the component instances to be cleaned up;
[0123] Module 20 is used to obtain a resource dependency graph that records the dependencies between various resource entities and the cleanup callback function corresponding to each resource entity.
[0124] The cleanup module 30 is used to disconnect the reference link between each resource entity and the component instance to be cleaned, and clean up the resource entity according to the resource dependency graph in reverse topological order based on the cleanup callback function of each resource entity.
[0125] Furthermore, the determining module 10 may include:
[0126] The first resource subject acquisition unit is used to acquire the independent resource pool provided by the resource registrar for the component instance to be cleaned during the component creation stage. The independent resource pool is used to record all the first resource subjects corresponding to the component instance to be cleaned.
[0127] The resource entity determination unit is used to determine whether the component instance to be cleaned has sub-component instances; if so, it obtains all second resource entities from the independent resource pools corresponding to all sub-component instances of the component instance to be cleaned; and combines each first resource entity with each second resource entity to form each resource entity; if not, it directly uses each first resource entity as each resource entity.
[0128] Furthermore, the resource entity determination unit may include:
[0129] The component association determination sub-unit is used to identify whether the component instance to be cleaned is associated with child component instances based on the component reference relationship and virtual DOM tree during the runtime of the component instance to be cleaned.
[0130] Furthermore, the acquisition module 20 may include:
[0131] The resource type identification unit is used to identify the resource type of each resource entity and determine the cleanup callback function for that resource entity based on its resource type.
[0132] The resource dependency graph integration unit is used to integrate each resource entity and its cleanup callback function into a resource dependency graph based on the calling relationship of each resource entity during the operation of the component instance to be cleaned.
[0133] Furthermore, the resource type identification unit may include:
[0134] The listener function determines the sub-unit, which is used to generate a cleanup callback function for any resource entity if the resource type of any resource entity is a DOM event listener, based on the element reference, event type, listener function, and event delegate usage status of that resource entity.
[0135] Furthermore, the resource type identification unit may also include:
[0136] The callback function determines the sub-unit, which is used to generate a cleanup callback function for any resource entity if the resource type of any resource entity is a global event subscription, based on the event name, callback function, and unbinding method of that resource entity.
[0137] Furthermore, the cleaning module 30 may include:
[0138] The first cleanup unit is used to suspend the resource registration of the component instance to be cleaned up;
[0139] The second cleanup unit is used to disconnect the reference link between the resource entity and the component instance to be cleaned, based on the resource type of each resource entity.
[0140] The third cleanup unit is used to clean up the resource entity according to the resource dependency graph in reverse topological order based on the cleanup callback function of each resource entity.
[0141] The component cleaning device provided in this application embodiment can be applied to component cleaning equipment, such as PC terminals, cloud platforms, servers, and server clusters. Optionally, Figure 3 The hardware structure block diagram of the component cleaning device is shown, with reference to... Figure 3 The hardware structure of the component cleaning device may include: at least one processor 1, at least one communication interface 2, at least one memory 3, and at least one communication bus 4;
[0142] In this embodiment of the application, the number of processor 1, communication interface 2, memory 3, and communication bus 4 is at least one, and processor 1, communication interface 2, and memory 3 communicate with each other through communication bus 4;
[0143] Processor 1 may be a central processing unit (CPU), an application-specific integrated circuit (ASIC), or one or more integrated circuits configured to implement embodiments of the present invention.
[0144] Memory 3 may include high-speed RAM, and may also include non-volatile memory, such as at least one disk storage device;
[0145] The memory stores a program, which the processor can call. The program is used for:
[0146] Identify the resource entities corresponding to the component instances to be cleaned up;
[0147] Obtain a resource dependency graph that records the dependencies between various resource entities and the corresponding cleanup callback function for each resource entity;
[0148] Disconnect the reference link between each resource entity and the component instance to be cleaned, and clean up the resource entity in reverse topological order according to the resource dependency graph, based on the cleanup callback function of each resource entity.
[0149] Optionally, the refined and extended functions of the program can be referred to the above description.
[0150] This application embodiment also provides a readable storage medium that can store a program suitable for execution by a processor, the program being used for:
[0151] Identify the resource entities corresponding to the component instances to be cleaned up;
[0152] Obtain a resource dependency graph that records the dependencies between various resource entities and the corresponding cleanup callback function for each resource entity;
[0153] Disconnect the reference link between each resource entity and the component instance to be cleaned, and clean up the resource entity in reverse topological order according to the resource dependency graph, based on the cleanup callback function of each resource entity.
[0154] Optionally, the refined and extended functions of the program can be referred to the above description.
[0155] Finally, it should be noted that in this document, relational terms such as "first" and "second" are used only to distinguish one entity or operation from another, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Furthermore, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Without further limitations, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes said element.
[0156] The various embodiments in this specification are described in a progressive manner, with each embodiment focusing on the differences from other embodiments. The same or similar parts between the various embodiments can be referred to each other.
[0157] The above description of the disclosed embodiments enables those skilled in the art to make or use this application. Various modifications to these embodiments will be readily apparent to those skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of this application. The various embodiments of this application can be combined with each other. Therefore, this application is not to be limited to the embodiments shown herein, but is to be accorded the widest scope consistent with the principles and novel features disclosed herein.
Claims
1. A method of cleaning an assembly, characterized by, include: Identify the resource entities corresponding to the component instances to be cleaned up; Obtain a resource dependency graph that records the dependencies between various resource entities and the corresponding cleanup callback function for each resource entity; Disconnect the reference link between each resource entity and the component instance to be cleaned, and clean up the resource entity in reverse topological order according to the resource dependency graph, based on the cleanup callback function of each resource entity.
2. The assembly cleaning method of claim 1, wherein, The process of determining the resource entities corresponding to the component instances to be cleaned includes: The independent resource pool provided by the resource registrar for the component instance to be cleaned during the component creation phase is obtained. The independent resource pool is used to record all the first resource entities corresponding to the component instance to be cleaned. Determine whether the component instance to be cleaned has any child component instances; If so, then obtain all second resource entities from the independent resource pools corresponding to all sub-component instances of the component instance to be cleaned; combine each first resource entity and each second resource entity to form each resource entity; If not, then each primary resource entity will be directly treated as a resource entity.
3. The method of claim 2, wherein, The step of determining whether the component instance to be cleaned has child component instances includes: Based on the component reference relationships and virtual DOM tree of the component instance to be cleaned during runtime, identify whether the component instance to be cleaned is associated with child component instances.
4. The method of claim 1, wherein The process of obtaining the resource dependency graph used to record the dependencies between various resource entities and the cleanup callback function corresponding to each resource entity includes: Identify the resource type of each resource entity, and determine the cleanup callback function for that resource entity based on its resource type; Based on the calling relationships of various resource entities during the operation of the component instance to be cleaned, the various resource entities and their cleanup callback functions are integrated to form a resource dependency graph.
5. The method of claim 4, wherein, The step of determining the cleanup callback function for each resource entity based on its resource type includes: If any resource entity's resource type is a DOM event listener, then a cleanup callback function for that resource entity is generated based on the element reference, event type, listener function, and event delegate usage status of that resource entity.
6. The method of claim 4, wherein, The step of determining the cleanup callback function for each resource entity based on its resource type includes: If any resource entity's resource type is global event subscription, then a cleanup callback function for that resource entity is generated based on its event name, callback function, and unbinding method.
7. The method of claim 1, wherein The step of disconnecting the reference links between each resource entity and the instance of the component to be cleaned, and cleaning up the resource entity according to the resource dependency graph in reverse topological order based on the cleanup callback function of each resource entity, includes: Suspend resource registration for the component instances to be cleaned up; Based on the resource type of each resource entity, disconnect the reference link between that resource entity and the instance of the component to be cleaned up; Based on the resource dependency graph, the cleanup of each resource entity is performed sequentially according to the cleanup callback function of each resource entity in reverse topological order.
8. An assembly cleaning device, characterized by include: The determination module is used to identify the resource entities corresponding to the component instances to be cleaned up; The acquisition module is used to acquire a resource dependency graph that records the dependencies between various resource entities and the corresponding cleanup callback function for each resource entity. The cleanup module is used to disconnect the reference links between each resource entity and the component instance to be cleaned, and clean up the resource entity according to the resource dependency graph in reverse topological order based on the cleanup callback function of each resource entity.
9. An assembly cleaning apparatus, characterized by, Including memory and processor; The memory is used to store programs; The processor is configured to execute the program to implement the various steps of the component cleanup method as described in any one of claims 1-7.
10. A readable storage medium, having stored thereon a computer program, characterized in that, When the computer program is executed by the processor, it implements the various steps of the component cleanup method as described in any one of claims 1-7.