From 28c43ed109bc0f5b403da5c09c14fd7c16752223 Mon Sep 17 00:00:00 2001
From: redhoodsu <redhoodsu@tencent.com>
Date: Sun, 3 Nov 2019 21:05:43 +0800
Subject: [PATCH] perf(console): rendering

---
 doc/UTIL_API.md       | 14 +++++++++
 src/Console/Logger.js | 45 ++++++++++++++++++++++-------
 src/lib/util.js       | 67 +++++++++++++++++++++++++++++++++++++++++++
 src/style/style.scss  |  1 -
 4 files changed, 115 insertions(+), 12 deletions(-)

diff --git a/doc/UTIL_API.md b/doc/UTIL_API.md
index 019eb47..f6a6629 100644
--- a/doc/UTIL_API.md
+++ b/doc/UTIL_API.md
@@ -2217,6 +2217,20 @@ query.stringify({foo: 'bar', eruda: 'true'}); // -> 'foo=bar&eruda=true'
 query.parse('name=eruda&name=eustia'); // -> {name: ['eruda', 'eustia']}
 ```
 
+## raf 
+
+Shortcut for requestAnimationFrame.
+
+Use setTimeout if native requestAnimationFrame is not supported.
+
+```javascript
+const id = raf(function tick() {
+    // Animation stuff
+    raf(tick);
+});
+raf.cancel(id);
+```
+
 ## repeat 
 
 Repeat string n-times.
diff --git a/src/Console/Logger.js b/src/Console/Logger.js
index eb28ec0..f3b9e7b 100644
--- a/src/Console/Logger.js
+++ b/src/Console/Logger.js
@@ -19,7 +19,8 @@ import {
   toArr,
   keys,
   last,
-  throttle
+  throttle,
+  raf
 } from '../lib/util'
 
 let id = 0
@@ -452,7 +453,7 @@ export default class Logger extends Emitter {
 
     this.renderViewport()
   }
-  _handleAsyncList() {
+  _handleAsyncList(timeout = 20) {
     const asyncList = this._asyncList
 
     if (this._asyncTimer) return
@@ -460,16 +461,38 @@ export default class Logger extends Emitter {
     this._asyncTimer = setTimeout(() => {
       this._asyncTimer = null
       let done = false
-      for (let i = 0; i < 20; i++) {
-        const item = asyncList.shift()
-        if (!item) {
-          done = true
-          break
-        }
-        this.insertSync(item[0], item[1])
+      const len = asyncList.length
+      // insert faster if logs is huge, thus takes more time to render.
+      let timeout, num
+      if (len < 1000) {
+        num = 200
+        timeout = 400
+      } else if (len < 5000) {
+        num = 500
+        timeout = 800
+      } else if (len < 10000) {
+        num = 800
+        timeout = 1000
+      } else if (len < 25000) {
+        num = 1000
+        timeout = 1200
+      } else if (len < 50000) {
+        num = 1500
+        timeout = 1500
+      } else {
+        num = 2000
+        timeout = 2500
       }
-      if (!done) this._handleAsyncList()
-    }, 15)
+      if (num > len) {
+        num = len
+        done = true
+      }
+      for (let i = 0; i < num; i++) {
+        const [type, args] = asyncList.shift()
+        this.insertSync(type, args)
+      }
+      if (!done) raf(() => this._handleAsyncList(timeout))
+    }, timeout)
   }
   _injectGlobal() {
     each(this._global, (val, name) => {
diff --git a/src/lib/util.js b/src/lib/util.js
index e9fdf65..5e4827f 100644
--- a/src/lib/util.js
+++ b/src/lib/util.js
@@ -6985,6 +6985,73 @@ export var pxToNum = _.pxToNum = (function (exports) {
     return exports;
 })({});
 
+/* ------------------------------ raf ------------------------------ */
+
+export var raf = _.raf = (function (exports) {
+    /* Shortcut for requestAnimationFrame.
+     *
+     * Use setTimeout if native requestAnimationFrame is not supported.
+     */
+
+    /* example
+     * const id = raf(function tick() {
+     *     // Animation stuff
+     *     raf(tick);
+     * });
+     * raf.cancel(id);
+     */
+
+    /* typescript
+     * export declare namespace raf {
+     *     function cancel(id: number);
+     * }
+     * export declare function raf(cb: Function): number;
+     */
+
+    /* dependencies
+     * now isBrowser 
+     */
+
+    var raf, cancel;
+    var lastTime = 0;
+
+    if (isBrowser) {
+        raf = window.requestAnimationFrame;
+        cancel = window.cancelAnimationFrame;
+        var vendors = ['ms', 'moz', 'webkit', 'o'];
+
+        for (var i = 0, len = vendors.length; i < len && !raf; i++) {
+            raf = window[vendors[i] + 'RequestAnimationFrame'];
+            cancel =
+                window[vendors[i] + 'CancelAnimationFrame'] ||
+                window[vendors[i] + 'CancelRequestAnimationFrame'];
+        }
+    }
+
+    raf =
+        raf ||
+        function(cb) {
+            var curTime = now();
+            var timeToCall = Math.max(0, 16 - (curTime - lastTime));
+            var id = setTimeout(function() {
+                cb(curTime + timeToCall);
+            }, timeToCall);
+            lastTime = curTime + timeToCall;
+            return id;
+        };
+
+    cancel =
+        cancel ||
+        function(id) {
+            clearTimeout(id);
+        };
+
+    raf.cancel = cancel;
+    exports = raf;
+
+    return exports;
+})({});
+
 /* ------------------------------ rmCookie ------------------------------ */
 
 export var rmCookie = _.rmCookie = (function (exports) {
diff --git a/src/style/style.scss b/src/style/style.scss
index 2524df6..0f3fc3d 100644
--- a/src/style/style.scss
+++ b/src/style/style.scss
@@ -10,7 +10,6 @@
   height: 100%;
   z-index: 100000;
   color: $gray-dark;
-  transform: translateZ(0);
   font-family: $font-family;
   font-size: $font-size;
   direction: ltr;