Dev: Use web worker for performance optimization

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]);
+};