|
26 | 26 |
|
27 | 27 | * [Advantages](#advantages)
|
28 | 28 | * [Live demos](#live-demos)
|
29 |
| -* [Performance comparison](#performance-comparison) |
30 |
| - * [Build time wasted](#build-time-wasted) |
31 |
| - * [Total memory used](#total-memory-used) |
32 | 29 | * [How it works](#how-it-works)
|
33 | 30 | * [Simple usage](#simple-usage)
|
34 | 31 | * [vfor-mode](#vfor-mode)
|
35 | 32 | * [item-mode](#item-mode)
|
36 | 33 | * [variable height](#variable-height)
|
| 34 | +* [Performance comparison](#performance-comparison) |
| 35 | + * [Build time wasted](#build-time-wasted) |
| 36 | + * [Total memory used](#total-memory-used) |
37 | 37 | * [Attentions](#attentions)
|
38 | 38 | * [**Props type**](#props-type)
|
39 | 39 | * [Public methods](#public-methods)
|
@@ -63,26 +63,6 @@ The main difference between `item-mode` and `vfor-mode` is that: `item-mode` mak
|
63 | 63 | 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).
|
64 | 64 |
|
65 | 65 |
|
66 |
| -## Performance comparison |
67 |
| - |
68 |
| -According to the demos above, here are lists of approximate statistics: |
69 |
| - |
70 |
| -#### Build time wasted |
71 |
| - |
72 |
| -| Build amount | item-mode | vfor-mode | *without virtual list* | |
73 |
| -|-------------:|-----------|-----------|------------------------| |
74 |
| -| **1,000** | 8 ms | 35 ms | 220 ms | |
75 |
| -| **10,000** | 10 ms | 170 ms | 1500 ms | |
76 |
| -| **100,000** | 20 ms | 1300 ms | Browser crash! | |
77 |
| - |
78 |
| -#### Total memory used |
79 |
| - |
80 |
| -| Build amount | item-mode | vfor-mode | *without virtual list* | |
81 |
| -|-------------:|-----------|-----------|------------------------| |
82 |
| -| **1,000** | 10 MB | 80 MB | 200 MB | |
83 |
| -| **10,000** | 25 MB | 120 MB | 220 MB | |
84 |
| -| **100,000** | 55 MB | 550 MB | Browser crash! | |
85 |
| - |
86 | 66 | ## How it works
|
87 | 67 |
|
88 | 68 | <img src="https://tangbc.github.io/github-images/virtual-scroll-list-how-works.gif">
|
@@ -179,6 +159,27 @@ If you assign `variable` as `true`, **do not** set inline style height inside `<
|
179 | 159 | **More use ways or getting start you can refer to these clearly [demos](https://github.com/tangbc/vue-virtual-scroll-list/tree/master/demos) or [test suites](https://github.com/tangbc/vue-virtual-scroll-list/tree/master/test).**
|
180 | 160 |
|
181 | 161 |
|
| 162 | +## Performance comparison |
| 163 | + |
| 164 | +According to the demos above, here are lists of approximate statistics: |
| 165 | + |
| 166 | +#### Build time wasted |
| 167 | + |
| 168 | +| Build amount | item-mode | vfor-mode | *without virtual list* | |
| 169 | +|-------------:|-----------|-----------|------------------------| |
| 170 | +| **1,000** | 8 ms | 35 ms | 220 ms | |
| 171 | +| **10,000** | 10 ms | 170 ms | 1500 ms | |
| 172 | +| **100,000** | 20 ms | 1300 ms | Browser crash! | |
| 173 | + |
| 174 | +#### Total memory used |
| 175 | + |
| 176 | +| Build amount | item-mode | vfor-mode | *without virtual list* | |
| 177 | +|-------------:|-----------|-----------|------------------------| |
| 178 | +| **1,000** | 10 MB | 80 MB | 200 MB | |
| 179 | +| **10,000** | 25 MB | 120 MB | 220 MB | |
| 180 | +| **100,000** | 55 MB | 550 MB | Browser crash! | |
| 181 | + |
| 182 | + |
182 | 183 | ## Attentions
|
183 | 184 |
|
184 | 185 | * Must assign the `:key` property on `<item>` component or dom frag with `v-for` directive.
|
|
0 commit comments