В моих проектах Vuetifyjs мы используем довольно продвинутые сетки данных.Продвинутый в некотором смысле, он имеет кнопки и пункты меню.Что-то меня немного беспокоит в производительности рендеринга для сеток, которые содержат кнопки и пункты меню.В некоторых случаях для рендеринга сетки с 40-50 записями требуется до 700 мс.
Вопрос : Что я могу сделать, чтобы улучшить скорость рендеринга?
Известное решение : Очевидное решение состоит в том, чтобы иметь 10 записей на странице, но на данный момент это последнее средство
Примечание для стороны : Производительность обычных сеток без кнопок и элементов меню равна отлично
Взгляните на мой пример кодепа .Это все еще довольно просто, и вы можете ясно видеть медленный рендеринг, когда очищаете данные, покажите их снова.
<div id="app">
<v-app id="inspire">
Total Records: {{desserts.length}}
<v-btn @click="cleanData()">Clean Data</v-btn>
<v-btn @click="resetData()">Reset Data</v-btn>
<v-data-table :headers="headers" :items="desserts" class="elevation-1" hide-actions>
<template slot="items" slot-scope="props">
<td>{{ props.item.name }}</td>
<td class="text-xs-right">{{ props.item.calories }}</td>
<td class="text-xs-right">{{ props.item.fat }}</td>
<td class="text-xs-right">{{ props.item.carbs }}</td>
<td class="text-xs-right">{{ props.item.protein }}</td>
<td class="text-xs-right">{{ props.item.iron }}</td>
<td class="text-xs-right">
<v-menu bottom origin="center center" transition="scale-transition" offset-y>
<v-btn color="secondary" medium slot="activator">
<v-icon>more_horiz</v-icon>
</v-btn>
<v-list>
<v-list-tile v-for="item in menuItems" :key="item">
<v-list-tile-title>{{ item }}</v-list-tile-title>
</v-list-tile>
</v-list>
</v-menu>
<v-tooltip top>
<v-btn
color="success"
slot="activator"
medium
@click.stop="
"
>
<v-icon>arrow_forward</v-icon>
</v-btn>
<span>Move to next status</span>
</v-tooltip>
</td>
</template>
</v-data-table>
</v-app>
</div>