Pemprosesan Paginasi Array Besar di JavaScript: Mengoptimumkan Prestasi Aplikasi Elektron/Vue

Pemuatan langsung boleh membawa kepada masalah prestasi yang serius apabila berurusan dengan tatasusunan JavaScript yang besar yang mengandungi puluhan ribu objek dalam aplikasi front-end seperti elektron atau VUE. Artikel ini akan memperkenalkan cara menggunakan kaedah JavaScript's Array.Prototype.Slice () untuk membahagikan tatasusunan besar ke dalam kepingan kecil, dengan itu merealisasikan data paging atau memuatkan permintaan, dengan ketara meningkatkan kelajuan tindak balas aplikasi dan pengalaman pengguna, dan mengelakkan gagap yang disebabkan oleh pemprosesan data besar -besaran pada satu masa.

1. Cabaran prestasi yang ditimbulkan oleh dataset besar

Dalam aplikasi front-end moden, terutamanya aplikasi desktop (seperti elektron) atau aplikasi satu halaman kompleks (seperti VUE), sering diperlukan untuk memproses sejumlah besar data yang diperoleh dari pangkalan data belakang atau tempatan. Apabila data ini dimuatkan ke dalam ingatan sekaligus sebagai pelbagai JavaScript yang besar, ia boleh menyebabkan satu siri masalah prestasi, seperti:

• Penggunaan memori terlalu tinggi: puluhan ribu objek boleh mengambil beratus -ratus megabait atau memori yang lebih banyak, menyebabkan permohonan berjalan perlahan atau kemalangan.
• UI Rendering Stuttering: Apabila proses penyemak imbas atau rendering cuba untuk menjadikan sejumlah besar elemen DOM sekaligus, ia akan menyebabkan halaman bertindak perlahan -lahan dan pengalaman pengguna sangat miskin.
• Kelewatan pemprosesan data: Proses memakan masa meningkat dengan ketara apabila mencari, menapis, atau menyusun tatasusunan besar.

Dalam contoh kod asal, SuppliersData dan ClientsData yang diperoleh dari pangkalan data ODBC dihantar terus ke hujung depan dan disimpan di kedai komponen VUE. Jika tatasusunan ini mengandungi puluhan ribu rekod, mudah untuk menyebabkan masalah di atas.

 // latar belakang.js (proses utama elektron)
ipcmain.on ('init', (event, ... args) => {
    // ...
    pembekaldb.query ('pilih * dari fanfor0f_1')
        .THEN ((hasil) => {
            // Keputusan mungkin mengandungi puluhan ribu rekod event.sender.send ('pembekal', hasilnya)            
        })
    // ...
})

// vue frontend (proses rendering)
dipasang () {
    window.ipcrenderer.send ('init')
    window.ipcrenderer.receive ('pembekalData', (data) => {
        this.suppliersDataAvailable = true
        this.store.suppliers = data // terus menyimpan susunan besar})
}

2. Data paging dan strategi pemuatan atas permintaan

Untuk menyelesaikan kesesakan prestasi yang dibawa oleh set data yang besar, idea teras adalah untuk memecahkan beban pemuatan dan pemprosesan satu kali ke dalam blok yang lebih kecil dan terkawal. Dua strategi biasa adalah:

• Paginasi Data: Secara logik membahagikan keseluruhan data yang ditetapkan ke dalam beberapa halaman, dan hanya satu halaman data yang dimuatkan atau dipaparkan pada satu masa. Pengguna boleh menukar halaman dengan mengklik pada nombor halaman atau butang "Halaman Sebelum/Halaman Seterusnya".
• Lazy Loading: Muatkan secara dinamik atau menjadikan sebahagian daripada data mengikut interaksi pengguna (seperti menatal ke bahagian bawah halaman) atau melihat keperluan. Menatal maya adalah bentuk lanjutan pemuatan malas yang menjadikan hanya item data yang kini dapat dilihat oleh pengguna, bukan semua.

Kedua -dua strategi boleh dicapai dengan memisahkan susunan besar ke dalam tatasusunan kecil.

3. Gunakan Array.Prototype.Slice () untuk melaksanakan Paging Array

Kaedah Array.Prototype.Slice () JavaScript adalah alat yang sangat sesuai untuk melaksanakan paging array. Ia mengembalikan array baru yang diekstrak dari indeks permulaan dan akhir yang ditentukan (tidak termasuk indeks akhir) dari array asal tanpa mengubah suai array asal.

Sintaks asasnya ialah: arr.slice (startIndex, endindex)

Kita boleh menggunakan gelung, digabungkan dengan kaedah slice (), untuk membahagikan array besar ke dalam pelbagai tatasusunan kecil, setiap array kecil mewakili halaman data.

 /**
 * Split array besar ke dalam array nombor halaman saiz yang ditentukan* @param {array} largeArray array besar asal* @param {nombor} halaman bilangan elemen yang terkandung setiap halaman* @returns {array <ratray>} array yang mengandungi pelbagai susunan kecil (halaman)*/
Fungsi PaginateArray (LargeArray, Pagesize) {
    jika (! array.isArray (largeArray) || largeArray.length === 0) {
        kembali [];
    }
    jika (Pagesize  ({id: i, name: `item $ {i}`})); // Simulasi pelbagai 53000 objek const itemperpage = 100; // memaparkan 100 keping data setiap halaman const paginatedsuppliers = paginateArray (largedata, itemperpage);

console.log (`Panjang array mentah: $ {largedata.length}`); // 53000
console.log (`bilangan halaman selepas pemisahan: $ {paginatedsuppliers.length}`); // 530
console.log (`Data halaman pertama:`, paginatedsuppliers [0]); // objek yang mengandungi id 0-99 console.log (`data halaman terakhir:`, paginatedsuppliers [paginatedsuppliers.length - 1]); // objek yang mengandungi ID 52900-52999</ratray>

Dalam contoh ini, fungsi PaginateArray menerima saiz dan saiz halaman yang besar, dan kemudian mengembalikan array yang mengandungi semua tatasusunan paging.

4. Integrasi dalam aplikasi front-end

Untuk mengintegrasikan logik paging di atas ke dalam aplikasi elektron/vue anda, anda boleh mengikuti langkah -langkah berikut:

1. Pengambilalihan Data dan Penomboran:

   • Selepas mendapatkan array besar lengkap dalam proses utama elektron, ia boleh dihantar ke proses rendering tanpa menghantarnya dengan segera.
   • Sebagai alternatif, hantar data penuh ke proses rendering, tetapi proses rendering menanda data segera selepas menerimanya, dan bukannya menyimpannya secara langsung.
   • Hantar array kecil pertama selepas paging (data halaman pertama) ke proses rendering, atau ekstrak data halaman pertama dari array paging untuk paparan dalam proses rendering.

    // vue frontend (proses rendering) - data pemprosesan data yang lebih baik () {
       kembali {
           Allsuppliers: [], // Menyimpan pelbagai besar yang lengkap, tetapi mungkin tidak menyebabkan paginatedsupliers: [], // menyimpan semua tatasusunan kecil selepas paging. CURRENTSUPPLIERSPAGE: [], // Data halaman yang sedang dipaparkan kini tersedia. CurrentPageIndex: 0, // halaman indeks halaman semasa: 100, // saiz per halaman totalpages: 0,
           pembekalDataAvailable: palsu
       };
   },
   dipasang () {
       window.ipcrenderer.send ('init');
       window.ipcrenderer.receive ('pembekalData', (data) => {
           this.allSuppliers = data; // menerima data penuh ini.PaginatedSuppliers = this.paginateArray (this.allSuppliers, this.pagesize); // paginate this.totalpages = this.paginatedsuppliers.length;
           this.currentsuppliersPage = this.paginatedSuppliers [this.currentPageIndex]; // Tunjukkan halaman pertama ini.suppliersDataAvailable = true;
       });
   },
   Kaedah: {
       PaginateArray (LargeArray, Pagesize) {
           // ... (sama seperti pelaksanaan fungsi PaginateArray di atas)
           const paginatedArrays = [];
           untuk (biarkan i = 0; i <largearray.length i="halaman)" paginatedarrays.push pagesize kembali paginatedarrays gotopage jika> = 0 && pageIndex <this.totalpages this.currentpageindex="pageIndex;" this.currentsupplierspage="this.paginatedSuppliers" nextpage this.gotopage prevpage></this.totalpages></largearray.length>

2. Rendering ui:

   • Komponen VUE hanya mengikat dan menjadikan data dalam currentsupplierspage.
   • Menyediakan kawalan paging (nombor halaman, butang halaman/halaman seterusnya). Apabila pengguna mengklik, kaedah gotopage atau nextpage/prevPage dipanggil untuk mengemas kini CurrentPageIndex dan CurrentsuppliersPage.

    
   <dana>
       <h2> senarai pembekal (halaman {{currentPageIndex 1}} / {{totalPages}}) 
       <ul>
           <li v-for="pembekal dalam currentsupplierspage" : key="pembekal.id">
               {{pembekal.name}}
           </li>
       </ul>
       <butang disabled> Halaman sebelumnya </butang>
       <button v in totalpages key="Page" class="{Active: CurrentPageIndex === Page - 1}">
           {{page}}
       
       <butang disabled> Halaman seterusnya </butang></button>
   </h2></dana>

5. Langkah berjaga -jaga dan amalan terbaik

• Paging sisi pelayan: Untuk senario di mana jumlah data sangat besar (seperti berjuta-juta rekod), walaupun paging slice dilakukan pada klien, menanyakan semua data dari pangkalan data dan memindahkannya ke hujung depan sekaligus masih merupakan overhead yang besar. Dalam kes ini, disyorkan untuk melakukan pertanyaan penomboran di sisi pelayan, dan hanya data yang diperlukan untuk halaman semasa dikembalikan.
• Pengoptimuman Memori: Walaupun Slice () digunakan, jika array AllSuppliers masih sangat besar, ia masih akan mengambil banyak ingatan. Pertimbangkan di dalam cangkuk yang dipasang, sekali paginatedsuppliers dijana, jika allsuppliers tidak lagi diperlukan, ia boleh ditetapkan untuk membatalkan memori percuma (contohnya ini.allsuppliers = null;).
• Menatal maya: Untuk senario di mana sebilangan besar item senarai diperlukan dan pengguna boleh menatal kerap, digabungkan dengan perpustakaan menatal maya (seperti Vue-Virtual-Scroller) dapat mengoptimumkan prestasi lagi. Menatal maya hanya membuat item senarai yang dapat dilihat dalam viewport, sangat mengurangkan bilangan elemen DOM.
• Pengalaman Pengguna: Apabila pemuatan data dan penukaran halaman, menyediakan penunjuk pemuatan (pemintal pemuatan) dapat meningkatkan pengalaman pengguna.
• Pengendalian ralat: Pastikan pengendalian ralat yang betul untuk kegagalan pemuatan data, array kosong atau nombor halaman tidak sah.

Meringkaskan

Dengan bijak menggunakan kaedah Array.Prototype.Slice (), kita dapat memproses tatasusunan besar dalam aplikasi front-end JavaScript dan memecahkannya ke dalam blok kecil yang boleh diurus untuk mencapai paging data. Strategi paging pelanggan ini dengan ketara mengurangkan jejak memori dan beban rendering UI, meningkatkan respons aplikasi dan pengalaman pengguna. Menggabungkan rangka kerja front-end yang sesuai (seperti VUE) dan mekanisme komunikasi proses Electron, adalah mungkin untuk membina prestasi yang sangat baik dan aplikasi desktop mesra pengguna. Untuk lebih banyak jumlah data yang melampau, anda harus mempertimbangkan untuk menolak logik paging ke pelayan untuk mencapai pengoptimuman prestasi yang lebih menyeluruh.

Atas ialah kandungan terperinci Pemprosesan Paginasi Array Besar di JavaScript: Mengoptimumkan Prestasi Aplikasi Elektron/Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!