Label page recovery method and device, equipment and storage medium
By obtaining a snapshot of the state when switching tabs and calculating the minimum difference set, the problem of tab recovery delay is solved, achieving efficient and accurate tab recovery and improving the user experience.
Patent Information
- Application Number
- CN202511442923.7
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2025-10-10
- Publication Date
- 2026-01-02
AI Technical Summary
Existing tab recovery solutions require reloading the page during recovery, resulting in significant delays and impacting user experience.
By acquiring a snapshot of the state when a user triggers a tab switching operation, the tab recovery operation is detected in real time, and the minimum difference set between the initial state and the state snapshot is calculated. The tab recovery is then achieved using the minimum difference set.
It improves the efficiency of tab recovery, reduces latency, enhances user experience, and enables resource release in the inactive state and rapid and accurate recovery in the active state.
Smart Images
Figure CN121256162A_ABST
Abstract
Description
Technical Field
[0001] This application relates to the field of tab recovery technology, specifically to a tab recovery method, apparatus, device, and storage medium. Background Technology
[0002] Single-page applications (SPAs) have become the mainstream development model, and users are accustomed to opening multiple tabs in their browsers simultaneously for multitasking. However, this usage pattern poses a significant challenge to device memory, computing resources, and battery life. To address this issue, modern browsers and operating systems have built-in resource management strategies that proactively limit or reclaim computing resources for inactive tabs when users switch to them, reloading them only when the page is active again.
[0003] However, existing tab recovery solutions require reloading the page during recovery, resulting in significant delays and impacting user experience. Summary of the Invention
[0004] In view of this, this application provides a tab recovery method, apparatus, device, and storage medium to solve the problem that existing tab recovery solutions require reloading the page during recovery, resulting in severe delays and affecting user experience.
[0005] To achieve the above objectives, the following solution is proposed:
[0006] Firstly, a tab recovery method includes:
[0007] Get a snapshot of the current page's state when the user triggers a tab switching operation;
[0008] Real-time detection of whether the user has triggered a tab restore operation;
[0009] When it is detected that a user has triggered a tab restore operation, the initial state initialized when the tab restore operation was triggered is obtained;
[0010] Calculate the minimum set of differences between the initial state and the state snapshot;
[0011] The tab recovery is achieved using the minimum difference set.
[0012] Preferably, obtaining a snapshot of the state corresponding to the current page when the user triggers the tab switching operation includes:
[0013] Real-time detection of whether the user has triggered a tab switching operation;
[0014] When a user triggers a tab switching operation, a component state change event is triggered on the current page and intercepted.
[0015] Determine the component tree of the current page and execute the lifecycle hooks of all components in the component tree;
[0016] A depth-first traversal is performed on the component tree to generate a snapshot of the current page's state.
[0017] Preferably, the step of performing a depth-first traversal of the component tree to generate a snapshot of the current page's state includes:
[0018] Starting from the root component of the component tree, a depth-first traversal is performed on the component tree. For each component visited, the current value of each attribute of the component is read.
[0019] Determine the complete structure of the virtual node tree returned by the rendering function of the component, and extract the node type, attributes and child node list from the complete structure;
[0020] Obtain the individual event handlers registered by the component to determine the reference and scope of each event handler;
[0021] The current value, node type, attributes, child node list, event handling function, references, and scope are integrated to obtain a state snapshot corresponding to the component.
[0022] Preferably, after obtaining the state snapshot corresponding to the component, it may further include:
[0023] Determine whether the pre-set interception traps captured the user's modification operation at the moment the current page was switched;
[0024] If so, then retrieve the first path string of the modified attribute;
[0025] Extract all form element change events detected by the listener on the current page;
[0026] Determine the DOM element from the form element change event;
[0027] Obtain the state attribute path bound to the DOM element and use it as the second path string;
[0028] Add the first path string and the second path string to the state snapshot.
[0029] Preferably, calculating the minimum difference set between the initial state and the state snapshot includes:
[0030] Create a first hash tree corresponding to the initial state and a second hash tree corresponding to the state snapshot;
[0031] Starting from the root node of the first hash tree and the root node of the second hash tree, compare the hash values of the corresponding nodes of the first hash tree and the second hash tree layer by layer to see if they match.
[0032] Identify the mismatched nodes and generate a list of attributes to be updated corresponding to the mismatched nodes;
[0033] The list of attributes to be updated is used as the minimum difference set.
[0034] Preferably, creating the first hash tree corresponding to the initial state includes:
[0035] Obtain the virtual DOM tree in the initial state;
[0036] The process begins by traversing the leaf nodes of the virtual DOM tree, and for each virtual node, the type, key attributes, and text content of that virtual node are determined.
[0037] Calculate the first hash value based on the type, key attributes, and text content of the virtual node;
[0038] Determine whether the virtual node contains child nodes;
[0039] If so, then the first hash value is used as the hash value of the virtual node;
[0040] If not, then recursively calculate the second hash value of each child node of the virtual node;
[0041] Calculate the sum of the second hash values of all the child nodes, and then add it to the first hash value of the virtual node to obtain the hash value of the virtual node;
[0042] According to the structure of the virtual DOM tree, the first hash tree is composed of the hash values of each virtual node.
[0043] Preferably, the step of restoring the tab using the minimum difference set includes:
[0044] Determine whether the minimum difference set includes local differences, a list of attributes to be updated, or differences of removed DOM nodes;
[0045] If the local differences are included, the real DOM element or real component related to the local differences is located, and the real DOM element or real component is updated using the local differences;
[0046] If the list of attributes to be updated is included, then the component state is updated using the latest value in the list of attributes to be updated;
[0047] If the differences of the removed DOM nodes are included, the removed DOM nodes are determined and inserted into the real DOM tree.
[0048] Secondly, a tab restoration device includes:
[0049] The state snapshot acquisition module is used to acquire a state snapshot of the current page when the user triggers a tab switching operation;
[0050] The trigger detection module is used to detect in real time whether the user has triggered the tab restoration operation;
[0051] The initial state acquisition module is used to acquire the initial state initialized when the tab recovery operation is triggered, when it is detected that the user has triggered the tab recovery operation.
[0052] The minimum difference set calculation module is used to calculate the minimum difference set between the initial state and the state snapshot.
[0053] The tab recovery module is used to recover tabs using the minimum difference set.
[0054] Thirdly, a tab recovery device includes a memory and a processor;
[0055] The memory is used to store programs;
[0056] The processor is configured to execute the program to implement the steps of the tab recovery method as described in any of the first aspects.
[0057] Fourthly, a storage medium having a computer program stored thereon, which, when executed by a processor, implements the steps of the tab recovery method as described in any of the first aspects.
[0058] As can be seen from the above technical solution, this application obtains a snapshot of the state corresponding to the current page when the user triggers a tab switching operation; detects in real time whether the user has triggered a tab recovery operation; when the user triggers a tab recovery operation, it obtains the initial state initialized when the tab recovery operation is triggered; calculates the minimum difference set between the initial state and the state snapshot; and uses the minimum difference set to realize tab recovery. This application first obtains a snapshot of the state corresponding to the current page when the user triggers a tab switching operation. The state snapshot stores the page data before the switch, and this state snapshot can be used to achieve accurate page recovery. When the user triggers a tab recovery operation, it first obtains the initial state initialized when the operation is triggered. This is a set of already initialized states. By comparing this initial state with the state snapshot, it can determine which states in the state snapshot have been initialized and which have changed, thus determining a minimum difference set, i.e., the smallest difference between the two. Therefore, tab recovery can be performed using only the minimum difference and the already initialized initial state, thereby greatly improving efficiency, solving the problem of severe latency in existing technologies, and improving user experience. Attached Figure Description
[0059] To more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are only embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on the provided drawings without creative effort.
[0060] Figure 1 An optional flowchart of a tab recovery method provided in an embodiment of this application;
[0061] Figure 2 This is a schematic diagram of a label restoration device provided in an embodiment of this application;
[0062] Figure 3 This is a schematic diagram of a tab recovery device provided in an embodiment of this application. Detailed Implementation
[0063] The technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, and not all embodiments. Based on the embodiments of this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.
[0064] This invention can be used in a wide variety of general-purpose or special-purpose computing environments or configurations. For example: personal computers, server computers, handheld or portable devices, tablet devices, multiprocessor devices, distributed computing environments including any of the above devices, etc.
[0065] This invention provides a tab recovery method, which can be applied to various computer terminals or smart terminals. The executing entity can be the processor or server of the computer terminal or smart terminal. The method flowchart is shown below. Figure 1 As shown, it specifically includes:
[0066] S1: Get a snapshot of the current page's state when the user triggers a tab switching operation.
[0067] This step enables a complete and instantaneous capture of the current page's state the moment the user triggers the tab switching operation. Instead of capturing the state at the end of the page's lifecycle, it "captures" the complete runtime state (including component tree, data, UI structure, etc.) the instant the user's action (i.e., triggering the tab switching operation) occurs. This ensures the consistency between the saved state and the interface seen when the user leaves, providing a unique and accurate data source for subsequent high-fidelity recovery.
[0068] S2: Real-time detection of whether the user has triggered the tab restoration operation.
[0069] In this step, by listening to standard browser events (such as visibilitychange), we can detect the user's intention to return with minimal overhead and no delay, ensuring that the recovery process can start immediately, avoiding the performance waste caused by polling detection, and achieving rapid recovery.
[0070] S3: When it is detected that the user has triggered the tab restoration operation, obtain the initial state that was initialized when the tab restoration operation was triggered.
[0071] It is understandable that the application environment may have changed from freezing to recovery. For example, the browser may have performed a lightweight page reinitialization. Therefore, obtaining the initial state provides a reference for subsequent comparison, so that the recovery process is not a blind overwrite, but a precise reconciliation.
[0072] S4: Calculate the minimum set of differences between the initial state and the state snapshot.
[0073] The initial state is a set of states that have been initialized when the user triggers tab restoration. By comparing this initial state with the state snapshot, we can determine which states in the state snapshot have been initialized and which have changed. This allows us to determine a minimum set of differences, i.e., the smallest difference between the two. Then, we can restore the tab using only the minimum difference and the already initialized initial state.
[0074] S5: Use the minimum difference set to restore the tab page.
[0075] As can be seen from the above technical solution, this application obtains a snapshot of the state corresponding to the current page when the user triggers a tab switching operation; detects in real time whether the user has triggered a tab recovery operation; when the user triggers a tab recovery operation, it obtains the initial state initialized when the tab recovery operation is triggered; calculates the minimum difference set between the initial state and the state snapshot; and uses the minimum difference set to realize tab recovery. This application first obtains a snapshot of the state corresponding to the current page when the user triggers a tab switching operation. The state snapshot stores the page data before the switch, and this state snapshot can be used to achieve accurate page recovery. When the user triggers a tab recovery operation, it first obtains the initial state initialized when the operation is triggered. This is a set of already initialized states. By comparing this initial state with the state snapshot, it can determine which states in the state snapshot have been initialized and which have changed, thus determining a minimum difference set, i.e., the smallest difference between the two. Therefore, tab recovery can be performed using only the minimum difference and the already initialized initial state, thereby greatly improving efficiency, solving the problem of severe latency in existing technologies, and improving user experience.
[0076] In addition, this application can also achieve seamless and efficient switching between invisible and visible states of the application, while ensuring correctness and performance. When the browser tab is inactive, it can actively freeze and fully capture its runtime state to release resources, and achieve accurate and instantaneous recovery when it is reactivated; while when the tab is activated, it can quickly and accurately restore the application to the state before it was frozen.
[0077] The method provided in this embodiment of the invention, which involves obtaining a snapshot of the current page's state when a user triggers a tab switching operation, is described in detail below:
[0078] Real-time detection of whether the user has triggered a tab switching operation;
[0079] When a user triggers a tab switching operation, a component state change event is triggered on the current page and intercepted.
[0080] Determine the component tree of the current page and execute the lifecycle hooks of all components in the component tree;
[0081] A depth-first traversal is performed on the component tree to generate a snapshot of the current page's state.
[0082] Specifically, when a user triggers a tab switching operation, the current tab becomes invisible. The browser then triggers the `visibilitychange` event on the current page and uses Vue / React listeners to capture this event, executing deactivation lifecycle hooks. These hooks act as signals to initiate state capture for the entire page.
[0083] Specifically, the step of performing a depth-first traversal of the component tree to generate a snapshot of the current page's state in the above process includes:
[0084] Starting from the root component of the component tree, a depth-first traversal is performed on the component tree. For each component visited, the current value of each attribute of the component is read.
[0085] Determine the complete structure of the virtual node tree returned by the rendering function of the component, and extract the node type, attributes and child node list from the complete structure;
[0086] Obtain the individual event handlers registered by the component to determine the reference and scope of each event handler;
[0087] The current value, node type, attributes, child node list, event handling function, references, and scope are integrated to obtain a state snapshot corresponding to the component.
[0088] Specifically, reflection can be used to read the current props and data (or state) values of the component, and capture the complete structure of the virtual DOM tree where the current component is rendered, including node type (div or MyComponent), attributes (id, class, style objects), styles and child node references. Event listeners can be used to record the event handlers and their scope information bound to the current component and its DOM elements. Finally, all this information can be integrated to form a serialized state snapshot.
[0089] In one embodiment provided in this application, after obtaining the state snapshot corresponding to the component, the method may further include:
[0090] Determine whether the pre-set interception traps captured the user's modification operation at the moment the current page was switched;
[0091] If so, then retrieve the first path string of the modified attribute;
[0092] Extract all form element change events detected by the listener on the current page;
[0093] Determine the DOM element from the form element change event;
[0094] Obtain the state attribute path bound to the DOM element and use it as the second path string;
[0095] Add the first path string and the second path string to the state snapshot.
[0096] Specifically, it is important to note that users may still be entering or modifying data on the page the moment they leave the tab. Therefore, simply taking a snapshot of the state would miss the user's last action, which would be detrimental to subsequent tab restoration and cause inaccuracies. So the above process is used to capture such actions, ensuring that the user's intent is not lost and achieving consistency between the state before switching and after restoration.
[0097] This process can include two steps. First, modification operations are intercepted by setting an interception trap. This process wraps the component's reactive data object with a proxy to intercept all set operations. At the same time, listeners are used to listen for form element change events, identify all form elements such as input, textarea, and select, and back-map them to the component instance and state attribute path bound to this DOM element. The state attribute path is used as the second path string, and the first and second path strings are added to the state snapshot to make the state snapshot more comprehensive and detailed.
[0098] For the obtained state snapshot, you can check its size. If the data volume is too large, convert it to a more compact binary format or force it to be stored on disk to avoid consuming too much memory. Then, you can use Service Worker to listen for tab recovery, asynchronously load the state snapshot from disk, and stream it to the tab as needed.
[0099] Optionally, for user-triggered tab switching, the browser or system will immediately pause the execution environment, reduce the frequency of timers, intercept timer APIs such as setInterval, traverse all active timers, force their execution intervals to a larger value, making them almost paused, but without revealing the task queue; then release memory resources, scan the entire DOM tree to identify all nodes located outside the viewport or hidden by CSS, remove these nodes from the DOM tree, but accurately record the parent node references and their position indexes within the parent node; finally, clean up the internal cache used for calculations.
[0100] To make state snapshots more persistent, the state snapshot containing the first and second path strings can be encapsulated into a transport object. This object is then sent to the Service Worker via `postMessage`. Upon receiving the data, the Service Worker uses IndexedDB to persistently store it on disk. At this point, the browser enters a low-power, low-resource-consumption freeze state.
[0101] The process of calculating the minimum difference set between the initial state and the state snapshot in this application is described in detail below.
[0102] Create a first hash tree corresponding to the initial state and a second hash tree corresponding to the state snapshot;
[0103] Starting from the root node of the first hash tree and the root node of the second hash tree, compare the hash values of the corresponding nodes of the first hash tree and the second hash tree layer by layer to see if they match.
[0104] Identify the mismatched nodes and generate a list of attributes to be updated corresponding to the mismatched nodes;
[0105] The list of attributes to be updated is used as the minimum difference set.
[0106] Specifically, for any node in the hash tree, if its hash value is the same in two hash trees, the comparison of the entire subtree is skipped, and this node and all its descendant nodes do not need to be updated; if the hash values are different, the location path of this node (e.g., div#app > section.main) and its own change details need to be recorded; and its child nodes are recursively checked.
[0107] Optionally, the construction of the first hash tree corresponding to the initial state and the construction of the second hash tree corresponding to the state snapshot are carried out in the same way. The following uses the construction of the first hash tree as an example to illustrate the specific construction process.
[0108] Obtain the virtual DOM tree in the initial state;
[0109] The process begins by traversing the leaf nodes of the virtual DOM tree, and for each virtual node, the type, key attributes, and text content of that virtual node are determined.
[0110] Calculate the first hash value based on the type, key attributes, and text content of the virtual node;
[0111] Determine whether the virtual node contains child nodes;
[0112] If so, then the first hash value is used as the hash value of the virtual node;
[0113] If not, then recursively calculate the second hash value of each child node of the virtual node;
[0114] Calculate the sum of the second hash values of all the child nodes, and then add it to the first hash value of the virtual node to obtain the hash value of the virtual node;
[0115] According to the structure of the virtual DOM tree, the first hash tree is composed of the hash values of each virtual node.
[0116] Specifically, when constructing the hash tree, a post-traversal approach is adopted. That is, starting from the leaf nodes of the virtual DOM tree, for each virtual node, if it is a leaf node, that is, it has no child nodes, then only its own characteristics (type, key attributes, and text content) are used to calculate the hash value, and this is used as the hash value of the virtual node; if it contains child nodes, then the hash values of all child nodes are calculated recursively first, then the hash values of all child nodes are added together, and then added to the hash value calculated based on its own characteristics, which gives the hash value of the virtual node.
[0117] The following embodiments provide a detailed explanation of the steps for implementing tab recovery using the minimum difference set in this application.
[0118] Determine whether the minimum difference set includes local differences, a list of attributes to be updated, or differences of removed DOM nodes;
[0119] If the local differences are included, the real DOM element or real component related to the local differences is located, and the real DOM element or real component is updated using the local differences;
[0120] If the list of attributes to be updated is included, then the component state is updated using the latest value in the list of attributes to be updated;
[0121] If the differences of the removed DOM nodes are included, the removed DOM nodes are determined and inserted into the real DOM tree.
[0122] Specifically, since this application not only restores the tab, but also restores the tab from a frozen, static snapshot to the dynamic interactive state when the user left, with the least cost, the fastest speed, and the least impact on the user experience, it only makes minimal modifications to the changed parts, thereby improving efficiency and saving resources.
[0123] During the recovery process, it is also necessary to restore the execution environment, retrieve all timers that were downclocked during the freeze phase, clear these downclocked timer instances, and recreate new timers using the original interval parameters and callback functions; identify high-priority tasks, such as animation frame callbacks, insert them at the front of the JavaScript microtask queue to ensure they can be executed as soon as possible, and recreate Web Workers that were terminated during the freeze phase as needed, sending them the previously serialized state so that they can continue execution from the breakpoint.
[0124] Furthermore, after the tab restoration is complete, to ensure consistency, it's possible to check if the current DOM tree structure is largely consistent with the structure recorded in the state snapshot. This can involve checking only key nodes; if significant inconsistencies are found, a re-render is performed. It's also possible to check if the state snapshot version number matches the data model version number expected by the currently running code. If they don't match, data migration or conversion logic is initiated to convert the old data format to the new one. Additionally, the restoration time for each component can be monitored; if the restoration takes a long time, it can be stopped or reviewed.
[0125] and Figure 1 Corresponding to the method described above, embodiments of the present invention also provide a tab restoration device for... Figure 1 In a specific implementation of the method, the tab recovery device provided in this embodiment of the invention can be used in computer terminals or various mobile devices, combined with Figure 2 The tab restoration device is introduced, such as... Figure 2 As shown, the device may include:
[0126] The state snapshot acquisition module 10 is used to acquire the state snapshot corresponding to the current page when the user triggers the tab switching operation;
[0127] The trigger judgment module 20 is used to detect in real time whether the user has triggered the tab restoration operation;
[0128] The initial state acquisition module 30 is used to acquire the initial state initialized when the tab recovery operation is triggered when the user triggers the tab recovery operation.
[0129] Minimum difference set calculation module 40 is used to calculate the minimum difference set between the initial state and the state snapshot;
[0130] The tab recovery module 50 is used to recover tabs using the minimum difference set.
[0131] As can be seen from the above technical solution, this application obtains a snapshot of the state corresponding to the current page when the user triggers a tab switching operation; detects in real time whether the user has triggered a tab recovery operation; when the user triggers a tab recovery operation, it obtains the initial state initialized when the tab recovery operation is triggered; calculates the minimum difference set between the initial state and the state snapshot; and uses the minimum difference set to realize tab recovery. This application first obtains a snapshot of the state corresponding to the current page when the user triggers a tab switching operation. The state snapshot stores the page data before the switch, and this state snapshot can be used to achieve accurate page recovery. When the user triggers a tab recovery operation, it first obtains the initial state initialized when the operation is triggered. This is a set of already initialized states. By comparing this initial state with the state snapshot, it can determine which states in the state snapshot have been initialized and which have changed, thus determining a minimum difference set, i.e., the smallest difference between the two. Therefore, tab recovery can be performed using only the minimum difference and the already initialized initial state, thereby greatly improving efficiency, solving the problem of severe latency in existing technologies, and improving user experience.
[0132] Furthermore, embodiments of this application provide a tab recovery device. Optionally, Figure 3 The hardware structure block diagram of the tab recovery device is shown, with reference to... Figure 3 The hardware structure of the tab recovery device may include: at least one processor 01, at least one communication interface 02, at least one memory 03, and at least one communication bus 04.
[0133] In this embodiment, the number of processor 01, communication interface 02, memory 03 and communication bus 04 is at least one, and processor 01, communication interface 02 and memory 03 communicate with each other through communication bus 04.
[0134] Processor 01 may be a central processing unit (CPU), an application-specific integrated circuit (ASIC), or one or more integrated circuits configured to implement embodiments of the present invention.
[0135] Memory 03 may include high-speed RAM, and may also include non-volatile memory, such as at least one disk storage device.
[0136] The memory stores a program that the processor can call. The program executes the following tab recovery method, including:
[0137] Get a snapshot of the current page's state when the user triggers a tab switching operation;
[0138] Real-time detection of whether the user has triggered a tab restore operation;
[0139] When it is detected that a user has triggered a tab restore operation, the initial state initialized when the tab restore operation was triggered is obtained;
[0140] Calculate the minimum set of differences between the initial state and the state snapshot;
[0141] The tab recovery is achieved using the minimum difference set.
[0142] Optionally, the refined and extended functions of the program can be found in the description of the tab recovery method in the method embodiments.
[0143] This application embodiment also provides a storage medium that can store a program suitable for execution by a processor. When the program runs, it controls the device where the storage medium is located to execute the following tab recovery method, including:
[0144] Get a snapshot of the current page's state when the user triggers a tab switching operation;
[0145] Real-time detection of whether the user has triggered a tab restore operation;
[0146] When it is detected that a user has triggered a tab restore operation, the initial state initialized when the tab restore operation was triggered is obtained;
[0147] Calculate the minimum set of differences between the initial state and the state snapshot;
[0148] The tab recovery is achieved using the minimum difference set.
[0149] Specifically, the storage medium can be a computer-readable storage medium, which can be an electronic storage device such as flash memory, EEPROM (Electrically Erasable Programmable Read-Only Memory), EPROM, hard disk, or ROM.
[0150] Optionally, the refined and extended functions of the program can be found in the description of the tab recovery method in the method embodiments.
[0151] Furthermore, the functional modules in the various embodiments of this disclosure can be integrated together to form an independent part, or each module can exist independently, or two or more modules can be integrated to form an independent part. If the function is implemented as a software functional module and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this disclosure, in essence, or the part that contributes to the prior art, or a part of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, a live streaming device, or a network device, etc.) to execute all or part of the steps of the methods in the various embodiments of this disclosure.
[0152] Finally, it should be noted that in this document, relational terms such as "first" and "second" are used only to distinguish one entity or operation from another, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Furthermore, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Without further limitations, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes said element.
[0153] The various embodiments in this specification are described in a progressive manner, with each embodiment focusing on the differences from other embodiments. The same or similar parts between the various embodiments can be referred to each other.
[0154] The above description of the disclosed embodiments enables those skilled in the art to make or use this application. Various modifications to these embodiments will be readily apparent to those skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of this application. Therefore, this application is not to be limited to the embodiments shown herein, but is to be accorded the widest scope consistent with the principles and novel features disclosed herein.
Claims
1. A method for restoring tabs, characterized in that, include: Get a snapshot of the current page's state when the user triggers a tab switching operation; Real-time detection of whether the user has triggered a tab restore operation; When it is detected that a user has triggered a tab restore operation, the initial state initialized when the tab restore operation was triggered is obtained; Calculate the minimum set of differences between the initial state and the state snapshot; The tab recovery is achieved using the minimum difference set.
2. The method according to claim 1, characterized in that, The step of obtaining a snapshot of the current page's state when the user triggers a tab switching operation includes: Real-time detection of whether the user has triggered a tab switching operation; When a user triggers a tab switching operation, a component state change event is triggered on the current page and intercepted. Determine the component tree of the current page and execute the lifecycle hooks of all components in the component tree; A depth-first traversal is performed on the component tree to generate a snapshot of the current page's state.
3. The method according to claim 2, characterized in that, The step of performing a depth-first traversal of the component tree to generate a snapshot of the current page's state includes: Starting from the root component of the component tree, a depth-first traversal is performed on the component tree. For each component visited, the current value of each attribute of the component is read. Determine the complete structure of the virtual node tree returned by the rendering function of the component, and extract the node type, attributes and child node list from the complete structure; Obtain the individual event handlers registered by the component to determine the reference and scope of each event handler; The current value, node type, attributes, child node list, event handling function, references, and scope are integrated to obtain a state snapshot corresponding to the component.
4. The method according to claim 3, characterized in that, After obtaining the state snapshot corresponding to the component, it may also include: Determine whether the pre-set interception traps captured the user's modification operation at the moment the current page was switched; If so, then retrieve the first path string of the modified attribute; Extract all form element change events detected by the listener on the current page; Determine the DOM element from the form element change event; Obtain the state attribute path bound to the DOM element and use it as the second path string; Add the first path string and the second path string to the state snapshot.
5. The method according to claim 1, characterized in that, The calculation of the minimum difference set between the initial state and the state snapshot includes: Create a first hash tree corresponding to the initial state and a second hash tree corresponding to the state snapshot; Starting from the root node of the first hash tree and the root node of the second hash tree, compare the hash values of the corresponding nodes of the first hash tree and the second hash tree layer by layer to see if they match. Identify the mismatched nodes and generate a list of attributes to be updated corresponding to the mismatched nodes; The list of attributes to be updated is used as the minimum difference set.
6. The method according to claim 5, characterized in that, The creation of the first hash tree corresponding to the initial state includes: Obtain the virtual DOM tree in the initial state; The process begins by traversing the leaf nodes of the virtual DOM tree, and for each virtual node, the type, key attributes, and text content of that virtual node are determined. Calculate the first hash value based on the type, key attributes, and text content of the virtual node; Determine whether the virtual node contains child nodes; If so, then the first hash value is used as the hash value of the virtual node; If not, then recursively calculate the second hash value of each child node of the virtual node; Calculate the sum of the second hash values of all the child nodes, and then add it to the first hash value of the virtual node to obtain the hash value of the virtual node; According to the structure of the virtual DOM tree, the first hash tree is composed of the hash values of each virtual node.
7. The method according to any one of claims 1 to 6, characterized in that, The method of restoring the tab using the minimum difference set includes: Determine whether the minimum difference set includes local differences, a list of attributes to be updated, or differences of removed DOM nodes; If the local differences are included, the real DOM element or real component related to the local differences is located, and the real DOM element or real component is updated using the local differences; If the list of attributes to be updated is included, then the component state is updated using the latest value in the list of attributes to be updated; If the differences of the removed DOM nodes are included, the removed DOM nodes are determined and inserted into the real DOM tree.
8. A label restoration device, characterized in that, include: The state snapshot acquisition module is used to acquire a state snapshot of the current page when the user triggers a tab switching operation; The trigger detection module is used to detect in real time whether the user has triggered the tab restoration operation; The initial state acquisition module is used to acquire the initial state initialized when the tab recovery operation is triggered, when it is detected that the user has triggered the tab recovery operation. The minimum difference set calculation module is used to calculate the minimum difference set between the initial state and the state snapshot. The tab recovery module is used to recover tabs using the minimum difference set.
9. A tab restoration device, characterized in that, Including memory and processor; The memory is used to store programs; The processor is configured to execute the program to implement the steps of the tab recovery method as described in any one of claims 1-7.
10. A storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by a processor, it implements the steps of the tab recovery method as described in any one of claims 1-7.