perf(console): reduce memory usage, 50% drop

src/Console/Log.hbs

@@ -1,28 +1,26 @@
-<li {{{class 'log-container'}}} data-id="{{id}}" data-type="{{type}}">
-    {{#if displayHeader}}
-        <div {{{class 'header'}}}>
-            {{#repeat group.indentLevel}}
-                <div {{{class 'nesting-level'}}}></div>
-            {{/repeat}}
-            <div {{{class 'time-container'}}}>
-                <span data-mark="time">{{time}}</span> <span>{{from}}</span>
-            </div>
-        </div>
-    {{/if}}
-    <div {{{class (concat type ' log-item')}}}>
+{{#if displayHeader}}
+    <div {{{class 'header'}}}>
         {{#repeat group.indentLevel}}
             <div {{{class 'nesting-level'}}}></div>
         {{/repeat}}
-        {{#if icon}}
-            <div {{{class 'icon-container'}}}>
-                <span {{{class (concat 'icon icon-' icon)}}}></span>
-            </div>
-        {{/if}}
-        <div {{{class 'count-container hidden'}}}>
-            <div {{{class 'count'}}} data-mark="count"></div>
-        </div>    
-        <div {{{class 'log-content-wrapper'}}}>
-            <div {{{class 'log-content'}}}>{{{msg}}}</div>
+        <div {{{class 'time-container'}}}>
+            <span>{{time}}</span> <span>{{from}}</span>
         </div>
     </div>
-</li>
+{{/if}}
+<div {{{class (concat type ' log-item')}}}>
+    {{#repeat group.indentLevel}}
+        <div {{{class 'nesting-level'}}}></div>
+    {{/repeat}}
+    {{#if icon}}
+        <div {{{class 'icon-container'}}}>
+            <span {{{class (concat 'icon icon-' icon)}}}></span>
+        </div>
+    {{/if}}
+    <div {{{class 'count-container hidden'}}}>
+        <div {{{class 'count'}}}></div>
+    </div>    
+    <div {{{class 'log-content-wrapper'}}}>
+        <div {{{class 'log-content'}}}>{{{msg}}}</div>
+    </div>
+</div>

src/Console/Log.js

@@ -30,7 +30,8 @@ import {
   each,
   trim,
   lowerCase,
-  keys
+  keys,
+  $
 } from '../lib/util'
 
 export default class Log {
@@ -52,6 +53,8 @@ export default class Log {
     this.displayHeader = displayHeader
     this.ignoreFilter = ignoreFilter
     this.collapsed = false
+    this.el = null
+    this._$el = null
 
     if (displayHeader) {
       this.time = getCurTime()
@@ -83,87 +86,69 @@ export default class Log {
       } else {
         this.show()
       }
-      return true
-    } else {
-      return false
     }
   }
   hide() {
-    let msg = this._formattedMsg
+    this._$el.addClass('eruda-hidden')
 
-    msg = msg.replace(
-      '"eruda-log-container"',
-      '"eruda-log-container eruda-hidden"'
-    )
-
-    this._formattedMsg = msg
+    return this
   }
   show() {
-    let msg = this._formattedMsg
+    this._$el.rmClass('eruda-hidden')
 
-    msg = msg.replace(
-      '"eruda-log-container eruda-hidden"',
-      '"eruda-log-container"'
-    )
-
-    this._formattedMsg = msg
+    return this
   }
   updateIcon(icon) {
-    let msg = this._formattedMsg
+    const $icon = this._$el.find('.eruda-icon')
 
-    msg = msg.replace(
-      /"eruda-icon eruda-icon-[\w-]+"/,
-      `"eruda-icon eruda-icon-${icon}"`
-    )
-
-    this._formattedMsg = msg
+    $icon.rmAttr('class').addClass(['eruda-icon', `eruda-icon-${icon}`])
 
     return this
   }
   addCount() {
     this.count++
     const count = this.count
-    let msg = this._formattedMsg
+    const $el = this._$el
+    const $container = $el.find('.eruda-count-container')
+    const $icon = $el.find('.eruda-icon-container')
+    const $count = $container.find('.eruda-count')
     if (count === 2) {
-      msg = msg.replace(
-        'eruda-count-container eruda-hidden',
-        'eruda-count-container'
-      )
+      $container.rmClass('eruda-hidden')
     }
-    msg = msg.replace(/data-mark="count">\d*/, 'data-mark="count">' + count)
-    msg = msg.replace(
-      'class="eruda-icon-container"',
-      'class="eruda-icon-container eruda-hidden"'
-    )
-
-    this._formattedMsg = msg
+    $count.text(count)
+    $icon.addClass('.eruda-hidden')
 
     return this
   }
   groupEnd() {
-    let msg = this._formattedMsg
+    const $el = this._$el
+    const $lastNesting = $el
+      .find('.eruda-nesting-level:not(.eruda-group-closed)')
+      .last()
 
-    const mark = '"eruda-nesting-level"'
-    const lastIdx = msg.lastIndexOf(mark)
-    const len = lastIdx + mark.length - 1
-    msg = msg.slice(0, len) + ' eruda-group-closed"' + msg.slice(len)
-    this._formattedMsg = msg
+    $lastNesting.addClass('eruda-group-closed')
 
     return this
   }
   updateTime(time) {
-    let msg = this._formattedMsg
+    const $el = this._$el
+    const $container = $el.find('.eruda-time-container')
 
     if (this.time) {
-      msg = msg.replace(/data-mark="time">(.*?)</, `data-mark="time">${time}<`)
+      $container
+        .find('span')
+        .eq(0)
+        .text(time)
       this.time = time
-      this._formattedMsg = msg
     }
 
     return this
   }
-  content() {
-    return this._formattedMsg
+  html() {
+    return this.el.outerHTML
+  }
+  text() {
+    return this.el.textContent
   }
   _needSrc() {
     const { type, args } = this
@@ -193,6 +178,12 @@ export default class Log {
       )
     }
   }
+  destroy() {
+    this.detach()
+  }
+  detach() {
+    this._$el.remove()
+  }
   _formatMsg() {
     let { args } = this
     const { type, id, displayHeader, time, from, group } = this
@@ -270,7 +261,14 @@ export default class Log {
     if (!this._needSrc() || !Log.lazyEvaluation) {
       delete this.args
     }
-    this._formattedMsg = msg
+
+    const $el = $(document.createElement('li'))
+    $el
+      .addClass('eruda-log-container')
+      .data({ id, type })
+      .html(msg)
+    this._$el = $el
+    this.el = $el.get(0)
   }
   static click(type, log, $el, logger) {
     switch (type) {

src/Console/Logger.js

@@ -10,7 +10,6 @@ import {
   uniqId,
   isRegExp,
   isFn,
-  stripHtmlTag,
   $,
   Stack,
   isEmpty,
@@ -27,6 +26,7 @@ export default class Logger extends Emitter {
     this._style = evalCss(require('./Logger.scss'))
 
     this._$el = $el
+    this._el = $el.get(0)
     this._logs = []
     this._timer = {}
     this._count = {}
@@ -215,7 +215,6 @@ export default class Logger extends Emitter {
     const lastLog = this._lastLog
     lastLog.groupEnd()
     this._groupStack.pop()
-    this._refreshLogUi(lastLog)
   }
   input(jsCode) {
     this.insert({
@@ -247,25 +246,21 @@ export default class Logger extends Emitter {
     return this.insert('html', args)
   }
   render() {
-    let html = ''
-    let logs = this._logs
-
-    logs = this._filterLogs(logs)
+    const logs = this._filterLogs(this._logs)
 
+    this._$el.html('')
     for (let i = 0, len = logs.length; i < len; i++) {
-      html += logs[i].content()
+      this._el.appendChild(logs[i].el)
     }
 
-    this._$el.html(html)
     this.scrollToBottom()
 
     return this
   }
   insert(type, args) {
     const logs = this._logs
-    const $el = this._$el
     const groupStack = this._groupStack
-    const el = $el.get(0)
+    const el = this._el
 
     const isAtBottom = el.scrollTop === el.scrollHeight - el.offsetHeight
 
@@ -303,7 +298,7 @@ export default class Logger extends Emitter {
       lastLog.addCount()
       if (log.time) lastLog.updateTime(log.time)
       log = lastLog
-      this._rmLogUi(lastLog)
+      lastLog.detach()
     } else {
       logs.push(log)
       this._lastLog = log
@@ -311,12 +306,12 @@ export default class Logger extends Emitter {
 
     if (this._maxNum !== 'infinite' && logs.length > this._maxNum) {
       const firstLog = logs[0]
-      this._rmLogUi(firstLog)
+      firstLog.destroy()
       logs.shift()
     }
 
     if (this._filterLog(log)) {
-      $el.append(log.content())
+      el.appendChild(log.el)
     }
 
     this.emit('insert', log)
@@ -362,19 +357,6 @@ export default class Logger extends Emitter {
 
     return ret
   }
-  _rmLogUi(log) {
-    const $container = this._$el.find(`li[data-id="${log.id}"]`)
-    if ($container.length > 0) {
-      $container.remove()
-    }
-  }
-  _refreshLogUi(log) {
-    const $container = this._$el.find(`li[data-id="${log.id}"]`)
-    if ($container.length > 0) {
-      $container.after(log.content())
-      $container.remove()
-    }
-  }
   _filterLogs(logs) {
     const filter = this._filter
 
@@ -386,7 +368,7 @@ export default class Logger extends Emitter {
     return logs.filter(log => {
       if (log.ignoreFilter) return true
       if (isFilterFn) return filter(log)
-      if (isFilterRegExp) return filter.test(stripHtmlTag(log.content()))
+      if (isFilterRegExp) return filter.test(log.text())
       return log.type === filter
     })
   }
@@ -400,7 +382,7 @@ export default class Logger extends Emitter {
 
     if (log.ignoreFilter) return true
     if (isFilterFn) return filter(log)
-    if (isFilterRegExp) return filter.test(stripHtmlTag(log.content()))
+    if (isFilterRegExp) return filter.test(log.text())
 
     return log.type === filter
   }
@@ -419,7 +401,6 @@ export default class Logger extends Emitter {
     const { targetGroup } = log
     targetGroup.collapsed = true
     log.updateIcon('caret-right')
-    this._refreshLogUi(log)
 
     this._updateGroup(log)
   }
@@ -427,7 +408,6 @@ export default class Logger extends Emitter {
     const { targetGroup } = log
     targetGroup.collapsed = false
     log.updateIcon('caret-down')
-    this._refreshLogUi(log)
 
     this._updateGroup(log)
   }
@@ -438,9 +418,8 @@ export default class Logger extends Emitter {
     let i = logs.indexOf(log) + 1
     while (i < len) {
       const log = logs[i]
-      if (log.checkGroup()) {
-        this._refreshLogUi(log)
-      } else if (log.group === targetGroup) {
+      log.checkGroup()
+      if (log.group === targetGroup) {
         break
       }
       i++

test/manual.html

@@ -166,7 +166,7 @@
         console.log(arr);
     });
     addClickEvent('heavy-log', () => {
-        for (let i = 0; i < 1000; i++) {
+        for (let i = 0; i < 5000; i++) {
             console.log(location, i);
         }
     });