Stop AJAX updater consuming ever-increasing memory

The pages with AJAX on were feeling quite sluggish, and it felt like
they were making the whole browser slow down.

Looking at the performance stuff in Chrome, the number of DOM nodes was
going up and up, which is weird because the number of things on the page
wasn’t changing. This was causing the page to consume more and more
memory in order to store all these nodes.

This is kinda beyond my understanding, but I tried a few things and it
looks like the browser was having a hard time garbage collecting the
temporary bits of DOM used to update the page.

By assinging these bits of DOM to variables before using them it seems
that the browser has an easier time cleaning them up.
This commit is contained in:
Chris Hill-Scott
2016-08-03 08:06:22 +01:00
parent 982d2d3095
commit ec724ce417

View File

@@ -3,11 +3,16 @@
var queues = {};
var dd = new diffDOM();
var timer;
var getRenderer = $component => response => dd.apply(
$component.get(0),
dd.diff($component.get(0), $(response[$component.data('key')]).get(0))
);
var getRenderer = $component => response => function() {
var component = $component.get(0);
var updated = $(response[$component.data('key')]).get(0);
var diff = dd.diff(component, updated);
dd.apply(
component, diff
);
};
var getQueue = resource => (
queues[resource] = queues[resource] || []
@@ -29,7 +34,7 @@
() => clearQueue(queue)
);
setTimeout(
timer = setTimeout(
() => poll(...arguments), interval
);