Skip to content

FEMessage/log-viewer

Repository files navigation

log-viewer

Build Status NPM Download NPM Version NPM License PRs Welcome Automated Release Notes by gren

log-viewer is a vue component which can display terminal log in browser with high performance.

new-log

中文文档

Table of Contents

Features

  • Process some special characters in the log stream
  • High performance, and process large amounts of data without jamming
  • Customize loading status
  • Auto scroll to the bottom

⬆ Back to Top

Install

yarn add @femessage/log-viewer

⬆ Back to Top

Usage

<log-viewer :log="log" :loading="isLoading" />

⬆ Back to Top

Links

⬆ Back to Top

Reference

⬆ Back to Top

Performance

Virtual scrolling use the component:https://github.com/tangbc/vue-virtual-scroll-list

Achieve internal use 'item-mode' so that its performance is better than the 'vfor-mode'.

Memory Usage

Use 100,000 lines to test.

item-mode

The Memory before the component mount: 36.5MB
The Memory after the component mounted: 48MB
Memory Usage: 11.5MB
图片.gif

vfor-mode

The Memory before the component mount: 43MB
The Memory after the component mounted: 221MB
Memory Usage: 178MB

item-10e4.gif

Render timeline

Also use 100,000 lines to test.

item-mode

Render time: 0.63ms
Patch time: 72.18ms
Total time: 72.85ms
item-1e5.gif

vfor-mode

Render time: 933.05ms
Patch time: 23.81ms
Total time: 956.86ms
v-for-1e5.gif

⬆ Back to Top

Contributing

For those who are interested in contributing to this project, such as:

  • report a bug
  • request new feature
  • fix a bug
  • implement a new feature

Please refer to our contributing guide.

⬆ Back to Top

Contributors

Thanks goes to these wonderful people (emoji key):

snowlocked
snowlocked

💻 📖 ⚠️
EVILLT
EVILLT

💻

This project follows the all-contributors specification. Contributions of any kind welcome!

⬆ Back to Top

License

MIT

⬆ Back to Top