web: perf improvements

libmproxy/web/static/js/app.js

@@ -41,22 +41,24 @@ var Key = {
 var formatSize = function (bytes) {
     var size = bytes;
     var prefix = ["B", "KB", "MB", "GB", "TB"];
-    while (Math.abs(size) >= 1024 && prefix.length > 1) {
+    var i=0;
-        prefix.shift();
+    while (Math.abs(size) >= 1024 && i < prefix.length-1) {
+        i++;
         size = size / 1024;
     }
-    return (Math.floor(size * 100) / 100.0).toFixed(2) + prefix.shift();
+    return (Math.floor(size * 100) / 100.0).toFixed(2) + prefix[i];
 };
 
 var formatTimeDelta = function (milliseconds) {
     var time = milliseconds;
     var prefix = ["ms", "s", "min", "h"];
     var div = [1000, 60, 60];
-    while (Math.abs(time) >= div[0] && prefix.length > 1) {
+    var i = 0;
-        prefix.shift();
+    while (Math.abs(time) >= div[i] && i < div.length) {
-        time = time / div.shift();
+        time = time / div[i];
+        i++;
     }
-    return Math.round(time) + prefix.shift();
+    return Math.round(time) + prefix[i];
 };
 const PayloadSources = {
     VIEW: "view",
@@ -78,9 +80,9 @@ Dispatcher.prototype.unregister = function (callback) {
 };
 Dispatcher.prototype.dispatch = function (payload) {
     console.debug("dispatch", payload);
-    this.callbacks.forEach(function (callback) {
+    for(var i = 0; i < this.callbacks.length; i++){
-        callback(payload);
+        this.callbacks[i](payload);
-    });
+    }
 };
 
 
@@ -261,6 +263,9 @@ _.extend(EventLogView.prototype, EventEmitter.prototype, {
     },
     add: function (entry) {
         this.log.push(entry);
+        if(this.log.length > 50){
+            this.log.shift();
+        }
         this.emit("change");
     },
     add_bulk: function (messages) {
@@ -373,6 +378,9 @@ _.extend(FlowView.prototype, EventEmitter.prototype, {
 
         if(idx < 0){
             this.flows.push(flow);
+            //if(this.flows.length > 100){
+            //    this.flows.shift();
+            //}
         } else {
             this.flows[idx] = flow;
         }
@@ -661,11 +669,12 @@ var TLSColumn = React.createClass({displayName: 'TLSColumn',
     render: function(){
         var flow = this.props.flow;
         var ssl = (flow.request.scheme == "https");
-        var classes = React.addons.classSet({
+        var classes;
-            "col-tls": true,
+        if(ssl){
-            "col-tls-https": ssl,
+            classes = "col-tls col-tls-https";
-            "col-tls-http": !ssl
+        } else {
-        });
+            classes = "col-tls col-tls-http";
+        }
         return React.DOM.td({className: classes});
     }
 });
@@ -818,6 +827,13 @@ var FlowRow = React.createClass({displayName: 'FlowRow',
             React.DOM.tr({className: className, onClick: this.props.selectFlow.bind(null, flow)}, 
                 columns
             ));
+    },
+    shouldComponentUpdate: function(nextProps){
+        var isEqual = (
+            this.props.columns.length === nextProps.columns.length && 
+            this.props.selected === nextProps.selected &&
+            this.props.flow.response === nextProps.flow.response);
+        return !isEqual;
     }
 });
 

web/src/js/components/flowtable-columns.jsx.js

@@ -10,11 +10,12 @@ var TLSColumn = React.createClass({
     render: function(){
         var flow = this.props.flow;
         var ssl = (flow.request.scheme == "https");
-        var classes = React.addons.classSet({
+        var classes;
-            "col-tls": true,
+        if(ssl){
-            "col-tls-https": ssl,
+            classes = "col-tls col-tls-https";
-            "col-tls-http": !ssl
+        } else {
-        });
+            classes = "col-tls col-tls-http";
+        }
         return <td className={classes}></td>;
     }
 });

web/src/js/components/flowtable.jsx.js

@@ -14,6 +14,13 @@ var FlowRow = React.createClass({
             <tr className={className} onClick={this.props.selectFlow.bind(null, flow)}>
                 {columns}
             </tr>);
+    },
+    shouldComponentUpdate: function(nextProps){
+        var isEqual = (
+            this.props.columns.length === nextProps.columns.length && 
+            this.props.selected === nextProps.selected &&
+            this.props.flow.response === nextProps.flow.response);
+        return !isEqual;
     }
 });
 

web/src/js/dispatcher.js

@@ -18,9 +18,9 @@ Dispatcher.prototype.unregister = function (callback) {
 };
 Dispatcher.prototype.dispatch = function (payload) {
     console.debug("dispatch", payload);
-    this.callbacks.forEach(function (callback) {
+    for(var i = 0; i < this.callbacks.length; i++){
-        callback(payload);
+        this.callbacks[i](payload);
-    });
+    }
 };
 
 

web/src/js/stores/eventlogstore.js

@@ -26,6 +26,9 @@ _.extend(EventLogView.prototype, EventEmitter.prototype, {
     },
     add: function (entry) {
         this.log.push(entry);
+        if(this.log.length > 50){
+            this.log.shift();
+        }
         this.emit("change");
     },
     add_bulk: function (messages) {

web/src/js/stores/flowstore.js

@@ -41,6 +41,9 @@ _.extend(FlowView.prototype, EventEmitter.prototype, {
 
         if(idx < 0){
             this.flows.push(flow);
+            //if(this.flows.length > 100){
+            //    this.flows.shift();
+            //}
         } else {
             this.flows[idx] = flow;
         }

web/src/js/utils.js

@@ -41,20 +41,22 @@ var Key = {
 var formatSize = function (bytes) {
     var size = bytes;
     var prefix = ["B", "KB", "MB", "GB", "TB"];
-    while (Math.abs(size) >= 1024 && prefix.length > 1) {
+    var i=0;
-        prefix.shift();
+    while (Math.abs(size) >= 1024 && i < prefix.length-1) {
+        i++;
         size = size / 1024;
     }
-    return (Math.floor(size * 100) / 100.0).toFixed(2) + prefix.shift();
+    return (Math.floor(size * 100) / 100.0).toFixed(2) + prefix[i];
 };
 
 var formatTimeDelta = function (milliseconds) {
     var time = milliseconds;
     var prefix = ["ms", "s", "min", "h"];
     var div = [1000, 60, 60];
-    while (Math.abs(time) >= div[0] && prefix.length > 1) {
+    var i = 0;
-        prefix.shift();
+    while (Math.abs(time) >= div[i] && i < div.length) {
-        time = time / div.shift();
+        time = time / div[i];
+        i++;
     }
-    return Math.round(time) + prefix.shift();
+    return Math.round(time) + prefix[i];
 };