Gunakan Multi-Thread dalam Javascript - Bukan Mengenai WebWorkers atau WebAssembly

Sudah diketahui umum bahawa JavaScript berjalan pada satu urutan. Konsep ini sangat penting sehingga kita sering merujuknya dengan nama - Benang Utama. Jadi, adakah ini bermakna CPU berbilang teras anda tidak berguna apabila menjalankan JavaScript?

Tidak begitu.

JavaScript boleh menjadi agak nakal, menghantar mesej bercampur-campur tentang urutannya.

Tetapi walaupun tanpa menyelidiki ciri yang lebih kompleks seperti Pekerja Web dan WebAssembly, JavaScript asas boleh menggunakan aliran kerja berbilang benang.

Untuk menjadi jelas, artikel ini memfokuskan pada JavaScript berasaskan pelayar web. Persekitaran lain, seperti Node.js, mungkin mengendalikan perkara secara berbeza.

Kami akan meneroka pilihan untuk operasi berbilang benang dan seperti berbilang benang dalam JavaScript. Realitinya - anda boleh dan harus menggunakan aliran kerja berbilang benang dalam JavaScript vanila tulen yang asas.

"Jelaskan!"

Senang.

JavaScript ialah bahasa satu benang, tetapi ia ditafsirkan oleh penyemak imbas web - dan penyemak imbas ialah perisian berbilang benang.

Terdapat beberapa kaedah untuk mensimulasikan dan menggunakan berbilang benang, dan anda mungkin menggunakannya tanpa menyedarinya.

Selain itu, JavaScript sering berkelakuan dalam cara yang kelihatan berbilang benang tanpa benar-benar begitu. Ia mungkin terdengar seperti menipu, tetapi ia memberikan faedah yang kami jangkakan dengan berkesan daripada tingkah laku berbilang benang.

Pengaturcaraan Berasaskan Acara Terasa Berbilang Benang

JavaScript ialah sistem berasaskan acara. Apabila penyemak imbas memproses fail JavaScript, ia menjalankan semua kod di dalamnya. Anda boleh menulis kod yang tidak berhenti berjalan - walaupun itu secara amnya idea yang tidak baik kerana ia boleh merosakkan penyemak imbas.

Apa yang biasa kami lakukan ialah menyediakan pendengar acara dan menunggu sesuatu berlaku. Pada ketika ini, JavaScript melahu sepenuhnya. Penantian terbiar ini tidak akan dapat dilakukan tanpa memunggah beberapa kerja daripada Benang Utama.

Acara itu sendiri tidak berbilang benang, tetapi menunggu dan menyemak acara dikendalikan oleh penyemak imbas, bukan oleh JavaScript. Proses ini diturunkan dari Benang Utama.

Fungsi Asynchronous dan Multi-Threading

Fungsi seperti setTimeout dan setInterval telah bersama kami selama bertahun-tahun. Mereka memunggah masa menunggu daripada Benang Utama.

Mari kita permudahkan cara ini berfungsi. Dalam bahasa peringkat rendah, pemasa dan menunggu sering dilaksanakan dengan sentiasa menyemak, "Adakah sudah tiba masanya?" Bayangkan gelung while() yang menyemak masa berlalu dan meneruskan apabila masa yang sesuai. Pendekatan moden mungkin menggunakan gangguan CPU untuk mengelak daripada menyumbat benang CPU.

Walau bagaimanapun, apabila anda menggunakan setTimeout atau setInterval dalam JavaScript, bahasa itu terbiar sepenuhnya semasa menunggu, yang, sekali lagi, bermakna penantian diproses keluar dari Thread Utama.

Ambil dan API Asynchronous Lain

Hari ini, kami mendapat lebih banyak fungsi tak segerak dan API daripada penyemak imbas. API pengambilan ialah contoh yang terkenal. Malah API yang lebih baharu, seperti API Papan Klip, adalah tidak segerak.

Ini bermakna anda meminta penyemak imbas melakukan tindakan, dan ia membebaskan Benang Utama JavaScript (atau membenarkannya memproses bahan lain - lebih lanjut mengenainya kemudian) dan memberitahu anda (dengan memproses kod berikut) apabila ia selesai.

Asynchronous vs. Multi-Threaded

Asynchronous tidak semestinya bermaksud berbilang benang - tidak selalu, tidak secara langsung. Hanya meletakkan perkataan async di hadapan fungsi tidak menyusahkan anda.

Terdapat dua komponen utama tentang cara JavaScript mengendalikan gelagat tak segerak:

1. Barisan Panggilan Balik dan Gelung Acara

Fikirkan baris gilir panggil balik sebagai barisan fungsi yang menunggu untuk dijalankan. Fungsi ini dilaksanakan satu demi satu dalam Benang Utama. Apabila operasi tak segerak selesai - sama ada acara, tamat masa atau pengambilan selesai - panggilan baliknya diletakkan dalam baris gilir ini.

gelung peristiwa bertanggungjawab untuk mengalihkan panggilan balik daripada baris gilir ke tindanan panggilan apabila tindanan panggilan kosong.

2. Fungsi Diproses Pelayar

Pelayar web mengawal operasi tertentu dan mungkin memutarkan urutan baharu untuknya—ini termasuk tindakan seperti ambil atau setTimeout. JavaScript tidak perlu mengurus urutan ini. Apabila operasi tak segerak selesai, penyemak imbas meletakkan panggilan balik yang sepadan ke dalam baris gilir panggil balik dan JavaScript meneruskan pelaksanaan dari sana.

Pertimbangkan kod ini:

console.log('Start');

setTimeout(() => {
  console.log('This is asynchronous');
});

console.log('End');

Output:

Start
End
This is asynchronous

Inilah yang berlaku:

• 'Mula' dilog.
• setTimeout dipanggil tanpa parameter tamat masa, jadi ia lalai kepada 0 milisaat. Panggilan balik dihantar ke penyemak imbas untuk dilaksanakan selepas tindanan panggilan semasa jelas.
• 'Tamat' dilog.
• Benang Utama kini percuma dan gelung acara menyemak baris gilir panggil balik.
• Fungsi panggil balik dari setTimeout dialihkan ke tindanan panggilan.
• 'Ini tak segerak' dilog.

Perhatikan bahawa setTimeout tiada parameter tamat masa. Ini ialah teknik biasa untuk menangguhkan pelaksanaan kod keutamaan yang lebih rendah - proses pertama sekali, selepas itu selesai, lakukan perkara "keutamaan lebih rendah".

Apa yang dilakukannya ialah meletakkan fungsi di dalam setTimeout ke dalam baris gilir panggil balik serta-merta, dan ia berjalan pada peluang pertama apabila Benang Utama melahu.

Kes Khas requestAnimationFrame

requestAnimationFrame ialah API penyemak imbas yang memberitahu penyemak imbas anda ingin melaksanakan beberapa kod sebelum ia mengira dan mengemas kini paparan (anggap ia sebagai bingkai sesaat dalam permainan video).

Atas sebab tertentu, pembangun web tidak berfikir dalam mengecat semula dan FPS, tetapi itulah cara ia berfungsi.

Ia sememangnya tak segerak (walaupun bukan berbilang benang).

Menggunakan setTimeout tanpa masa yang ditentukan sering digunakan untuk tujuan yang sama sebelum requestAnimationFrame diperkenalkan, walaupun ia jauh daripada berguna (hanya lebih baik daripada tiada).

Fungsi ini menyusun baris gilir kod anda ke dalam tindanan khas. Sejurus sebelum memaparkan bingkai baharu (mengecat semula), penyemak imbas menjalankan kod beratur ini. Ia sesuai untuk membuat perubahan pada DOM, HTML atau CSS (dan hanya itu, sila, saya melarang anda membuat pengiraan di sana!).

Pilihan Berbilang Benang Sejati

Walaupun artikel ini bukan tentang mereka, perlu dinyatakan bahawa anda boleh mencapai operasi berbilang benang yang benar dengan menggunakan Pekerja Web dan Perhimpunan Web. Ini membolehkan anda menjalankan skrip dalam utas latar belakang. Mereka tidak boleh memanipulasi DOM secara langsung, tetapi mereka tidak ternilai untuk memproses tugas berat (pengiraan matriks, sesiapa?). Pendekatan ini sering digunakan dalam permainan berasaskan HTML5 - yang lebih kompleks, bukan sekadar tic-tac-toe.

Kata-kata Terakhir

JavaScript, apabila diasingkan, kekal berbenang tunggal. Tetapi dalam dunia nyata, ia adalah bahasa yang ditafsirkan yang berjalan dalam persekitaran berbilang benang pelayar web. Jika jurubahasa anda menawarkan bantuan kepada anda, ambil dan gunakannya.

Artikel ini merangkumi banyak perkara - pengetahuan asas, penjelasan peringkat rendah dan banyak lagi. Tetapi begitulah selalunya pembangunan - semuanya saling berkaitan. Sebab itu saya suka melihat gambaran yang lebih luas; kadangkala, tumpuan yang terperinci bukanlah penyelesaian kepada masalah.

Adakah async pernah menyebabkan anda menyahpepijat mimpi ngeri?
Saya pasti pernah - beberapa tahun yang lalu, mendapatkan timbunan dengan ralat bukanlah sesuatu yang penting.

Atas ialah kandungan terperinci Gunakan Multi-Thread dalam Javascript - Bukan Mengenai WebWorkers atau WebAssembly. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!