Vue: Elements increase when adding data and changing views

Created on 9 Jul 2019 · 10Comments · Source: vuejs/vue

Version

2.6.10

Reproduction link

Steps to reproduce

Input data to the text field and push the enter button.
Take a heap snapshot in Chrome Developer Tools.
Click "Go to Second" button.
Click "Go to First" button.
Take a heap snapshot in Chrome Developer Tools.
Compare step5 heap snapshot with step2 heap snapshot. Then elements increased.

examples

ex1. Done the above steps with 1 input data.

ex2. Done the above steps with 10 input data after ex1.

What is expected?

Elements don't increase. (#Delta is 0)

What is actually happening?

Elements increase. (#Delta is not 0)

This maybe shows memory leaks.
Is this a bug?

Source

yhor1e

Most helpful comment

@yhor1e maybe same as #10004.

zrh122 on 10 Jul 2019

👍2 🎉1

All 10 comments

Testing this by running a snapshot, clearing the elements, collect garbage, then running an additional snapshot it does what is expected.

I think you are seeing the difference before your browser has done its garbage collection. Which would explain this.

MichaelJGW on 9 Jul 2019

@MichaelJGW

Thank you for your response!

Testing this by running a snapshot, clearing the elements, collect garbage, then running an additional snapshot it does what is expected.

Would you please tell me the more detailed procedure?
When I should input data?

Or, do you mean I should click the "Collect Garbage" button in Chrome Dev Tools before taking a heap snapshot?
I tried again the following steps but I got the same results.

Input data to the text field and push the enter button.
Click "Collect Garbage" button in Chrome Developer Tools.
Take a heap snapshot in Chrome Developer Tools.
Click "Go to Second" button.
Click "Go to First" button.
Click "Collect Garbage" button in Chrome Developer Tools.
Take a heap snapshot in Chrome Developer Tools.
Compare step5 heap snapshot with step2 heap snapshot. Then elements increased.

yhor1e on 10 Jul 2019

@yhor1e maybe same as #10004.

zrh122 on 10 Jul 2019

👍2 🎉1

@zrh122

I'm sorry for my late response and thank you for your comment.
Now I tried your vue.js on PR #10085. But elements increment is not improved.

https://github.com/yhor1e/vue-10249-using-10085

Would you please tell me if you have another comment.

By the way, I'm using Google Chrome (ver. 75.0.3770.100).

yhor1e on 11 Jul 2019

@zrh122

I confirmed memory in the devtools performance tab with the following steps.

Input data to the text field and push the enter button. × 10
Click "Go to Second" button.
Click "Go to First" button.
Click "reset" button.
Click "Collect Garbage" button in Chrome Developer Tools.

I did the above steps 3 times.

Then, vue.js on PR #10085 improved memory increment.
But the memory is increasing a little bit yet.

vue.[email protected]

スクリーンショット 2019-07-11 21 33 59

vue.js on PR #10085

スクリーンショット 2019-07-11 21 37 30

yhor1e on 11 Jul 2019

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <button>Toggle</button>
    <div id="container"></div>

    <script>
      const container = document.getElementById('container')

      document
        .getElementsByTagName('button')[0]
        .addEventListener('click', () => {
          if (container.childElementCount > 0) {
            // removing children
            container.removeChild(container.children.item(0))
          } else {
            const con = document.createElement('div')
            const input = document.createElement('input')
            const ul = document.createElement('ul')
            con.appendChild(input)
            con.appendChild(ul)
            for (let i = 0; i < 20; i++) {
                const li = document.createElement('li')
                li.innerText = i
                ul.appendChild(li)
            }
            container.appendChild(con)
          }
        })
    </script>
  </body>
</html>

click button Toggle, show the list and input
take a heap snapshot, type something in the input
click Toggle twice, show the list and input again, take a heap snapshot
add element to the filter, compare two snapshot, the result is same as this issue

click "Collect Garbage" button before taking a heap snapshot.
Maybe it is an issue of Chrome (my Chrome version 75.0.3770.100).

zrh122 on 11 Jul 2019

@zrh122

Thank you for your quick response!
I tried your code and steps. Then I got the same result as yours.