From 5d21cdf8e8062f5cc3912c787dce685405a342b3 Mon Sep 17 00:00:00 2001 From: Peter Wu Date: Sat, 26 Jul 2014 12:31:15 +0200 Subject: jsrrdgraph: Use Typed Arrays for better performance Profiling was done using Firebug in Firefox 31 on Linux x86_64. Test was performed as follows: - rrd generated using collectd with default rrdtool settings. - CPU utilization was visualized with 8 lines (idle, nice, etc.). - The data has gaps between 20% and 40% and 55% and 85% (were no data was collected). - The measured performance was from advancing the data 40% to the right (there are no gaps before that). The total running time is 18859.094ms (old), 5151.822ms (new). In the below profiles, common functions with similar running times and call counts were omitted. Columns in the profile table: function, call count, time spent in the function, average time spent per call in *total* (including other functions called by the function) and percentage of the total running time. The RrdGraph.data_calc function was not called much, but seems to be heavy enough to include in the trace. Profile for old implementation: - getEndianByteAt 246959 12200.42ms 0.063ms 64.69% - getDoubleAt 30306 3183.393ms 0.612ms 16.88% - RRDRRA.getEl 30306 1177.33ms 0.665ms 6.24% - RRDRRA.calc_idx 30306 449.201ms 0.015ms 2.38% - (RrdDataFile.build 47 431.986ms total=21189.434ms 2.29%) - getByteAt 254290 327.369ms 0.013ms 1.74% - (2 functions omitted) - getCStringAt 752 103.308ms 0.271ms 0.55% - RrdRpn.calc 5504 98.55ms 0.018ms 0.52% - (1 function omitted) - (RrdGraph.data_calc 1 75.417ms total=174.535ms 0.4%) - getLongAt 1128 65.796ms 0.212ms 0.35% Profile for new implementation: - RRDRRA.getEl 32280 1202.446ms 0.065ms 23.34% - RrdRpn.calc 43968 848.693ms 0.019ms 16.47% (probably includes the getByteAt call which is not visible in trace) - (RrdGraph.data calc 2 616.648ms total=1466.432ms 11.97%) - getDoubleAt 32280 460.894ms 0.014ms 8.95% - (RrdDataFile.build 48 438.1ms total=2719.07ms 8.5%) - (RRDRRA.calc_idx 32280 436.375ms total=436.375ms 8.47%) - (10 functions omitted) - getLongAt 1152 16.273ms 0.014ms 0.32% - (2 functions omitted) - getCStringAt 768 13.651ms 0.018ms 0.26% A second test was performed on a graph with no visible data points. I dragged it to the left to get in the future with only NaN values. Then the profile started. It turns out that the byte readings are not dominating here, 99% of the time was spent in RrdRpn.calc and RrdGraph.data_calc: - (old) RrdRpn.calc 3.14k 58493s 0.019ms - (new) RrdRpn.calc 3.10k 56912s 0.018ms - RrdGraph.data_calc (n=2) took about 46 seconds for both. - getByteAt (n=12096): 0.014ms (old), invisible/inlined (new) - getEndianByteAt (n=4608): 0.040ms (old only) - getCStringAt (n=768): 0.285ms (old), 0.018ms (new) - getLongAt (n=1152): 0.233ms (old), 0.014ms (new) --- js/binaryXHR.js | 73 +++++++++++++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 66 insertions(+), 7 deletions(-) diff --git a/js/binaryXHR.js b/js/binaryXHR.js index 2cd02dd..d18f6a8 100644 --- a/js/binaryXHR.js +++ b/js/binaryXHR.js @@ -46,6 +46,8 @@ function BinaryFile(data) { this.getByteAt = function(iOffset) { return data.charCodeAt(iOffset) & 0xFF; }; + } else if (typeof DataView != "undefined" && data instanceof ArrayBuffer) { + dataLength = data.dataLength; } else if (typeof data === "unknown") { // Correct. "unknown" as type. MS JScript 8 added this. dataLength = IEBinary_getLength(data); @@ -61,8 +63,15 @@ function BinaryFile(data) { return dataLength; }; - // antique browser, use slower fallback implementation - this.extendWithFallback(data, littleEndian); + if (typeof DataView != "undefined" && data instanceof ArrayBuffer) { + // not an antique browser, use faster TypedArrays + this.extendWithDataView(data, littleEndian); + // other functions here do not need these + data = null; + } else { + // antique browser, use slower fallback implementation + this.extendWithFallback(data, littleEndian); + } } BinaryFile.prototype.extendWithFallback = function(data, littleEndian) { @@ -172,6 +181,42 @@ BinaryFile.prototype.extendWithFallback = function(data, littleEndian) { }; }; +BinaryFile.prototype.extendWithDataView = function(data, littleEndian) { + "use strict"; + var dv = new DataView(data); + + this.getByteAt = dv.getUint8.bind(dv); + this.getSByteAt = dv.getInt8.bind(dv); + this.getShortAt = function(iOffset) { + return dv.getUint16(iOffset, littleEndian); + }; + this.getSShortAt = function(iOffset) { + return dv.getInt16(iOffset, littleEndian); + }; + this.getLongAt = function(iOffset) { + return dv.getUint32(iOffset, littleEndian); + }; + this.getSLongAt = function(iOffset) { + return dv.getInt32(iOffset, littleEndian); + }; + this.getCharAt = function(iOffset) { + return String.fromCharCode(this.getByteAt(iOffset)); + }; + this.getCStringAt = function(iOffset, iMaxLength) { + var str = ""; + do { + var b = this.getByteAt(iOffset++); + if (b === 0) + break; + str += String.fromCharCode(b); + } while (--iMaxLength > 0); + return str; + }; + this.getDoubleAt = function(iOffset) { + return dv.getFloat64(iOffset, littleEndian); + }; + this.getFastDoubleAt = this.getDoubleAt.bind(this); +}; // Use document.write only for stone-age browsers. @@ -203,7 +248,7 @@ function FetchBinaryURL(url) { } request.send(null); - var response=request.responseText; + var response = request.responseText; try { // for older IE versions, the value in responseText is not usable if (IEBinary_getLength(this.responseBody)>0) { @@ -214,7 +259,18 @@ function FetchBinaryURL(url) { // not IE, do nothing } - var bf=new BinaryFile(response); + // cannot use responseType == "arraybuffer" for synchronous requests, so + // convert it afterwards + if (typeof ArrayBuffer != "undefined") { + var buffer = new ArrayBuffer(response.length); + var bv = new Uint8Array(buffer); + for (var i = 0; i < response.length; i++) { + bv[i] = response.charCodeAt(i); + } + response = buffer; + } + + var bf = new BinaryFile(response); return bf; } @@ -229,7 +285,8 @@ function FetchBinaryURLAsync(url, callback, callback_arg) { "use strict"; var callback_wrapper = function() { if(this.readyState === 4) { - var response=this.responseText; + // ArrayBuffer response or just the response as string + var response = this.response || this.responseText; try { // for older IE versions, the value in responseText is not usable if (IEBinary_getLength(this.responseBody)>0) { @@ -240,7 +297,7 @@ function FetchBinaryURLAsync(url, callback, callback_arg) { // not IE, do nothing } - var bf=new BinaryFile(response); + var bf = new BinaryFile(response); if (callback_arg) { callback(bf, callback_arg); } else { @@ -251,7 +308,9 @@ function FetchBinaryURLAsync(url, callback, callback_arg) { var request = new XMLHttpRequest(); request.onreadystatechange = callback_wrapper; - request.open("GET", url,true); + request.open("GET", url, true); + // Supported since Chrome 10, FF 6, IE 10, Opera 11.60 (source: MDN) + request.responseType = "arraybuffer"; try { request.overrideMimeType('text/plain; charset=x-user-defined'); } catch (err) { -- cgit v1.1