|
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