A method for locating a memory occupation bottleneck in a browser page

Abstract

The application relates to a browser page memory occupation bottleneck positioning method, in particular to the field of webpage JS heap occupation, and can obtain statistical results of memory occupation by initializing different simple data type and character memory occupation variable objects, and can be optimized and adjusted according to the statistical results to reduce memory occupation; a recursive function is used to decompose a complex problem into simpler subproblems, so that the solution is more modularized and manageable, which is helpful to the maintainability of the browser page memory; a loop iteration of traversing key-value pairs is used for type judgment, a complete data structure is constructed, and the integration and processing of data are more convenient and efficient, type errors and unexpected behaviors in the running process of the browser page memory are avoided, so that the robustness of the browser page is improved; an output memory occupation result analysis view is used to help developers analyze the memory occupation condition of the page, locate the memory bottleneck, and perform optimization.

Description

Technical Field

[0001] This invention relates to the field of JavaScript heap usage in web pages, and more specifically, to a method for locating browser page memory usage bottlenecks. Background Technology

[0002] With the development of browser pages, the issue of page memory usage has received increasing attention. As page functionality, data volume, and user interaction increase, the problem of page memory usage becomes more and more prominent.

[0003] Excessive page memory usage can lead to slow page loading, prolonged response time, and may even cause page crashes and freezes. It can also cause degraded device performance, increased power consumption, and increased network transmission costs and data usage for users.

[0004] Optimization and adjustments based on statistical results reduce memory usage. Using recursive functions to break down complex problems into simpler subproblems helps maintain the maintainability of browser page memory, avoids type errors and unexpected behavior during browser page memory operation, and improves the robustness of browser pages. Summary of the Invention

[0005] This invention addresses the technical problems existing in the prior art by providing a method for locating browser page memory usage bottlenecks. By outputting a memory usage analysis view, it helps developers analyze the page's memory usage, locate memory bottlenecks, and optimize the page to solve the problems mentioned in the background.

[0006] The technical solution of this invention to solve the above-mentioned technical problems is as follows: A method for locating browser page memory usage bottlenecks, comprising the following steps:

[0007] S101. Prepare the program source code and memory usage SDK, import the memory usage SDK into the program source code, and initialize different simple data types and character memory usage variable objects;

[0008] S102. Define a recursive function that takes a variable as a parameter and performs recursive operations on it. This function is used to repeatedly operate on the input parameter.

[0009] S103. Traverse each key-value pair of the source object. Use a for loop to iterate through each key-value pair of the object. For each key-value pair, get the key and value, and perform type determination.

[0010] S104. Traverse the calculation results, obtain the dictionary and data structure of the storage memory size results, control the sorting by setting the reverse parameter to sort in descending order, and output the sorted results line by line to form a table and report;

[0011] In a preferred embodiment, in step S101, a browser and a VS Code code editor are installed, and the program source code and memory usage SDK are prepared. The memory usage SDK is imported into the program source code and initialized. This initialization uses `init` as the initialization method for the memory usage SDK, and inputs `apiKey` and `environment` as initialization functions to replace the user's actual API key. According to the ECMAScript specification, memory usage values ​​for different data types are defined, including `CMA_SIZES.STRING`, `ECMA_SIZES.BOOLEAN`, and `ECMA_SIZES.NUMBER`. The browser global object `window` is input; the browser global object `window` refers to the global object in JavaScript, representing the browser window, including various properties and methods of the browser window, including the browser window size, address bar information, and document object. The JavaScript `for...` loop is used... The `in` function iterates through the target variable object to obtain the variable's type and value. Based on the variable's type and value, it uses the defined memory usage value to obtain the variable's memory usage size. For string types, each character occupies 2 bytes, so the memory usage size equals the string length * 2. For numeric types, each numeric type occupies 8 bytes, so the memory usage size equals 8 bytes. For boolean types, each boolean type occupies 4 bytes, so the memory usage size equals 4 bytes. The function records the variable's type, value, and memory usage size. It then analyzes and organizes the recorded data, identifying data of the same type that consumes the most memory. This data is then categorized and summarized to obtain statistical results on memory usage. Based on these results, optimizations and adjustments are made to reduce memory consumption.

[0012] In a preferred embodiment, in step S102, a recursive function is defined for calling itself internally. This function receives variables as parameters and performs recursive operations on them. The recursive function should include a termination condition and a case for recursively calling itself. The termination condition is when the variable is empty and when a specific state is reached. Specifically, the termination condition is reached when the browser list is empty and when the browser tree structure reaches a leaf node. The function then returns, recursively operating on the substructure of the input variable by traversing its attributes and recursively calling each attribute, calling the recursive function, and passing the input variable as a parameter to the recursive function.

[0013] In a preferred embodiment, in step S103, each key-value pair of the source object is traversed, where each key-value pair of the source object includes a key and a corresponding value. A for loop is used to iterate through each key-value pair of the object using an iterator. For each key-value pair, the key and value are obtained, and the type is determined to be either a simple data type or a binary data type. If it is a simple data type or a binary data type, the memory size of the current key-value pair is calculated, and the calculation result is added to the corresponding key-value pair of the target object. The specific memory size calculation steps are as follows: For the int data type, int.bit_length() is used to return the number of bits in the binary representation of the integer and divided by 8 to obtain the memory size in bytes. For the float data type, it is directly assumed that it occupies 8 bytes of memory. For the str data type, str.encode('utf-8') is used to encode the string into a byte string to obtain the memory size in bytes. For the binary data type, len(bytes_data) is used to obtain the length of the byte string as the memory size. For complex data types, the recursive function in step S102 is called to recursively execute the above steps.

[0014] In a preferred embodiment, in S104, the calculation results are traversed, key-value pairs are converted into a display format, a dictionary and data structure for storing memory size results are obtained, each key-value pair in the dictionary is traversed using a loop, and in each loop, the key and corresponding memory size of the current key-value pair are obtained. The key and memory size are converted into string format using string formatting and concatenation methods, and the sorted list is sorted using the sorted function. The sorting basis is specified by the key parameter, which is to sort according to the memory size in each string. The reverse parameter is set to control the sorting in descending order. The sorted results are output line by line to form a table and report. The ljust and rjust methods of the string are used to align the output content.

[0015] The beneficial effects of this invention are as follows: By initializing different simple data types and character memory-occupying variable objects, it is possible to obtain statistical results of memory usage, and optimize and adjust based on the statistical results to reduce memory usage. Using recursive functions, complex problems are decomposed into simpler sub-problems, making the solution more modular and manageable, which helps maintain the memory of browser pages. By iterating through key-value pairs for type judgment, a complete data structure is built, making data integration and processing more convenient and efficient. Type errors and unexpected behaviors during browser page memory operation are avoided, thereby improving the robustness of browser pages. The output memory usage analysis view helps developers analyze page memory usage, locate memory bottlenecks, and optimize accordingly. Attached Figure Description

[0016] Figure 1 This is a flowchart of the method of the present invention; Detailed Implementation

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

[0018] In the description of this application, the terms "first" and "second" are used for descriptive purposes only and should not be construed as indicating or implying relative importance or implicitly specifying the number of indicated technical features. Thus, a feature defined as "first" or "second" may explicitly or implicitly include one or more of the stated features. In the description of this application, "multiple" means two or more, unless otherwise explicitly specified.

[0019] In the description of this application, the term "for example" is used to mean "used as an example, illustration, or description." Any embodiment described as "for example" in this application is not necessarily to be construed as being more preferred or advantageous than other embodiments. The following description is provided to enable any person skilled in the art to make and use the invention. Details are set forth in the following description for purposes of explanation. It should be understood that those skilled in the art will recognize that the invention can be made without using these specific details. In other instances, well-known structures and processes will not be described in detail to avoid obscuring the description of the invention with unnecessary detail. Therefore, the invention is not intended to be limited to the embodiments shown, but is consistent with the broadest scope of the principles and features disclosed in this application.

[0020] This embodiment provides, for example Figure 1 The method for locating browser page memory usage bottlenecks, as shown, includes the following steps:

[0021] S101. Prepare the program source code and memory usage SDK, import the memory usage SDK into the program source code, and initialize different simple data types and character memory usage variable objects;

[0022] Further, install the browser and VS Code code editor, and prepare the program source code and memory usage SDK. Import the memory usage SDK into the program source code and initialize it. This initialization uses `init` as the initialization method for the memory usage SDK, and inputs `apiKey` and `environment` as initialization functions to replace the user's actual API key. According to the ECMAScript specification, define memory usage values ​​for different data types, including `CMA_SIZES.STRING`, `ECMA_SIZES.BOOLEAN`, and `ECMA_SIZES.NUMBER`. Input the browser's global object `window`, which refers to the global object in JavaScript, representing the browser window, including various properties and methods of the browser window, including the browser window size, address bar information, and document object. Use the `for` loop in JavaScript... The `in` function iterates through the target variable object to obtain the variable's type and value. Based on the variable's type and value, it uses the defined memory usage value to obtain the variable's memory usage size. For string types, each character occupies 2 bytes, so the memory usage size equals the string length * 2. For numeric types, each numeric type occupies 8 bytes, so the memory usage size equals 8 bytes. For boolean types, each boolean type occupies 4 bytes, so the memory usage size equals 4 bytes. The function records the variable's type, value, and memory usage size. It then analyzes and organizes the recorded data, identifying data of the same type that consumes the most memory. This data is then categorized and summarized to obtain statistical results on memory usage. Based on these results, optimizations and adjustments are made to reduce memory consumption.

[0023] S102. Define a recursive function that takes a variable as a parameter and performs recursive operations on it. This function is used to repeatedly operate on the input parameter.

[0024] Furthermore, a recursive function is defined, which is used to call itself within a function. This function receives a variable as a parameter and performs recursive operations on it. It is used to repeatedly operate on the input parameter within the function. The recursive function should include the termination condition of the recursion and the case of recursively calling itself. The termination condition of the recursion is that the variable is empty and a specific state is reached. The specific state is that the browser list is empty and the browser tree structure reaches a leaf node. The function performs a return operation and performs recursive operations on the substructure of the input variable. This is done by traversing the attributes of the variable and recursively calling the recursive function for each attribute, and passing the input variable as a parameter to the recursive function.

[0025] S103. Traverse each key-value pair of the source object. Use a for loop to iterate through each key-value pair of the object. For each key-value pair, get the key and value, and perform type determination.

[0026] Furthermore, each key-value pair of the source object is traversed, where each key-value pair of the source object includes a key and a corresponding value. A for loop iterates through each key-value pair of the object using an iterator. For each key-value pair, the key and value are obtained, and the type is determined to be either a simple data type or a binary data type. If it is a simple data type or a binary data type, the memory size of the current key-value pair is calculated, and the calculation result is added to the corresponding key-value pair of the target object. The specific memory size calculation steps are as follows: For the int data type, int.bit_length() is used to return the number of bits in the binary representation of the integer and divided by 8 to obtain the memory size in bytes. For the float data type, it is directly assumed that it occupies 8 bytes of memory. For the str data type, str.encode('utf-8') is used to encode the string into a byte string to obtain the memory size in bytes. For the binary data type, len(bytes_data) is used to obtain the length of the byte string as the memory size. For complex data types, the recursive function in S102 is called to recursively execute the above steps.

[0027] S104. Traverse the calculation results, obtain the dictionary and data structure of the storage memory size results, control the sorting by setting the reverse parameter to sort in descending order, and output the sorted results line by line to form a table and report;

[0028] Furthermore, the calculation results are iterated through, key-value pairs are converted into a display format, and the dictionary and data structure storing the memory size results are obtained. Each key-value pair in the dictionary is iterated through using a loop. In each loop, the key and corresponding memory size of the current key-value pair are obtained. The key and memory size are converted into string format using string formatting and concatenation methods. The sorted list is sorted using the sorted list, with the sorting basis specified by the key parameter. The sorting basis is based on the memory size in each string. The reverse parameter is used to control the sorting order from largest to smallest. The sorted results are output line by line to form a table and report. The ljust and rjust methods of the string are used to align the output content.

[0029] It should be noted that the descriptions of each embodiment in the above embodiments have different focuses. For parts that are not described in detail in a certain embodiment, please refer to the relevant descriptions in other embodiments.

[0030] Those skilled in the art will understand that embodiments of the present invention can be provided as methods, systems, or computer program products. Therefore, the present invention can take the form of a completely hardware embodiment, a completely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, the present invention can take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0031] This invention is described with reference to flowchart illustrations and / or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of the invention. It will be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, special-purpose computer, embedded computer, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, generate instructions for implementing the flowchart illustrations. Figure 1 One or more processes and / or boxes Figure 1 A device that provides the functions specified in one or more boxes.

[0032] These computer program instructions may also be stored in a computer-readable storage medium that can direct a computer or other programmable data processing device to function in a particular manner, such that the instructions stored in the computer-readable storage medium produce an article of manufacture including instruction means, which are implemented in a process Figure 1 One or more processes and / or boxes Figure 1 The function specified in one or more boxes.

[0033] These computer program instructions may also be loaded onto a computer or other programmable data processing equipment to cause a series of operational steps to be performed on the computer or other programmable equipment to produce a computer-implemented process, thereby providing instructions that execute on the computer or other programmable equipment for implementing the process. Figure 1 One or more processes and / or boxes Figure 1 The steps of the function specified in one or more boxes.

[0034] Although preferred embodiments of the invention have been described, those skilled in the art, upon learning the basic inventive concept, can make other changes and modifications to these embodiments. Therefore, the appended claims are intended to be interpreted as including both the preferred embodiments and all changes and modifications falling within the scope of the invention.

[0035] Obviously, those skilled in the art can make various modifications and variations to this invention without departing from its spirit and scope. Therefore, if these modifications and variations fall within the scope of the claims of this invention and their equivalents, this invention also intends to include these modifications and variations.

Claims

1. A method for locating browser page memory usage bottlenecks, characterized in that, Specifically, the following steps are included: S101. Prepare the program source code and memory usage SDK, import the memory usage SDK into the program source code, and initialize different simple data types and character memory usage variable objects; S102. Define a recursive function that takes a variable as a parameter and performs recursive operations on it. This function is used to repeatedly operate on the input parameter. S103. Traverse each key-value pair of the source object. Use a for loop to iterate through each key-value pair of the object. For each key-value pair, get the key and value, and perform type determination. S104. Traverse the calculation results, obtain the dictionary and data structure of the storage memory size results, control the sorting by setting the reverse parameter to sort in descending order, and output the sorted results line by line to form a table and report; In step S102, a recursive function is defined for calling itself within a function. This function receives variables as parameters and performs recursive operations on them. It is used to repeatedly operate on the input parameters within the function. The recursive function should include the termination condition of the recursion and the case of recursively calling itself. The termination condition of the recursion is that the variable is empty and a specific state is reached. The specific state is that the browser list is empty and the browser tree structure reaches a leaf node. The function performs a return operation and performs recursive operations on the substructure of the input variable. This is done by traversing the attributes of the variable and recursively calling each attribute, calling the recursive function, and passing the input variable as a parameter to the recursive function. In step S103, each key-value pair of the source object is traversed. Each key-value pair of the source object includes a key and a corresponding value. A for loop is used to traverse each key-value pair of the object through an iterator. For each key-value pair, the key and value are obtained and the type is determined to be a simple data type or a binary data type. If it is a simple data type or a binary data type, the memory size of the current key-value pair is calculated and the calculation result is added to the corresponding key-value pair of the target object.

2. The method of claim 1, wherein: In step S101, a browser and VS Code code editor are installed, and the program source code and memory usage SDK are prepared. The memory usage SDK is imported into the program source code and initialized. The initialization uses `init` as the initialization method for the memory usage SDK, and `apiKey` and `environment` are input as initialization functions to replace the user's actual API key. According to the ECMAScript specification, memory usage values ​​for different data types are defined, including `CMA_SIZES.STRING`, `ECMA_SIZES.BOOLEAN`, and `ECMA_SIZES.NUMBER`. The browser global object `window` is input. The browser global object `window` refers to the global object in JavaScript, representing the browser window, including various properties and methods of the browser window, including the browser window size, address bar information, and document object. The `for in` function in JavaScript is used to traverse the target variable object to obtain the variable's type and value. Based on the variable's type and value, the memory usage size of the variable is obtained using the defined memory usage values.

3. The method of claim 2, wherein: The steps to obtain the memory usage of a variable based on its type and value are as follows: For string types, each character occupies 2 bytes, so the memory usage = string length * 2; for numeric types, each numeric type occupies 8 bytes, so the memory usage = 8; for boolean types, each boolean type occupies 4 bytes, so the memory usage = 4. Record the variable's type, value, and memory usage. Analyze and organize the recorded data. Analyze the data for types that consume more memory. Group and summarize data of the same type to obtain statistical results on memory usage. Optimize and adjust based on the statistical results to reduce memory usage.

4. The method of claim 1, wherein: The specific steps for calculating memory size are as follows: For the int data type, int.bit_length() returns the number of bits in the binary representation of the integer and divides it by 8 to obtain the memory size in bytes. For the float data type, it is directly assumed to occupy 8 bytes of memory. For the str data type, str.encode('utf-8') encodes the string into a byte string to obtain the memory size in bytes. For the binary data type, len(bytes_data) is used to obtain the length of the byte string as the memory size. For complex data types, the recursive function in S102 is called to recursively execute the above memory size calculation steps.

5. The method of claim 1, wherein: In step S104, the calculation results are traversed, key-value pairs are converted into a display format, a dictionary and data structure for storing memory size results are obtained, each key-value pair in the dictionary is traversed using a loop, and in each loop, the key and corresponding memory size of the current key-value pair are obtained. The key and memory size are converted into string format using string formatting and concatenation methods, and the sorted list is sorted using the sorted function. The sorting basis is specified by the key parameter, which is to sort according to the memory size in each string. The reverse parameter is set to control the sorting in descending order. The sorted results are output line by line to form a table and report. The ljust and rjust methods of strings are used to align the output content.

Images