Увеличение объема памяти при рендеринге 50 строк данных в v-data-таблице с использованием vue-infinite-loader - PullRequest
Новая
       23

Увеличение объема памяти при рендеринге 50 строк данных в v-data-таблице с использованием vue-infinite-loader

1 голос
/ 11 апреля 2019

У меня проблема с переполнением памяти при использовании vue-infinite-loading и / или v-data-table, которая используется для визуализации данных таблицы.в файле .vue.Я пытаюсь понять, почему выборка 50 строк данных, когда запускается бесконечный загрузчик, размером около 100 КБ, приводит к увеличению Chrome и IE примерно на 30 МБ !!!

Каждый раз, когда бесконечный загрузчик получаетпри вызове внизу страницы он выбирает данные (50 строк с примерно 6 столбцами простых данных), я получаю, а затем отправляю данные в массив «список» в ответе ajax, тогда бесконечный загрузчик vue затем обрабатывает ихвнизу таблицы v-data-table.

Но каждый раз, когда я делаю новую выборку, объем памяти, который используется IE и Chrome, составляет более 30 МБ.Таким образом, после нескольких попыток память распухла и заглохла.Несмотря на то, что объем извлекаемых данных составляет около 100 КБ.

Я извлекаю данные объемом 100 КБ, что составляет 50 строк.Когда я получаю данные, я помещаю их в список, подобный этому 

this.list.push(...response.data)

//tried with same memory bloat issue
//this.list = this.list.concat(response.data)

// tried with same memory bloat issue
//this.list = [].concat(this.list, response.data);

Где данные - это простой объект с примерно 6 свойствами, которые являются целыми числами и строками 

public class GetRecordsReturnViewModel
{
    public int Id { get; set; }
    public DateTime? StartDate { get; set; }
    public DateTime? EndDate { get; set; }
    public string StartDateString { get; set; }
    public string EndDateString { get; set; }
    public string WitnessName { get; set; }
    public string SourceCode { get; set; }
    public string JobsiteName { get; set; }
    public string ShipName { get; set; }
    public string EmployerCode { get; set; }

}

, а список - это массив этих объектов.

list: {
  get() {
    return this.$store.state.records.list
  },
  set(value) {
    this.$store.commit('records/listUpdate', value)
  }
},

, а мутация и компонент указаны ниже в файле index.js 

const records = {
  namespaced: true,
  state: {
    list: [],
    // other suff
  },
  mutations: {
    listUpdate(state, value) {
      state.list = value
    },
    // other stuff
  },
}

В моем файле Vue есть это для отображения HTML для таблицы при бесконечной загрузке 

<div class="results-table-wrapper">
  <v-data-table style="" class="max-height-scrollable" :headers="listHeaders" :items="list" :pagination.sync="pagination" hide-actions>

    <template slot="headerCell" slot-scope="props">
                    <span @click="resetForSort(props.header)">{{ props.header.text }}</span>
                </template>

    <template slot="items" slot-scope="props">

                    <tr>

                        <td style="cursor: pointer; color: #1976d2;" @click="routeToListItem(props.item.id)"><span>{{ props.item.id }}</span></td>

                        <td><span>{{ props.item.witnessName }}</span></td>
                        <td><span>{{ props.item.sourceCode }}</span></td>

                        <td><span>{{ props.item.startDateString }}</span></td>
                        <td><span>{{ props.item.endDateString }}</span></td>

                        <td>
                            <span >{{ props.item.jobsiteName }}</span>
                            <span ><br /></span>
                            <span >{{ props.item.shipName }}</span>
                        </td>

                        <td><span>{{ props.item.employerCode }}</span></td>

                    </tr>
                </template>

    <template slot="no-data">
                    <p class="text-xs-center" v-show="!listHasItems">Use at least 1 filter and press the search button.</p>
                </template>
  </v-data-table>
</div>
<infinite-loading @infinite="infiniteHandler" ref="infiniteLoading" v-show="showList == true">
  <span slot="no-results">
                No records found.
            </span>
  <span slot="no-more">
                No more records.
            </span>
  <span slot="spinner">
                <font-awesome-icon icon="circle-notch" spin />
            </span>
</infinite-loading>​
...