perf(console): asynchronize log render

doc/TOOL_API.md

@@ -10,6 +10,7 @@ Display console logs. Implementation detail follows the [console api spec](https
 
 |Name               |Type   |Desc                           |
 |-------------------|-------|-------------------------------|
+|asyncRender        |boolean|Asynchronous rendering         |
 |jsExecution        |boolean|Enable JavaScript execution    |
 |catchGlobalErr     |boolean|Catch global errors            |
 |overrideConsole    |boolean|Override console               |

src/Console/Console.js

@@ -7,7 +7,8 @@ import {
   Emitter,
   uncaught,
   escapeRegExp,
-  trim
+  trim,
+  nextTick
 } from '../lib/util'
 import emitter from '../lib/emitter'
 import Settings from '../Settings/Settings'
@@ -23,6 +24,7 @@ export default class Console extends Tool {
 
     this.name = 'console'
     this._scale = 1
+    this._asyncRender = true
 
     this._registerListener()
   }
@@ -50,7 +52,11 @@ export default class Console extends Tool {
       }
 
       winConsole[name] = (...args) => {
-        this[name](...args)
+        if (this._asyncRender) {
+          nextTick(() => this[name](...args))
+        } else {
+          this[name](...args)
+        }
         origin(...args)
       }
     })
@@ -227,6 +233,7 @@ export default class Console extends Tool {
     if (!settings) return
 
     settings
+      .remove(cfg, 'asyncRender')
       .remove(cfg, 'jsExecution')
       .remove(cfg, 'catchGlobalErr')
       .remove(cfg, 'overrideConsole')
@@ -246,6 +253,7 @@ export default class Console extends Tool {
     const logger = this._logger
 
     const cfg = (this.config = Settings.createCfg('console', {
+      asyncRender: true,
       catchGlobalErr: true,
       jsExecution: true,
       overrideConsole: true,
@@ -265,6 +273,7 @@ export default class Console extends Tool {
     maxLogNum = maxLogNum === 'infinite' ? maxLogNum : +maxLogNum
 
     this._enableJsExecution(cfg.get('jsExecution'))
+    if (!cfg.get('asyncRender')) this._asyncRender = false
     if (cfg.get('catchGlobalErr')) this.catchGlobalErr()
     if (cfg.get('overrideConsole')) this.overrideConsole()
     if (cfg.get('useWorker') && isWorkerSupported) stringify.useWorker = true
@@ -277,6 +286,9 @@ export default class Console extends Tool {
 
     cfg.on('change', (key, val) => {
       switch (key) {
+        case 'asyncRender':
+          this._asyncRender = val
+          return
         case 'jsExecution':
           return this._enableJsExecution(val)
         case 'catchGlobalErr':
@@ -306,6 +318,7 @@ export default class Console extends Tool {
 
     settings
       .text('Console')
+      .switch(cfg, 'asyncRender', 'Asynchronous Rendering')
       .switch(cfg, 'jsExecution', 'Enable JavaScript Execution')
       .switch(cfg, 'catchGlobalErr', 'Catch Global Errors')
       .switch(cfg, 'overrideConsole', 'Override Console')

test/console.js

@@ -1,5 +1,6 @@
 describe('console', function() {
   let tool = eruda.get('console')
+  tool.config.set('asyncRender', false)
   let $tool = $('.eruda-console')
 
   beforeEach(function() {

test/manual.html

@@ -42,6 +42,9 @@
         <li>
             <a href="#" id="log">Log</a>
         </li>
+        <li>
+            <a href="#" id="heavy-log">Heavy Log</a>
+        </li>
     </ul>
 </nav>
 <script>
@@ -162,6 +165,11 @@
         for (var i = 0; i < 10000; i++) arr.push(i);
         console.log(arr);
     });
+    addClickEvent('heavy-log', () => {
+        for (let i = 0; i < 1000; i++) {
+            console.log(location, i);
+        }
+    });
 </script>
 <script>
     eruda.init();