Shulou(Shulou.com)06/03 Report--

This article mainly introduces the vue single-page application memory leak example analysis, the article is very detailed, has a certain reference value, interested friends must read it!

What is a memory leak?

Memory that is no longer used by the system process and is not released in time is called a memory leak (memory leak). When the memory footprint is getting higher and higher, it will affect the performance of the system and cause the process to crash. Chrome limits the amount of memory that browsers can use (64-bit is 1.4 GB and 32-bit is 1.0GB), which means that browsers will not be able to manipulate some large memory objects directly.

The V8 engine blocks the JavaScript application logic when performing garbage collection and re-executes the JavaScript application logic until the garbage collection is over, a behavior known as "stop-the-world". If the heap memory of V8 is 1.5GB memory, V8 needs more than 50ms to do a small garbage collection, resulting in false death.

2. JS memory management and garbage collection mechanism GC

Basically, all high-level languages have garbage collection mechanism (garbage collection) to manage memory automatically to reduce the burden of programmers in order to solve memory leaks, but it is not allowed to be triggered manually and there is no intervention in memory management.

Older browsers use reference counting (Reference Counting) to manage memory, that is, each reference adds one, minus one when it is released. When the number of references to this value becomes 0, the memory space can be reclaimed, but the disadvantage is that it cannot be recycled when references are recycled.

Modern browsers basically use tag cleanup (Mark-and-Sweep) to manage memory, that is, browsers periodically start looking for reference variables from a root element, such as a window object, and the variables referenced by these variables. The variables that can be found are available, and those that cannot be found will be reclaimed by memory.

The disadvantage is that after clearing the memory will produce a lot of fine blocks, so it is derived from the tag-finishing method, not in detail.

III. Several situations prone to memory leaks in VUE

Memory leak is a cumulative process, and problems are exposed only when the page life cycle is slightly longer. Frequent interaction can speed up the accumulation process, and it is difficult for the displayed page to expose such problems (the so-called refresh and resurrection). So most of the time we are passively waiting for the problem to be exposed and then troubleshooting, and active analysis is usually difficult. Vue pages are mostly single-page applications, highly interactive and stay for a long time, poor handling is prone to memory leaks. This article mainly aims at the free dom object to carry on the troubleshooting, the ordinary JS variable troubleshooting has time to supplement.

1. Memory leak caused by global variables

Here is the home page export default {mounted () {window.test = {/ / here the dom object of this page is referenced in the global window object name: 'home', node: document.getElementById (' home')}

Press the Heap snapshots key, search for Detached, and find that the dom element is not separated from the document tree, which is a normal phenomenon.

Change the route and jump to the other page, press the Heap snapshots key, search for Detached, and find that there are two places where the dom element is dissociated from the current page. It is obvious that the window object references the div in the home page. Even though the home page has been destroyed, the dom element in the home still resides in memory and cannot be released.

The solution is to dispose of the reference while the page is unloaded.

Here is the home page export default {mounted () {window.test = {/ / here the dom object of this page is referenced in the global window object name: 'home', node: document.getElementById (' home')}}, destroyed () {window.test = null / / unreferenced when the page is unloaded}

two。 In addition to direct references, window's native methods also have the effect of referencing the dom element so that it cannot be released.

Here is the home page export default {mounted () {window.addEventListener ('resize', this.func) / / window object refers to the method of the home page}, methods: {func () {console.log (' this is the function of the home page')}

The solution is also to release the reference and free memory when the page is destroyed.

Mounted () {window.addEventListener ('resize', this.func)}, beforeDestroy () {window.removeEventListener (' resize', this.func)}

3. Improper use of some global methods can also cause memory not to be freed, and dereferencing can also be considered when the page is unloaded.

Here is the home page export default {mounted () {this.$EventBus.$on ('homeTask', res = > this.func (res))}, methods: {func (res) {console.log (res)}

Mounted () {this.$EventBus.$on ('homeTask', res = > this.func (res))}, destroyed () {this.$EventBus.$off ()}

There are many other reasons for free dom nodes, more than these three. To sum up:

The node on the destroyed page is bound to the 1.window object, event bus and global vuex. Then the node will not be destroyed with the page.

two。 To create an instance using a third-party library, the third-party library generally provides a destroy function, and the correct destroy function is not called when the page is redirected.

3. Some students will say that using closures in pages will also cause memory leaks. There is a mechanism for managing memory in the vue framework. As long as it is written correctly, it will not cause memory leaks in theory.

The above is all the contents of the article "sample Analysis of memory leaks in single-page applications in vue". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.