Cache component instance optimization method and device, equipment and storage medium

Abstract

The invention discloses a cache component instance optimization method and device, equipment and a storage medium, and the method comprises the steps: obtaining a to-be-optimized cache component, and determining each component instance cached in the cache component; monitoring a main thread blocking condition of a browser currently corresponding to the cache component in real time, calculating a blocking rate, monitoring a memory occupancy condition of the browser currently corresponding to the cache component in real time, and calculating a memory occupancy rate; comparing the blocking rate with a preset blocking threshold value, and comparing the memory occupancy rate with a preset memory occupancy upper limit; if the blocking rate is greater than a blocking threshold value and the memory occupancy rate is greater than a memory occupancy upper limit, respectively calculating a priority score of each component instance; and optimizing each component instance based on the priority score of each component instance. According to the method, the flexibility is improved, and the optimization accuracy is also improved.

Description

Technical Field

[0001] The present application relates to the technical field of cache component instance optimization, and in particular to a cache component instance optimization method, apparatus, device and storage medium. Background Art

[0002] Vue.js (a JavaScript framework), one of the mainstream front-end frameworks, has a built-in cache component that significantly reduces the overhead of repeated rendering by caching component instances, improving the performance of single-page applications. However, in complex business scenarios, traditional cache components still have certain limitations. For example, its static caching strategy cannot be dynamically adjusted according to actual usage.

[0003] The existing solution is to manually limit the number of cached component instances to set a simpler component instance elimination strategy. However, this method is rigid and inflexible and cannot achieve more precise dynamic adjustment. Summary of the Invention

[0004] In view of this, the present application provides an optimization method, device, equipment and storage medium for caching component instances, which is used to solve the problem that the existing solution is to manually limit the number of cached component instances to set a simpler component instance elimination strategy, but this method is relatively rigid and inflexible and cannot achieve more precise dynamic adjustment.

[0005] To achieve the above objectives, the following solutions are proposed:

[0006] In a first aspect, a method for optimizing a cache component instance includes:

[0007] Obtaining a cache component to be optimized, and determining each component instance cached in the cache component;

[0008] Monitor the main thread blocking of the browser currently corresponding to the cache component in real time and calculate the blocking rate, and monitor the memory usage of the browser currently corresponding to the cache component in real time and calculate the memory usage rate;

[0009] Comparing the blocking rate with a preset blocking threshold, and comparing the memory usage rate with a preset memory usage upper limit;

[0010] If the blocking rate is greater than the blocking threshold, and the memory usage is greater than the memory usage upper limit, then calculating the priority score of each component instance respectively;

[0011] Based on the priority score of each component instance, each component instance is optimized.

[0012] Preferably, the real-time monitoring of the blocking status of the main thread of the browser currently corresponding to the cache component and calculating the blocking rate includes:

[0013] Insert detection logic into the browser event loop and set the expected time interval in a non-blocking state;

[0014] Record the start time of the test;

[0015] Record the time again at the next test as the first time;

[0016] calculating an actual time interval between the first time and the start time;

[0017] Calculating a delay time difference between the actual time interval and the expected time interval;

[0018] The blocking rate is obtained by dividing the delay time difference by the expected time interval.

[0019] Preferably, the real-time monitoring of the memory usage of the browser currently corresponding to the cache component and calculating the memory usage rate includes:

[0020] At a preset time interval, the JavaScript heap memory is sampled to determine the currently used heap memory size and the current total heap memory size;

[0021] The currently used heap memory size is divided by the current total heap memory size to obtain the memory occupancy rate.

[0022] Preferably, respectively calculating the priority score of each component instance includes:

[0023] The priority score of a component instance is calculated as:

[0024] ;

[0025] in, Indicates the number of times a component instance is accessed within a set time window. Indicates the last access time of the component instance. Indicates the preset business weight; 、 、 All are coefficients.

[0026] Preferably, the optimizing each component instance based on the priority score of each component instance includes:

[0027] Sorting each of the component instances in descending order of priority scores;

[0028] Determine eliminated instances from each of the component instances in the order of the sorting, and delete the eliminated instances.

[0029] Preferably, the method further comprises: performing real-time switching and refreshing monitoring on each component instance, and when it is detected that a component instance is switched and refreshed:

[0030] Obtain the data content and scroll position of the component instance, and serialize the data content and scroll position to obtain a JSON string;

[0031] Store the JSON string in the underlying database;

[0032] The activation state of the component instance is monitored in real time. When the component instance is detected to be activated, the data content and scroll position of the component instance are read from the underlying database and restored to the component instance.

[0033] Preferably, after the optimization, the method further comprises:

[0034] Determine the remaining component instances as the remaining component instances;

[0035] Determine the virtual DOM node and its associated instance state for each of the remaining component instances, and store them in the cache pool of the cache component;

[0036] For each of the remaining component instances, disconnect the association between its virtual DOM node and its associated instance state, clear the reference to the real DOM node of the remaining component instance and the reference to the recursively contacted child DOM nodes, and delete the cache key value in the cache component;

[0037] Extract key information from the virtual DOM node and its associated instance state;

[0038] A new virtual DOM node is constructed in a continuous memory area using the key information, and the new virtual DOM node is written back to the cache pool.

[0039] In a second aspect, a device for optimizing a cache component instance includes:

[0040] A component instance determination module is used to obtain a cache component to be optimized and determine each component instance cached in the cache component;

[0041] A monitoring and calculation module is used to monitor the main thread blocking situation of the browser currently corresponding to the cache component in real time and calculate the blocking rate, and at the same time monitor the memory usage of the browser currently corresponding to the cache component in real time and calculate the memory usage rate;

[0042] a comparison module, configured to compare the blocking rate with a preset blocking threshold, and to compare the memory usage rate with a preset memory usage upper limit;

[0043] a priority score calculation module, configured to calculate the priority score of each component instance if the blocking rate is greater than the blocking threshold and the memory usage is greater than the memory usage upper limit;

[0044] The optimization module is used to optimize each of the component instances based on the priority score of each of the component instances.

[0045] In a third aspect, a device for optimizing cache component instances includes a memory and a processor;

[0046] The memory is used to store programs;

[0047] The processor is used to execute the program to implement each step of the method for optimizing the cache component instance as described in any one of the first aspects.

[0048] In a fourth aspect, a storage medium stores a computer program thereon, which, when executed by a processor, implements the various steps of the method for optimizing a cache component instance as described in any one of the first aspects.

[0049] It can be seen from the above technical solution that the present application determines the component instances cached in the cache component by obtaining the cache component to be optimized; monitors the main thread blocking status of the browser currently corresponding to the cache component in real time and calculates the blocking rate, and monitors the memory occupancy of the browser currently corresponding to the cache component in real time and calculates the memory occupancy rate; compares the blocking rate with the preset blocking threshold, and compares the memory occupancy rate with the preset memory occupancy upper limit; if the blocking rate is greater than the blocking threshold and the memory occupancy rate is greater than the memory occupancy upper limit, calculates the priority score of each component instance respectively; and optimizes each component instance based on the priority score of each component instance. This application first determines the component instances cached in the cache component, and then considers the blocking status of the main thread of the current corresponding browser to calculate the blocking rate, and considers the memory usage to calculate the memory usage rate. In this way, the current memory status can be determined based on these two situations as judgment indicators, thereby clarifying the elimination strategy for component instances, and defining them according to the priority score of each component instance to achieve optimization. In this way, the optimization of component instances can be flexibly achieved, and the optimization strategy can be triggered in real time according to the memory status of the browser, which improves flexibility and also improves the accuracy of optimization, avoiding unnecessary component instances from being optimized or component instances that should be optimized from being cached. BRIEF DESCRIPTION OF THE DRAWINGS

[0050] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the following briefly introduces the drawings required for use in the embodiments or the description of the prior art. Obviously, the drawings described below are merely embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on the provided drawings without paying any creative work.

[0051] Figure 1 An optional flow chart of a method for optimizing a cache component instance provided in an embodiment of the present application;

[0052] Figure 2 A schematic diagram of the structure of an optimization device for a cache component instance provided in an embodiment of the present application;

[0053] Figure 3 A schematic diagram of the structure of an optimization device for a cache component instance provided in an embodiment of the present application. DETAILED DESCRIPTION

[0054] The following will be combined with the drawings in the embodiments of this application to clearly and completely describe the technical solutions in the embodiments of this application. Obviously, the embodiments described are only part of the embodiments of this application, not all of the embodiments. Based on the embodiments in this application, all other embodiments obtained by ordinary technicians in this field without making creative efforts are within the scope of protection of this application.

[0055] Vue.js (a JavaScript framework) is one of the mainstream front-end frameworks. Its built-in cache component significantly reduces the overhead of repeated rendering by caching component instances, improving the performance of single-page applications. However, in complex business scenarios (such as multi-level routing nesting, high-frequency component switching, and large data display scenarios), traditional cache components still have certain limitations. For example, its static caching strategy cannot be dynamically adjusted according to actual usage.

[0056] The existing solution is to manually limit the number of cached component instances to set a simpler component instance elimination strategy. However, this method is rigid and inflexible and cannot achieve more precise dynamic adjustment.

[0057] To address the aforementioned shortcomings of the prior art, embodiments of the present invention provide a method for optimizing cache component instances. The method is applicable to a wide variety of general-purpose or specialized computing device environments or configurations, such as personal computers, server computers, handheld or portable devices, tablet devices, multi-processor devices, and distributed computing environments including any of the above.

[0058] The method can also be applied to various computer terminals or smart terminals, and its execution subject can be a processor or server of the computer terminal or smart terminal. The method flow chart of the method is as follows: Figure 1 As shown, specifically including:

[0059] S1: Obtain a cache component to be optimized, and determine each component instance cached in the cache component.

[0060] In Vue.js, caching component instances is usually done by caching the component (i.e. <keep-alive>) to achieve, it can preserve the component state or avoid re-rendering, then this application first needs to determine which components are <keep-alive>cache.

[0061] The cache component has a specified component instance name that needs to be cached, such as matching the component name option, or explicitly specifying component instances that do not need to be cached. It can also limit the maximum number of component instances that can be cached.

[0062] Therefore, a cache component may contain one or more cached component instances.

[0063] S2: monitor the blocking situation of the main thread of the browser currently corresponding to the cache component in real time, and calculate the blocking rate, and monitor the memory usage of the browser currently corresponding to the cache component in real time, and calculate the memory usage rate.

[0064] The browser main thread is usually blocked by long-running JavaScript tasks. It can be monitored through the WebPerformance API. The blocking rate can be used to clearly indicate the blocking status of the main thread, so the blocking rate needs to be calculated.

[0065] The browser's memory usage can indicate memory usage. Monitoring this metric can ensure the long-term stability of single-page applications and avoid failures. In addition, excessive memory usage will trigger frequent browser garbage collection, causing page freezes and affecting user experience. Calculating it based on the blocking rate can clearly indicate the memory usage.

[0066] S3: Compare the blocking rate with a preset blocking threshold, and compare the memory occupancy rate with a preset memory occupancy upper limit.

[0067] Whether it is the blocking rate or the memory usage, there will be a corresponding standard value or standard indicator. Then, by comparing the blocking rate with the preset blocking threshold and the memory usage with the preset memory usage upper limit, you can clearly know whether the blocking rate is too high / too low / normal, and whether the memory usage is too high / too low / normal. Analyze subsequent operations based on the comparison results to ensure the accuracy of subsequent operations.

[0068] S4: If the blocking rate is greater than the blocking threshold, and the memory occupancy rate is greater than the memory occupancy upper limit, the priority score of each component instance is calculated respectively.

[0069] When the blocking rate is greater than the blocking threshold, it indicates that the current blocking rate is high. If the memory usage is greater than the memory usage limit, it indicates that the current memory usage is high. If both are high, it means that the current memory state is oversaturated, and the component instance needs to be optimized. The blocking threshold can be set to 70%, and the memory usage limit can be set to 80%. This embodiment does not impose any restrictions on this.

[0070] The optimization method is to calculate the priority score and decide how to optimize based on the priority score.

[0071] S5: Optimizing each component instance based on the priority score of each component instance.

[0072] This step can be performed in a variety of ways. For example, if the blocking rate is far greater than the blocking threshold and the memory usage is greater than the upper limit but within a normal range, or if the blocking rate is greater than the blocking threshold but within a normal range but the memory usage is far greater than the upper limit, the component instance can be optimized to a certain extent. If the blocking rate is far greater than the blocking threshold and the memory usage is also far greater than the upper limit, then a larger range of component instance optimization is required. This allows for flexible optimization based on different situations.

[0073] It can be seen from the above technical solution that the present application determines the component instances cached in the cache component by obtaining the cache component to be optimized; monitors the main thread blocking status of the browser currently corresponding to the cache component in real time and calculates the blocking rate, and monitors the memory occupancy of the browser currently corresponding to the cache component in real time and calculates the memory occupancy rate; compares the blocking rate with the preset blocking threshold, and compares the memory occupancy rate with the preset memory occupancy upper limit; if the blocking rate is greater than the blocking threshold and the memory occupancy rate is greater than the memory occupancy upper limit, calculates the priority score of each component instance respectively; and optimizes each component instance based on the priority score of each component instance. This application first determines the component instances cached in the cache component, and then considers the blocking status of the main thread of the current corresponding browser to calculate the blocking rate, and considers the memory usage to calculate the memory usage rate. In this way, the current memory status can be determined based on these two situations as judgment indicators, thereby clarifying the elimination strategy for component instances, and defining them according to the priority score of each component instance to achieve optimization. In this way, the optimization of component instances can be flexibly achieved, and the optimization strategy can be triggered in real time according to the memory status of the browser, which improves flexibility and also improves the accuracy of optimization, avoiding unnecessary component instances from being optimized or component instances that should be optimized from being cached.

[0074] In the method provided in the embodiment of the present invention, the process of monitoring the blocking status of the main thread of the browser currently corresponding to the cache component in real time and calculating the blocking rate is specifically described as follows:

[0075] Insert detection logic into the browser event loop and set the expected time interval in a non-blocking state;

[0076] Record the start time of the test;

[0077] Record the time again at the next test as the first time;

[0078] calculating an actual time interval between the first time and the start time;

[0079] Calculating a delay time difference between the actual time interval and the expected time interval;

[0080] The blocking rate is obtained by dividing the delay time difference by the expected time interval.

[0081] Specifically, when calculating the blocking rate, the number of CPU cores can be taken into account. For example, the current number of CPU cores can be obtained, a work pool can be created based on the number of CPU cores, and then tasks can be assigned to the work pool to achieve the purpose of dynamically calculating the blocking rate of the main thread. The detection logic can be inserted into the browser event loop, such as detecting once every 100ms, and setting the expected time interval between each two adjacent detections in the non-blocking state. Then, for two adjacent detections, the first detection time and the second detection time need to be recorded to determine the actual time interval, and then the delay compared with the expected time interval is determined. The blocking rate can be obtained by dividing the delay time difference by the expected time interval. The blocking rate obtained in this way is real-time and accurate.

[0082] The following describes in detail the process of real-time monitoring of the memory usage of the browser currently corresponding to the cache component and calculating the memory usage rate in this application.

[0083] At a preset time interval, the JavaScript heap memory is sampled to determine the currently used heap memory size and the current total heap memory size;

[0084] The currently used heap memory size is divided by the current total heap memory size to obtain the memory occupancy rate.

[0085] Specifically, the performance.memory API can be used to periodically sample JavaScript heap memory. The preset time period can be 5 seconds, so as to determine the heap memory size and the current total heap memory size. In this way, the currently used heap memory size can be divided by the current total heap memory size, and then the memory occupancy rate can be determined as a percentage. This calculation method is also relatively accurate and flexible.

[0086] This application clarifies the memory status of the browser from the two aspects of blocking rate and memory usage, and combines them to provide strong data support for the subsequent optimization process.

[0087] The following embodiment explains in detail the steps of respectively calculating the priority score of each component instance in this application.

[0088] The priority score of a component instance is calculated as:

[0089] ;

[0090] in, Indicates the number of times a component instance is accessed within a set time window. Indicates the last access time of the component instance. Indicates the preset business weight; 、 、 All are coefficients.

[0091] Specifically, the coefficient 、 、 This can be tuned experimentally. In one example, Set to 0.5, Set to 0.3, Set to 0.2.

[0092] The number of times a component instance is accessed within a set time window can indicate its importance. For example, the more times it is accessed within the set time window, the more important it is, and the higher the response priority will be. The closer the component instance's last access time is to the current time, the higher the probability of it being accessed in the short future, and the higher the response priority will be. Business weights can be set based on specific projects or developers. For example, core component instances have relatively high business weights, so their priority will also be relatively high. Therefore, this step considers these three aspects and uses them to calculate a priority score to indicate the comprehensive priority of each component instance, providing a theoretical basis for subsequent optimization processes.

[0093] The above embodiment illustrates the calculation of the priority score of each component instance in the present application. The following explains in detail the steps of optimizing each component instance based on the priority score of each component instance.

[0094] Sorting each of the component instances in descending order of priority scores;

[0095] Determine eliminated instances from each of the component instances in the order of the sorting, and delete the eliminated instances.

[0096] Specifically, since the priority score can indicate the priority of the component instance, it can be understood that the higher the priority score, the higher the priority. Therefore, the component instances are sorted in order from high to low. When setting the elimination strategy, it is reasonable to use the order from the end of the sorting to the front as the elimination order.

[0097] For example, following the above mentioned situations:

[0098] 1) The blocking rate is much higher than the blocking threshold and the memory usage is higher than the upper limit of the memory usage and within a normal range, or the blocking rate is higher than the blocking threshold and within a normal range and the memory usage is much higher than the upper limit of the memory usage.

[0099] In this case, a first elimination number is set, and component instances are selected in sequence from the back to the front according to the elimination number and deleted as eliminated instances.

[0100] 2) The blocking rate is much higher than the blocking threshold and the memory usage is much higher than the upper limit.

[0101] In this case, a second elimination number (for example, 30) is set, and component instances are selected in descending order based on this elimination number. Furthermore, the second elimination number is smaller than the first elimination number, indicating that the elimination number is highly flexible and can be set based on specific circumstances.

[0102] The specific dynamic adjustment process of the first elimination number and the second elimination number can be as follows:

[0103] const dynamicMax = Math.floor(

[0104] (totalJSHeapSize - usedJSHeapSize) / avgComponentSize );

[0106] / / avgComponentSize is calculated by weighted average of historical cache instance sizes

[0107] Furthermore, the present application also includes real-time switching and refreshing monitoring of each component instance. When it is detected that a component instance is switched and refreshed:

[0108] Obtain the data content and scroll position of the component instance, and serialize the data content and scroll position to obtain a JSON string;

[0109] Store the JSON string in the underlying database;

[0110] The activation state of the component instance is monitored in real time. When the component instance is detected to be activated, the data content and scroll position of the component instance are read from the underlying database and restored to the component instance.

[0111] Specifically, IndexedDB can be used as the underlying database. During the deactivated lifecycle of a component instance, data content and scroll position are serialized and then stored. This process is called serialized storage. At the same time, the activation state of the component instance needs to be monitored in real time. When activated, the state is read from IndexedDB and restored to the component instance, giving priority to using local data.

[0112] In the existing optimization method, the cache state cannot be retained after the page is refreshed, and the data needs to be reloaded, which increases the server burden. However, this application can achieve persistent state storage through the above settings, support the restoration of the cache state of the component instance after the page is refreshed, and reduce repeated requests.

[0113] Furthermore, after optimizing each component instance based on the priority score of each component instance, the present application may further include the following steps:

[0114] Determine the remaining component instances as the remaining component instances;

[0115] Determine the virtual DOM node and its associated instance state for each of the remaining component instances, and store them in the cache pool of the cache component;

[0116] For each of the remaining component instances, disconnect the association between its virtual DOM node and its associated instance state, clear the reference to the real DOM node of the remaining component instance and the reference to the recursively contacted child DOM nodes, and delete the cache key value in the cache component;

[0117] Extract key information from the virtual DOM node and its associated instance state;

[0118] A new virtual DOM node is constructed in a continuous memory area using the key information, and the new virtual DOM node is written back to the cache pool.

[0119] Specifically, the above steps implement performance optimization compensation. That is, after triggering elimination (after optimization), memory defragmentation is started, and the virtual DOM nodes of the remaining cached instances and their associated instance states are rearranged into continuous memory blocks, reducing GC (Garbage Collection) pauses. Coolers are added to frequently eliminated instances. For example, the same component instance will not be eliminated repeatedly within 30 seconds, which can also improve flexibility.

[0120] Furthermore, this application can also implement compatibility processing, that is, for browsers that do not support the above-mentioned API, it is necessary to use the memory field simulation of window.performance instead and estimate the usage rate through the memory allocation rate.

[0121] and Figure 1 Corresponding to the method described above, the embodiment of the present invention also provides an optimization device for cache component instances, for Figure 1 In the specific implementation of the method, the optimization device of the cache component instance provided by the embodiment of the present invention can be used in a computer terminal or various mobile devices, combined with Figure 2 , introduces the optimization device of cache component instance, such as Figure 2 As shown, the device may include:

[0122] A component instance determination module 10 is configured to obtain a cache component to be optimized and determine each component instance cached in the cache component;

[0123] The monitoring and calculation module 20 is used to monitor the main thread blocking of the browser currently corresponding to the cache component in real time and calculate the blocking rate, and monitor the memory usage of the browser currently corresponding to the cache component in real time and calculate the memory usage rate;

[0124] a comparison module 30, configured to compare the blocking rate with a preset blocking threshold, and to compare the memory usage rate with a preset memory usage upper limit;

[0125] a priority score calculation module 40 for calculating the priority score of each component instance if the blocking rate is greater than the blocking threshold and the memory usage is greater than the memory usage upper limit;

[0126] The optimization module 50 is configured to optimize each of the component instances based on the priority score of each of the component instances.

[0127] It can be seen from the above technical solution that the present application determines the component instances cached in the cache component by obtaining the cache component to be optimized; monitors the main thread blocking status of the browser currently corresponding to the cache component in real time and calculates the blocking rate, and monitors the memory occupancy of the browser currently corresponding to the cache component in real time and calculates the memory occupancy rate; compares the blocking rate with the preset blocking threshold, and compares the memory occupancy rate with the preset memory occupancy upper limit; if the blocking rate is greater than the blocking threshold and the memory occupancy rate is greater than the memory occupancy upper limit, calculates the priority score of each component instance respectively; and optimizes each component instance based on the priority score of each component instance. This application first determines the component instances cached in the cache component, and then considers the blocking status of the main thread of the current corresponding browser to calculate the blocking rate, and considers the memory usage to calculate the memory usage rate. In this way, the current memory status can be determined based on these two situations as judgment indicators, thereby clarifying the elimination strategy for component instances, and defining them according to the priority score of each component instance to achieve optimization. In this way, the optimization of component instances can be flexibly achieved, and the optimization strategy can be triggered in real time according to the memory status of the browser, which improves flexibility and also improves the accuracy of optimization, avoiding unnecessary component instances from being optimized or component instances that should be optimized from being cached.

[0128] Furthermore, the embodiment of the present application provides an optimization device for caching component instances. Figure 3 The hardware structure diagram of the optimization device of the cache component example is shown, referring to Figure 3 The hardware structure of the optimization device of the cache component instance 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.

[0129] In the embodiment of the present application, the number of the processor 01 , the communication interface 02 , the memory 03 , and the communication bus 04 is at least one, and the processor 01 , the communication interface 02 , and the memory 03 communicate with each other through the communication bus 04 .

[0130] The processor 01 may be a central processing unit (CPU), or an application-specific integrated circuit (ASIC), or one or more integrated circuits configured to implement the embodiments of the present invention.

[0131] The memory 03 may include a high-speed RAM memory, and may also include a non-volatile memory (non-volatile memory), for example, at least one disk memory.

[0132] The memory stores a program, and the processor can call the program stored in the memory. The program is used to execute the following optimization method of the cache component instance, including:

[0133] Obtaining a cache component to be optimized, and determining each component instance cached in the cache component;

[0134] Monitor the main thread blocking of the browser currently corresponding to the cache component in real time and calculate the blocking rate, and monitor the memory usage of the browser currently corresponding to the cache component in real time and calculate the memory usage rate;

[0135] Comparing the blocking rate with a preset blocking threshold, and comparing the memory usage rate with a preset memory usage upper limit;

[0136] If the blocking rate is greater than the blocking threshold, and the memory usage is greater than the memory usage upper limit, then calculating the priority score of each component instance respectively;

[0137] Based on the priority score of each component instance, each component instance is optimized.

[0138] Optionally, the refined and extended functions of the program may refer to the description of the optimization method of the cache component instance in the method embodiment.

[0139] An embodiment of the present application further provides a storage medium, which may store a program suitable for execution by a processor. When the program is executed, the device where the storage medium is located is controlled to execute the following cache component instance optimization method, including:

[0140] Obtaining a cache component to be optimized, and determining each component instance cached in the cache component;

[0141] Monitor the main thread blocking of the browser currently corresponding to the cache component in real time and calculate the blocking rate, and monitor the memory usage of the browser currently corresponding to the cache component in real time and calculate the memory usage rate;

[0142] Comparing the blocking rate with a preset blocking threshold, and comparing the memory usage rate with a preset memory usage upper limit;

[0143] If the blocking rate is greater than the blocking threshold, and the memory usage is greater than the memory usage upper limit, then calculating the priority score of each component instance respectively;

[0144] Based on the priority score of each component instance, each component instance is optimized.

[0145] Specifically, the storage medium may be a computer-readable storage medium, and the computer-readable storage medium may be an electronic memory such as a flash memory, an EEPROM (Electrically Erasable Programmable Read-Only Memory), an EPROM, a hard disk or a ROM.

[0146] Optionally, the refined and extended functions of the program may refer to the description of the optimization method of the cache component instance in the method embodiment.

[0147] In addition, the functional modules in the various embodiments of the present disclosure can be integrated together to form an independent part, or each module can exist separately, or two or more modules can be integrated to form an independent part. If the function is implemented in the form of 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 the present disclosure is essentially or the part that contributes to the prior art or the part of the technical solution can be embodied in the form of a software product, which is stored in a storage medium and includes a number of instructions for a computer device (which can be a personal computer, a live broadcast device, or a network device, etc.) to perform all or part of the steps of the methods of the various embodiments of the present disclosure.

[0148] Finally, it should be noted that, in this document, relational terms such as first and second, etc., are used only to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any actual relationship or order between these entities or operations. Moreover, the terms "comprise," "include," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus comprising a set of elements includes not only those elements but also other elements not explicitly listed, or elements inherent to such process, method, article, or apparatus. In the absence of further limitations, an element defined by the phrase "comprising a ..." does not preclude the presence of additional identical elements in the process, method, article, or apparatus comprising the element.

[0149] The various embodiments in this specification are described in a progressive manner, and each embodiment focuses on the differences from other embodiments. The same or similar parts between the various embodiments can be referenced to each other.

[0150] The above description of the disclosed embodiments is intended to enable one skilled in the art to implement or use the present application. Various modifications to these embodiments will be readily apparent to one skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of the present application. Therefore, the present application is not limited to the embodiments shown herein, but is intended to conform to the widest scope consistent with the principles and novel features disclosed herein.

Claims

1. A method for optimizing cache component instances, characterized in that: include: Obtaining a cache component to be optimized, and determining each component instance cached in the cache component; Monitor the main thread blocking of the browser currently corresponding to the cache component in real time and calculate the blocking rate, and monitor the memory usage of the browser currently corresponding to the cache component in real time and calculate the memory usage rate; Comparing the blocking rate with a preset blocking threshold, and comparing the memory usage rate with a preset memory usage upper limit; If the blocking rate is greater than the blocking threshold, and the memory usage is greater than the memory usage upper limit, then calculating the priority score of each component instance respectively; Based on the priority score of each component instance, each component instance is optimized.

2. The method according to claim 1, characterized in that The real-time monitoring of the blocking status of the main thread of the browser currently corresponding to the cache component and calculation of the blocking rate include: Insert detection logic into the browser event loop and set the expected time interval in a non-blocking state; Record the start time of the test; Record the time again at the next test as the first time; calculating an actual time interval between the first time and the start time; Calculating a delay time difference between the actual time interval and the expected time interval; The blocking rate is obtained by dividing the delay time difference by the expected time interval.

3. The method according to claim 1, characterized in that The real-time monitoring of the memory usage of the browser currently corresponding to the cache component and calculation of the memory usage rate include: At a preset time interval, the JavaScript heap memory is sampled to determine the currently used heap memory size and the current total heap memory size; The currently used heap memory size is divided by the current total heap memory size to obtain the memory occupancy rate.

4. The method according to claim 1, wherein Calculating the priority score of each component instance separately includes: The priority score of a component instance is calculated as: ； in, Indicates the number of times a component instance is accessed within a set time window. Indicates the last access time of the component instance. Indicates the preset business weight; 、 、 All are coefficients.

5. The method according to claim 1, wherein Optimizing each component instance based on the priority score of each component instance includes: Sorting each of the component instances in descending order of priority scores; Determine eliminated instances from each of the component instances in the order of the sorting, and delete the eliminated instances.

6. The method according to any one of claims 1 to 5, characterized in that Also includes: Perform real-time switching and refreshing monitoring on each component instance. When it is detected that a component instance is switched and refreshed: Obtain the data content and scroll position of the component instance, and serialize the data content and scroll position to obtain a JSON string; Store the JSON string in the underlying database; The activation state of the component instance is monitored in real time. When the component instance is detected to be activated, the data content and scroll position of the component instance are read from the underlying database and restored to the component instance.

7. The method according to any one of claims 1 to 5, characterized in that After optimization, it also includes: Determine the remaining component instances as the remaining component instances; Determine the virtual DOM node and its associated instance state for each of the remaining component instances, and store them in the cache pool of the cache component; For each of the remaining component instances, disconnect the association between its virtual DOM node and its associated instance state, clear the reference to the real DOM node of the remaining component instance and the reference to the recursively contacted child DOM nodes, and delete the cache key value in the cache component; Extract key information from the virtual DOM node and its associated instance state; A new virtual DOM node is constructed in a continuous memory area using the key information, and the new virtual DOM node is written back to the cache pool.

8. A cache component instance optimization device, characterized in that: include: A component instance determination module is used to obtain a cache component to be optimized and determine each component instance cached in the cache component; A monitoring and calculation module is used to monitor the main thread blocking situation of the browser currently corresponding to the cache component in real time and calculate the blocking rate, and at the same time monitor the memory usage of the browser currently corresponding to the cache component in real time and calculate the memory usage rate; a comparison module, configured to compare the blocking rate with a preset blocking threshold, and to compare the memory usage rate with a preset memory usage upper limit; a priority score calculation module, configured to calculate the priority score of each component instance if the blocking rate is greater than the blocking threshold and the memory usage is greater than the memory usage upper limit; The optimization module is used to optimize each of the component instances based on the priority score of each of the component instances.

9. A device for optimizing cache component instances, characterized in that: including memory and processor; The memory is used to store programs; The processor is used to execute the program to implement the various steps of the method for optimizing the cache component instance as described in any one of claims 1 to 7.

10. A storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, each step of the method for optimizing a cache component instance according to any one of claims 1 to 7 is implemented.

Images