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)

1 files 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) {