Add improved performance marks for development mode (#3297)

2 files changed, 28 insertions, 1 deletions

diff --git a/app/javascript/mastodon/main.js b/app/javascript/mastodon/main.js
index d11cb8521..44148fa92 100644
--- a/app/javascript/mastodon/main.js
+++ b/app/javascript/mastodon/main.js
@@ -1,3 +1,5 @@
+const perf = require('./performance');
+
 // allow override variables here
 require.context('../../assets/stylesheets/', false, /variables.*\.scss$/);
 
@@ -14,10 +16,10 @@ function onDomContentLoaded(callback) {
 }
 
 function main() {
+  perf.start('main()');
   const Mastodon = require('mastodon/containers/mastodon').default;
   const React = require('react');
   const ReactDOM = require('react-dom');
-  window.Perf = require('react-addons-perf');
 
   require.context('../images/', true);
 
@@ -29,6 +31,7 @@ function main() {
     const props = JSON.parse(mountNode.getAttribute('data-props'));
 
     ReactDOM.render(<Mastodon {...props} />, mountNode);
+    perf.stop('main()');
   });
 }
 
diff --git a/app/javascript/mastodon/performance.js b/app/javascript/mastodon/performance.js
new file mode 100644
index 000000000..64fd47bb3
--- /dev/null
+++ b/app/javascript/mastodon/performance.js
@@ -0,0 +1,24 @@
+//
+// Tools for performance debugging, only enabled in development mode.
+// Open up Chrome Dev Tools, then Timeline, then User Timing to see output.
+// Also see config/webpack/loaders/mark.js for the webpack loader marks.
+//
+
+let marky;
+
+if (process.env.NODE_ENV === 'development') {
+  marky = require('marky');
+  require('react-addons-perf').start();
+}
+
+export function start(name) {
+  if (process.env.NODE_ENV === 'development') {
+    marky.mark(name);
+  }
+}
+
+export function stop(name) {
+  if (process.env.NODE_ENV === 'development') {
+    marky.stop(name);
+  }
+}