Design tool memory management method and device based on browser

Abstract

The invention discloses a browser-based design tool memory management method and device, and the method comprises the steps: setting a memory management function in a view menu of a design tool, and monitoring the memory utilization rate of a design file in real time; when the memory occupancy rate in the preset period reaches or exceeds a first threshold value, popping up a memory early warning pop-up window; when the memory occupancy rate in the preset period reaches or exceeds a second threshold value, popping up a memory depletion pop-up window; when the memory occupancy rate in the preset period reaches or exceeds a third threshold value, popping up a protection mode pop-up window and releasing part of the memory; large files in the design file are split, layers and components of the large files are cleaned, and the number of component variants is reduced through a component attribute function. According to the method and the device, the problem that the memory is insufficient when a large or complex file is opened or edited is solved, and especially when the use of the memory is close to the upper limit allowed by a browser, the design efficiency and the user experience are improved through an effective memory management means.

Description

Technical Field

[0001] The present invention relates to the technical field of software design, and particularly to a method and device for memory management of a browser-based design tool. Background Art

[0002] With the continuous development of browser technology, more and more application programs start to run in the browser environment. However, due to the memory limitation of the browser itself, when existing design tools process large files or the memory gradually increases during the editing process, the problem of memory overflow often occurs, especially when dealing with large files or complex designs, which often causes the application program to become stuck or even crash, seriously affecting the user experience and design efficiency.

[0003] To solve the above problems, the present invention develops a method and device for memory management of a browser-based design tool to improve design efficiency and user experience through effective memory management means. Summary of the Invention

[0004] In view of the above problems, a method and device for memory management of a browser-based design tool are proposed to improve design efficiency and user experience through effective memory management means.

[0005] According to one aspect of the present invention, there is provided a method for memory management of a browser-based design tool, including:

[0006] Set a memory management function in the view menu of the design tool to monitor the memory usage rate of the design file in real time;

[0007] When the memory occupancy rate reaches or exceeds a first threshold within a preset period, a memory warning pop-up window is popped up; wherein, the memory warning pop-up window is only popped up once without reloading the design file and is automatically closed when the routing of the current tab page changes;

[0008] When the memory occupancy rate reaches or exceeds a second threshold within a preset period, a memory exhaustion pop-up window is popped up; wherein, the memory exhaustion pop-up window responds to the user's operation to close the pop-up window and is automatically closed when the routing of the current tab page changes;

[0009] When the memory occupancy rate reaches or exceeds a third threshold within a preset period, a protection mode pop-up window is popped up and part of the memory is released, wherein the protection mode pop-up window cannot be closed by the user without refreshing the page and is automatically closed when the routing of the current tab page changes;

[0010] Split large files in the design file, clean up its layers and components, and reduce the number of component variants through the component property function.

[0011] In an alternative approach, the memory warning pop-up window further includes a memory optimization operation button. By using this button, the number of anchor points of vector graphics in the design file can be reduced, overlapping paths can be merged, and unused styles and empty layers in bitmap images within the design file can be removed.

[0012] In an alternative approach, the out-of-memory pop-up window further includes an export and save button. By using this button, the current design file can be exported to a lightweight intermediate format, which only saves the basic structure and properties of the design file.

[0013] During the export process, the complex component and layer structures are flattened based on the structure of the design file to reduce the nesting levels.

[0014] Meanwhile, the exported design file is saved to the local storage of the browser and a link is provided for the user to download and backup.

[0015] After the export is completed, the current design file is automatically closed and the memory is released.

[0016] In an alternative approach, the further releasing of some memory further includes:

[0017] Clearing the historical operation records of the design file and uninstalling currently unused plugins and resources.

[0018] Forcibly reclaiming the memory that the browser's garbage collector fails to recycle in a timely manner, and temporarily disabling the real-time preview, auto-saving, and collaborative editing functions that consume high memory.

[0019] When the memory occupancy rate drops below the safe threshold, the protection mode is exited.

[0020] In an alternative approach, the further splitting of large files in the design file further includes:

[0021] Based on the number of pages, layer complexity, and component quantity in the design file, the design file is split into multiple smaller sub-files. During the splitting process, a main file is created, which contains the links to all the sub-files.

[0022] In an alternative approach, the method further includes:

[0023] Storing the layer and component attributes in the design file locally through the IndexedDB storage method of the browser; and regularly checking whether the layer and component attributes stored in IndexedDB have expired and automatically cleaning up the expired data.

[0024] In an alternative approach, the method further includes:

[0025] Compile the graphic rendering module and the computing module of the design file into Wasm code according to the WebAssembly memory optimization method;

[0026] Detect and fix memory leaks generated during the running of the Wasm code and JavaScript code through the memory leak detection tool of the browser.

[0027] In an optional manner, the method further includes:

[0028] Dynamically adjust the loading order of resources according to the user's current operations and view states;

[0029] Among them, for the layers, components that the user is currently editing and the resources visible in the current view, give priority to loading; for the layers, components that the user is not currently editing and the resources invisible in the current view, reduce or delay loading or even do not load at all until the user needs to access them and then load them.

[0030] In an optional manner, the method further includes:

[0031] For multiple layer objects with the same or similar attributes, store a copy of the attribute data in memory, and enable the layer objects to share the attribute data by means of reference counting;

[0032] Among them, when it is necessary to modify the attributes of the layer object, check whether the attributes of this layer are shared by other layer objects. If they are shared, create a new copy of the attribute data and modify the copy;

[0033] For complex vector graphics, decompose them into multiple simple basic graphic elements, and then cache and reuse the basic graphic elements; among them, when it is necessary to render multiple similar complex vector graphics, directly take out the basic graphic elements from the cache and combine them.

[0034] According to another aspect of the present application, there is provided a memory management device for a browser-based design tool, including:

[0035] A memory monitoring module, used to set a memory management function in the view menu of the design tool and monitor the memory usage rate of the design file in real time;

[0036] A memory warning module, used to pop up a memory warning window when the memory occupancy rate reaches or exceeds the first threshold within a preset period; among them, the memory warning window only pops up once without reloading the design file, and automatically closes when the routing of the current tab page changes;

[0037] A memory exhaustion module, configured to pop up a memory exhaustion pop-up window when the memory occupancy rate reaches or exceeds a second threshold within a preset period; wherein, the memory exhaustion pop-up window responds to the user's operation to close the pop-up window and automatically closes when the routing of the current tab page changes;

[0038] A protection mode module, configured to pop up a protection mode pop-up window and release some memory when the memory occupancy rate reaches or exceeds a third threshold within a preset period, wherein the protection mode pop-up window cannot be closed by the user without refreshing the page and automatically closes when the routing of the current tab page changes;

[0039] A file splitting and cleaning module, configured to split large files in the design file and clean its layers and components, and reduce the number of component variants through the component property function.

[0040] The solution provided by the above embodiments of the present invention sets a memory management function in the view menu of the design tool to monitor the memory usage rate of the design file in real time; when the memory occupancy rate reaches or exceeds a first threshold within a preset period, a memory warning pop-up window is popped up; wherein, the memory warning pop-up window only pops up once without reloading the design file and automatically closes when the routing of the current tab page changes; when the memory occupancy rate reaches or exceeds a second threshold within a preset period, a memory exhaustion pop-up window is popped up; wherein, the memory exhaustion pop-up window responds to the user's operation to close the pop-up window and automatically closes when the routing of the current tab page changes; when the memory occupancy rate reaches or exceeds a third threshold within a preset period, a protection mode pop-up window is popped up and some memory is released, wherein the protection mode pop-up window cannot be closed by the user without refreshing the page and automatically closes when the routing of the current tab page changes; split large files in the design file and clean its layers and components, and reduce the number of component variants through the component property function. The present invention solves the problem of insufficient memory when opening or editing large or complex files, especially when the memory usage approaches the upper limit allowed by the browser, and improves the design efficiency and user experience through effective memory management means. Specifically, by monitoring the memory usage rate in real time and popping up different types of pop-up windows (memory warning, memory exhaustion, protection mode) when different thresholds are reached, the user is informed of the memory usage situation in advance to avoid data loss caused by sudden crashes. When the memory occupancy rate is too high, enter the protection mode and automatically release some memory to ensure the basic functions of the design tool run and avoid complete crashes. By splitting large files, cleaning layers and components, and reducing the number of component variants, the size and complexity of the design file are effectively reduced, thereby reducing memory occupancy. By reducing the number of component variants through the component property function, the memory occupied by components is reduced at the source. The memory exhaustion pop-up window provides an export and save button, allowing the user to export the design as a lightweight intermediate format, retaining the results to the greatest extent and releasing memory, providing a remedy for the user.

[0041] The above description is only an overview of the technical solution of the present invention. In order to be able to more clearly understand the technical means of the present invention, it can be implemented according to the content of the specification. And in order to make the above description, other purposes, features and advantages of the present invention more obvious and understandable, the following specific embodiments of the present invention are given. BRIEF DESCRIPTION OF THE DRAWINGS

[0042] By reading the following detailed description of the preferred embodiments, various other advantages and benefits will become clear to those of ordinary skill in the art. The drawings are only for the purpose of showing the preferred embodiments and are not considered to be a limitation of the present invention. Moreover, throughout the drawings, the same reference numerals are used to represent the same components. In the drawings:

[0043] Figure 1 A flowchart showing the method for memory management of a browser-based design tool according to an embodiment of the present invention is shown;

[0044] Figure 2 A schematic diagram showing the memory management entry according to an embodiment of the present invention is shown;

[0045] Figure 3 A schematic diagram showing the memory management according to an embodiment of the present invention is shown;

[0046] Figure 4 A flowchart showing the memory management process according to an embodiment of the present invention is shown;

[0047] Figures 5a to 5d A schematic diagram showing the memory pop-up window and memory rules according to an embodiment of the present invention is shown;

[0048] Figure 6 A schematic diagram showing the functional structure of the device for the method of memory management of a browser-based design tool according to an embodiment of the present invention is shown. DETAILED DESCRIPTION OF THE EMBODIMENTS

[0049] The exemplary embodiments of the present invention will be described in more detail below with reference to the drawings. Although the exemplary embodiments of the present invention are shown in the drawings, it should be understood that the present invention can be implemented in various forms and should not be limited by the embodiments set forth herein. On the contrary, these embodiments are provided so that the present invention can be more thoroughly understood and the scope of the present invention can be completely conveyed to those skilled in the art.

[0050] Before implementing the embodiments of the present invention, the technical terms or custom terms involved in the following text are uniformly explained herein:

[0051] Component: It allows the UI to be divided into independent and reusable parts. In actual applications, components are often organized into a tree-like structure of nested layers.

[0052] Example: An instance refers to a specific reference to a component. Whether it is dragged out from the component list by the user or copied and pasted from a component, it is an "instance", rather than the component itself.

[0053] Container: Formerly known as "drawing board", it is an important design component of design software, such as iPhone container, A4 paper container.

[0054] Layer: In a UI design draft, each layer can be regarded as a stacked layer of multiple design elements such as text, pictures, shapes, colors, etc. Different layers can be edited independently without affecting other layers. By adjusting the order, transparency and other properties of the layers, various complex visual effects and interactive designs can be achieved. In this application, the layer includes components, instances and containers.

[0055] Sub-layer: In the layer structure, if a layer is nested inside another layer, then the nested layer is the sub-layer, and the outer layer is the parent layer. The sub-layer can inherit all or part of the properties of the parent layer.

[0056] The following will be a detailed description of the method and device for memory management of a browser-based design tool proposed by the present invention through specific embodiments.

[0057] Embodiment 1:

[0058] Figure 1 Shows a functional structure diagram of the method for memory management of a browser-based design tool according to an embodiment of the present invention. Specifically, as Figure 1 shown, it includes the following steps:

[0059] Step S101, set the memory management function in the view menu of the design tool to monitor the memory usage rate of the design file in real time.

[0060] In this embodiment, traditional tools only prompt errors after the memory is exhausted, making it difficult for users to intervene actively. In this application, users can intuitively view the memory occupancy rate of the current design file (such as percentage or dynamic chart), avoiding tool crashes or lags caused by "unaware" memory growth. By continuously exposing the memory usage status, users can optimize the file in advance (such as deleting redundant layers, simplifying complex components), rather than dealing with it passively after the memory is exhausted.

[0061] Specifically, as Figure 2 、 Figure 3As shown, add an "Memory Management" entry to the toolbar or right-click menu. After clicking, expand the panel to display the real-time memory usage rate. Obtain memory data through the browser API (such as performance.memory) every second. Obtain the JavaScript heap memory usage through performance.memory.usedJSHeapSize, and calculate the occupancy rate in combination with the benchmark value preset by the tool. For browsers that do not support performance.memory, an estimation model based on file size and the number of layers can be used. Use Web Worker to run memory detection in a separate thread to avoid blocking the main thread.

[0062] Step S102, when the memory occupancy rate reaches or exceeds the first threshold within a preset period, pop up a memory warning window; wherein, the memory warning window only pops up once without reloading the design file, and automatically closes when the current tab page route changes.

[0063] In this embodiment, as Figure 4 shown, trigger a warning through the first threshold (such as 60%), which not only avoids disturbing users prematurely but also reserves a buffer space for subsequent optimization, forming a risk level system with pop-up windows of higher thresholds. It only pops up once without reloading the file, preventing users from being interrupted multiple times due to repeated operations (such as frequent undo / redo), and at the same time encouraging users to actively optimize the file. The pop-up window automatically closes when the route changes (such as when the user switches the tool panel or opens a new file), avoiding the pop-up window remaining and blocking the interface, and improving the operation coherence. For example, set it to 60% according to the tool performance test results to balance sensitivity and false alarm rate. Use sessionStorage to store the hasWarned status to ensure that the reminder status is shared among multiple tab pages of the same file, avoiding repeated pop-up windows in multiple tab pages. If the user does not operate, the pop-up window automatically disappears after 15 seconds, avoiding blocking the work area. Thus, through the above "graded reminder + intelligent closing" method, while ensuring the stability of the tool, the decision-making power of memory management is returned to the user, achieving a double optimization of experience and performance.

[0064] In an alternative way, the memory warning window further includes a memory optimization operation button, and through the memory optimization operation button, reduce the number of anchor points of vector graphics in the design file and merge overlapping paths, and remove unused styles and empty layers in the bitmap images in the design file.

[0065] In this embodiment, redundant anchor points are automatically reduced (for example, converting curve anchor points to straight-line anchor points) and overlapping paths are merged (for example, adjacent rectangular paths are merged into a single path), reducing the complexity of graphic rendering. Unused layer styles (such as deleted gradient styles) and empty layers (such as accidentally created transparent layers) are identified and removed, reducing memory occupancy. Intervention occurs when the user approaches but has not yet exhausted the memory bottleneck, preventing subsequent tool crashes or file corruption due to insufficient memory. Specifically, the Bézier curves of the vector graphics are traversed, and collinear or redundant anchor points are deleted (with the threshold set within a 0.5-pixel deviation). The fill rules of overlapping paths are detected (such as all using the "non-zero winding number"), and if the visual representation is the same, they are merged into a single path. The list of layer styles is traversed, styles not referenced by any layer are marked, and empty layers with a layer transparency of 0% or a size of 0x0 are checked.

[0066] Step S103: When the memory occupancy rate reaches or exceeds the second threshold within a preset period, a memory exhaustion pop-up window is displayed; wherein, the memory exhaustion pop-up window responds to the user's operation to close the pop-up window and automatically closes when the routing of the current tab page changes.

[0067] In this embodiment, as Figure 4 shown, the "memory on the verge of exhaustion" state is clearly defined through the second threshold (such as 75% - 80%), forming a risk gradient with the warning of the first threshold. The user is required to manually close the pop-up window (instead of it disappearing automatically) to prevent tool crashes caused by unconscious neglect. As Figures 5a to 5d shown, the pop-up window automatically closes with the routing change, preventing the user from being disturbed by the remaining pop-up window when switching function modules and avoiding accidental touches during multi-tab operations. As a precondition for entering the "protection mode", if the user fails to handle it in time, forced intervention can occur at the third threshold (such as 95% - 100%), forming a double insurance.

[0068] In an alternative manner, the memory exhaustion pop-up window further includes an export and save button, and the current design file is exported as a lightweight intermediate format through the export and save button. The lightweight intermediate format only saves the basic structure and attributes of the design file;

[0069] wherein, during the export process, the complex component and layer structures are flattened through the structure of the design file to reduce the nesting levels;

[0070] Meanwhile, the exported design file is saved to the local storage of the browser and a link is provided for the user to download and backup;

[0071] After the export is completed, the current design file is automatically closed and the memory is released.

[0072] In this embodiment, when the memory is on the verge of exhaustion, the user can retain the core design results by exporting lightweight files to avoid data loss caused by tool crashes. Only the basic structure and properties (such as component position, layer name) are retained, and non-essential data such as preview images and historical records are removed, and the file size can be reduced by 50%-80%. Convert nested components into a single-layer structure (such as splitting the "button group" into independent buttons) to reduce file complexity while retaining the hierarchical relationship for subsequent re-editing. The exported file is saved directly to the browser's local storage, and the user can download the backup to the hard disk to form a "cloud-local" double insurance. After the export is completed, the current file is automatically closed and garbage collection is triggered, which quickly reduces memory usage and avoids tool unresponsiveness.

[0073] In step S104, when the memory usage reaches or exceeds a third threshold within a preset period, a protection mode pop-up window is displayed and some memory is released. The protection mode pop-up window cannot be closed by the user without refreshing the page and is automatically closed when the page route of the current tab page changes.

[0074] In this embodiment, Figure 4 As shown in the figure, the third threshold (such as 95% to 100%) is used as the "memory bottom line". After being triggered, it is forced to take over to avoid tool crashes or browser tabs becoming unresponsive, providing users with a last line of defense. Figures 5a to 5d As shown, the protected mode pop-up window cannot be closed (requires a page refresh), forcing the user to wait for memory release operations to occur, preventing further operations from increasing memory pressure. Quickly free up some memory by clearing history, uninstalling plugins, forcing garbage collection, and disabling high-consumption features. When memory drops to a safe threshold, protected mode automatically exits, restoring some functionality (such as live preview) to balance performance and user experience.

[0075] In an optional manner, the releasing part of the memory further includes:

[0076] Clean up the historical operation records of the design file and uninstall currently unused plug-ins and resources;

[0077] Forces the recycling of memory that the browser garbage collector fails to reclaim in time, temporarily disabling high-memory consumption features such as live preview, autosave, and collaborative editing;

[0078] When the memory usage drops below a safety threshold, the protection mode is exited.

[0079] In this embodiment, by clearing historical operation records (such as the undo / redo stack) and uninstalling non-core plugins, the data resident in memory is reduced. The browser interface is called to trigger immediate garbage collection to solve the problem of memory retention caused by the delay of JavaScript automatic garbage collection. High-consumption functions such as real-time preview and auto-saving are temporarily disabled to reduce the memory growth rate and gain time for file operations. After the memory returns to normal, the protection mode is automatically exited to avoid manual operations from interrupting the user process.

[0080] Step S105: Split the large files in the design file and clean their layers and components, and reduce the number of component variants through the component property function.

[0081] In this embodiment, the large file is split into multiple sub-files to avoid excessive memory occupation by a single file and improve the overall stability of the tool. Redundant layers and components are cleaned up to reduce invalid data in memory and lower the rendering and calculation load. The number of variants is reduced through component property reuse to avoid duplicate storage of similar data and improve memory efficiency. The split sub-files can be independently edited and support parallel collaboration, while the main file retains the link relationship for easy version tracking.

[0082] In an alternative way, the splitting of the large files in the design file further includes:

[0083] According to the number of pages, layer complexity, and number of components in the design file, the design file is split into multiple smaller sub-files; wherein, a main file is created during the splitting process, and the main file contains the links to all the sub-files.

[0084] In this embodiment, only the resources of the sub-file currently being operated by the user are loaded, reducing the peak initialization memory and improving the tool startup and switching speed. After the sub-files are split, the version history is clearer, reducing the processing complexity during rollback or merge.

[0085] In an alternative way, the method further includes:

[0086] Store the layers and component properties in the design file locally through the IndexedDB storage method of the browser; and regularly check whether the layers and component properties stored in IndexedDB are expired and automatically clean up the expired data.

[0087] In this embodiment, the layer and component attributes are stored in the local IndexedDB instead of being all saved in the memory, significantly reducing the memory occupancy of the design tool, especially when dealing with large and complex design files. Loading the layer and component attributes from the local IndexedDB is faster than loading or parsing large JSON files from the network, improving the loading speed of the design file. IndexedDB provides a persistent storage mechanism, and the data still exists even if the browser is closed or refreshed, ensuring data security. Storing the data on the client reduces the storage and computing pressure on the server.

[0088] In an alternative way, compile the graphic rendering module and the computing module of the design file into Wasm code according to the WebAssembly memory optimization method;

[0089] Detect and fix the memory leaks generated during the running of the Wasm code and the JavaScript code through the memory leak detection tool of the browser.

[0090] In this embodiment, the binary format of WebAssembly (Wasm) is close to native code, and the execution speed is 2-3 times faster than JavaScript, while the memory occupancy is lower. Detect memory leaks in real time through the built-in tools of the browser to avoid tool crashes caused by the accumulation of leaks, improving the stability of long-term operation. Wasm code can run on different browsers and platforms, avoiding compatibility issues caused by memory management differences. Wasm is executed in a sandbox, reducing the risk of memory out-of-bounds or data corruption caused by code errors. For example, use Emscripten to compile C / C++ code into Wasm, or directly write Wasm code through AssemblyScript, compile the graphic rendering and computing modules into Wasm, call Wasm functions through JS, pass parameters and process the results.

[0091] In an alternative way, the method further includes:

[0092] Dynamically adjust the loading order of resources according to the user's current operations and view states;

[0093] Among them, the layers, components that the user is currently editing and the resources visible in the current view are preferentially loaded; for the layers, components that the user is not currently editing and the resources invisible in the current view, the loading is reduced or delayed or not loaded at all until the user needs to access them and then they are loaded.

[0094] In this embodiment, only the resources currently being operated on by the user are loaded, avoiding the memory peak caused by full loading of large files. Resources are preferentially loaded for the area where the user is editing to ensure no delay in interaction; for non-editing areas, loading is delayed to balance performance and functional integrity. The loading range is dynamically adjusted according to the canvas scroll position and zoom level, achieving a seamless experience of "loading wherever the user goes" when the user is browsing. For example, the tool only loads the page currently viewed by the user (such as page 5) and its visible layers, with a memory occupancy of 200 MB. When the user starts editing a vector graphic on page 5, all the anchor point data and associated styles of the graphic are immediately loaded. When the user scrolls to page 6, the tool preloads a low-precision preview image of page 6 and loads the high-definition resources after the user stops scrolling. The layers not edited by the user (such as pages 1 - 4) are marked with low priority, and the detailed data of them is loaded later.

[0095] In an optional manner, the method further includes:

[0096] For multiple layer objects with the same or similar attributes, store one copy of the attribute data in memory, and enable the layer objects to share the attribute data by means of reference counting;

[0097] Among them, when it is necessary to modify the attributes of the layer object, check whether the attributes of this layer are shared by other layer objects. If they are shared, create a new copy of the attribute data and modify the copy;

[0098] For complex vector graphics, decompose them into multiple simple basic graphic elements, and then cache and reuse the basic graphic elements; among them, when it is necessary to render multiple similar complex vector graphics, directly take out the basic graphic elements from the cache and combine them.

[0099] In this embodiment, for n layers with the same attributes, traditional tools need to store n copies of data, while this method only needs 1 copy, and the memory occupancy is reduced to 1 / n. Through reference counting and the Copy-On-Write method, sharing of attributes is automatically isolated when modified. After complex vector graphics are decomposed into simple elements, caching and reuse reduce repeated calculations, and the frame rate can be increased by 20% - 50%. When multiple users are editing, synchronization of shared attributes is more concise, and the conflict detection range is reduced to the actual modification point.

[0100] The solution provided by the above embodiments of the present invention sets a memory management function in the view menu of the design tool to monitor the memory usage rate of the design file in real time; when the memory occupancy rate reaches or exceeds the first threshold within a preset period, a memory warning pop-up window is popped up; wherein, the memory warning pop-up window only pops up once without reloading the design file and automatically closes when the route of the current tab page changes; when the memory occupancy rate reaches or exceeds the second threshold within a preset period, a memory exhaustion pop-up window is popped up; wherein, the memory exhaustion pop-up window responds to the user's operation to close the pop-up window and automatically closes when the route of the current tab page changes; when the memory occupancy rate reaches or exceeds the third threshold within a preset period, a protection mode pop-up window is popped up and part of the memory is released, wherein, the protection mode pop-up window cannot be closed by the user without refreshing the page and automatically closes when the route of the current tab page changes; splitting large files in the design file and cleaning its layers and components, and reducing the number of component variants through the component attribute function. The present invention solves the problem of insufficient memory when opening or editing large or complex files, especially when the memory usage is close to the upper limit allowed by the browser, and improves the design efficiency and user experience through effective memory management means. Specifically, by monitoring the memory usage rate in real time and popping up different types of pop-up windows (memory warning, memory exhaustion, protection mode) when different thresholds are reached, the user is informed of the memory usage situation in advance to avoid data loss caused by sudden crashes. When the memory occupancy rate is too high, enter the protection mode and automatically release part of the memory to ensure the operation of the basic functions of the design tool and avoid complete crashes. By splitting large files, cleaning layers and components, and reducing the number of component variants, the size and complexity of the design file are effectively reduced, thereby reducing memory occupancy. By reducing the number of component variants through the component attribute function, the memory occupied by components is reduced at the source. The memory exhaustion pop-up window provides export and save buttons, allowing users to export the design as a lightweight intermediate format, retaining the results to the greatest extent and releasing memory, providing a remedial measure for users.

[0101] Embodiment 2:

[0102] Figure 6 Fig. shows the functional structure diagram of the memory management method and device of the browser-based design tool according to the embodiment of the present invention. As Figure 6 shown, the device includes:

[0103] A memory monitoring module 601, configured to set a memory management function in the view menu of the design tool and monitor the memory usage rate of the design file in real time;

[0104] The memory warning module 602 is used to pop up a memory warning window when the memory occupancy rate reaches or exceeds the first threshold within a preset period; wherein, the memory warning window is only popped up once without reloading the design file and is automatically closed when the routing of the current tab page changes;

[0105] The memory exhaustion module 603 is used to pop up a memory exhaustion window when the memory occupancy rate reaches or exceeds the second threshold within a preset period; wherein, the memory exhaustion window responds to the user's operation to close the window and is automatically closed when the routing of the current tab page changes;

[0106] The protection mode module 604 is used to pop up a protection mode window and release some memory when the memory occupancy rate reaches or exceeds the third threshold within a preset period, wherein the protection mode window cannot be closed by the user without refreshing the page and is automatically closed when the routing of the current tab page changes;

[0107] The file splitting and cleaning module 605 is used to split large files in the design file and clean their layers and components, and reduce the number of component variants through the component property function.

[0108] In an optional manner, the memory warning module 602 is further used for:

[0109] The memory warning window further includes a memory optimization operation button, and through the memory optimization operation button, the number of anchor points of vector graphics in the design file is reduced and overlapping paths are merged, and unused styles and empty layers in bitmap images in the design file are removed.

[0110] In an optional manner, the memory exhaustion module 603 is further used for:

[0111] The memory exhaustion window further includes an export and save button, and through the export and save button, the current design file is exported as a lightweight intermediate format, and the lightweight intermediate format only saves the basic structure and properties of the design file;

[0112] Wherein, during the export process, the complex component and layer structure is flattened through the structure of the design file to reduce the nesting level;

[0113] At the same time, the exported design file is saved to the local storage of the browser and a link is provided for the user to download and backup;

[0114] After the export is completed, the current design file is automatically closed and the memory is released.

[0115] In an optional manner, the protection mode module 604 is further used for:

[0116] Clear the historical operation records of the design file and uninstall unused plugins and resources currently;

[0117] Force the recycling of memory that the browser's garbage collector fails to recycle in a timely manner, and temporarily disable real-time preview, auto-saving, and collaborative editing functions that consume high memory;

[0118] Exit the protection mode when the memory occupancy rate drops below the safety threshold.

[0119] In an alternative manner, the file splitting and cleaning module 605 is further configured to:

[0120] Split the design file into multiple smaller sub-files according to the number of pages, layer complexity, and number of components in the design file; wherein, a main file is created during the splitting process, and the main file contains links to all the sub-files.

[0121] In an alternative manner, the method further includes:

[0122] Store the layer and component attributes in the design file locally through the IndexedDB storage method of the browser; and regularly check whether the layer and component attributes stored in IndexedDB have expired and automatically clean up the expired data.

[0123] In an alternative manner, the method further includes:

[0124] Compile the graphic rendering module and computing module of the design file into Wasm code according to the WebAssembly memory optimization method;

[0125] Detect and fix memory leaks generated during the running of the Wasm code and JavaScript code through the browser's memory leak detection tool.

[0126] In an alternative manner, the method further includes:

[0127] Dynamically adjust the loading order of resources according to the user's current operations and view state;

[0128] Among them, for the layers, components that the user is currently editing, and the resources visible in the current view, they are preferentially loaded; for the layers, components that the user is not currently editing, and the resources invisible in the current view, the loading is reduced or delayed or not loaded at all until the user needs to access them and then they are loaded.

[0129] In an alternative manner, the method further includes:

[0130] For multiple layer objects with the same or similar attributes, store a copy of the attribute data in memory, and enable the layer objects to share the attribute data through reference counting;

[0131] Among them, when it is necessary to modify the attributes of the layer object, check whether the attributes of this layer are shared by other layer objects. If they are shared, create a new copy of the attribute data and modify the copy;

[0132] For complex vector graphics, decompose them into multiple simple basic graphic elements, and then cache and reuse the basic graphic elements; among them, when it is necessary to render multiple similar complex vector graphics, directly retrieve the basic graphic elements from the cache and combine them.

[0133] The solution provided in the above embodiments of the present invention sets a memory management function in the view menu of the design tool to monitor the memory usage rate of the design file in real time; when the memory occupancy rate reaches or exceeds the first threshold within a preset period, a memory warning pop-up window is popped up; among them, the memory warning pop-up window only pops up once without reloading the design file and automatically closes when the routing of the current tab page changes; when the memory occupancy rate reaches or exceeds the second threshold within a preset period, a memory exhaustion pop-up window is popped up; among them, the memory exhaustion pop-up window responds to the user's operation to close the pop-up window and automatically closes when the routing of the current tab page changes; when the memory occupancy rate reaches or exceeds the third threshold within a preset period, a protection mode pop-up window is popped up and part of the memory is released. Among them, the protection mode pop-up window cannot be closed by the user without refreshing the page and automatically closes when the routing of the current tab page changes; split large files in the design file and clean up its layers and components, and reduce the number of component variants through the component attribute function. The present invention solves the problem of insufficient memory when opening or editing large or complex files. Especially when the memory usage is close to the upper limit allowed by the browser, the design efficiency and user experience are improved through effective memory management means. Specifically, by monitoring the memory usage rate in real time and popping up different types of pop-up windows (memory warning, memory exhaustion, protection mode) when different thresholds are reached, the user is informed of the memory usage situation in advance to avoid data loss caused by sudden crashes. When the memory occupancy rate is too high, enter the protection mode and automatically release part of the memory to ensure the basic functions of the design tool run and avoid complete crashes. By splitting large files, cleaning up layers and components, and reducing the number of component variants, the size and complexity of the design file are effectively reduced, thereby reducing memory occupancy. By reducing the number of component variants through the component attribute function, the memory occupied by components is reduced at the source. The memory exhaustion pop-up window provides an export and save button, allowing users to export the design as a lightweight intermediate format, retaining the results to the greatest extent and releasing memory, providing a remedial measure for users.

[0134] The algorithms or displays provided herein are not inherently related to any particular computer, virtual system, or other device. A variety of general-purpose systems can also be used in conjunction with the teachings provided herein. The structure required to construct such systems will be apparent from the above description. Additionally, embodiments of the present invention are not directed to any particular programming language. It should be understood that the teachings of the present invention described herein can be implemented using a variety of programming languages, and the description of a particular language above is for the purpose of disclosing the best mode of the present invention.

[0135] In the specification provided herein, numerous specific details are set forth. However, it can be understood that embodiments of the present invention may be practiced without these specific details. In some instances, well-known methods, structures, and techniques have not been shown in detail so as not to obscure the understanding of this specification.

[0136] Similarly, it should be understood that, in order to streamline the present invention and assist in understanding one or more of the various inventive aspects, in the above description of the exemplary embodiments of the present invention, the various features of the embodiments of the present invention are sometimes grouped together into a single embodiment, figure, or description thereof. However, the disclosed method should not be construed as reflecting an intention that the claimed invention requires more features than are expressly recited in each claim. Rather, as reflected in the following claims, the inventive aspects lie in less than all of the features of the single foregoing disclosed embodiment. Thus, the claims following the detailed description are hereby expressly incorporated into the detailed description, with each claim standing on its own as a separate embodiment of the present invention. <{}

[0137] Those skilled in the art will appreciate that the modules in the devices in the embodiments can be adaptively changed and disposed in one or more devices different from the embodiments. The modules or units or components in the embodiments can be combined into one module or unit or component, and in addition, they can be divided into multiple sub-modules or sub-units or sub-components. Except that at least some of such features and / or processes or units are mutually exclusive, any combination can be used to combine all the features disclosed in this specification (including the accompanying claims, abstract, and drawings) and all the processes or units of any method or device so disclosed. Unless otherwise expressly stated, each feature disclosed in this specification (including the accompanying claims, abstract, and drawings) can be replaced by an alternative feature providing the same, equivalent, or similar purpose.

[0138] In addition, those skilled in the art can understand that although some embodiments herein include certain features included in other embodiments rather than other features, the combination of features of different embodiments means that it is within the scope of the present invention and forms different embodiments. For example, in the following claims, any one of the claimed embodiments can be used in any combination.

[0139] Each component embodiment of the present invention can be implemented in hardware, or in software modules running on one or more processors, or in a combination thereof. Those skilled in the art should understand that a microprocessor or a digital signal processor (DSP) can be used in practice to implement some or all of the functions of some or all of the components according to the embodiments of the present invention. The present invention can also be implemented as a device or apparatus program (e.g., a computer program and a computer program product) for executing part or all of the methods described herein. Such a program for implementing the present invention can be stored on a computer-readable medium, or can be in the form of one or more signals. Such signals can be downloaded from an Internet website, or provided on a carrier signal, or provided in any other form.

[0140] It should be noted that the above embodiments illustrate the present invention rather than limit the present invention, and those skilled in the art can design alternative embodiments without departing from the scope of the appended claims. In the claims, any reference signs placed between parentheses shall not be construed as limiting the claim. The word "comprising" does not exclude the presence of elements or steps not listed in the claim. The word "a" or "an" preceding an element does not exclude the presence of a plurality of such elements. The present invention can be implemented by means of hardware including several different elements and by means of a suitably programmed computer. In a unit claim listing several devices, several of these devices can be embodied by the same item of hardware. The use of the words first, second, and third, etc. does not denote any order. These words can be interpreted as names. The steps in the above embodiments, unless otherwise specified, should not be construed as limiting the order of execution.

Claims

1. A method for memory management of a browser-based design tool, characterized in that, Including: Set the memory management function in the view menu of the design tool to monitor the memory usage rate of the design file in real time; When the memory occupancy rate reaches or exceeds the first threshold within a preset period, a memory warning pop-up window is popped up; wherein, the memory warning pop-up window is only popped up once without reloading the design file and is automatically closed when the routing of the current tab page changes; When the memory occupancy rate reaches or exceeds the second threshold within a preset period, a memory exhaustion pop-up window is popped up; wherein, the memory exhaustion pop-up window responds to the user's operation to close the pop-up window and is automatically closed when the routing of the current tab page changes; When the memory occupancy rate reaches or exceeds the third threshold within a preset period, a protection mode pop-up window is popped up and part of the memory is released. Among them, the protection mode pop-up window cannot be closed by the user without refreshing the page and is automatically closed when the routing of the current tab page changes; Split large files in the design file, clean up its layers and components, and reduce the number of component variants through the component property function.

2. The method for managing the memory of a browser-based design tool according to claim 1, wherein The memory warning pop-up window also includes a memory optimization operation button. Through the memory optimization operation button, reduce the number of anchor points of vector graphics in the design file and merge overlapping paths, and remove unused styles and empty layers in the bitmap images in the design file.

3. The method for browser-based design tool memory management according to claim 1, wherein The memory exhaustion pop-up window also includes an export and save button. Through the export and save button, export the current design file to a lightweight intermediate format, and the lightweight intermediate format only saves the basic structure and properties of the design file; Among them, during the export process, flatten the complex component and layer structure through the structure of the design file to reduce the nesting level; At the same time, save the exported design file to the local storage of the browser and provide a link for the user to download and backup; After the export is completed, automatically close the current design file and release the memory.

4. The method for browser-based design tool memory management according to claim 1, wherein The releasing of part of the memory further includes: Clean up the historical operation records of the design file, and uninstall the currently unused plugins and resources; Force the recycling of memory that the browser garbage collector fails to recycle in time, and temporarily disable real-time preview, auto-save, and collaborative editing functions that consume high memory; Exit the protection mode when the memory occupancy rate drops below the safety threshold.

5. The method for memory management of a browser-based design tool according to claim 1, wherein The splitting of large files in the design file further includes: According to the number of pages, layer complexity, and number of components in the design file, split the design file into multiple smaller sub-files; wherein, a main file is created during the splitting process, and the main file contains links to all the sub-files.

6. The method for browser-based design tool memory management according to claim 1, characterized in that The method further includes: Store the layer and component attributes in the design file locally through the IndexedDB storage method of the browser; and regularly check whether the layer and component attributes stored in IndexedDB are expired and automatically clean up the expired data.

7. The method for browser-based design tool memory management according to claim 1, wherein The method further includes: Compile the graphic rendering module and calculation module of the design file into Wasm code according to the WebAssembly memory optimization method; Detect and fix memory leaks generated during the running of the Wasm code and JavaScript code through a memory leak detection tool in the browser.

8. The method for memory management of a browser-based design tool according to claim 1, wherein The method further includes: Dynamically adjusting the loading order of resources according to the user's current operations and view state; Among them, for the layers, components that the user is currently editing and the resources visible in the current view, priority loading is performed; for the layers, components that the user is not currently editing and the resources invisible in the current view, loading is reduced or delayed or not loaded at all until the user needs to access them and then loaded.

9. The method for memory management of a browser-based design tool according to claim 1, wherein The method further includes: For multiple layer objects with the same or similar attributes, store a copy of the attribute data in memory, and enable the layer objects to share the attribute data through reference counting; Among them, when it is necessary to modify the attributes of the layer object, check whether the attributes of this layer are shared by other layer objects. If they are shared, create a new copy of the attribute data and modify the copy; For complex vector graphics, decompose them into multiple simple basic graphic elements, and then cache and reuse the basic graphic elements; among them, when it is necessary to render multiple similar complex vector graphics, directly take out the basic graphic elements from the cache and combine them.

10. A browser-based design tool memory management device, characterized in that, It includes: A memory monitoring module, used to set a memory management function in the view menu of the design tool and monitor the memory usage rate of the design file in real time; A memory warning module, used to pop up a memory warning pop-up window when the memory occupancy rate reaches or exceeds the first threshold within a preset period; among them, the memory warning pop-up window only pops up once without reloading the design file and automatically closes when the routing of the current tab page changes; A memory exhaustion module, used to pop up a memory exhaustion pop-up window when the memory occupancy rate reaches or exceeds the second threshold within a preset period; among them, the memory exhaustion pop-up window responds to the user's operation to close the pop-up window and automatically closes when the routing of the current tab page changes; A protection mode module, used to pop up a protection mode pop-up window and release part of the memory when the memory occupancy rate reaches or exceeds the third threshold within a preset period, where the protection mode pop-up window cannot be closed by the user without refreshing the page and automatically closes when the routing of the current tab page changes; A file splitting and cleaning module, used to split large files in the design file and clean its layers and components, and reduce the number of component variants through the component attribute function.

Images