From 84e2a028c24f00ea86205dbfe5b9315c57d5ae3f Mon Sep 17 00:00:00 2001 From: Maximilian Hils Date: Mon, 22 Sep 2014 01:44:46 +0200 Subject: [PATCH] web: perf improvements --- libmproxy/web/static/js/app.js | 46 +++++++++++++------ .../js/components/flowtable-columns.jsx.js | 11 +++-- web/src/js/components/flowtable.jsx.js | 7 +++ web/src/js/dispatcher.js | 6 +-- web/src/js/stores/eventlogstore.js | 3 ++ web/src/js/stores/flowstore.js | 3 ++ web/src/js/utils.js | 16 ++++--- 7 files changed, 62 insertions(+), 30 deletions(-) diff --git a/libmproxy/web/static/js/app.js b/libmproxy/web/static/js/app.js index 5d40f069a..4fb9f92d8 100644 --- a/libmproxy/web/static/js/app.js +++ b/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) { - prefix.shift(); + var i=0; + 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) { - prefix.shift(); - time = time / div.shift(); + var i = 0; + while (Math.abs(time) >= div[i] && i < div.length) { + 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) { - callback(payload); - }); + for(var i = 0; i < this.callbacks.length; i++){ + 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({ - "col-tls": true, - "col-tls-https": ssl, - "col-tls-http": !ssl - }); + var classes; + if(ssl){ + classes = "col-tls col-tls-https"; + } 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; } }); diff --git a/web/src/js/components/flowtable-columns.jsx.js b/web/src/js/components/flowtable-columns.jsx.js index 88e0cf223..b7db71b7e 100644 --- a/web/src/js/components/flowtable-columns.jsx.js +++ b/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({ - "col-tls": true, - "col-tls-https": ssl, - "col-tls-http": !ssl - }); + var classes; + if(ssl){ + classes = "col-tls col-tls-https"; + } else { + classes = "col-tls col-tls-http"; + } return ; } }); diff --git a/web/src/js/components/flowtable.jsx.js b/web/src/js/components/flowtable.jsx.js index 146d5264d..fc4d8fbcc 100644 --- a/web/src/js/components/flowtable.jsx.js +++ b/web/src/js/components/flowtable.jsx.js @@ -14,6 +14,13 @@ var FlowRow = React.createClass({ {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; } }); diff --git a/web/src/js/dispatcher.js b/web/src/js/dispatcher.js index 65c4a4a02..4fe234472 100644 --- a/web/src/js/dispatcher.js +++ b/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) { - callback(payload); - }); + for(var i = 0; i < this.callbacks.length; i++){ + this.callbacks[i](payload); + } }; diff --git a/web/src/js/stores/eventlogstore.js b/web/src/js/stores/eventlogstore.js index 976f75243..dc6dbbbf5 100644 --- a/web/src/js/stores/eventlogstore.js +++ b/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) { diff --git a/web/src/js/stores/flowstore.js b/web/src/js/stores/flowstore.js index c76233677..7c0bddbd4 100644 --- a/web/src/js/stores/flowstore.js +++ b/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; } diff --git a/web/src/js/utils.js b/web/src/js/utils.js index 958593818..fa15db8cb 100644 --- a/web/src/js/utils.js +++ b/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) { - prefix.shift(); + var i=0; + 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) { - prefix.shift(); - time = time / div.shift(); + var i = 0; + while (Math.abs(time) >= div[i] && i < div.length) { + time = time / div[i]; + i++; } - return Math.round(time) + prefix.shift(); + return Math.round(time) + prefix[i]; }; \ No newline at end of file