How to find a memory leak in JS code?

Question

JavaScript

There are several lines of CSS, HTML,
and several functions like this on the page:

$(document).on('click', '#message', function(e){
  $.ajax({
      url: 'PutMessage',
      type: "POST",
      data: JSON.stringify({ data: $(this).val() }),
      processData: false,
      contentType: "application/json; charset=UTF-8"
    })
    .done(function(dataJson) {
      $(this).val('');
    });
    return false;
  });

At the same time, the google chrome task manager shows that the page is eating 25 MB + another 200 KB every minute.
In connection with what there may be a memory leak, and how to prevent it?

Answer 1

Well, if the document is not to be peeled, then the full code is needed .... This post should not be eaten, unless a lot of data comes from the server.

Answer 2

It seems to me that chrome profiling can help you find your problem:
https://developer.chrome.com/devtools/docs/heap-pr...
Very useful thing. It will help to see the work with JS memory from the inside. For example, if you create one large string from several small ones, for example, var str = "a"+"b"+"c"+"d"; you will be surprised that the strings "ab", "abc" and "abcd" appeared in memory, although you did not order the first two. Given that the assignment only works for the last result.

Answer 3

This is most likely a jQuery leak itself.

Answer 4

In Developer Tools (F12) there is a Profiles tab, so select the desired type and Start.
The report will show the problems.