|
22 | 22 | </a>
|
23 | 23 | </p>
|
24 | 24 |
|
25 |
| -<p> |
26 |
| - <i>If you are looking for a vue component which support big amount data list with high scroll performance, now you are in the right place!</i> |
27 |
| -</p> |
28 |
| - |
29 | 25 | * [Advantages](#advantages)
|
30 | 26 | * [Live demos](#live-demos)
|
| 27 | +* [Performance comparison](#performance-comparison) |
| 28 | + * [Build time wasted](#build-time-wasted) |
| 29 | + * [Total memory used](#total-memory-used) |
31 | 30 | * [How it works](#how-it-works)
|
32 | 31 | * [Simple usage](#simple-usage)
|
33 | 32 | * [Using by npm module](#using-by-npm-module)
|
|
66 | 65 | Besides, you can also compare the experience which **without using** virtual-list here: [without-virtual-list](https://tangbc.github.io/vue-virtual-scroll-list/demos/without-virtual-list).
|
67 | 66 |
|
68 | 67 |
|
| 68 | +## Performance comparison |
| 69 | + |
| 70 | +According to the demos above, here are lists of approximate statistics: |
| 71 | + |
| 72 | +#### Build time wasted |
| 73 | + |
| 74 | +| Count | item-mode | vfor-mode | without-virtual-list | |
| 75 | +|-------------|-----------|-----------|----------------------| |
| 76 | +| 1,000 | 8 ms | 35 ms | 220 ms | |
| 77 | +| 10,000 | 10 ms | 170 ms | 1500 ms | |
| 78 | +| 100,000 | 20 ms | 1300 ms | Browser crash! | |
| 79 | + |
| 80 | +#### Total memory used |
| 81 | + |
| 82 | +| Count | item-mode | vfor-mode | without-virtual-list | |
| 83 | +|-------------|-----------|-----------|----------------------| |
| 84 | +| 1,000 | 15 MB | 80 MB | 200 MB | |
| 85 | +| 10,000 | 25 MB | 120 MB | 220 MB | |
| 86 | +| 100,000 | 55 MB | 550 MB | Browser crash! | |
| 87 | + |
69 | 88 | ## How it works
|
70 | 89 |
|
71 | 90 | <img src="https://tangbc.github.io/github-images/virtual-scroll-list-how-works.gif">
|
|
0 commit comments