Method and system for realizing multi-tab caching in vue3

Abstract

The invention discloses a method and system for realizing multi-tab caching in vue3, and relates to the technical field of front-end performance optimizing.The method comprises the steps that when a switching event occurs, weighted counting and time attenuation are carried out on tab switching, and a sparse adjacency relation is constructed; performing multi-round propagation to calculate a steady-state resonance coefficient; extracting a field distribution entropy, a state change ratio, an access time delay and an access popularity coefficient, and fusing to generate a composite spectrum value; calculating a retention threshold value according to the composite spectrum value range, and dividing retention tabs and gradual retreat tabs; constructing a hierarchical index, and sorting according to the latest access timestamps in each interval; judging the existence of the virtual nodes in the image library for the retained tabs, multiplexing or lazy loading and caching; and removing the image and releasing the resources after judging the gradual retreat tabs based on the spectrum value difference and the retreat delay. Through switching behavior analysis, self-adaptive threshold layering, high-dimensional state evaluation and lazy loading delay elimination, high-frequency and high-association tabs are reserved preferentially, cold tabs are eliminated in time, rendering efficiency is improved, and resources are saved.

Description

Technical Field

[0001] The present invention relates to the technical field of front-end performance optimization, and in particular to a method and system for implementing multi-tab caching in Vue3. Background Art

[0002] In backend management or integrated business systems, business modules are often displayed in multiple tabs, allowing users to operate simultaneously across different tabs. As the number of tabs increases and component functionality becomes more complex, each switch requires reloading and rendering the page and its corresponding component structure. This results in numerous page element manipulations and script executions, ultimately causing interface lag, response delays, and increased memory usage.

[0003] Existing frameworks typically provide component caching mechanisms based on static rules. These can only predetermine which components to cache through configuration during the development phase, and cannot dynamically manage components based on user switching behavior and internal state. Furthermore, the same component may require separate cache instances under different routing parameters or contexts, and static caching strategies struggle to distinguish the lifecycle requirements of different instances, leading to state confusion or data pollution.

[0004] Tabs that haven't been accessed for a long time are retained, wasting client resources and exacerbating potential memory leaks. The lack of an automatic elimination and recovery mechanism based on real-time access frequency, access duration, and component state changes makes it impossible to meet the requirements for a smooth experience in high-interaction, high-concurrency scenarios. Therefore, it is necessary to propose a multi-tab caching method and system that can capture user switching trajectories in real time, evaluate component state characteristics, and adaptively manage caching and release resources on demand. Summary of the Invention

[0005] Based on the above-mentioned shortcomings of the prior art, the purpose of the present invention is to provide a method and system for implementing multi-tab caching in Vue3 to solve the above-mentioned technical problems.

[0006] To achieve the above object, the present invention provides the following technical solution: a method for implementing multi-tab caching in Vue3, comprising: S1: When a switching event occurs, count the interactions between the current tab and the target tab and update them according to time decay to build a sparse weighted adjacency relationship; S2: Based on the weighted adjacency relationship, the steady-state resonance coefficient is calculated for all tabs through multiple rounds of propagation; S3: For each tab's internal key status fields, extract the field distribution entropy and state change ratio, calculate the access latency and cumulative number of visits within a specified time period for each tab, and obtain the access popularity coefficient through nonlinear mapping. S4: Set the steady-state resonance coefficient, field distribution entropy, state change ratio, access delay and access heat coefficient as input to generate the composite spectrum value of the tab; S5: Calculate the retention threshold based on the difference between the maximum and minimum values ​​of the composite spectrum value, and divide the tabs into a resident set and an evicted set; S6: Construct a hierarchical index structure, segment the tabs in the resident set according to the steady-state resonance coefficient interval and the composite spectrum value interval, and sort them by image timestamp within each segment; S7: For the tabs in the resident set, determine whether the image exists in the node image library. If so, reuse it. If not, render it through the image suite lazy loading and store it in the node image library. S8: For the tabs in the eviction set, the delay is deactivated based on the retention boundary and the difference between the composite spectrum values. When the delay ends and the composite spectrum value is still lower than the retention boundary, the corresponding node image is removed to release the tab resources.

[0007] The present invention is further configured such that step S1 comprises: Get the unique identifiers of the current tab and the target tab, and update the latest access time of the tab in the image timestamp record based on the unique identifiers; Create or locate the flow mapping table corresponding to the current tab in the mapping structure, and update the weights of all associated entries in the flow mapping table according to the preset attenuation coefficient; Perform weight accumulation operation on the associated entries of the current tab pointing to the target tab; Traverse the updated flow mapping table and remove the associated entries whose weights are lower than the preset threshold to maintain the sparse weighted adjacency relationship.

[0008] The present invention is further configured such that step S2 includes: Initialize the resonance coefficient for the tab in the runtime image library, and update the secondary buffer map according to the outgoing edge weights of all tabs based on the flow weight mapping; For each tab in turn, update the tab steady-state resonance coefficient in the secondary buffer map by obtaining and accumulating the predecessor steady-state resonance coefficient normalized by the outgoing edge weight from all predecessor tabs; Synchronize the updated results of the secondary buffer mapping to the runtime image library and determine whether the maximum variation of the steady-state resonance coefficient of all tabs is lower than the preset convergence threshold; When the steady-state resonance coefficients of all tabs reach the convergence condition, the information propagation process is terminated and the final steady-state resonance coefficients are solidified and stored in the runtime image library.

[0009] The present invention is further configured such that step S3 includes: After each tab switch is completed, obtain the current key status field set of the tab and the status snapshot of the last access, and extract the field distribution entropy and status change ratio; Record the access time of the tab in the global routing guard and calculate the access latency; Accumulate the number of visits to each tab within the preset time window, perform nonlinear mapping on the number of visits, and generate the visit heat coefficient; The field distribution entropy, state change ratio, access latency, and access heat coefficient are stored in the runtime image library.

[0010] The present invention is further configured such that step S4 includes: Obtain the steady-state resonance coefficient, field distribution entropy, state change ratio, access latency, and access heat coefficient of the tab in the runtime image library, convert them uniformly according to the preset mapping rules, and assign corresponding weights; The transformed and weighted eigenvalues ​​are fused into a single scalar to generate a composite spectrum value of the tab, and the composite spectrum value is updated to the runtime image library.

[0011] The present invention is further configured such that step S5 includes: Obtain a set of composite spectrum values ​​corresponding to all tabs from the runtime image library, and determine the maximum and minimum values ​​in the set of composite spectrum values; Generate a cache retention threshold based on the difference between the maximum and minimum values ​​and the preset adjustment parameters; Traverse the composite spectrum value set, compare the composite spectrum value of each tab with the cache retention threshold, and put the tab identifiers greater than or equal to the cache retention threshold into the resident set, and put the tab identifiers less than the cache retention threshold into the eviction set.

[0012] The present invention is further configured such that step S6 includes: Divide all tabs in the resident set into multiple first-level groups based on the preset steady-state resonance coefficient range; Divide the tabs in each first-level group into multiple second-level groups based on the preset composite spectrum value interval; The tabs in each secondary group are sorted in descending order according to the image timestamp to form a sorted list, and a hierarchical index structure is constructed based on the primary group, the secondary group and the sorted list.

[0013] The present invention is further configured such that step S7 includes: Traverse all tab identifiers in the resident set and query the corresponding virtual node in the node image library; When the query result has a corresponding virtual node, the virtual node is provided to the rendering module for reuse; When the query result does not contain a corresponding virtual node, a corresponding packaging component is created based on the image suite, lazy loading rendering is performed, and a new virtual node is generated; After rendering is complete, the new virtual node is stored in the node image library, and the corresponding packaging component is registered in the image package map.

[0014] The present invention is further configured such that step S8 includes: For each tab in the ejection set, the ejection delay is determined based on the difference between the composite spectrum value and the cache retention boundary, and the tab is registered with the delay task scheduler; When the delayed task is triggered, the latest composite spectrum value of the tab is obtained from the runtime image library again and compared with the cache retention boundary; When the composite spectrum value is still less than the cache retention boundary, the virtual image corresponding to the tab is deleted from the node image library; The entries related to this tab are removed from the image package map, hierarchical index structure, and runtime image library simultaneously; Unmount the tab component instance in the Vue3 rendering context, clear all responsive references, and release corresponding resources.

[0015] The present invention also provides a multi-tab cache system implemented in Vue3, which is used to implement the above-mentioned multi-tab cache method implemented in Vue3, including: Relationship building module: When a switching event occurs, the interactions between the current tab and the target tab are counted and updated according to time decay to build a sparse weighted adjacency relationship; Coefficient calculation module: Based on the weighted adjacency relationship, the steady-state resonance coefficient is calculated for all tabs through multiple rounds of propagation; Coefficient acquisition module: This module extracts the field distribution entropy and state change ratio for each tab's internal key status fields, calculates each tab's access latency and cumulative number of visits within a specified time period, and obtains the access heat coefficient through nonlinear mapping. Spectrum value generation module: takes the steady-state resonance coefficient, field distribution entropy, state change ratio, access delay, and access heat coefficient as input to generate the composite spectrum value of the tab; Tab division module: Calculates the retention threshold based on the difference between the maximum and minimum values ​​of the composite spectrum value, and divides the tabs into a resident set and an evict set; Interval segmentation module: Build a hierarchical index structure, segment the tabs in the resident set according to the steady-state resonance coefficient interval and the composite spectrum value interval, and sort them by image timestamp within each segment; Resident processing module: For the tabs in the resident set, it determines whether the image exists in the node image library. If so, it is reused. If not, it is rendered through the image suite lazy loading and stored in the node image library. Eviction processing module: For the tabs in the eviction set, the eviction delay is calculated based on the retention boundary and the difference between the composite spectrum values. When the delay ends and the composite spectrum value is still lower than the retention boundary, the corresponding node image is removed to release the tab resources.

[0016] The present invention provides a method and system for implementing multi-tab caching in Vue3. The method counts the interactions between the current tab and the target tab and updates them according to time decay when a switching event occurs, thereby constructing a sparse weighted adjacency relationship; based on the weighted adjacency relationship, the steady-state resonance coefficient is calculated for all tabs through multiple rounds of propagation; for the internal key state fields of each tab, the field distribution entropy and state change ratio are extracted, the access delay of each tab and the cumulative number of visits within a specified time period are counted, and the access heat coefficient is obtained through nonlinear mapping; the steady-state resonance coefficient, field distribution entropy, state change ratio, access delay and access heat coefficient are set as input to generate a complex tab. Composite spectrum value; based on the difference between the maximum and minimum composite spectrum values, the retention threshold is calculated, and the tabs are divided into a resident set and a delisted set; a hierarchical index structure is constructed, and the tabs in the resident set are segmented according to the steady-state resonance coefficient interval and the composite spectrum value interval, and sorted by image timestamp within each segment; for the tabs in the resident set, it is determined whether the image exists in the node image library. If it exists, it is reused; if not, it is rendered through lazy loading of the image suite and stored in the node image library; for the tabs in the delisted set, the retention delay is jointly delisted according to the retention boundary and the composite spectrum value difference. When the delay ends and the composite spectrum value is still below the retention boundary, the corresponding node image is removed to release the tab resources. The beneficial effects include: 1. Behavior-driven cache optimization: Based on the weighted adjacency relationship construction and multi-round propagation calculation of tab switching behavior, it can accurately depict the core position of each tab in the user operation process, prioritize frequently accessed and highly relevant tabs, and effectively reduce the performance overhead caused by repeated rendering; 2. Multi-dimensional status assessment and precise elimination: This system combines the internal field distribution entropy and status change ratio of each tab, as well as a nonlinear mapping between access latency and access popularity coefficient, to comprehensively assess tab activity and state complexity. This allows for the timely identification and automatic elimination of silent or cold tabs, significantly reducing memory usage and potential leak risks. 3. Adaptive Thresholding and Efficient Retrieval: By adaptively calculating the cache retention threshold based on the extreme difference of the composite spectrum value, a hierarchical index based on the steady-state resonance coefficient interval and the composite spectrum value interval is constructed for the resident set tabs. Within each index layer, the most recently accessed timestamp is sorted, enabling rapid location of the required tabs, improving rendering scheduling efficiency and shortening switching response time. 4. Lazy loading reuse and delayed culling mechanism: Use lazy loading to create and reuse images for resident tabs, instantiating components only on first access. Set a cessation delay for eviction tabs based on the retention boundary and the difference between the composite spectrum values. Tabs are culled after the delay expires and the score remains below the threshold, achieving tolerance for short-term access fluctuations and timely release of long-term inactive resources.

[0017] The above description is only an overview of the technical solution of the present application. In order to more clearly understand the technical means of the present application, it can be implemented in accordance with the contents of the specification. In order to make the above and other purposes, features and advantages of the present application more obvious and easy to understand, the specific implementation methods of the present application are listed below. BRIEF DESCRIPTION OF THE DRAWINGS

[0018] In order to more clearly illustrate the technical solutions in the embodiments of the present invention, the following briefly introduces the drawings required for describing the embodiments. Obviously, the drawings described below are only some embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without inventive efforts. In the drawings: Figure 1 This is a flowchart of a method for implementing multi-tab caching in Vue3, shown as an exemplary embodiment of the present invention; Figure 2 This is a schematic diagram of a structure of a multi-tab cache system implemented in Vue3, showing an exemplary embodiment of the present invention. DETAILED DESCRIPTION

[0019] The following describes the embodiments of the present invention with reference to the accompanying drawings and preferred embodiments. Those skilled in the art will readily appreciate the other advantages and benefits of the present invention from the disclosure herein. The present invention may also be implemented or applied through various other specific embodiments, and the various details in this specification may be modified or altered based on different viewpoints and applications without departing from the spirit of the present invention. It should be understood that the preferred embodiments are intended only to illustrate the present invention and are not intended to limit the scope of protection of the present invention.

[0020] It should be noted that the illustrations provided in the following embodiments are merely schematic illustrations of the basic concept of the present invention. Therefore, the illustrations only show components related to the present invention and are not drawn according to the number, shape, and size of components in actual implementation. In actual implementation, the type, quantity, and proportion of each component may be changed arbitrarily, and the component layout may also be more complex.

[0021] In the following description, numerous details are discussed to provide a more thorough explanation of the embodiments of the present invention. However, it will be apparent to those skilled in the art that the embodiments of the present invention may be practiced without these specific details. In other embodiments, well-known structures and devices are shown in block diagram form rather than in detail to avoid obscuring the embodiments of the present invention.

[0022] Example 1: A method to implement multi-tab caching in vue3, such as Figure 1 As shown, including: S1: When a switching event occurs, count the interactions between the current tab and the target tab and update them according to time decay to build a sparse weighted adjacency relationship; S2: Based on the weighted adjacency relationship, the steady-state resonance coefficient is calculated for all tabs through multiple rounds of propagation; S3: For each tab's internal key status fields, extract the field distribution entropy and state change ratio, calculate the access latency and cumulative number of visits within a specified time period for each tab, and obtain the access popularity coefficient through nonlinear mapping. S4: Set the steady-state resonance coefficient, field distribution entropy, state change ratio, access delay and access heat coefficient as input to generate the composite spectrum value of the tab; S5: Calculate the retention threshold based on the difference between the maximum and minimum values ​​of the composite spectrum value, and divide the tabs into a resident set and an evicted set; S6: Construct a hierarchical index structure, segment the tabs in the resident set according to the steady-state resonance coefficient interval and the composite spectrum value interval, and sort them by image timestamp within each segment; S7: For the tabs in the resident set, determine whether the image exists in the node image library. If so, reuse it. If not, render it through the image suite lazy loading and store it in the node image library. S8: For the tabs in the eviction set, the delay is deactivated based on the retention boundary and the difference between the composite spectrum values. When the delay ends and the composite spectrum value is still lower than the retention boundary, the corresponding node image is removed to release the tab resources.

[0023] The present invention is further configured such that step S1 comprises: Get the unique identifiers of the current tab and the target tab, and update the latest access time of the tab in the image timestamp record based on the unique identifiers. Specifically, when the user switches from the current tab to the target tab on the interface, capture the switching event; extract the unique identifiers of the current tab and the target tab for subsequent positioning of the image and weight; search for the corresponding entry in the image timestamp record based on the unique identifier; if it exists, replace its last access time with the current time; otherwise, create a new entry and record the current time to ensure that the latest access time of each tab is updated in real time; Create or locate the flow mapping table corresponding to the current tab in the mapping structure, and update the weights of all associated entries in the flow mapping table according to a preset decay coefficient. Specifically, search for the flow mapping table associated with the current tab in the mapping structure, and initialize it if it does not exist. Iterate through all target tab entries in the mapping table and update their existing weights according to the preset decay coefficient, preserving recent switching traces and gradually fading older interactions. Perform a weight accumulation operation on the associated entries that point from the current tab to the target tab. Specifically, locate the entry that points from the current tab to the target tab in the same mapping table. If it already exists, increase its weight by a fixed increment (1). Otherwise, create the entry and set its initial weight to the incremented value to reflect the latest switch. Traverse the updated flow mapping table, remove the associated entries with weights lower than the preset threshold, and maintain sparse weighted adjacency; specifically, traverse the updated mapping table again, delete all entries with weights lower than the preset threshold, ensure that the mapping table always remains sparse, and only retain adjacency with sufficient switching frequency or recent interaction. In a feasible embodiment of the present invention, there are three tabs A, B, and C in the system, the initialization image timestamp and flow mapping are both empty, the time decay coefficient is 0.8, the weight accumulation increment is 1, and the sparse threshold is set to 0.5; a new switching event is added: A→B, time t=0ms, identification acquisition: source="A", target="B", timestamp record: newly added A→0, B→0, the flow mapping A table is empty, and the entry A→B weight=1 is directly added after the new creation, there are no other entries, and no decay or removal is required; a new switching event is added: B→C, time t =1000ms, identification acquisition: source="B", target="C", timestamp recording: update B→1000, C→1000, flow mapping table B is empty, and after creation, B→C is added with a weight of 1. There are no other entries, so no attenuation or removal is required. A new switching event is added: A→B, time t=3000ms, identification acquisition: source="A", target="B", timestamp recording: update A→3000, B→3000, flow mapping table A has an existing weight of 1 for A→B. First, the remaining entries (none) are attenuated by 0.8, and then the existing weight of A→B is attenuated by 0.8*1=0.8; accumulation operation: The weight of A→B is updated to 0.8+1=1.8. The sparse threshold is checked: 1.8>0.5, and no entries need to be removed. At this time, the mapping structure status is as follows: A table: {B:1.8}; B table: {C:1}; C table: {}.

[0024] The present invention is further configured such that step S2 includes: Initialize the resonance coefficient for each tab in the runtime image library. Based on the flow weight map, update the secondary buffer map according to the outbound edge weights of all tabs. Specifically, set an initial resonance coefficient for each tab in the runtime image library and assign a consistent constant to ensure consistent information propagation starting states. Traverse the flow weight map and calculate the sum of all outbound edge weights for each tab. Store this sum in the secondary buffer map for subsequent normalization. For each tab in turn, the tab steady-state resonance coefficient in the secondary buffer map is updated by obtaining and accumulating the predecessor steady-state resonance coefficient normalized by the outgoing edge weight from all predecessor tabs. Specifically, each tab is traversed in turn, and the current resonance coefficients of all its predecessor tabs are distributed to the tab according to the proportion of the predecessor outgoing edge weight, and accumulated to the tab entry in the secondary buffer map. The updated results of the secondary buffer mapping are synchronized with the runtime image library to determine whether the maximum change in the steady-state resonance coefficients of all tabs is below the preset convergence threshold. Specifically, after completing an iteration, the new resonance coefficients in the secondary buffer mapping are batch-written back to the runtime image library, and the maximum difference between the old and new resonance coefficients of all tabs is calculated. If this difference is below the preset convergence threshold, the iteration ends; otherwise, the secondary buffer mapping is cleared and the information propagation iteration is repeated until convergence. When the steady-state resonance coefficients of all tabs reach convergence, the information propagation process is terminated and the final steady-state resonance coefficients are stored in the runtime image library. Specifically, after the convergence conditions are met, the final converged resonance coefficients are retained in the runtime image library. In a feasible embodiment of the present invention, the current flow weight mapping states for the three tabs A, B, and C are: A→B: 1.8, A→C: 0.6; B→A: 0.5, B→C: 1.0; C→A: 0.2. The convergence threshold is set to 0.05, and the initial resonance coefficients are uniformly set to 1.0. The sum of the outgoing edge weights of A = 1.8 + 0.6 = 2.4, the sum of the outgoing edge weights of B = 0.5 + 1.0 = 1.5, and the sum of the outgoing edge weights of C = 0. 2. First iterative propagation: A's predecessors are B and C: Contribution from B = 1.0 × (0.5 / 1.5) ≈ 0.333, Contribution from C = 1.0 × (0.2 / 0.2) = 1.0, Sub-mapping A = 1.333; B's predecessor is A: Contribution from A = 1.0 × (1.8 / 2.4) = 0.75, Sub-mapping B = 0.75; C's predecessors are A and B: Contribution from A = 1.0 × (0.6 / 2.4) = 0.25, Contribution from B = 1.0 × (1.0 / 1.5) ≈ 0.667, Sub-mapping C = 0.917; Maximum difference between the new and old resonance coefficients: A: |1.333–1. 0|=0.333, B:|0.75–1.0|=0.25, C:|0.917–1.0|=0.083, maximum difference = 0.333>0.05, not meeting convergence, prepare for the next round of iteration; second iterative propagation: start with the new resonance coefficient [A=1.333, B=0.75, C=0.917], repeat the above contribution calculation: A=1.333×(0.5 / 1.5)+0.917×(0.2 / 0.2)≈0.444+0.917=1.361, B=1.333×(1.8 / 2.4)≈1.0, C=1.333×(0.6 / 2.4)+0.75×( 1.0 / 1.5)≈0.333+0.5=0.833; the maximum difference between the new and old resonance coefficients of the tab: A: |1.361–1.333|=0.028, B: |1.0–0.75|=0.25, C: |0.833–0.917|=0.084, the maximum difference = 0.25>0.05, and the iteration continues; the third iteration check: the approximate resonance coefficients [A≈1.348, B≈1.022, C≈0.792] are obtained again through iteration, and the maximum difference is less than 0.05, indicating convergence; the result is solidified: the final stable values ​​of A≈1.348, B≈1.022, and C≈0.792 are written to the runtime image library.

[0025] The present invention is further configured such that step S3 includes: After each tab switch is completed, the current key status field set of the tab and the status snapshot at the time of the last visit are obtained, and the field distribution entropy and status change ratio are extracted. Specifically, after each tab switch is completed, the key field set (including progress value, number of remaining tasks, and selected flag) is read from the data model of the tab and assigned to the current status snapshot respectively. At the same time, the previous snapshot is retained as the historical state for subsequent comparison. The absolute value of each field value in the current state snapshot is taken and normalized, and its distribution entropy is calculated according to the information entropy formula. The difference between the current and historical state vectors is calculated according to the field dimension and the norm ratio is calculated to obtain the state change ratio, which reflects the intensity of content update. Furthermore, the progress value indicates the degree of completion of the business process or data processing link corresponding to the current tab, reflecting the progress of the task in the form of a percentage or ratio. Numeric values ​​are integers or floating-point numbers, typically ranging from 0 to 100 (or 0.0 to 1.0), where 0 indicates not started and 100 indicates completed. This parameter represents an important continuous dimension of a component's internal state. A larger value indicates that the work on the current tab is closer to completion. The number of remaining tasks refers to the number of to-do items that the page or component needs to process and is a non-negative integer. A value of zero indicates that all to-do items have been processed, while larger positive values ​​indicate a greater amount of work to be done on that tab. This parameter reflects the internal workload of the component and can also be used to prioritize subsequent rendering or data synchronization. In the calculation of distributed entropy, its absolute value is included in the normalization base to determine the relative weight of each field in the overall state. The check flag is a Boolean field that indicates whether the current tab item is selected or focused by the user. When mapped to a numeric value, it takes the values ​​1 (selected) and 0 (unselected). This parameter is a discrete state dimension. Although it contributes little to the calculation of state distribution entropy, it can capture key information such as "whether it is activated" or "whether it is focused" at the interface level, and provide feedback on user attention in the short term when compounding the score. The global routing guard records the access time of the tab and calculates the access latency. Specifically, the global routing guard records the current time when the tab is activated and subtracts it from the last access time of the tab to obtain the access latency. The number of visits to each tab within a preset time window is accumulated and nonlinearly mapped to generate an access heat coefficient. Specifically, an access time queue is maintained for each tab, and the current timestamp is added to the queue when switching. Records older than the window start point are periodically removed from the queue to make the remaining queue length equal to the number of visits within the window. The access heat coefficient is obtained by converting the number of visits through nonlinear mapping. The field distribution entropy, state change ratio, access latency, and access heat coefficient are stored in the runtime image library; specifically, the field distribution entropy, state change ratio, access latency, and access heat coefficient calculated above are uniformly stored in the runtime image library; in a feasible embodiment of the present invention, the tab X includes three key fields: a numerical field "progress" (0-100), a numerical field "number of remaining tasks" (positive integer), and a Boolean field "selected" (mapped to 0 or 1); in the historical and current snapshots, the last access snapshot: progress = 40; number of remaining tasks = 5; selected = 0; the current access snapshot: progress = 60; number of remaining tasks = 3; selected = 1, distribution entropy calculation: absolute value sum normalized cardinality = 60+3+1=64; weight of each field: 60 / 64 ≈ 0.94; 3 / 64 ≈ 0.047; 1 / 64 ≈ 0.016; distribution entropy ≈–[0.94·ln0.94+0.047·ln0.047+0.016·ln0.016]≈0.26; state change ratio: field difference vector = (60-40, 3-5, 1-0) = (20,–2, 1), history norm = |40|+|5|+|0|=45; difference norm = |20|+|–2|+|1|=23, change ratio ≈23 / (45+ε)≈0.51; Access latency: Last access time = 10:00:00; Current access time = 10:05:30, Access latency = 5 minutes 30 seconds = 330 seconds; Access popularity coefficient: The access time queue for tab X in the past 10-minute window = [09:58, 10:00, 10:03, 10:05], a total of 4 times; Non-linear mapping (for example, adding 1 and then taking the square root) → √(4+1)≈2.24, writes the field distribution entropy = 0.26, state change rate = 0.51, access latency = 330 seconds, and access popularity coefficient = 2.24 to the runtime image library.

[0026] The present invention is further configured such that step S4 includes: The steady-state resonance coefficient, field distribution entropy, state change ratio, access delay and access heat coefficient of the tab are obtained from the runtime image library, and are uniformly converted and assigned corresponding weights according to the preset mapping rules. Specifically, the five features corresponding to the target tab are obtained from the runtime image library: steady-state resonance coefficient, field distribution entropy, state change ratio, access delay and access heat coefficient. According to the mapping rules preset in the business scenario, the corresponding nonlinear transformation is performed on the five features respectively, and the features are mapped to the same numerical scale range. Different exponential weights are then assigned according to the importance of each feature to highlight or weaken its impact on the final result. Furthermore, the steady-state resonance coefficient It is positively correlated with the composite spectrum value. An increase in the resonance coefficient can provide higher scores through power amplification, further highlighting the importance of core tabs. The field distribution entropy is positively correlated with the composite spectrum value. A greater entropy means more diverse internal states, which is assigned a higher weight through logarithmic-exponential mapping. The state change ratio is positively correlated with the composite spectrum value. A higher change ratio indicates a greater intensity of content updates, and the priority is correspondingly increased after power mapping. The access delay is negatively correlated with the composite spectrum value. A longer delay indicates a higher tab staleness, and the exponential decay mechanism will significantly suppress the score. The access heat coefficient is positively correlated with the composite spectrum value. A higher heat indicates greater recent access activity, which is moderately improved after logarithmic root mapping. The converted and weighted eigenvalues ​​are fused into a single scalar to generate a composite spectrum value of the tab, and the composite spectrum value is updated to the runtime image library. Specifically, the five mapped and weighted eigenvalues ​​are fused in a multiplication manner to generate a single scalar composite spectrum value. The composite spectrum value comprehensively reflects the multidimensional information of the tab, such as access attention, state complexity, and freshness. The newly generated composite spectrum value is written back to the runtime image library. In a feasible embodiment of the present invention, the selected tab X eigenvalues ​​are: steady-state resonance coefficient = 1.348, field distribution entropy = 0.26, state change ratio = 0.51, access delay = 330 seconds, access heat coefficient = 2.24; preset mapping and weight parameters: resonance coefficient index α = 1.2, entropy mapping β = 0.8, change ratio index γ = 0.5 , delay decay rate μ=0.01, heat root mapping index φ=0.5; resonance coefficient mapping: raise 1.348 to the 1.2th power to obtain approximately 1.432; entropy value mapping: add one to 0.26 and take the natural logarithm, then raise it to the 0.8th power to obtain approximately 0.31; change ratio mapping: take 1+0.51 to the 0.5th power to obtain approximately 1.229; delay mapping: multiply 330 seconds by –μ and take the exponential to obtain approximately 0.0367; heat mapping: take the natural logarithm of 1+2.24 and take the square root to obtain approximately 1.084. Multiply the above five mapping results: 1.432×0.31×1.229×0.0367×1.084≈0.022, and store the final composite spectrum value 0.022 in the runtime image library.

[0027] The present invention is further configured such that step S5 includes: Obtain a set of composite spectrum values ​​corresponding to all tabs from the runtime image library, and determine the maximum and minimum values ​​in the composite spectrum value set; generate a cache retention threshold based on the difference between the maximum and minimum values ​​and a preset adjustment parameter; specifically, read the composite spectrum values ​​corresponding to all tabs from the runtime image library, construct a complete spectrum value list, obtain the maximum and minimum values ​​from the collected spectrum value list, and generate a single cache retention threshold through an adaptive formula based on the difference between the maximum and minimum values ​​and a preset proportional coefficient and exponential factor; Traverse the composite spectrum value set, compare the composite spectrum value of each tab with the cache retention threshold, and classify the tab identifiers that are greater than or equal to the cache retention threshold into the resident set, and classify the tab identifiers that are less than the cache retention threshold into the eviction set; specifically, traverse the composite spectrum values ​​of all tabs, classify the tab identifiers whose spectrum values ​​are greater than or equal to the generated threshold into the resident set, and classify the tab identifiers whose spectrum values ​​are lower than the threshold into the eviction set, and complete the tab classification; specifically, in a feasible embodiment of the present invention, there are five tabs in total. The latest composite spectrum values ​​are as follows: Page A: 0.85, Page B: 0.42, Page C: 0.67, Page D: 0.23, Page E: 0.95; the preset adjustment parameters are: proportional coefficient σ = 0.5, exponential factor ν = 1.2; extreme value determination: maximum value = 0.95 (Page E), minimum value = 0.23 (Page D), difference = 0.95–0.23 = 0.72, and the adaptive formula is used to generate a single cache retention threshold: threshold = σ × (difference) ν +min=0.5×(0.72) 1.2 +0.23≈0.5×0.67+0.23=0.565; the set is divided according to the single cache retention threshold: the resident set (spectrum value ≥0.565): A(0.85), C(0.67), E(0.95); the eviction set (spectrum value <0.565): B(0.42), D(0.23); through the above process, the adaptive threshold calculation and resident / eviction division of all tabs are completed, providing a clear basis for subsequent cache retention and resource release.

[0028] The present invention is further configured such that step S6 includes: Divide all tabs in the resident set into multiple first-level groups based on a preset steady-state resonance coefficient range. Specifically, based on the preset stable partition boundaries, classify all tabs in the resident set into several first-level groups according to their steady-state resonance coefficients, with each group corresponding to a different influence range. The tabs in each first-level group are divided into multiple second-level groups based on the preset composite spectrum value interval. Specifically, within each first-level group, the tabs in the group are further subdivided into several second-level groups based on their composite spectrum values ​​based on the preset spectrum value interval to reflect different priority levels within the same influence segment. The tabs in each secondary group are sorted in descending order according to the image timestamp and a sorted list is formed. A hierarchical index structure is constructed based on the primary group, secondary group and sorted list. Specifically, the tabs in each secondary group are sorted in descending order according to their latest image timestamp to ensure that the first tab in the list is the most recently accessed or most actively updated instance. The primary group, secondary group and their respective sorted lists are used as three-layer indexes to form the final hierarchical index structure, which is used to sort the three dimensions of influence, spectrum value and freshness when rendering or caching. In a feasible embodiment of the present invention, the resident set includes tabs A, B, and C, which are characterized as follows: steady-state resonance coefficient: A=1.3; B=0.8; C=2.1; composite spectrum value: A=0.85; B=0.42; C=0.67; latest image timestamp (milliseconds): A=3000; B=2000; C=1000; preset steady-state resonance coefficient partitions: interval I: [0.0,1.0), interval II: [1.0,2.0), interval III: [2.0,∞ ); Preset composite spectrum value partition: subinterval 1: [0.0, 0.5), subinterval 2: [0.5, 1.0); First-level grouping: interval I contains B (0.8), interval II contains A (1.3), interval III contains C (2.1); Second-level grouping: in interval I, B's spectrum value 0.42 belongs to subinterval 1; in interval II, A's spectrum value 0.85 belongs to subinterval 2; in interval III, C's spectrum value 0.67 belongs to subinterval 2; Sorted list: interval I → subinterval A list: [B(timestamp =2000)], interval II → subinterval B list: [A(3000)]; interval III → subinterval B list: [C(1000)], and finally a three-layer mapping is formed: the first layer is based on influence intervals I / II / III, the second layer is based on spectrum value subintervals 1 / 2 within each interval, and the third layer list sorts the tabs by the most recently accessed priority; in subsequent cache retrieval, the above structure can first locate the influence interval, then refine it to the spectrum value subinterval, and finally directly use the sorted list to quickly determine the tabs to be rendered or retained.

[0029] The present invention is further configured such that step S7 includes: Traverse all the tab identifiers in the resident set and query the corresponding virtual node in the node image library; specifically, for each tab identifier in the resident set, query whether the corresponding virtual node already exists in the node image library; When a query result has a corresponding virtual node, the virtual node is provided to the rendering module for reuse. Specifically, if the query hits the corresponding virtual node, the node is directly given to the rendering module for reuse without re-instantiating the component. When the query result does not contain a corresponding virtual node, a corresponding wrapper component is created based on the image suite, and lazy loading rendering is performed to generate a new virtual node. Specifically, if the query does not hit the target, the image suite is called with the current tab identifier as the key to dynamically generate the corresponding wrapper component. The component is then instantiated and rendered in a lazy loading manner to produce a new virtual node. After the rendering is completed, the new virtual node is stored in the node image library, and the corresponding packaging component is registered in the image package mapping; specifically, after the new virtual node is rendered, it is stored in the node image library, and the packaging component is registered in the image package mapping for subsequent query and reuse; in a feasible embodiment of the present invention, the resident set includes tab identifiers TabA, TabB and TabC, and the node image library currently only has virtual nodes of TabA and TabC; query TabA, find the existing virtual node in the image library, and directly provide the node to the rendering module without performing Any new creation; query TabB, no corresponding node is found in the image library; create a wrapper component WrapperB through the image set, and trigger lazy loading rendering; after rendering, obtain a new virtual node VNodeB; store VNodeB in the node image library, and register WrapperB to the image set mapping; query TabC, find an existing virtual node in the image library; reuse the node directly without re-rendering; after completing the above process, the node image library stores the latest virtual nodes of TabA, TabB and TabC in sequence, providing full reuse capabilities for the next rendering.

[0030] The present invention is further configured such that step S8 includes: For each tab in the eviction set, the eviction delay is determined based on the difference between the composite spectrum value and the cache retention boundary, and the tab is registered with the delay task scheduler. Specifically, for each tab in the eviction set, the eviction delay is calculated based on the difference between its latest composite spectrum value and the cache retention boundary. The tab identifier and the corresponding delay are registered with the delay task scheduler to trigger the subsequent eviction process after the delay ends. When the delay task is triggered, the latest composite spectrum value of the tab is obtained from the runtime image library again and compared with the cache retention boundary. Specifically, when the delay task is triggered, the current composite spectrum value of the tab is read from the runtime image library again and compared with the cache retention boundary to confirm that it is still below the threshold. When the composite spectrum value is still less than the cache retention boundary, the virtual image corresponding to the tab is deleted from the node image library; specifically, when the composite spectrum value is less than the threshold, the virtual image corresponding to the tab is deleted from the node image library and the association with the rendering module is disconnected; Synchronously remove entries related to the tab from the image package map, hierarchical index structure, and runtime image library. Specifically, synchronously remove all entries of the tab from the image package map, hierarchical index structure, and runtime image library to ensure that the cache management data no longer retains any old information of the tab. Unmount the tab component instance in the vue3 rendering context, clear all responsive references, and release corresponding resources; specifically, unmount the tab component instance in the vue3 rendering context, clear all responsive references and event listeners related to the instance, prompting the garbage collection mechanism to reclaim the memory and DOM nodes occupied by it, and completely release corresponding resources; in a feasible embodiment of the present invention, the cache retention boundary is 0.56, and the eviction set includes tabs TabX and TabY, whose latest composite spectrum values ​​are 0.45 and 0.50, respectively. After comprehensive calculation of the exit acceleration coefficient and the minimum delay, we get: TabX exit delay of 5 seconds, TabY exit delay of 8 seconds; register the delay task and register it in the scheduler: TabX is eliminated at t0+5s; TabY is eliminated at t0+8s, TabX elimination trigger: the task is triggered 5 seconds later, and the reread composite spectrum value 0.45<0.56 meets the elimination conditions; remove the virtual image of TabX from the node image library; delete the TabX entry in the image suite mapping, layered index, and runtime image library; on Vue3 In the following text, the component instance is uninstalled and all responsive references are cleared. TabY culling is triggered: before the task is triggered 8 seconds later, if the tab is revisited, the composite spectrum value may have been updated. If it is still 0.50 < 0.56, the same removal and resource release process as TabX is executed. If it is revisited and improved to ≥ 0.56, culling is canceled during the inspection phase, retaining its image and data structure. Through this process, fault tolerance for short-term access fluctuations is guaranteed, while truly cool tabs are effectively culled, ensuring that runtime resources are released in a timely manner.

[0031] Example 2: See also Figure 2 The exemplary multi-tab cache system implemented in Vue3 is used to implement the above-mentioned multi-tab cache method implemented in Vue3, including: Relationship building module: When a switching event occurs, the interactions between the current tab and the target tab are counted and updated according to time decay to build a sparse weighted adjacency relationship; Coefficient calculation module: Based on the weighted adjacency relationship, the steady-state resonance coefficient is calculated for all tabs through multiple rounds of propagation; Coefficient acquisition module: This module extracts the field distribution entropy and state change ratio for each tab's internal key status fields, calculates each tab's access latency and cumulative number of visits within a specified time period, and obtains the access heat coefficient through nonlinear mapping. Spectrum value generation module: takes the steady-state resonance coefficient, field distribution entropy, state change ratio, access delay, and access heat coefficient as input to generate the composite spectrum value of the tab; Tab division module: Calculates the retention threshold based on the difference between the maximum and minimum values ​​of the composite spectrum value, and divides the tabs into a resident set and an evict set; Interval segmentation module: Build a hierarchical index structure, segment the tabs in the resident set according to the steady-state resonance coefficient interval and the composite spectrum value interval, and sort them by image timestamp within each segment; Resident processing module: For the tabs in the resident set, it determines whether the image exists in the node image library. If so, it is reused. If not, it is rendered through the image suite lazy loading and stored in the node image library. Eviction processing module: For the tabs in the eviction set, the eviction delay is calculated based on the retention boundary and the difference between the composite spectrum values. When the delay ends and the composite spectrum value is still lower than the retention boundary, the corresponding node image is removed to release the tab resources.

[0032] It should be noted that the multi-tab cache system implemented in vue3 provided by the above embodiment and the multi-tab cache method implemented in vue3 provided by the above embodiment belong to the same concept, wherein the specific manner in which each module and unit performs the operation has been described in detail in the method embodiment and will not be repeated here. In actual application, the multi-tab cache system implemented in vue3 provided by the above embodiment can allocate the above functions to different functional modules as needed, that is, divide the internal structure of the system into different functional modules to complete all or part of the functions described above, and this is not limited here.

[0033] The above embodiments can be implemented in whole or in part by software, hardware, firmware or any other combination. When implemented using software, the above embodiments can be implemented in whole or in part in the form of a computer program product. The computer program product includes one or more computer instructions or computer programs. When the computer instructions or computer program are loaded or executed on a computer, the process or function described in the embodiment of the present application is generated in whole or in part. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device. The computer instructions can be stored in a computer-readable storage medium or transmitted from one computer-readable storage medium to another computer-readable storage medium. For example, the computer instructions can be transmitted from one website, computer, server or data center to another website, computer, server or data center via a wired (e.g., infrared, wireless, microwave, etc.) method. The computer-readable storage medium can be any available medium that can be accessed by a computer or a data storage device such as a server or data center that contains one or more available media sets. The available medium can be a magnetic medium (e.g., a floppy disk, a hard disk, a tape), an optical medium (e.g., a DVD), or a semiconductor medium. The semiconductor medium can be a solid-state drive.

[0034] It should be understood that the term "and / or" as used herein simply describes a relationship between associated objects, indicating that three possible relationships exist. For example, "A and / or B" can represent: A alone, A and B together, or B alone. A and B can be singular or plural. Furthermore, the character " / " as used herein generally indicates an "or" relationship between the associated objects, but it may also indicate an "and / or" relationship. For specific understanding, please refer to the context.

[0035] In this application, "at least one" means one or more, and "plurality" means two or more. "At least one of the following" or similar expressions refers to any combination of these items, including any combination of single or plural items. For example, at least one of a, b, or c can mean: a, b, c, ab, ac, bc, or abc, where a, b, and c can be single or plural.

[0036] It should be understood that in the various embodiments of the present application, the size of the serial numbers of the above-mentioned processes does not mean the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of the present application.

[0037] Those skilled in the art will appreciate that the units and algorithm steps of each example 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 performed in hardware or software depends on the specific application and design constraints of the technical solution. Professional and technical personnel 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.

[0038] Those skilled in the art will clearly understand that, for the convenience and brevity of description, the specific working processes of the systems, devices and units described above can refer to the corresponding processes in the aforementioned method embodiments and will not be repeated here.

[0039] In the several embodiments provided in this application, it should be understood that the disclosed system can be implemented in other ways. For example, the device embodiments described above are merely schematic. For example, the division of the units is merely a logical function division. In actual implementation, there may be other division methods, such as multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be through some interfaces, indirect coupling or communication connection of devices or units, which can be electrical, mechanical or other forms.

[0040] The units described as separate components may or may not be physically separate, and 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 these units may be selected to achieve the purpose of this embodiment according to actual needs.

[0041] In addition, each functional unit in each embodiment of the present application may be integrated into one processing unit, or each unit may exist physically separately, or two or more units may be integrated into one unit.

[0042] If the functions are implemented in the form of software functional units and sold or used as independent products, they can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present application, or the part that contributes to the prior art, or the part of the technical solution, can be embodied in the form of a software product. The computer software product is stored in a storage medium and includes several instructions for enabling a computer device (which can be a personal computer, a server, or a network device, etc.) to execute all or part of the steps of the method described in each embodiment of the present application. The aforementioned storage medium includes various media that can store program codes, such as a USB flash drive, a mobile hard disk, a read-only memory (ROM), a random access memory (RAM), a magnetic disk or an optical disk.

[0043] The above description is merely a specific embodiment of the present application, but the scope of protection of the present application is not limited thereto. Any changes or substitutions that can be easily conceived by a person skilled in the art within the technical scope disclosed in this application should be included in the scope of protection of this application. Therefore, the scope of protection of this application should be based on the scope of protection of the claims.

Claims

1. A method for implementing multi-tab caching in Vue3, characterized in that: include: S1: When a switching event occurs, count the interactions between the current tab and the target tab and update them according to time decay to build a sparse weighted adjacency relationship; S2: Based on the weighted adjacency relationship, the steady-state resonance coefficient is calculated for all tabs through multiple rounds of propagation; S3: For each tab's internal key status fields, extract the field distribution entropy and state change ratio, calculate the access latency and cumulative number of visits within a specified time period for each tab, and obtain the access popularity coefficient through nonlinear mapping. S4: Set the steady-state resonance coefficient, field distribution entropy, state change ratio, access delay and access heat coefficient as input to generate the composite spectrum value of the tab; S5: Calculate the retention threshold based on the difference between the maximum and minimum values ​​of the composite spectrum value, and divide the tabs into a resident set and an evicted set; S6: Construct a hierarchical index structure, segment the tabs in the resident set according to the steady-state resonance coefficient interval and the composite spectrum value interval, and sort them by image timestamp within each segment; S7: For the tabs in the resident set, determine whether the image exists in the node image library. If so, reuse it. If not, render it through the image suite lazy loading and store it in the node image library. S8: For the tabs in the eviction set, the delay is deactivated based on the retention boundary and the difference between the composite spectrum values. When the delay ends and the composite spectrum value is still lower than the retention boundary, the corresponding node image is removed to release the tab resources.

2. A method for implementing multi-tab caching in Vue3 according to claim 1, characterized in that: Step S1 includes: Get the unique identifiers of the current tab and the target tab, and update the latest access time of the tab in the image timestamp record based on the unique identifiers; Create or locate the flow mapping table corresponding to the current tab in the mapping structure, and update the weights of all associated entries in the flow mapping table according to the preset attenuation coefficient; Perform weight accumulation operation on the associated entries of the current tab pointing to the target tab; Traverse the updated flow mapping table and remove the associated entries whose weights are lower than the preset threshold to maintain the sparse weighted adjacency relationship.

3. A method for implementing multi-tab caching in Vue3 according to claim 1, characterized in that: Step S2 includes: Initialize the resonance coefficient for the tab in the runtime image library, and update the secondary buffer map according to the outgoing edge weights of all tabs based on the flow weight mapping; For each tab in turn, update the tab steady-state resonance coefficient in the secondary buffer map by obtaining and accumulating the predecessor steady-state resonance coefficient normalized by the outgoing edge weight from all predecessor tabs; Synchronize the updated results of the secondary buffer mapping to the runtime image library and determine whether the maximum variation of the steady-state resonance coefficient of all tabs is lower than the preset convergence threshold; When the steady-state resonance coefficients of all tabs reach the convergence condition, the information propagation process is terminated and the final steady-state resonance coefficients are solidified and stored in the runtime image library.

4. A method for implementing multi-tab caching in Vue3 according to claim 1, characterized in that: Step S3 includes: After each tab switch is completed, obtain the current key status field set of the tab and the status snapshot of the last access, and extract the field distribution entropy and status change ratio; Record the access time of the tab in the global routing guard and calculate the access latency; Accumulate the number of visits to each tab within the preset time window, perform nonlinear mapping on the number of visits, and generate the visit heat coefficient; The field distribution entropy, state change ratio, access latency, and access heat coefficient are stored in the runtime image library.

5. A method for implementing multi-tab caching in Vue3 according to claim 1, characterized in that: Step S4 includes: Obtain the steady-state resonance coefficient, field distribution entropy, state change ratio, access latency, and access heat coefficient of the tab in the runtime image library, convert them uniformly according to the preset mapping rules, and assign corresponding weights; The transformed and weighted eigenvalues ​​are fused into a single scalar to generate a composite spectrum value of the tab, and the composite spectrum value is updated to the runtime image library.

6. A method for implementing multi-tab caching in Vue3 according to claim 1, characterized in that: Step S5 includes: Obtain a set of composite spectrum values ​​corresponding to all tabs from the runtime image library, and determine the maximum and minimum values ​​in the set of composite spectrum values; Generate a cache retention threshold based on the difference between the maximum and minimum values ​​and the preset adjustment parameters; Traverse the composite spectrum value set, compare the composite spectrum value of each tab with the cache retention threshold, and put the tab identifiers greater than or equal to the cache retention threshold into the resident set, and put the tab identifiers less than the cache retention threshold into the eviction set.

7. A method for implementing multi-tab caching in Vue3 according to claim 1, characterized in that: Step S6 includes: Divide all tabs in the resident set into multiple first-level groups based on the preset steady-state resonance coefficient range; Divide the tabs in each first-level group into multiple second-level groups based on the preset composite spectrum value interval; The tabs in each secondary group are sorted in descending order according to the image timestamp to form a sorted list, and a hierarchical index structure is constructed based on the primary group, the secondary group and the sorted list.

8. A method for implementing multi-tab caching in Vue3 according to claim 1, characterized in that: Step S7 includes: Traverse all tab identifiers in the resident set and query the corresponding virtual node in the node image library; When the query result has a corresponding virtual node, the virtual node is provided to the rendering module for reuse; When the query result does not contain a corresponding virtual node, a corresponding packaging component is created based on the image suite, lazy loading rendering is performed, and a new virtual node is generated; After rendering is complete, the new virtual node is stored in the node image library, and the corresponding packaging component is registered in the image package map.

9. A method for implementing multi-tab caching in Vue3 according to claim 1, characterized in that: Step S8 includes: For each tab in the ejection set, the ejection delay is determined based on the difference between the composite spectrum value and the cache retention boundary, and the tab is registered with the delay task scheduler; When the delayed task is triggered, the latest composite spectrum value of the tab is obtained from the runtime image library again and compared with the cache retention boundary; When the composite spectrum value is still less than the cache retention boundary, the virtual image corresponding to the tab is deleted from the node image library; The entries related to this tab are removed from the image package map, hierarchical index structure, and runtime image library simultaneously; Unmount the tab component instance in the Vue3 rendering context, clear all responsive references, and release corresponding resources.

10. A multi-tab cache system implemented in Vue3, used to implement a multi-tab cache method implemented in Vue3 according to any one of claims 1 to 9, characterized in that: include: Relationship building module: When a switching event occurs, the interactions between the current tab and the target tab are counted and updated according to time decay to build a sparse weighted adjacency relationship; Coefficient calculation module: Based on the weighted adjacency relationship, the steady-state resonance coefficient is calculated for all tabs through multiple rounds of propagation; Coefficient acquisition module: This module extracts the field distribution entropy and state change ratio for each tab's internal key status fields, calculates each tab's access latency and cumulative number of visits within a specified time period, and obtains the access heat coefficient through nonlinear mapping. Spectrum value generation module: takes the steady-state resonance coefficient, field distribution entropy, state change ratio, access delay, and access heat coefficient as input to generate the composite spectrum value of the tab; Tab division module: Calculates the retention threshold based on the difference between the maximum and minimum values ​​of the composite spectrum value, and divides the tabs into a resident set and an evict set; Interval segmentation module: Build a hierarchical index structure, segment the tabs in the resident set according to the steady-state resonance coefficient interval and the composite spectrum value interval, and sort them by image timestamp within each segment; Resident processing module: For the tabs in the resident set, it determines whether the image exists in the node image library. If so, it is reused. If not, it is rendered through the image suite lazy loading and stored in the node image library. Eviction processing module: For the tabs in the eviction set, the eviction delay is calculated based on the retention boundary and the difference between the composite spectrum values. When the delay ends and the composite spectrum value is still lower than the retention boundary, the corresponding node image is removed to release the tab resources.

Images