opcache-status
opcache-status copied to clipboard
rlerdorf
High cpu usage on tab switch
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.
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.
@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
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?
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
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.
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
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.
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
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.
+1 for Google Charts, they are very nice to work. See: https://developers.google.com/chart/interactive/docs/gallery
