Skip to content

Elements increase when adding data and changing views #10249

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
yhor1e opened this issue Jul 9, 2019 · 10 comments
Closed

Elements increase when adding data and changing views #10249

yhor1e opened this issue Jul 9, 2019 · 10 comments

Comments

@yhor1e
Copy link

yhor1e commented Jul 9, 2019 •
edited
Loading

Version

2.6.10

Reproduction link

Steps to reproduce

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

examples

ex1. Done the above steps with 1 input data.
1

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

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?
@yhor1e yhor1e changed the title Increasing elements when adding data and changing view Elements increase when adding data and changing views Jul 9, 2019
@MichaelJGW
Copy link

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.

@yhor1e
Copy link
Author

yhor1e commented Jul 10, 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.

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

@zrh122
Copy link
Contributor

zrh122 commented Jul 10, 2019

@yhor1e maybe same as #10004.

@yhor1e
Copy link
Author

yhor1e commented Jul 11, 2019 •
edited
Loading

@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
Copy link
Author

yhor1e commented Jul 11, 2019 •
edited
Loading

@zrh122

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

  1. Input data to the text field and push the enter button. × 10
  2. Click "Go to Second" button.
  3. Click "Go to First" button.
  4. Click "reset" button.
  5. 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.

[email protected]

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

vue.js on PR #10085

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

@zrh122
Copy link
Contributor

zrh122 commented Jul 11, 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>
  1. click button Toggle, show the list and input
  2. take a heap snapshot, type something in the input
  3. click Toggle twice, show the list and input again, take a heap snapshot
  4. 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).

@yhor1e
Copy link
Author

yhor1e commented Jul 11, 2019

@zrh122

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

Maybe it is an issue of Chrome (my Chrome version 75.0.3770.100).

I agree with you. Elements increment is not a matter of vue.js but Chrome or something.

@yhor1e
Copy link
Author

yhor1e commented Jul 11, 2019

Please tell me when the version fixed #10004 will release, if possible.

@posva
Copy link
Member

posva commented Jul 12, 2019

Closing this as a Duplicate of #10004 then.

@yhor1e you can subscribe to that issue to get a notification when it gets closed

@posva posva closed this as completed Jul 12, 2019
@yhor1e
Copy link
Author

yhor1e commented Jul 12, 2019

Thanks @posva

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@posva @MichaelJGW @yhor1e @zrh122