High cpu usage on tab switch

[Gamesh]

Firefox console displays warning: mutating the [[Prototype]] of an object will cause your code to run very slowly; instead create the object with the correct initial [[Prototype]] value using Object.create

...{Yi=r}var Ii=[].proto?function(t,n){t.proto=n}:function(t,n){for(var e i... in file d3.v3.min.js.

and indead when you click on a tab cpu spikes to 10-16%, just to switch a tab. on a Quad core i7 CPU. I don't think that much cpu is needed just to hide and show a div, it should be snappy and fast.

[szepeviktor]

Yes, this is a problem. It seems it is an abandoned project.

[szepeviktor]

JS and that piece of data could be restricted to that tab. E.g. loading it later by AJAX. So looking at other tabs would be smooth.

[rlerdorf]

@cviebrock seems like something for you

[Gamesh]

@szepeviktor i don't think AJAX will solve anything. as the data is already loaded on the page and it loads very fast. The main problem here in my opinion is in javascript that switches the tab it is causing the slow down, not the data itself.

Maybe just stick with $.show() $.hide() and don't do any transitions:

if (!hidden[row]) {
d3.selectAll(row).transition().style('display', 'none');
hidden[row] = true;
d3.select(head).transition().style('color', '#ccc');
} else {
d3.selectAll(row).transition().style('display');
hidden[row] = false;
d3.select(head).transition().style('color', '#000');
}

and if you need odd/even row coloring do it with CSS3

[cviebrock]

I'll take a look ... it's been a while. ;)

[Gamesh]

glad to know that project is up and running again at least :)

[cviebrock]

Tried updating jQuery and d3js to more recent versions, and I still get that error warning. A quick google search turns up this: https://github.com/mbostock/d3/issues/1805

So, I'd say this is an issue with d3js, perhaps only within Firefox. I don't see those JS warnings in Chrome's console, and the CPU doesn't seem to spike as much as it does in FF.

I did convert the hiding/showing of tabs to use Jquery instead of d3. Do you want to try my branch at https://github.com/cviebrock/opcache-status/tree/update-d3js and see if that helps?

[Gamesh]

tried it and it works great and fast. but d3 still produces an error when clicking through tabs:

TypeError: dataset[this.value] is undefined
http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js
Line 1

TypeError: dataset[this.value] is undefined
http://myserverutils/opcache.php
Line 4125

maybe we should ditch d3 entirely? it looks somewhat unstable

[cviebrock]

d3 has been around for quite some time and is used in lots of places, so I don't think it's necessarily unstable. And ditching it would mean no pretty circular graph or partition visualization.

That particular error comes from our code:

https://github.com/cviebrock/opcache-status/blob/update-d3js/opcache.php#L605

I'd have to sit down for a few hours and figure out what's actually going on here. I'm sure it could be cleaned up.

[Gamesh]

It's just seems that D3 does pretty much the same thing that jquery does, but also includes ability to draw these graphs. My thought was to use something more lightweight just for graphs and stick with jquery for everything else

[cviebrock]

If you can find something that does this, that'd be great. The circular graphs I think would be easy to do in other JS charting libraries, but I'm not sure anyone else does the partitioning stuff.

[Gamesh]

For partitioning these look very similar, take a look Google Treemaps https://google-developers.appspot.com/chart/interactive/docs/gallery/treemap

ZingChart treemap: http://www.zingchart.com/docs/chart-types/treemap/

Kendo UI treemap http://demos.telerik.com/kendo-ui/treemap/index

[rlerdorf]

Neither Zing nor Kendo are viable since they are commercial. There are tons of them out there though. See: http://socialcompare.com/en/comparison/javascript-graphs-and-charts-libraries You can ignore all the non-opensource ones.

[Gamesh]

what about just using google charts api?

[jamesrwhite]

+1 for Google Charts, they are very nice to work. See: https://developers.google.com/chart/interactive/docs/gallery

[ningt]

highcharts is also a good alternative. http://www.highcharts.com/