Cara memproses jumlah data yang besar dalam JavaScript

Dalam artikel sebelumnya, kami meneroka pelaksanaan JavaScript dan sekatan pelayar, serta cara untuk menyelesaikan amaran "skrip tidak responsif" menggunakan pseudo-threads berasaskan pemasa. Hari ini, kita akan melihat cara untuk memproses sejumlah besar data dalam penyemak imbas. Beberapa tahun yang lalu, pemaju tidak pernah mempertimbangkan alternatif kepada pemprosesan sisi pelayan yang kompleks. Konsep ini telah berubah, dan banyak aplikasi Ajax menghantar sejumlah besar data antara klien dan pelayan. Di samping itu, kod boleh mengemas kini DOM, yang merupakan proses penyemak imbas yang sangat memakan masa. Walau bagaimanapun, cuba menganalisis maklumat ini sekaligus boleh membuat aplikasi tidak bertindak balas dan membuang amaran skrip. Pemasa JavaScript boleh membantu mencegah masalah mengunci penyemak imbas dengan membahagikan proses analisis data yang panjang ke dalam blok yang lebih pendek. Berikut adalah permulaan fungsi JavaScript kami:

function ProcessArray(data, handler, callback) {

ProcessArray () Fungsi Menerima tiga parameter:

data: pelbagai item yang akan diproses
pengendali: fungsi yang mengendalikan item data tunggal
Panggil balik: Semua fungsi pilihan yang dipanggil selepas pemprosesan selesai.

Seterusnya, kami akan menentukan pemboleh ubah konfigurasi:

  var maxtime = 100;        // 每块处理时间（毫秒）
  var delay = 20;       // 处理块之间的延迟（毫秒）
  var queue = data.concat();    // 克隆原始数组

MaxTime Menentukan bilangan maksimum milisaat yang dibenarkan setiap blok pemprosesan. Kelewatan adalah masa (dalam milisaat) antara blok pemprosesan. Akhirnya, giliran mengkloning array data asal - tidak diperlukan dalam semua kes, tetapi sejak array diluluskan dengan rujukan dan kami membuang setiap item, ini adalah pilihan paling selamat. Sekarang kita boleh mula memproses menggunakan setTimeout:

  setTimeout(function() {

    var endtime = +new Date() + maxtime;

    do {
      handler(queue.shift());
    } while (queue.length > 0 && endtime > +new Date());

Pertama, hitung akhir -ini adalah masa depan yang mesti dihentikan dari pemprosesan. Lakukan ... sementara proses gelung item beratur pada gilirannya dan terus sehingga setiap item telah selesai atau dicapai pada akhir waktu. Nota: Kenapa gunakan ... sementara? JavaScript menyokong semasa gelung dan lakukan ... sementara gelung. Perbezaannya ialah ... sementara Loop memastikan bahawa lelaran dilakukan sekurang -kurangnya sekali. Jika kita menggunakan standard semasa gelung, pemaju boleh menetapkan maxtime yang rendah atau negatif, dan pemprosesan array tidak akan bermula atau lengkap. Akhirnya, kami menentukan sama ada lebih banyak projek perlu diproses dan jika perlu, hubungi fungsi pengendalian kami selepas kelewatan ringkas:

    if (queue.length > 0) {
      setTimeout(arguments.callee, delay);
    }
    else {
      if (callback) callback();
    }

  }, delay);
}
// ProcessArray 函数结束

Selepas setiap projek diproses, fungsi panggil balik dilaksanakan. Kita boleh menggunakan kes ujian kecil untuk menguji ProcessArray ():

// 处理单个数据项
function Process(dataitem) {
  console.log(dataitem);
}

// 处理完成
function Done() {
  console.log("Done");
}

// 测试数据
var data = [];
for (var i = 0; i < 1000; i++) {
  data.push(i);
}

ProcessArray(data, Process, Done);

Kod ini akan dijalankan dalam setiap penyemak imbas (termasuk IE6). Ini adalah penyelesaian silang penyemak imbas yang berdaya maju, tetapi HTML5 menawarkan penyelesaian yang lebih baik! Dalam jawatan saya yang seterusnya, kami akan membincangkan pekerja web ...

FAQs (FAQ) pada JavaScript untuk pemprosesan data yang besar

Apakah amalan terbaik untuk mengendalikan dataset besar dalam JavaScript?

Oleh kerana sifat javascript tunggal, ia boleh mencabar untuk mengendalikan dataset besar dalam JavaScript. Walau bagaimanapun, terdapat beberapa amalan terbaik yang boleh anda ikuti. Pertama, pertimbangkan untuk menggunakan pekerja web. Mereka membolehkan anda menjalankan JavaScript dalam benang latar belakang yang berasingan, menghalang pemprosesan data yang besar daripada menyekat antara muka pengguna. Kedua, gunakan teknologi pemprosesan data streaming. Perpustakaan seperti oboe.js boleh membantu anda memproses data apabila tiba, dengan itu mengurangkan penggunaan memori. Akhirnya, pertimbangkan untuk menggunakan pangkalan data. IndexeDDB adalah API peringkat rendah untuk penyimpanan pelanggan yang banyak data berstruktur, yang boleh digunakan untuk melakukan carian berprestasi tinggi pada dataset yang besar.

Bolehkah JavaScript digunakan dalam sains data?

Ya, JavaScript boleh digunakan dalam sains data. Walaupun ia secara tradisinya tidak ada kaitan dengan sains data, kebangkitan JavaScript penuh dan pembangunan perpustakaan dan kerangka untuk analisis data dan visualisasi menjadikannya pilihan yang berdaya maju. Perpustakaan seperti Danfo.js menyediakan alat manipulasi data yang serupa dengan perpustakaan Python's Pandas, dan D3.js adalah alat visualisasi data yang kuat.

Bagaimana untuk mengoptimumkan JavaScript untuk pemprosesan data berskala besar?

Mengoptimumkan JavaScript untuk pemprosesan data berskala besar melibatkan pelbagai strategi. Pertama, gunakan struktur data yang cekap. Jenis dan objek terbina dalam JavaScript tidak selalunya jenis yang paling berkesan untuk dataset besar. Perpustakaan seperti Immutable.js menyediakan alternatif yang lebih cekap. Kedua, pertimbangkan untuk menggunakan tatasusunan yang ditaip untuk mengendalikan sejumlah besar data binari. Akhirnya, teknik pengaturcaraan asynchronous digunakan untuk mengelakkan menyekat benang utama semasa pemprosesan data.

Apakah batasan menggunakan JavaScript untuk pemprosesan data berskala besar?

JavaScript mempunyai beberapa batasan dalam pemprosesan data yang besar. Sifatnya yang tunggal boleh menyebabkan masalah prestasi apabila berurusan dengan set data yang besar. Di samping itu, jenis angka JavaScript tidak sesuai untuk pengiraan berangka yang tepat, yang boleh menjadi masalah dalam aplikasi sains data. Akhirnya, JavaScript tidak mempunyai beberapa perpustakaan analisis data canggih yang terdapat dalam bahasa seperti Python dan R.

Bagaimana menggunakan pekerja web untuk melakukan pemprosesan data berskala besar dalam JavaScript?

Pekerja web membolehkan anda menjalankan kod JavaScript pada benang berasingan di latar belakang. Ini amat berguna untuk tugas pemprosesan data yang kompleks yang sebaliknya menyekat benang utama dan menyebabkan masalah prestasi. Untuk menggunakan pekerja web, anda membuat objek pekerja baru dan lulus URL skrip yang akan dijalankan di thread pekerja. Anda kemudian boleh menggunakan kaedah postmessage dan pengendali acara onMessage untuk berkomunikasi dengan benang pekerja.

Apakah pemprosesan data streaming dalam JavaScript?

pemprosesan data streamed adalah teknik yang memproses data apabila ia tiba daripada menunggu keseluruhan data yang ditetapkan untuk disediakan. Ini amat berguna untuk dataset besar kerana ia mengurangkan penggunaan memori dan membolehkan pemprosesan bermula lebih awal. Dalam JavaScript, anda boleh menggunakan perpustakaan seperti Oboe.js untuk melaksanakan pemprosesan data streaming.

Bagaimana menggunakan IndexedDB untuk melakukan pemprosesan data yang besar dalam JavaScript?

IndexedDB adalah API peringkat rendah untuk pelanggan menyimpan sejumlah besar data berstruktur. Ia membolehkan anda menyimpan, mengambil dan mencari dataset besar dalam penyemak imbas pengguna anda. Untuk menggunakan IndexedDB, anda mula -mula membuka pangkalan data dan kemudian membuat kedai objek untuk menyimpan data anda. Anda kemudian boleh menggunakan transaksi untuk membaca dan menulis data.

Apa yang ditaip tatasusunan di JavaScript dan bagaimana ia digunakan untuk pemprosesan data yang besar?

Arus yang ditaip adalah ciri JavaScript yang menyediakan cara untuk memproses data binari. Mereka amat berguna untuk tugas pemprosesan data yang besar kerana ia membolehkan anda memproses data dengan cara yang lebih banyak menjimatkan ingatan. Untuk menggunakan array yang ditaip, anda mula -mula membuat arraybuffer untuk menyimpan data anda, dan kemudian gunakan salah satu jenis array yang ditaip untuk membuat pandangan menunjuk kepada penampan.

Perpustakaan apa yang boleh saya gunakan untuk visualisasi data dalam JavaScript?

Terdapat beberapa perpustakaan yang tersedia untuk visualisasi data dalam JavaScript. D3.js adalah salah satu perpustakaan yang paling kuat dan fleksibel yang membolehkan anda membuat pelbagai kesan visual. Chart.js adalah satu lagi pilihan yang popular, yang menyediakan API yang lebih mudah untuk membuat jenis carta biasa. Pilihan lain termasuk highcharts, carta Google, dan plotly.js.

Bagaimanakah pengaturcaraan asynchronous membantu JavaScript untuk melakukan pemprosesan data berskala besar?

Pengaturcaraan Asynchronous membolehkan JavaScript melaksanakan tugas lain sambil menunggu pemprosesan data selesai. Ini amat berguna untuk tugas pemprosesan data yang besar kerana ia menghalang benang utama daripada disekat, menghasilkan pengalaman pengguna yang lebih lancar. JavaScript menyediakan beberapa ciri untuk pengaturcaraan tak segerak, termasuk panggilan balik, janji, dan async/menunggu.

Atas ialah kandungan terperinci Cara memproses jumlah data yang besar dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!