Cara teras untuk tidak membiarkan penyemak imbas terjebak apabila memproses sejumlah besar data adalah untuk mengelakkan menyekat benang utama. Amalan khusus termasuk: 1. Gunakan RequestIdLecallback atau SetTimeout untuk mengiris tugas dan melaksanakan langkah demi langkah untuk membebaskan masa CPU; 2. Gunakan pekerja web untuk memproses pengiraan kompleks dalam benang bebas untuk mengelakkan mempengaruhi benang utama; 3. Gunakan teknologi menatal maya untuk menjadikan hanya item senarai kawasan visual untuk mengurangkan beban DOM; 4. Menggabungkan data pra -proses dan pemuatan malas, memuatkan data atas permintaan untuk mengurangkan tekanan awal. Strategi ini dapat mengekalkan antara muka dengan lancar dan meningkatkan pengalaman pengguna.

Kunci untuk mengelakkan menyekat benang utama apabila memproses sejumlah besar data adalah untuk mengelakkan menyekat benang utama. JavaScript penyemak imbas dijalankan oleh satu benang. Sebaik sahaja operasi yang memakan masa dilakukan (seperti melintasi ratusan ribu data), halaman akan kehilangan responsnya. Idea utama menyelesaikan masalah ini ialah: memecahkan tugas berat, melaksanakannya secara tidak segerak, atau menyerahkannya kepada benang latar untuk diproses .

Berikut adalah beberapa kaedah dan teknik praktikal yang dapat meningkatkan pengalaman pengguna secara berkesan sambil mengekalkan antara muka yang lancar.

1. Gunakan requestIdleCallback atau setTimeout untuk mengendalikan sharding

Sekiranya anda perlu memproses data pada benang utama, anda boleh memecah tugas menjadi kepingan kecil dan melakukan langkah demi langkah apabila penyemak imbas terbiar. Ini membolehkan masa CPU untuk memberi UI.

• requestIdleCallback : Sesuai untuk tugas keutamaan yang rendah, tetapi dengan keserasian purata.
• setTimeout(fn, 0) atau setInterval : lebih umum dan sesuai untuk kebanyakan senario.

Contohnya:

 ProcessChunk Function (data, indeks = 0, chunksize = 1000) {
  const end = math.min (indeks chunksize, data.length);
  untuk (biarkan i = indeks; i <end; i) {
    // Proses setiap bahagian data}

  jika (end <data.length) {
    setTimeout (() => ProcessChunk (data, end, chunksize), 0);
  }
}

Ini hanya akan memproses sebahagian daripada data pada satu masa, memberikan pelayar peluang untuk menjadikan UI dan bertindak balas terhadap operasi pengguna.

2. Gunakan pekerja web untuk mengendalikan pengkomputeran kompleks

Pekerja web boleh menjalankan skrip dalam benang mandiri tanpa menjejaskan benang utama sama sekali. Ini adalah cara yang paling disyorkan untuk menghuraikan JSON, menyusun, menapis dan tugas berat yang lain.

Cara menggunakannya adalah kira -kira seperti berikut:

1. Buat fail pekerja (seperti worker.js ):

    onMessage = fungsi (e) {
     Const Result = HeightProcessing (E.Data);
     postmessage (hasil);
   };

2. Panggilnya di utas utama:

    pekerja const = pekerja baru ('worker.js');
   worker.onMessage = function (e) {
     console.log ('Hasil pemprosesan:', e.data);
   };
   pekerja.PostMessage (Largedata);

   Nota: DOM tidak boleh diakses dalam pekerja, dan API penyemak imbas tertentu (seperti document , alert , dan lain -lain) tidak boleh digunakan.

   ---

   3. Senarai Rendering Menatal Maya

   Jika masalahnya adalah untuk mempamerkan data besar dan bukannya berurusan dengan data itu sendiri, menatal maya adalah penyelesaian yang baik. Ia hanya menjadikan unsur -unsur dalam kawasan visual, sangat mengurangkan bilangan nod Dom.

   Amalan Biasa:

   • Kirakan kedudukan ketinggian dan tatal kawasan visual semasa
   • Hanya membuat item data di bahagian "kelihatan"
   • Mengemas kini kandungan yang dinamik, berubah dengan menatal

   Anda boleh melaksanakan logik menatal maya yang mudah, atau menggunakan perpustakaan siap sedia seperti React-Virtual atau Vue -Virtual-Scroller .

   ---

   4. Menggabungkan data pra -proses dan pemuatan malas

   Kadang -kadang, kita sebenarnya tidak perlu memuat semua data dari awal. Anda boleh terlebih dahulu memuatkan bahagian dan mendapatkan lebih banyak seperti yang diperlukan apabila pengguna menatal ke bahagian bawah atau suis nombor halaman.

   Contohnya:

   • Front-end mendapat data dari penomboran antara muka
   • Tarik 50 ~ 100 keping setiap kali daripada menarik puluhan ribu pada satu masa
   • Tingkatkan pengalaman dengan skrin kerangka atau memuatkan animasi

   Strategi ini bukan sahaja mengurangkan tekanan front-end, tetapi juga mengurangkan penggunaan jalur lebar belakang.

   ---

   Pada dasarnya kaedah biasa ini. Yang mana untuk dipilih bergantung pada keperluan khusus anda: jika ia hanya masalah rendering, menatal maya adalah yang paling sesuai; Sekiranya masalah, sharding atau pekerja web adalah yang paling sesuai. Prinsip teras adalah: tidak menduduki benang utama untuk masa yang lama .

   Atas ialah kandungan terperinci Bagaimana cara mengendalikan dataset besar dalam penyemak imbas tanpa membekukan UI?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!