Dev: Use web worker for performance optimization

.eslintignore

@@ -1 +1,2 @@
-src/lib/util.js
+src/lib/util.js
+src/lib/stringifyUtil.js

.eslintrc.json

@@ -2,7 +2,8 @@
     "env": {
         "browser": true,
         "commonjs": true,
-        "es6": true
+        "es6": true,
+        "worker": true
     },
     "extends": "eslint:recommended",
     "parserOptions": {

.gitignore

@@ -7,6 +7,9 @@ eruda.js
 !/test/eruda.js
 eruda.min.js
 eruda.js.map
+stringifyWorker.js
+!/src/lib/stringifyWorker.js
+stringifyWorker.js.map
 /script/icomoon/
 /src/**/*.js.map
 npm-debug.log

.npmignore

@@ -14,3 +14,5 @@
 karma.conf.js
 karma.sauce.js
 npm-debug.log
+stringifyWorker.js
+stringifyWorker.js.map

package.json

@@ -19,12 +19,18 @@
   "eustia": {
     "eruda": {
       "files": "src/**/*.js",
+      "ignore": "src/**/stringify.js",
       "output": "src/lib/util.js",
       "exclude": [
         "createCfg"
       ],
       "format": "es"
     },
+    "stringify": {
+      "files": "src/lib/stringify.js",
+      "output": "src/lib/stringifyUtil.js",
+      "format": "es"
+    },
     "test": {
       "files": [
         "test/*.js",
@@ -86,6 +92,7 @@
     "remap-istanbul": "^0.9.5",
     "sass-loader": "^6.0.6",
     "webpack": "^3.10.0",
-    "webpack-dev-server": "^2.9.7"
+    "webpack-dev-server": "^2.9.7",
+    "worker-loader": "^1.1.0"
   }
 }

script/webpack.base.js

@@ -30,6 +30,17 @@ module.exports = {
     },
     module: {
         loaders: [
+            {
+                test: /Worker\.js$/,
+                use: {
+                    loader: 'worker-loader',
+                    options: {
+                        inline: true,
+                        fallback: true,
+                        name: '[name].js'
+                    }
+                }
+            },
             {
                 test: /\.js$/,
                 exclude: /node_modules/,

src/Console/Console.js

@@ -3,6 +3,7 @@ import Tool from '../DevTools/Tool';
 import {noop, evalCss, $} from '../lib/util';
 import emitter from '../lib/emitter';
 import Settings from '../Settings/Settings';
+import stringify from './stringify';
 
 export default class Console extends Tool
 {
@@ -219,14 +220,18 @@ export default class Console extends Tool
             displayGetterVal: false,
             viewLogInSources: false,
             displayIfErr: false,
+            useWorker: true,
             maxLogNum: 'infinite'
         });
 
+        let isWorkerSupported = !!window.Worker;
+
         let maxLogNum = cfg.get('maxLogNum');
         maxLogNum = maxLogNum === 'infinite' ? maxLogNum : +maxLogNum;
 
         if (cfg.get('catchGlobalErr')) this.catchGlobalErr();
         if (cfg.get('overrideConsole')) this.overrideConsole();
+        if (cfg.get('useWorker') && isWorkerSupported) stringify.useWorker = true;
         logger.displayHeader(cfg.get('displayExtraInfo'));
         logger.displayUnenumerable(cfg.get('displayUnenumerable'));
         logger.displayGetterVal(cfg.get('displayGetterVal'));
@@ -244,6 +249,7 @@ export default class Console extends Tool
                 case 'displayUnenumerable': return logger.displayUnenumerable(val);
                 case 'displayGetterVal': return logger.displayGetterVal(val);
                 case 'viewLogInSources': return logger.viewLogInSources(val);
+                case 'useWorker': stringify.useWorker = val; return;
             }
         });
 
@@ -257,6 +263,7 @@ export default class Console extends Tool
                 .switch(cfg, 'displayUnenumerable', 'Display Unenumerable Properties')
                 .switch(cfg, 'displayGetterVal', 'Access Getter Value');
 
+        if (isWorkerSupported) settings.switch(cfg, 'useWorker', 'Use Web Worker');
         if (sources) settings.switch(cfg, 'viewLogInSources', 'View Log In Sources Panel');
 
         settings.select(cfg, 'maxLogNum', 'Max Log Number', ['infinite', '250', '125', '100', '50', '10'])

src/Console/Log.js

@@ -1,4 +1,4 @@
-import stringify from '../lib/stringify';
+import stringify from './stringify';
 import origGetAbstract from '../lib/getAbstract';
 import highlight from '../lib/highlight';
 import beautify from 'js-beautify';
@@ -94,12 +94,13 @@ export default class Log
 
         if (this._needSrc())
         {
+            let setSrc = result => this.src = result;
             if (type === 'table')
             {
-                this.src = extractObj(args[0]);
+                extractObj(args[0], {}, setSrc);
             } else
             {
-                this.src = extractObj(args.length === 1 && isObj(args[0]) ? args[0] : args);
+                extractObj(args.length === 1 && isObj(args[0]) ? args[0] : args, {}, setSrc);
             }
         }
 
@@ -427,12 +428,12 @@ let getCurTime = () => dateFormat('HH:MM:ss');
 let tpl = require('./Log.hbs');
 let render = data => tpl(data);
 
-function extractObj(obj, options = {})
+function extractObj(obj, options = {}, cb)
 {
     defaults(options, {
         getterVal: Log.showGetterVal,
         unenumerable: Log.showUnenumerable
     });
 
-    return JSON.parse(stringify(obj, options));
+    stringify(obj, options, result => cb(JSON.parse(result)));
 }

src/Console/stringify.js

@@ -0,0 +1,49 @@
+import stringify from '../lib/stringify';
+import StringifyWorker from '../lib/stringifyWorker';
+import {nextTick, uniqId} from '../lib/util';
+
+let isWorkerSupported = !!window.Worker;
+
+let callbacks = {},
+    worker;
+
+if (isWorkerSupported) 
+{
+    worker = new StringifyWorker();
+    worker.onmessage = function (e) 
+    {
+        let [id, result] = e.data;
+        if (callbacks[id]) 
+        {
+            callbacks[id](result);
+            delete callbacks[id];
+        }
+    };
+}
+
+function exports(obj, options, cb) 
+{
+    let useWorker = exports.useWorker && isWorkerSupported;
+
+    if (useWorker) 
+    {
+        let id = uniqId('stringifyWorker');
+        callbacks[id] = cb;
+        // Some native object can't be cloned, such as window.location.
+        try 
+        {
+            worker.postMessage([id, obj, options]);
+            return;
+        } catch (e) 
+        {
+            delete callbacks[id];
+        }
+    }
+
+    let result = stringify(obj, options);
+    nextTick(() => cb(result));
+}
+
+exports.useWorker = false;
+
+export default exports;

src/lib/stringify.js

@@ -12,7 +12,7 @@ import {
     uniqId,
     last,
     extend
-} from './util';
+} from './stringifyUtil';
 
 // Modified from: https://jsconsole.com/
 export default function stringify(obj, {
@@ -313,7 +313,10 @@ class Visitor
     }
     visit(val)
     {
-        let id = uniqId('erudaJson');
+        /* Add 0 to distinguish stringify generated id from JsonViewer id.
+         * When used in web worker, they are not calling the same uniqId method, thus result may be repeated.
+         */
+        let id = uniqId('erudaJson0');
 
         this._visited.push({id, val, abstract: {}});
         this._map[id] = last(this._visited);

src/lib/stringifyWorker.js

@@ -0,0 +1,8 @@
+import stringify from './stringify';
+
+onmessage = function (e) 
+{
+    let [id, obj, options] = e.data;
+    let result = stringify(obj, options);
+    postMessage([id, result]);
+};