lxm_front/eruda
1
0
Fork 0
mirror of synced 2025-12-07 22:18:17 +08:00
Code Issues Projects Releases Wiki Activity

perf(log): rendering

Browse Source
This commit is contained in:
redhoodsu
2019-11-01 11:05:21 +08:00
parent 665b3599ba
commit 848158d407
2 changed files with 101 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/Console/Logger.js
View File

@@ -18,7 +18,8 @@ import {
each,
toArr,
keys,
last
last,
debounce
} from '../lib/util'
let id = 0
@@ -384,6 +385,14 @@ export default class Logger extends Emitter {
const { targetGroup } = log
targetGroup.collapsed ? this._openGroup(log) : this._collapseGroup(log)
}
_updateTopSpace(height) {
this._topSpaceHeight = height
this._$topSpace.css({ height })
}
_updateBottomSpace(height) {
this._bottomSpaceHeight = height
this._$bottomSpace.css({ height })
}
_updateLogHeight(log) {
if (!log.isAttached()) {
this._fakeEl.appendChild(log.el)
@@ -399,7 +408,7 @@ export default class Logger extends Emitter {
const idx = displayLogs.indexOf(log)
if (idx > -1) {
displayLogs.splice(idx, 1)
this._el.removeChild(log.el)
this._renderViewport()
}
}
// Binary search
@@ -407,18 +416,17 @@ export default class Logger extends Emitter {
if (!this._filterLog(log) || log.collapsed) return
const displayLogs = this._displayLogs
const el = this._el
if (displayLogs.length === 0) {
el.appendChild(log.el)
displayLogs.push(log)
this._renderViewport()
return
}
const lastDisplayLog = last(displayLogs)
if (log.id > lastDisplayLog.id) {
el.appendChild(log.el)
displayLogs.push(log)
this._renderViewport()
return
}
@@ -444,12 +452,12 @@ export default class Logger extends Emitter {
}
if (middleLog.id < log.id) {
middleLog.el.insertAdjacentElement('afterend', log.el)
displayLogs.splice(middleIdx + 1, 0, log)
} else {
middleLog.el.insertAdjacentElement('beforebegin', log.el)
displayLogs.splice(middleIdx, 0, log)
}
this._renderViewport()
}
_handleAsyncList() {
const asyncList = this._asyncList
@@ -575,5 +583,36 @@ export default class Logger extends Emitter {
self._openGroup($el.get(0).log)
})
const renderViewport = debounce(() => this._renderViewport(), 15)
this._$container.on('scroll', renderViewport)
}
_renderViewport() {
const { scrollTop, offsetHeight } = this._container
const top = scrollTop
const bottom = scrollTop + offsetHeight
const displayLogs = this._displayLogs
let topSpaceHeight = 0
let bottomSpaceHeight = 0
let currentHeight = 0
this._$el.html('')
for (let i = 0, len = displayLogs.length; i < len; i++) {
const { el, height } = displayLogs[i]
if (currentHeight > bottom) {
bottomSpaceHeight += height
} else if (currentHeight + height > top) {
this._el.appendChild(el)
} else if (currentHeight < top) {
topSpaceHeight += height
}
currentHeight += height
}
this._updateTopSpace(topSpaceHeight)
this._updateBottomSpace(bottomSpaceHeight)
}
}

99
test/console.js
View File

@@ -2,17 +2,26 @@ describe('console', function() {
let tool = eruda.get('console')
tool.config.set('asyncRender', false)
let $tool = $('.eruda-console')
let logger = tool._logger
function log(i) {
return logs()[i].el
}
function logs() {
return logger._displayLogs
}
beforeEach(function() {
eruda.show('console')
tool._logger.silentClear()
logger.silentClear()
})
it('string', function() {
let text = '<span>This is a log</span>'
tool.log(text)
expect($tool.find('.eruda-log')).toContainText(text)
expect($(log(0))).toContainText(text)
})
it('clear', function() {
@@ -21,7 +30,7 @@ describe('console', function() {
it('recognize url', function() {
tool.log('http://liriliri.github.io/eruda/?plugin=fps')
expect($tool.find('.eruda-log')).toContainHtml(
expect($(log(0))).toContainHtml(
'<a href="http://liriliri.github.io/eruda/?plugin=fps" target="_blank">http://liriliri.github.io/eruda/?plugin=fps</a>'
)
})
@@ -30,69 +39,71 @@ describe('console', function() {
let obj = { a: 1 }
tool.log(obj)
expect($tool.find('.eruda-log')).toContainText('Object { a: 1 }')
$tool.find('.eruda-log').click()
expect($(log(0))).toContainText('Object { a: 1 }')
})
it('html', function() {
tool.html('<span class="color-blue">Blue</span>')
expect($tool.find('.eruda-html')).toContainElement('span.color-blue')
expect($(log(0))).toContainElement('span.color-blue')
})
it('timing', function() {
tool.time('eruda')
tool.timeEnd('eruda')
expect($tool.find('.eruda-info')).toHaveText(/eruda: [.\d]+ms/)
expect($(log(0))).toHaveText(/eruda: [.\d]+ms/)
})
it('error', function() {
tool.error(new Error('error test'))
expect($tool.find('.eruda-error')).toContainElement('.eruda-stack')
expect($tool.find('.eruda-error')).toContainText('error test')
expect($(log(0))).toContainElement('.eruda-stack')
expect($(log(0))).toContainText('error test')
})
it('assert', function() {
tool.assert(true, 'assert')
expect($tool.find('.eruda-log-item')).toHaveLength(0)
expect(logs()).toHaveLength(0)
tool.assert(false, 'assert')
expect($tool.find('.eruda-error')).toHaveLength(1)
expect(logs()).toHaveLength(1)
})
it('count', function() {
tool.count('test')
tool.count('test')
expect($tool.find('.eruda-info').eq(1)).toContainText('test: 2')
expect($(log(1))).toContainText('test: 2')
})
describe('substitution', function() {
it('number', function() {
tool.log('Eruda is %d', 1.2, 'year old')
expect($tool.find('.eruda-log')).toContainText('Eruda is 1 year old')
expect($(log(0))).toContainText('Eruda is 1 year old')
logger.silentClear()
tool.log('%i', 1.2, 'year old')
expect($tool.find('.eruda-log')).toContainText('1 year old')
expect($(log(0))).toContainText('1 year old')
logger.silentClear()
tool.log('%f', 1.2, 'year old')
expect($tool.find('.eruda-log')).toContainText('1.2 year old')
expect($(log(0))).toContainText('1.2 year old')
})
it('string', function() {
tool.log('My name is %s', 'eruda')
expect($tool.find('.eruda-log')).toContainText('My name is eruda')
expect($(log(0))).toContainText('My name is eruda')
})
it('object', function() {
tool.log('Object is %O', { a: 1 })
expect($tool.find('.eruda-log')).toContainText('Object is { a: 1 }')
expect($(log(0))).toContainText('Object is { a: 1 }')
logger.silentClear()
tool.log('Dom is %o', document.createElement('script'))
expect($tool.find('.eruda-log')).toContainText('Dom is <script></script>')
expect($(log(0))).toContainText('Dom is <script></script>')
})
it('style', function() {
tool.log('%cblue%cgreen', 'color:blue', 'color:green')
expect($tool.find('.eruda-log')).toContainText(
expect($(log(0))).toContainText(
'bluegreen'
)
})
@@ -100,8 +111,8 @@ describe('console', function() {
it('Repeat log', function() {
for (let i = 0; i < 10; i++) tool.log(1)
let $log = $tool.find('.eruda-log-item')
expect($log).toHaveLength(1)
expect($log.find('.eruda-count')).toContainText('10')
expect(logs()).toHaveLength(1)
expect($(log(0))).toContainText('10')
})
})
@@ -113,20 +124,20 @@ describe('console', function() {
it('sort keys', function() {
tool.table([{ a: 1 }, { d: 2, a: 2 }, { c: 1 }])
expect($tool.find('.eruda-table thead tr')).toContainHtml(
expect($(log(0)).find('.eruda-table thead tr')).toContainHtml(
'<th>(index)</th><th>a</th><th>c</th><th>d</th>'
)
})
it('basic', function() {
tool.table([{ test: 1 }, { test: 2, test2: 3 }])
expect($tool.find('.eruda-table tbody tr')).toHaveLength(2)
expect($tool.find('.eruda-table thead th')).toHaveLength(3)
expect($(log(0)).find('.eruda-table tbody tr')).toHaveLength(2)
expect($(log(0)).find('.eruda-table thead th')).toHaveLength(3)
})
it('filter', function() {
tool.table([{ test: 1 }, { test: 2, test2: 3 }], 'test')
expect($tool.find('.eruda-table thead th')).toHaveLength(2)
expect($(log(0)).find('.eruda-table thead th')).toHaveLength(2)
})
})
@@ -146,7 +157,7 @@ describe('console', function() {
}
})
tool.log(obj)
expect($tool.find('.eruda-logs li').length).toEqual(1)
expect(logs()).toHaveLength(1)
tool.filter('all')
})
@@ -158,34 +169,34 @@ describe('console', function() {
.error('error')
.warn('warn')
.debug('debug')
expect($tool.find('.eruda-log-item')).toHaveLength(5)
expect(logs()).toHaveLength(5)
tool.filter('info')
expect($tool.find('.eruda-log-item')).toHaveLength(1)
expect($tool.find('.eruda-info')).toHaveLength(1)
expect(logs()).toHaveLength(1)
expect(log(0).log.type).toBe('info')
tool.filter('error')
expect($tool.find('.eruda-log-item')).toHaveLength(1)
expect($tool.find('.eruda-error')).toHaveLength(1)
expect(logs()).toHaveLength(1)
expect(log(0).log.type).toBe('error')
tool.filter('warn')
expect($tool.find('.eruda-log-item')).toHaveLength(1)
expect($tool.find('.eruda-warn')).toHaveLength(1)
expect(logs()).toHaveLength(1)
expect(log(0).log.type).toBe('warn')
tool.filter('debug')
expect($tool.find('.eruda-log-item')).toHaveLength(1)
expect($tool.find('.eruda-debug')).toHaveLength(1)
expect(logs()).toHaveLength(1)
expect(log(0).log.type).toBe('debug')
tool.filter('all')
})
it('regex', function() {
tool.log('test').log('test2')
expect($tool.find('.eruda-log-item')).toHaveLength(2)
expect(logs()).toHaveLength(2)
tool.filter(/test2/)
expect($tool.find('.eruda-log-item')).toHaveLength(1)
expect($tool.find('.eruda-log')).toContainText('test2')
expect(logs()).toHaveLength(1)
expect($(log(0))).toContainText('test2')
tool.filter('all')
})
@@ -197,19 +208,19 @@ describe('console', function() {
it('max number', function() {
config.set('maxLogNum', '10')
for (let i = 0; i < 20; i++) tool.log(i)
expect($tool.find('.eruda-log-item')).toHaveLength(10)
expect(logs()).toHaveLength(10)
})
it('override console', function() {
config.set('overrideConsole', true)
console.log('test')
expect($tool.find('.eruda-log-item')).toContainText('test')
expect($(log(0))).toContainText('test')
})
it('display extra info', function() {
config.set('displayExtraInfo', true)
tool.log('test')
expect($tool.find('.eruda-logs li')).toContainElement('.eruda-header')
expect($(log(0))).toContainElement('.eruda-header')
})
})
@@ -223,9 +234,9 @@ describe('console', function() {
it('filter', function() {
tool.log('test')
tool.warn('test')
expect($tool.find('.eruda-logs li')).toHaveLength(2)
expect(logs()).toHaveLength(2)
$('.eruda-filter[data-filter="warn"]').click()
expect($tool.find('.eruda-logs li')).toHaveLength(1)
expect(logs()).toHaveLength(1)
$('.eruda-filter[data-filter="all"]').click()
})
})
@@ -234,7 +245,7 @@ describe('console', function() {
it('js', function() {
$tool.find('textarea').val('1+2')
$('.eruda-execute').click()
expect($tool.find('.eruda-output')).toContainText('3')
expect($(log(1))).toContainText('3')
})
})