log-viewer

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

中文文档

Table of Contents

• Features
• Install
• Usage
• Links
• Reference
• Performance
  • Memory Usage
    • item-mode
    • vfor-mode
  • Render timeline
    • item-mode
    • vfor-mode
• Contributing
• Contributors
• License

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

• design doc

⬆ Back to Top

Reference

• thanks to react-lazylog
• travis-ci logs
• http://jafrog.com/2013/11/23/colors-in-terminal.html
• https://en.wikipedia.org/wiki/ANSI_escape_code

⬆ 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

vfor-mode

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

Render timeline

Also use 100,000 lines to test.

item-mode

Render time: 0.63ms
Patch time: 72.18ms
Total time: 72.85ms

vfor-mode

Render time: 933.05ms
Patch time: 23.81ms
Total time: 956.86ms

⬆ 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 💻 📖 ⚠️

EVILLT 💻

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

⬆ Back to Top

License

MIT

⬆ Back to Top