$.observe/$.unobserve performance degradation over time

[johan-ohrn]

Please look at this fiddle

Notice how the observe/unobserve times increase for each iteration and then becomes lower again after ~15 or so iterations. The times are never as fast as the first couple of iterations.
I should say that this is not my actual data but it's a simple representation of what I'm doing.

Also the jquery version used doesn't seem to matter.

(code included below for future reference)

function arr() {
 var arr = [];

 for (var i = 0;i < 1000; i++) {
 	var o = {a:1, b:{c:11, d:{e:111}}};
 	arr.push(o);
 }
 return arr;
}
function fn() {
};

function test() {
 var a = arr();
 var start = performance.now();
 $.observe(a, "[].**", fn);
 var t1 = performance.now() - start;
 console.log("observe", t1);
 var start = performance.now();
 $.unobserve(a, "[].**", fn);
 var t1 = performance.now() - start;
 console.log("UNobserve", t1);
}
for(var i = 0; i < 25; i++){
	if (window.Stop) break;
	console.log("test "+i);
	test();
}

[johan-ohrn]

I found one major performance improvement in the observable code. I'm not sure if it will fix the over time degradation though.
Anyway in jquery.observable.js:
line 793:

// cbBindings = cbBindingsStore[cbId] = cbBindingsStore[cbId] || {};
if (!cbBindingsStore[cbId]) {
  cbBindingsStore[cbId] = (function () {
    var target = {};
    Object.defineProperty(target, 'length', {
      enumerable: false,
      value: 0,
      writable: true
    });
    var p = new Proxy(target, {
      get: function (obj, prop) { return obj[prop] },
      set: function (obj, prop, value) { if (!obj.hasOwnProperty(prop)) obj.length++; obj[prop] = value; return true; },
      deleteProperty: function (obj, prop) { if (obj.hasOwnProperty(prop)) obj.length--; return delete obj[prop]; }
    });
    return p;
  })();
}
cbBindings = cbBindingsStore[cbId];

line 174:

//for (var cb in cbBindings) {
//  return;
//}
if (cbBindings.length > 0)
  return;

It turns out that when an object has many keys the for-in construct is painfully slow (at least in chrome). If you could use a length property like I did here the performance would become much better.
I didn't know where in the code to place the length++ and length-- statements so I used a Proxy as a proof-of-concept for your consideration. It doesn't work in IE.
In one of our (granted not very optimized page in terms of data size and number of objects) time dropped from about 5 seconds (after performance degradation) down to 700 ms.

If there are other parts of the jsviews code where you use the for-in construct to check if an object contains keys you might want to consider a dedicated length property.

[BorisMoore]

Thanks Johan, yes, I had been looking at the issue, and finally narrowed it down to that same line of code, (174) as the main culprit. (I found that just yesterday evening, so we were apparently working in parallel :) ...)

I will explore optimisations on that.

Also, for your "degradation over time" scenario, it seems not to be related to time, but to the fact of replacing the array a each time you run the test(), with a new set of array items. If you set a = arr(); at the outer scope, and don't replace it when you run test() then you can call test() successively many times, and the perf of each iteration is about the same. But I don't yet understand why replacing with a new a = arr() causes slower execution - or why it would cause line 174 to execute more slowly.

I'll investigate more, if I can...

[BorisMoore]

I followed your suggestion for a length property, but using a very 'low tech' approach that requires few lines of code, and works in IE too. It is here:

jsviews4.zip

It does indeed radically improve performance in your scenario of doing observeAll (or equivalent) on very big arrays.

I didn't manage to understand why replacing the arr() was causing slower execution of line 174 - seems like a quirk/bug/anomaly in Chrome JavaScript implementation. But with the modified observable code using cbBindings.len the slow down no longer happens....

Let me know if you have any thoughts or concerns....

[johan-ohrn]

It works like a charm. Thanks!

[BorisMoore]

This has been fixed in new release v1.0.7