Jquery/Javascript memory leak

Question

I have a web application which show chart and update chart status each 10 seconds.

HTML is:

<div id="hoze-bar-chart"></div>

JS for drawing chart:

var handleStackedChart = function() {
  "use strict";

  function v(e, t, n) {
    $('<div id="tooltip" class="flot-tooltip">' + n + "</div>").css({
      top: t,
      left: e + 35
    }).appendTo("body").fadeIn(200);
  }
  var e = displaycount.e;
  var n = displaycount.n;
  var h = displaycount.h;

  var p = {
    xaxis: {
      tickColor: "transparent",
      ticks: h
    },
    yaxis: {
      tickColor: "#ddd",
      ticksLength: 10
    },
    grid: {
      hoverable: !0,
      tickColor: "#ccc",
      borderWidth: 0,
      borderColor: "rgba(0,0,0,0.2)"
    },
    series: {
      stack: null,
      lines: {
        show: !1,
        fill: !1,
        steps: !1
      },
      bars: {
        show: !0,
        barWidth: .5,
        align: "center",
        fillColor: null
      },
      highlightColor: "rgba(0,0,0,0.8)"
    },
    legend: {
      show: !0,
      labelBoxBorderColor: "#ccc",
      position: "ne",
      noColumns: 1
    }
  };
  var d = [{
    data: e,
    color: green,
    label: displaycount.totalTitle,
    bars: {
      fillColor: green
    }
  }, {
    data: n,
    color: red,
    label: displaycount.offlineTitle,
    bars: {
      fillColor: red
    }
  }];

  $.plot("#hoze-bar-chart", d, p);

  var m = null;
  var g = null;
  $("#hoze-bar-chart").bind("plothover", function(e, t, n) {
    if (n) {
      if ($(document).width() >= 1024 && $(document).width() < 1680)
        $("#hoze-bar-chart .flot-x-axis .flot-tick-label:eq(" + n.dataIndex + ")").show();

      var r = n.datapoint[1] - n.datapoint[2];
      if (m != n.series.label || r != g) {
        m = n.series.label;
        g = r;

        if ($(document).width() >= 1024 && $(document).width() < 1680)
          $("#hoze-bar-chart .flot-x-axis .flot-tick-label:eq(" + n.dataIndex + ")").hide();

        $("#tooltip").remove();
        v(n.pageX, n.pageY, r + " " + n.series.label);
      }

      //Free Memory
      r = null;

    } else {
      if ($(document).width() >= 1024 && $(document).width() < 1680)
        $("#hoze-bar-chart .flot-x-axis .flot-tick-label").hide();
      $("#tooltip").remove();
    }
  })

  //Free Memory
  e = null;
  n = null;
  h = null;
  displaycount.e = null;
  displaycount.n = null;
  displaycount.h = null;
  displaycount.totalTitle = null;
  displaycount.offlineTitle = null;
  p = null;
  d = null;
  m = null;
  g = null
};

JS for call chart function first and call that each 10 seconds:

var Dashboard = function() {
    "use strict";
    return {
        init: function() {
            handleStackedChart();
            handleLiveUpdatedChart();
        }
    }
}()

var handleLiveUpdatedChart = function() {
    "use strict";
    var listenerAjaxRequest = {};
    listenerAjaxRequest.readyState = 4;
    function e() {
        if( listenerAjaxRequest.readyState != 1)
        {
            listenerAjaxRequest = $.ajax({
                type: "get",
                url: "PHP_FILE_PATH",
                cache: false,
                dataType: "json",
                success: function (response) {
                    displaycount.h = response.displyCountArray.titleData;
                    displaycount.e = response.displyCountArray.onlineData;
                    displaycount.n = response.displyCountArray.offlineData;
                    handleStackedChart();

                    displaycount.h = null;
                    displaycount.e = null;
                    displaycount.n = null;
                }
            });
        }
    }
};

First time which i run this website browser get 235MB memory but after 10 minutes i see browser get 255MB memory and this page is open 12 hours each day and browser crash because i have 10 chart on page and each 10 minutes browser get 100MB memory.

If i comment running handleLiveUpdatedChart() this issue will solve but i need to update data regularly.

At this time i need to know how i can handle memory and solve this issue.

So you're re-binding a new plothover listener every ten seconds? No wonder they accumulate memory — Bergi
– Bergi, Commented Aug 29, 2016 at 8:27
At least don't use interval but a timeout call recursively once any pending ajax request has completed, see reallifejs.com/brainchunks/repeated-events-timeout-or-interval And don't bind over and over again event/plugin of course — A. Wolff
– A. Wolff, Commented Aug 29, 2016 at 8:35

Ram · Accepted Answer · 2016-08-29 08:50:53Z

2

There are several things that you can do:

Define the v function outside of the handleStackedChart function. You don't have to re-define it on each function call. And if the v function is called many times, for generating an element, use DOM APIs instead of using jQuery. Note that function calls are expensive.
Define the p object outside of the handleStackedChart function and only update it's variable properties, e.g.: p.xaxis.ticks = h;
You are currently adding a new listener to the #hoze-bar-chart on each handleStackedChart call. When the event is fired all of the event listeners of the element are called and this alone can crash the browser. Also, you can cache the result of $(document).width() and reuse it instead of calling the function again and again.
Instead of using an interval use the setTimeout function. When the request is done and chart is redrawn, set a new timeout.

edited Aug 29, 2016 at 8:50

answered Aug 29, 2016 at 8:43

Ram

145k16 gold badges174 silver badges201 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Majid Abbasi Over a year ago

thank you for your answer, can you please send an example about: "for generating an element, use DOM APIs instead of using jQuery"

Ram Over a year ago

Khahesh mikonam! You can use document.createElement for creating the element. Generating all the elements at once is another option that can improve the performance.

Collectives™ on Stack Overflow

Jquery/Javascript memory leak

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related