A method and system for implementing multi-tab caching in vue3

Abstract

The present invention discloses a method and system for implementing multi-tab caching in Vue3, which relates to the technical field of front-end performance optimization. The method includes: when a switching event occurs, weighted counting and time decay of tab switching are performed to construct a sparse adjacency relationship; multiple rounds of propagation are performed to calculate the steady-state resonance coefficient; field distribution entropy, state change ratio, access delay and access heat coefficient are extracted, and the composite spectrum value is generated by fusion; retention threshold is calculated based on the extreme difference of the composite spectrum value and resident and expelled tabs are divided; a hierarchical index is constructed, and the latest access timestamp is sorted within each interval; the existence of virtual nodes in the image library is judged for resident tabs, and they are reused or lazy loaded and cached; for expelled tabs, the image is removed and resources are released after judging the spectrum value difference and expelled delay. Through switching behavior analysis, adaptive threshold stratification, high-dimensional state evaluation and lazy loading delay elimination, high-frequency and highly associated tabs are preferentially retained and cold tabs are promptly eliminated, thereby improving rendering efficiency and saving resources.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of front-end performance optimization, in particular to a method and system for realizing multi-tab caching in vue3. BACKGROUND

[0002] In the background management or integrated service system, each business module is often displayed in the form of multiple tabs, and users can operate in parallel between different tabs. With the increase in the number of tabs and the complication of component functions, each switch needs to reload and render the page and its corresponding component structure, resulting in a large number of page element operations and script executions, which ultimately causes interface lag, response delay, and continuous growth of memory occupation.

[0003] The existing framework usually provides a component caching mechanism based on static rules, which can only determine which components to keep in cache in advance through configuration during the development stage, and cannot dynamically manage according to the switching behavior of users and the internal state of components. In addition, the same component may need independent cache instances under different routing parameters or contexts, and the static caching strategy is difficult to distinguish the life cycle needs of different instances, thereby causing state confusion or data pollution.

[0004] Tabs that have not been accessed for a long time are still continuously retained, which not only wastes client resources but also exacerbates the risk of potential memory leakage. Without an automatic elimination and recovery mechanism based on real-time access frequency, access duration, and component state changes, it is difficult to meet the smooth experience needs in high-interaction and 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 cache and release resources as needed. SUMMARY

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

[0006] To achieve the above-mentioned purpose, the present application provides the following technical solution: a method for realizing multi-tab caching in vue3, comprising:

[0007] S1: When a switching event occurs, count and update the interaction between the current tab and the target tab according to time decay, and construct a sparse weighted adjacency relationship;

[0008] S2: Based on the weighted adjacency relationship, calculate the steady-state resonance coefficient of all tabs through multiple rounds of propagation;

[0009] S3: For the internal key state field of each tab, extract the field distribution entropy and state change ratio, count the access delay and cumulative access times of each tab within a specified period, and obtain the access popularity coefficient through nonlinear mapping;

[0010] S4: set the steady-state resonance coefficient, field distribution entropy, state change ratio, access latency and access heat coefficient as input, and generate a composite spectrum value of the tab;

[0011] S5: calculate a retention threshold according to a difference between a maximum value and a minimum value of the composite spectrum value, and divide the tabs into a stay set and a retreat set;

[0012] S6: construct a hierarchical index structure, segment the tabs in the stay set according to the steady-state resonance coefficient interval and the composite spectrum value interval, and sort the tabs in each segment according to the mapping timestamp;

[0013] S7: for the tabs in the stay set, determine whether a mapping exists in the node mapping library, if the mapping exists, reuse it, and if the mapping does not exist, render it through a lazy loading mapping package and store it in the node mapping library;

[0014] S8: for the tabs in the retreat set, jointly delay the tabs according to the retention boundary and the difference in the composite spectrum value, and when the delay ends and the composite spectrum value is still lower than the retention boundary, remove the corresponding node mapping and release the tab resource.

[0015] The application further provides that step S1 comprises:

[0016] obtaining the unique identifiers of the current tab and the target tab, updating the latest access time of the tab in the mapping timestamp record according to the unique identifiers;

[0017] creating or positioning a flow mapping table corresponding to the current tab in the mapping structure, and updating the weights of all associated entries in the flow mapping table according to a preset decay coefficient;

[0018] performing a weight accumulation operation on the associated entry of the current tab pointing to the target tab;

[0019] traversing the updated flow mapping table, removing the associated entry with a weight lower than a preset threshold, and maintaining a sparse weighted adjacency relationship.

[0020] The application further provides that step S2 comprises:

[0021] initializing the resonance coefficient of the tab in the runtime mapping library, updating the secondary buffer mapping according to the out-edge weight of all tabs based on the flow weight mapping;

[0022] for each tab, updating the steady-state resonance coefficient of the tab in the secondary buffer mapping by obtaining and accumulating the steady-state resonance coefficients of all predecessor tabs normalized by the out-edge weight;

[0023] synchronizing the update result of the secondary buffer mapping to the runtime mapping library, and determining whether the maximum amplitude of all tab steady-state resonance coefficients is lower than a preset convergence threshold;

[0024] When all tab steady-state resonance coefficients reach the convergence condition, the information propagation process is terminated, and the final steady-state resonance coefficient is stored in the runtime image library.

[0025] The application further provides that step S3 comprises:

[0026] After each tab switching is completed, the current key state field set of the tab and the state snapshot at the last access are obtained, the field distribution entropy and the state change ratio are extracted;

[0027] The access time of the tab is recorded in the global routing guard, and the access delay is calculated;

[0028] The access times of the tabs are accumulated in a preset time window, the access times are nonlinearly mapped, and the access heat coefficients are generated;

[0029] The field distribution entropy, the state change ratio, the access delay and the access heat coefficient are stored in the runtime image library.

[0030] The application further provides that step S4 comprises:

[0031] The steady-state resonance coefficient, the field distribution entropy, the state change ratio, the access delay and the access heat coefficient of the tab are obtained from the runtime image library, are uniformly converted according to a preset mapping rule and are given corresponding weights;

[0032] The converted and weighted characteristic values are fused into a single scalar, the composite spectral value of the tab is generated, and the composite spectral value is updated to the runtime image library.

[0033] The application further provides that step S5 comprises:

[0034] The composite spectral value set corresponding to all tabs is obtained from the runtime image library, and the maximum value and the minimum value in the composite spectral value set are determined;

[0035] According to the difference between the maximum value and the minimum value, the cache retention threshold is generated in combination with a preset adjustment parameter;

[0036] The composite spectral value set is traversed, the composite spectral value of each tab is compared with the cache retention threshold, the tab identifiers greater than or equal to the cache retention threshold are classified into a stay set, and the tab identifiers less than the cache retention threshold are classified into a retire set.

[0037] The application further provides that step S6 comprises:

[0038] All tabs in the stay set are divided into a plurality of first-level groups according to a preset steady-state resonance coefficient interval;

[0039] The tabs in each first-level group are divided into a plurality of second-level groups according to a preset composite spectral value interval;

[0040] The tabs in each secondary group are sorted in descending order of the mapping timestamp and a sorted list is formed, and a hierarchical index structure is constructed based on the primary group, the secondary group and the sorted list.

[0041] The application further provides that step S7 comprises:

[0042] Traverse all tab identifiers in the residence set, and query the corresponding virtual node in the node image library;

[0043] When the query result exists the corresponding virtual node, the virtual node is provided to the rendering module for reuse;

[0044] When the query result does not exist the corresponding virtual node, a corresponding wrapping component is created based on the image suite, lazy loading rendering is performed, and a new virtual node is generated;

[0045] After rendering is completed, the new virtual node is stored in the node image library, and the corresponding wrapping component is registered to the image suite mapping.

[0046] The application further provides that step S8 comprises:

[0047] For each tab in the residence set, the residence delay is determined according to the difference between the composite spectrum value and the cache retention boundary, and the tab is registered to the delay task scheduling;

[0048] When the delay task is triggered, the latest composite spectrum value of the tab is reacquired from the runtime image library, and is compared with the cache retention boundary;

[0049] 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;

[0050] Synchronously remove the tab-related entries from the image suite mapping, the hierarchical index structure and the runtime image library;

[0051] In the vue3 rendering context, the mounting of the tab component instance is unmounted, all reactive references are emptied, and the corresponding resources are released.

[0052] The application further provides a multi-tab cache system implemented in vue3, which is used to implement the multi-tab cache method implemented in vue3.

[0053] The relationship construction module counts and updates the interaction between the current tab and the target tab according to time decay when the switching event occurs, and constructs a sparse weighted adjacency relationship;

[0054] The coefficient calculation module calculates the steady-state resonance coefficient of all tabs through multiple rounds of propagation based on the weighted adjacency relationship;

[0055] Coefficient obtaining module: for the internal key state field of each tab, extract the field distribution entropy and state change ratio, count the access delay of each tab and the cumulative access times in a specified period, and obtain the access heat coefficient through nonlinear mapping;

[0056] Spectrum value generating module: set the steady-state resonance coefficient, field distribution entropy, state change ratio, access delay and access heat coefficient as input, and generate the composite spectrum value of the tab;

[0057] Tab division module: according to the difference between the maximum and minimum values of the composite spectrum value, calculate the retention threshold, and divide the tabs into the resident set and the retirement set;

[0058] Interval segmentation module: 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 according to the mapping time stamp in each segment;

[0059] Resident processing module: for the tabs in the resident set, judge whether there is a mapping in the node mapping library, if there is, reuse it, if not, render it through the mapping package lazy loading and store it in the node mapping library;

[0060] Retirement processing module: for the tabs in the retirement set, according to the common retirement delay of the retention boundary and the composite spectrum value difference, when the delay ends and the composite spectrum value is still lower than the retention boundary, remove the corresponding node mapping and release the tab resource.

[0061] The present application provides a kind of in vue3 implementation multi-tab cache method and system, the method is by when switching event occurs, the interaction between current tab and target tab is counted and is updated according to time attenuation, constructs sparse weighted adjacency relationship;Based on weighted adjacency relationship, the steady-state resonance coefficient is calculated for all tabs through multiple rounds of propagation;For the internal key state field of each tab, extract the field distribution entropy and state change ratio, count the access delay of each tab and the cumulative access times in a specified period, and obtain the access heat coefficient through nonlinear mapping;Steady-state resonance coefficient, field distribution entropy, state change ratio, access delay and access heat coefficient are set as input, and the composite spectrum value of the tab is generated;According to the difference between the maximum and minimum values of the composite spectrum value, calculate the retention threshold, and divide the tabs into the resident set and the retirement set;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 according to the mapping time stamp in each segment;For the tabs in the resident set, judge whether there is a mapping in the node mapping library, if there is, reuse it, if not, render it through the mapping package lazy loading and store it in the node mapping library;For the tabs in the retirement set, according to the common retirement delay of the retention boundary and the composite spectrum value difference, when the delay ends and the composite spectrum value is still lower than the retention boundary, remove the corresponding node mapping and release the tab resource, the beneficial effects include:

[0062] 1. Cache optimization driven by switching behavior: Based on the weighted adjacency relationship construction and multi-round propagation calculation of tab switching behavior, the core position of each tab in the user operation process can be accurately described, the high-frequency access and high-correlation tabs are preferentially retained, and the performance overhead caused by repeated rendering is effectively reduced;

[0063] 2. Multi-dimensional state evaluation and accurate elimination: Combined with the internal field distribution entropy and state change ratio of each tab, as well as the nonlinear mapping of access delay and access heat coefficient, the overall evaluation of tab activity and state complexity is realized, which can timely identify silent or cold tabs and automatically eliminate them, thereby significantly reducing memory occupation and potential leakage risk;

[0064] 3. Adaptive threshold division and efficient retrieval: By adaptively calculating the cache retention threshold according to the compound spectrum value range, and constructing a hierarchical index based on the steady-state resonance coefficient interval and the compound spectrum value interval for the resident tab set, the required tab can be quickly located, the rendering scheduling efficiency is improved, and the switching response time is shortened;

[0065] 4. Lazy loading reuse and delay elimination mechanism: The resident tabs are created and reused in a lazy loading manner, and the components are instantiated only at the first access; the retired tabs are set with a delay time according to the retention boundary and the compound spectrum value difference, and are eliminated after the delay time ends and the score is still below the threshold, thereby realizing tolerance to short-term access fluctuations and timely release of long-term inactive resources.

[0066] The above description is only a summary of the technical solutions of the present application. In order to more clearly understand the technical means of the present application, the content of the specification can be implemented, and in order to make the above and other purposes, features and advantages of the present application more obvious and easy to understand, the following specific embodiments of the present application are described. BRIEF DESCRIPTION OF DRAWINGS

[0067] In order to more clearly illustrate the technical solutions in the embodiments of the present application, the following will briefly introduce the drawings needed to be used in the embodiment description. Obviously, the drawings in the following description are only some embodiments of the present application, and for those skilled in the art, other drawings can also be obtained without creative labor. In the drawings:

[0068] Figure 1 A flowchart of a method for implementing multi-tab cache in vue3 is shown for an exemplary embodiment of the present application;

[0069] Figure 2 A structural schematic diagram of a multi-tab cache system implemented in vue3 is shown for an exemplary embodiment of the present application. DETAILED DESCRIPTION

[0070] The objectives, technical solutions, and advantages of the present application will become more apparent after a careful reading of the following detailed description with appropriate Figs. included. It is to be understood that both the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the present application, as claimed.

[0071] It is to be understood that the figures provided in the following embodiments are only to schematically illustrate the basic concept of the present application, and only the components related to the present application are shown in the figures, not the number, shape, and size of the components when actually implemented. The shapes, numbers, and proportions of the components when actually implemented can be arbitrarily changed, and the layout pattern of the components can be more complex.

[0072] In the following description, a large number of details are discussed to provide a more thorough explanation of the embodiments of the present application, however, it is obvious to those skilled in the art that the embodiments of the present application can be implemented without these specific details, and in other embodiments, the known structures and devices are shown in the form of block diagrams rather than in the form of details to avoid making the embodiments of the present application difficult to understand.

[0073] Embodiment One:

[0074] A method for implementing multi-tab caching in vue3, as shown in Figure 1 , comprising:

[0075] S1: When a switching event occurs, count and update the interaction between the current tab and the target tab according to time decay, and construct a sparse weighted adjacency relationship;

[0076] S2: Based on the weighted adjacency relationship, calculate the steady-state resonance coefficient of all tabs through multiple rounds of propagation;

[0077] S3: For the internal key state field of each tab, extract the field distribution entropy and state change ratio, and count the access latency and cumulative access times in a specified period of each tab, and obtain the access heat coefficient through nonlinear mapping;

[0078] S4: Set the steady-state resonance coefficient, field distribution entropy, state change ratio, access latency, and access heat coefficient as inputs to generate the composite spectrum value of the tab;

[0079] S5: According to the maximum and minimum difference of the composite spectrum value, calculate the retention threshold, and divide the tabs into the resident set and the retired set;

[0080] 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 according to the mapping timestamp in each segment;

[0081] S7: For the tabs in the resident set, determine whether there is a mapping in the node mapping library, if there is, reuse it, if not, render it through lazy loading of the mapping package and store it in the node mapping library;

[0082] S8: For the tabs in the resident set, jointly delay according to the retention boundary and the composite spectrum value difference, when the delay ends and the composite spectrum value is still lower than the retention boundary, remove the corresponding node mapping and release the tab resource.

[0083] The application further provides that step S1 comprises:

[0084] Obtain the unique identifier of the current tab and the target tab, and update the latest access time of the tab in the mapping timestamp record according to the unique identifier; Specifically, when the user switches from the current tab to the target tab on the interface, capture the switching event; Extract the unique identifier of the current tab and the target tab for subsequent mapping and weight positioning; According to the unique identifier, find the corresponding entry in the mapping timestamp record; If it exists, replace its last access time with the current time, otherwise create a new entry and record the current time, so that the latest access time of each tab is updated in real time;

[0085] Create or locate the flow mapping table corresponding to the current tab in the mapping structure, and update the weight of all associated entries in the flow mapping table according to the preset decay coefficient; Specifically, find the flow mapping table associated with the current tab in the mapping structure, and initialize it when the flow mapping table does not exist; Traverse all target tab entries in the mapping table, update the existing weight according to the preset decay coefficient, retain recent switching traces and gradually fade out distant interactions;

[0086] Perform weight accumulation operation on the associated entry of the target tab pointed to by the current tab; Specifically, locate the entry of the target tab pointed to by the current tab in the same mapping table; If it already exists, increase its weight by a fixed increment (1), otherwise create the entry and set the initial weight to the increment value to reflect the latest switching;

[0087] The updated flow direction mapping table is traversed, and associated entries with weights lower than a preset threshold are removed to maintain a sparse weighted adjacency relationship; specifically, the updated mapping table is traversed again, and all entries with weight values lower than the preset threshold are deleted to ensure that the mapping table always remains sparse, and only adjacency relationships with sufficient switching frequencies or recent interactions are retained; in a feasible embodiment of the present application, there are three tabs A, B and C in the system, the initialization image timestamp and the flow direction mapping are both empty, the time decay coefficient is 0.8, the weight cumulative increment is 1, and the sparsity threshold is set to 0.5; a new switching event: A→B, time t=0ms, identification acquisition: source=“A”, target=“B”, timestamp record: add A→0, B→0, the flow direction mapping A table is empty, directly add the entry A→B weight=1 after new creation, and there is no other entry, so no decay or removal is needed; a new switching event: B→C, time t=1000ms, identification acquisition: source=“B”, target=“C”, timestamp record: update B→1000, C→1000, the flow direction mapping B table is empty, add B→C weight=1 after new creation, and there is no other entry, so no decay or removal is needed; a new switching event: A→B, time t=3000ms, identification acquisition: source=“A”, target=“B”, timestamp record: update A→3000, B→3000, the existing A→B weight in the flow direction mapping A table is 1, the remaining entries (none) are decayed by 0.8 first, and then the existing weight of A→B is decayed by 0.8*1=0.8; cumulative operation: the weight of A→B is updated to 0.8+1=1.8, and the sparsity threshold is checked: 1.8>0.5, and no entry needs to be removed; at this time, the mapping structure state is as follows: A table: {B:1.8}; B table: {C:1}; C table: {}.

[0088] The present application further provides that step S2 comprises:

[0089] The resonance coefficients are initialized for the tabs in the runtime image library, and the secondary buffer mapping is updated based on the flow direction weight mapping according to the out-edge weights of all tabs; specifically, the initial resonance coefficients are set for each tab in the runtime image library, and a consistent constant is uniformly assigned to ensure that the initial state of information propagation is consistent; the flow direction weight mapping is traversed, the sum of all out-edge weights of each tab is calculated, and is stored in the secondary buffer mapping for subsequent normalization processing;

[0090] The resonance coefficients of the tabs in the secondary buffer mapping are updated by acquiring and accumulating the normalized predecessor steady-state resonance coefficients of all predecessor tabs through the out-edge weights of the tabs; specifically, each tab is traversed in turn, and the current resonance coefficients of all predecessor tabs of the tab are proportionally distributed to the tab according to the predecessor out-edge weights, and are accumulated in the tab entry in the secondary buffer mapping;

[0091] The update result of the secondary buffer mapping is synchronized to the runtime image library, and it is judged whether the maximum amplitude of the steady-state resonance coefficients of all tabs is lower than a preset convergence threshold. Specifically, after completing one iteration, the new resonance coefficients in the secondary buffer mapping are written back to the runtime image library in batches, and the maximum difference between the new and old resonance coefficients of all tabs is calculated. If the difference is lower than the preset convergence threshold, the iteration is ended; otherwise, the secondary buffer mapping is emptied and the information propagation iteration is repeated until convergence.

[0092] When all tabs steady-state resonance coefficients reach the convergence condition, the information propagation process is terminated, and the final steady-state resonance coefficients are stored in the runtime image library. Specifically, after the convergence condition is met, the final converged resonance coefficients are left in the runtime image library. In a feasible embodiment of the present application, the flow weight mapping current state of the three tabs A, B, and C is: 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 A out-edge weight sum is 1.8+0.6=2.4, the B out-edge weight sum is 0.5+1.0=1.5, and the C out-edge weight sum is 0.2; the first iteration propagation: the predecessors of A are B and C: the contribution from B is 1.0x(0.5 / 1.5)≈0.333, the contribution from C is 1.0x(0.2 / 0.2)=1.0, and the secondary mapping A=1.333; the predecessor of B is A: the contribution from A is 1.0x(1.8 / 2.4)=0.75, and the secondary mapping B=0.75; the predecessors of C are A and B: the contribution from A is 1.0x(0.6 / 2.4)=0.25, the contribution from B is 1.0x(1.0 / 1.5)≈0.667, and the secondary mapping C=0.917; the maximum difference between the old and new resonance coefficients of the tabs: A: |1.333-1.0|=0.333, B: |0.75-1.0|=0.25, C: |0.917-1.0|=0.083, and the maximum difference=0.333>0.05, which does not meet the convergence, and the next round of iteration is prepared; the second iteration propagation: starting with the new resonance coefficients [A=1.333, B=0.75, C=0.917], the contribution calculation is repeated: A=1.333x(0.5 / 1.5)+0.917x(0.2 / 0.2)≈0.444+0.917=1.361, B=1.333x(1.8 / 2.4)≈1.0, and C=1.333x(0.6 / 2.4)+0.75x(1.0 / 1.5)≈0.333+0.5=0.833; the maximum difference between the old and new resonance coefficients of the tabs: A: |1.361-1.333|=0.028, B: |1.0-0.75|=0.25, C: |0.833-0.917|=0.084, and the maximum difference=0.25>0.05, which continues the iteration; the third iteration check: the approximate resonance coefficients [A≈1.348, B≈1.022, C≈0.792] are obtained again, the maximum difference is lower than 0.05, and the convergence is ended; the result is solidified: the final steady-state values A≈1.348, B≈1.022, and C≈0.792 are written into the runtime image library.

[0093] The present application further provides that step S3 comprises:

[0094] After each tab switching is completed, the current key state field set of the tab is obtained and compared with the state snapshot at the last access, and the field distribution entropy and state change ratio are extracted; specifically, after each tab switching is completed, the key field set (including the progress value, the number of remaining tasks and the selected flag) of the tab is read from the data model of the tab and is respectively assigned to the current state snapshot; at the same time, the last round snapshot is kept as the historical state for subsequent comparison, and the absolute value of each field value in the current state snapshot is taken and normalized, and the distribution entropy is calculated according to the information entropy formula; the state vector of the current and historical states is calculated according to the field dimension, and the norm ratio is obtained, and the state change ratio is obtained, reflecting the content update strength; further, the progress value represents the completion degree of the business process or data processing link corresponding to the current tab, and reflects the task progress in percentage or proportion. The numerical type is integer or floating point number, and the value range is usually limited between 0 and 100 (or between 0.0 and 1.0), wherein 0 represents not started, and 100 represents completed, which is used to depict an important continuous dimension of the internal state of the component, and the larger the value is, the closer the work carried by the current tab is to the completion state; the number of remaining tasks refers to the number of to-do items that need to be processed by the page or component, which is a non-negative integer. Zero value indicates that all to-do items have been processed, and the larger the positive value is, the greater the workload under the tab. This parameter can not only reflect the business load of the component, but also be used to measure the priority of subsequent rendering or data synchronization; in the distribution entropy calculation, the absolute value is included in the normalization base to determine the relative weight of each field in the overall state; the selected flag is a Boolean field used to indicate whether the current tab item is in the user-selected or focused state, and adopts two values of 1 (selected) and 0 (not selected) when mapped to a numerical value. This parameter is a discrete state dimension, which contributes less to the state distribution entropy calculation, but can capture the key information of "whether activated" or "whether focused" on the interface level, and feedback the user attention in the short term when the composite score is calculated;

[0095] The access time of the tab is recorded in the global route guard, and the access time delay is calculated; specifically, in the global route guard, the current time point is recorded when the tab is activated, and the access time delay is obtained by subtracting the last access time point of the tab;

[0096] The access times of each tab are accumulated within a preset time window, the access times are nonlinearly mapped, and the access heat coefficient is generated; specifically, an access time queue is maintained for each tab, and the current timestamp is enqueued when switching; records earlier than the window start point are removed from the queue at regular intervals, so that the remaining queue length is equal to the access times within the window; the number of times is converted by nonlinear mapping to obtain the access heat coefficient;

[0097] The field distribution entropy, the state change ratio, the access time delay and the access heat coefficient are stored in the runtime image library. Specifically, the field distribution entropy, the state change ratio, the access time delay and the access heat coefficient calculated above are uniformly stored in the runtime image library. In a feasible embodiment of the present application, the tab X includes three key fields: the numerical field "progress" (0-100), the numerical field "remaining task number" (positive integer), and the Boolean field "selected" (mapped to 0 or 1). In the historical and current snapshots, the last access snapshot: progress = 40; remaining task number = 5; selected = 0; the current access snapshot: progress = 60; remaining task number = 3; selected = 1, the distribution entropy calculation: the absolute value summation normalization base number = 60+3+1 = 64; the field weight: 60 / 64 ≈ 0.94; 3 / 64 ≈ 0.047; 1 / 64 ≈ 0.016; the distribution entropy ≈ -[0.94·ln0.94+0.047·ln0.047+0.016·ln0.016] ≈ 0.26; the state change ratio: the field difference vector = (60-40, 3-5, 1-0) = (20, -2, 1), the historical norm = |40|+|5|+|0| = 45; the difference norm = |20|+|-2|+|1| = 23, the change ratio ≈ 23 / (45+ε) ≈ 0.51; the access time delay: the last access time point = 10:00:00; the current access time point = 10:05:30, the access time delay = 5 minutes 30 seconds = 330 seconds; the access heat coefficient: the access time point queue of the tab X in the past 10-minute window is [09:58, 10:00, 10:03, 10:05] for a total of 4 times; the nonlinear mapping (for example, first add one and then take the square root) → √(4+1) ≈ 2.24, the field distribution entropy = 0.26, the state change ratio = 0.51, the access time delay = 330s, and the access heat coefficient = 2.24 are written into the runtime image library.

[0098] The present application further provides that the step S4 comprises:

[0099] The steady-state resonance coefficient, field distribution entropy, state change ratio, access time delay and access heat coefficient of the tab are obtained from the runtime image library, and are uniformly converted and given corresponding weights according to a preset mapping rule. Specifically, the five features corresponding to the target tab are obtained from the runtime image library: the steady-state resonance coefficient, the field distribution entropy, the state change ratio, the access time delay and the access heat coefficient. According to the mapping rule preset according to the business scenario, the five features are respectively subjected to corresponding nonlinear conversion, and the features are mapped to the same numerical scale range. Then, different exponential weights are given according to the importance of each feature, so as to highlight or weaken the influence on the final result. Further, the steady-state resonance coefficient is positively correlated with the composite spectrum value, and the increase of the resonance coefficient can provide a higher score through power amplification, so as to highlight the importance of the core tab. The field distribution entropy is positively correlated with the composite spectrum value, and the greater the entropy means the more diverse the internal state, so as to give a higher weight through logarithmic-exponential mapping. The state change ratio is positively correlated with the composite spectrum value, and the higher the change ratio means the greater the content update intensity, so that the priority is correspondingly improved after power mapping. The access time delay is negatively correlated with the composite spectrum value, and the longer the delay means the higher the tab obsolescence degree, so that the exponential decay mechanism will significantly inhibit the score. The access heat coefficient is positively correlated with the composite spectrum value, and the higher the heat means the greater the recent access activity, so that it is moderately improved after logarithmic root mapping.

[0100] The converted and weighted feature values are fused into a single scalar to generate the composite spectrum value of the tab, and the composite spectrum value is updated to the runtime image library. Specifically, the five mapped and weighted feature values are fused in a product manner to generate a single scalar composite spectrum value, which comprehensively reflects the access attention, state complexity and freshness of the tab. The newly generated composite spectrum value is written back to the runtime image library. In a feasible embodiment of the present application, the selected tab X feature values are: steady-state resonance coefficient = 1.348, field distribution entropy = 0.26, state change ratio = 0.51, access time delay = 330 seconds, and access heat coefficient = 2.24. The preset mapping and weight parameters are: resonance coefficient index α = 1.2, entropy value mapping β = 0.8, change ratio index γ = 0.5, time delay decay rate μ = 0.01, and heat root mapping index φ = 0.5. The resonance coefficient mapping: 1.348 is raised to the power of 1.2 to obtain about 1.432. The entropy value mapping: 0.26 is taken to the natural logarithm after being added by one, and then raised to the power of 0.8 to obtain about 0.31. The change ratio mapping: 1+0.51 is taken to the power of 0.5 to obtain about 1.229. The time delay mapping: 330 seconds is multiplied by -μ to obtain the exponential, which is about 0.0367. The heat mapping: 1+2.24 is taken to the natural logarithm and then square root to obtain about 1.084. The five mapping results are multiplied: 1.432×0.31×1.229×0.0367×1.084≈0.022. The final composite spectrum value 0.022 is stored in the runtime image library.

[0101] The present invention is further configured such that step S5 includes:

[0102] 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;

[0103] 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.

[0104] The present invention is further configured such that step S6 includes:

[0105] 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.

[0106] The tabs in each first-level group are divided into multiple second-level groups according to preset composite spectrum value intervals; specifically, within each first-level group, the tabs in the group are further subdivided into second-level groups according to preset spectrum value intervals according to their composite spectrum values, to reflect different priority levels within the same influence section;

[0107] The tabs in each second-level group are sorted in descending order of the mapping time stamp and a sorted list is formed, and a hierarchical index structure is constructed based on the first-level group, the second-level group and the sorted list; specifically, for the tabs in each second-level group, descending order sorting is performed according to the latest mapping time stamp, to ensure that the tab at the head of the list is the instance that is most recently accessed or updated most actively; the first-level group, the second-level group and the respective sorted list are used as three layers of indexes to form the final hierarchical index structure, which is used to quickly locate according to the three dimensions of influence, spectrum value and freshness during rendering or cache retrieval; in a feasible embodiment of the present application, the resident set contains tabs A, B and C, and the characteristics are as follows: steady-state resonance coefficients: A = 1.3; B = 0.8; C = 2.1; composite spectrum values: A = 0.85; B = 0.42; C = 0.67; latest mapping time stamp (milliseconds): A = 3000; B = 2000; C = 1000; preset steady-state resonance coefficient partition: interval I: [0.0, 1.0), interval II: [1.0, 2.0), interval III: [2.0, ∞); preset composite spectrum value partition: sub-interval 1: [0.0, 0.5), sub-interval 2: [0.5, 1.0); first-level group: interval I contains B (0.8), interval II contains A (1.3), and interval III contains C (2.1); second-level group: within interval I, the spectrum value 0.42 of B belongs to sub-interval 1; within interval II, the spectrum value 0.85 of A belongs to sub-interval 2; within interval III, the spectrum value 0.67 of C belongs to sub-interval 2; sorted list: interval I → sub-interval A list: [B (time stamp = 2000)], interval II → sub-interval B list: [A (3000)]; interval III → sub-interval B list: [C (1000)], finally forming a three-layer mapping: the first layer is according to the influence interval I / II / III, the second layer is according to the spectrum value sub-interval 1 / 2 within each interval, and the third layer is the tab in the sorted list sorted according to the latest access priority; the above structure can be used to locate the influence interval first, then refine to the spectrum value sub-interval, and finally directly use the sorted list to quickly determine the tabs to be rendered or retained during subsequent cache retrieval.

[0108] The present application further provides that step S7 comprises:

[0109] All tab identifiers in the resident set are traversed to query the corresponding virtual nodes in the node image library; specifically, for each tab identifier in the resident set, it is queried in the node image library whether the corresponding virtual node already exists;

[0110] When the query result exists 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 handed over to the rendering module for reuse, without the need to re-instantiate the component;

[0111] When the query result does not exist a corresponding virtual node, a corresponding wrapping component is created based on the image suite, lazy loading rendering is performed, and a new virtual node is generated; specifically, if the query does not hit, the image suite is called to dynamically generate a corresponding wrapping component with the current tab identifier as the key, and the component instantiation and rendering are triggered through the lazy loading mode to output a new virtual node;

[0112] After rendering is completed, the new virtual node is stored in the node image library, and the corresponding wrapping component is registered to the image suite mapping; specifically, after the new virtual node is rendered, it is stored in the node image library, and the wrapping component is registered in the image suite mapping, so as to be reused in subsequent queries; in a feasible embodiment of the present application, the resident set includes tab identifiers TabA, TabB and TabC, and the node image library currently only stores virtual nodes of TabA and TabC; TabA is queried, the existing virtual node is found in the image library, and the node is directly provided to the rendering module without any new creation; TabB is queried, and the corresponding node is not found in the image library; the wrapping component WrapperB is created through the image suite, and lazy loading rendering is triggered; after rendering is completed, the new virtual node VNodeB is obtained; VNodeB is stored in the node image library, and WrapperB is registered to the image suite mapping; TabC is queried, and the existing virtual node is found in the image library; the node is directly reused without re-rendering; after the above process is completed, the latest virtual nodes of TabA, TabB and TabC are sequentially stored in the node image library, providing complete reuse capability for next rendering.

[0113] The present application further provides that step S8 comprises:

[0114] For each tab in the gradual retirement set, the retirement delay is determined according to the difference between the composite spectrum value and the cache retention boundary, and the tab is registered to the delay task scheduler; specifically, for each tab in the gradual retirement set, the retirement delay is calculated according to the difference between its latest composite spectrum value and the cache retention boundary; the tab identifier and the corresponding delay are registered to the delay task scheduler to trigger the subsequent elimination process after the delay ends;

[0115] When the delay task is triggered, the latest composite spectrum value of the tab is reacquired from the runtime image library and compared with the cache retention boundary; specifically, when the delay task is triggered, the current composite spectrum value of the tab is re-read from the runtime image library and compared with the cache retention boundary to confirm that it is still below the threshold;

[0116] 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;

[0117] Synchronously remove the tab-related entries from the image suite mapping, hierarchical index structure and runtime image library; specifically, synchronously remove all entries of the tab from the image suite mapping, hierarchical index structure and runtime image library, to ensure that the cache management data no longer retains any old information of the tab;

[0118] Unmount the tab component instance in the vue3 rendering context, clear all reactive references, and release the corresponding resources; specifically, unmount the tab component instance in the vue3 rendering context, clear all reactive references and event listeners related to the instance, to facilitate the garbage collection mechanism to recycle the occupied memory and DOM nodes, and completely release the corresponding resources; in a feasible embodiment of the present application, the cache retention boundary is 0.56, and the tabs TabX and TabY are included in the gradual retirement. The latest composite spectrum values of TabX and TabY are 0.45 and 0.50, respectively. After comprehensive calculation of the retirement acceleration coefficient and the minimum delay, the retirement delay of TabX is 5 seconds, and the retirement delay of TabY is 8 seconds; register the delay task, and register in the scheduler: TabX executes the elimination at t0+5s; TabY executes the elimination at t0+8s; the elimination trigger of TabX: 5 seconds after the task is triggered, the composite spectrum value is re-read as 0.45<0.56, which meets the elimination condition; the virtual image of TabX is removed from the node image library; the entries of TabX are deleted in the image suite mapping, hierarchical index, and runtime image library; the component instance is unloaded in the vue3 context, and all reactive references are cleared; the elimination trigger of TabY: before the task is triggered 8 seconds later, if the tab is accessed again, 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 performed; if it has been accessed again and promoted to ≥0.56, the elimination is cancelled in the checking link, and the image and data structure are retained; through the above process, fault tolerance to temporary access fluctuations is ensured, and effective elimination of truly cooled tabs is implemented, to ensure that runtime resources are released in time.

[0119] Embodiment two:

[0120] Please refer to Figure 2 The exemplary vue3 multi-tab cache system is used to implement the above-mentioned vue3 multi-tab cache method, and includes:

[0121] A relationship construction module: when a switching event occurs, the interaction between the current tab and the target tab is counted and updated with time decay, to construct a sparse weighted adjacency relationship;

[0122] coefficient calculation module: based on the weighted adjacency relationship, the steady-state resonance coefficient is calculated through multiple rounds of propagation for all tabs;

[0123] coefficient acquisition module: for the internal key state field of each tab, the field distribution entropy and state change ratio are extracted, the access latency and cumulative access times in a specified period of each tab are counted, and the access popularity coefficient is obtained through nonlinear mapping;

[0124] spectrum value generation module: set the steady-state resonance coefficient, field distribution entropy, state change ratio, access latency and access popularity coefficient as input to generate the composite spectrum value of the tab;

[0125] tab division module: according to the maximum and minimum difference of the composite spectrum value, the retention threshold is calculated, and the tabs are divided into the resident set and the retired set;

[0126] interval segmentation module: 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 according to the mapping time stamp in each segment;

[0127] resident processing module: for the tabs in the resident set, it is judged whether there is a mapping in the node mapping library, if there is, it is reused, if not, it is rendered through lazy loading and stored in the node mapping library;

[0128] retired processing module: for the tabs in the retired set, according to the common retired delay of the retention boundary and the composite spectrum value difference, when the delay ends and the composite spectrum value is still lower than the retention boundary, the corresponding node mapping is removed, and the tab resource is released.

[0129] 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 operations has been described in detail in the method embodiment, which will not be repeated here. The multi-tab cache system implemented in vue3 provided by the above embodiment can be completed by different functional modules according to the above functions in actual application, that is, the internal structure of the system is divided into different functional modules to complete all or part of the functions described above, and this is not limited here.

[0130] The above-described embodiments can be implemented in whole or in part by software, hardware, firmware, or any combination thereof. When implemented by software, the above-described 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 programs are loaded or executed on a computer, the processes or functions described in the embodiments of the present application are wholly or partially generated. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable devices. The computer instructions can be stored in a computer-readable storage medium or transferred from one computer-readable storage medium to another, for example, the computer instructions can be transferred from one website, computer, server, or data center to another via wired (for example, infrared, wireless, microwave, etc.) or wireless means. The computer-readable storage medium can be any available medium accessible by a computer or a data storage device such as a server, data center, etc. containing one or more available medium collections. The available medium can be a magnetic medium (for example, a floppy disk, a hard disk, a magnetic tape), an optical medium (for example, a DVD), or a semiconductor medium. The semiconductor medium can be a solid-state disk.

[0131] It should be understood that the term "and / or" herein merely describes an association relationship of associated objects, which means that there can be three relationships, for example, A and / or B can represent the following three cases: A exists alone, A and B exist together, and B exists alone, where A and B can be singular or plural. In addition, the character " / " herein generally represents an "or" relationship between the associated objects before and after it, but it can also represent an "and / or" relationship. The specific meaning can be understood according to the context before and after it.

[0132] In this application, "at least one" means one or more, and "multiple" means two or more. "At least one of the following" or similar expressions means any combination of these items, including any combination of single or multiple items. For example, at least one of a, b, or c can represent a, b, c, a-b, a-c, b-c, or a-b-c, where a, b, and c can be single or multiple.

[0133] It should be understood that in various embodiments of the present application, the size of the sequence number of the above-described processes does not mean the order of execution, and the execution order of the processes should be determined according to their functions and inherent logic, and should not constitute any limitation on the implementation process of the embodiments of the present application.

[0134] Those skilled in the art can clearly understand that the units and algorithm steps of each example described in combination with the embodiments disclosed herein can be realized by electronic hardware or a combination of computer software and electronic hardware. Whether the functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to implement the described functions for each specific application, but such implementation should not be considered beyond the scope of the present application.

[0135] Those skilled in the art can clearly understand that, for the convenience and brevity of the description, the specific working processes of the above-described system, device and unit can refer to the corresponding processes in the foregoing method embodiments, which will not be repeated here.

[0136] In several embodiments provided in the present application, it should be understood that the disclosed system can be implemented in other ways. For example, the above-described device embodiments are only schematic, for example, the division of the units is only a logical function division, and actual implementation can have another division manner, for example, a plurality of units or components can be combined or integrated into another system, or some features can be ignored or not executed. In addition, the coupling or direct coupling or communication connection between the units shown or discussed can be indirect coupling or communication connection through some interface, device or unit, and can be electrical, mechanical or other forms.

[0137] The units described as separate components can or can not be physically separated, and the components shown as units can or can not be physical units, that is, they can be located in one place, or can be distributed on a plurality of network units. Part or all of the units can be selected according to actual needs to achieve the purpose of the embodiment.

[0138] In addition, each functional unit in each embodiment of the present application can be integrated into a processing unit, or each unit can exist physically independently, or two or more units can be integrated into one unit.

[0139] If the functions are implemented in the form of software function units and sold or used as independent products, they can be stored in a computer readable storage medium. Based on this understanding, the technical solutions of the present application essentially or the parts that contribute to the prior art or parts of the technical solutions can be embodied in the form of a software product. The computer software product is stored in a storage medium and includes a plurality of instructions for causing 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 methods described in the various embodiments of the present application. The aforementioned storage medium includes: a U disk, a mobile hard disk, a read-only memory (ROM), a random access memory (RAM), a magnetic disk or an optical disk, and various media that can store program codes.

[0140] The above is only a specific implementation of the present application, but the protection scope of the present application is not limited thereto. Any person skilled in the art can easily think of changes or replacements within the technical scope disclosed in the present application, which should be covered within the protection scope of the present application. Therefore, the protection scope of the present application should be subject to the protection scope 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. According to a method for implementing multi-tab caching in Vue3 according to claim 1, it is 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