From: John Fremlin <john@fremlin.org> Date: Sun, 31 Dec 2017 18:32:36 +0000 (-0500) Subject: Make sure that canvasx and canvasy properties are initialized from the start (#896) X-Git-Url: https://adrianiainlam.tk/git/?a=commitdiff_plain;h=61767ef761b66b06e089cd081ac68527575af38b;p=dygraphs.git Make sure that canvasx and canvasy properties are initialized from the start (#896) Adding fields to a structure after it is created can be slow on some browsers, like Chrome. Adding a demo to benchmark many points, this seems to speed up my Chromium from about 2.8-3s to about 1.8s. Thanks to Christopher Palmer (@thecav) for the analysis and specific suggestion. --- diff --git a/gallery/data.js b/gallery/data.js index bbccab0..3ab0b66 100644 --- a/gallery/data.js +++ b/gallery/data.js @@ -2683,3 +2683,11 @@ var stockData = function() { "2009-09-15,9280.67;9712.28;9829.87,4297.2232125907;4497.07133894216;4551.51896800004\n" + "2009-10-15,9487.67;9712.73;10092.2,4388.84340147194;4492.9525342659;4668.48924723722\n"; }; + +function dataManyPoints() { + var data = []; + for (var i = 0; i < 1000000; ++i) { + data[i] = [i, i % 1009, i % 1013, i % 1019, i % 1021] + } + return data +} diff --git a/gallery/index.html b/gallery/index.html index 6d546b0..c834c31 100644 --- a/gallery/index.html +++ b/gallery/index.html @@ -33,6 +33,7 @@ <script src="temperature-sf-ny.js"></script> <script src="interaction.js"></script> <script src="linear-regression.js"></script> + <script src="many-points.js"></script> <!-- These might not remain in the gallery <script src="dygraph-simple.js"></script> diff --git a/gallery/many-points.js b/gallery/many-points.js new file mode 100644 index 0000000..afae3ee --- /dev/null +++ b/gallery/many-points.js @@ -0,0 +1,17 @@ +/*global Gallery,Dygraph,data */ +/*global dataManyPoints */ +Gallery.register( + 'many-points', + { + name: 'Many Points', + title: 'Many Points Benchmark', + setup: function(parent) { + parent.innerHTML = "<div id='many_points_div' style='width: 600px; height: 300px;'></div><p id='many_points_timing'></p>"; + }, + run: function() { + var data = dataManyPoints(); + var startTimeMillis = Date.now(); + var g = new Dygraph(document.getElementById("many_points_div"), data, {}); + document.getElementById('many_points_timing').innerHTML = (Date.now() - startTimeMillis) + 'ms'; + } + }); diff --git a/src/datahandler/datahandler.js b/src/datahandler/datahandler.js index 921540e..4af36d2 100644 --- a/src/datahandler/datahandler.js +++ b/src/datahandler/datahandler.js @@ -123,7 +123,9 @@ handler.prototype.seriesToPoints = function(series, setName, boundaryIdStart) { xval : handler.parseFloat(item[0]), yval : yval, name : setName, // TODO(danvk): is this really necessary? - idx : i + boundaryIdStart + idx : i + boundaryIdStart, + canvasx: NaN, // add these so we do not alter the structure later, which slows Chrome + canvasy: NaN, }; points.push(point); }