Блог

Главная - Вопросы по программированию - Раздувание памяти при рендеринге 50 строк данных в таблице v-data с использованием vue-infinite-loader

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

#javascript #html #vue.js #infinite-scroll

#javascript #HTML #vue.js #бесконечная прокрутка

Вопрос:

У меня возникла проблема с раздуванием памяти при использовании vue-infinite-loading и / или таблицы v-data, которая используется для рендеринга табличных данных. в файле .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);

Где 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>​