Ketika berbicara tentang HTML5, orang selalu membicarakannya. Ada begitu banyak fitur dan API menarik yang menyegarkan. Namun, banyak sepatu anak-anak yang masih berada pada tahap semantik dan mengabaikan kekuatan HTML5.
Pada bagian ini kita akan membahas Web-Worker multi-threaded.
1. Perjelas bahwa JavaScript adalah single-threadedFitur utama dari bahasa JavaScript adalah single-threaded, yang berarti hanya dapat melakukan satu hal dalam satu waktu.
Kedengarannya aneh, mengapa tidak mendesainnya dengan multi-threading untuk meningkatkan efisiensi? Kita dapat mengasumsikan sebuah skenario:
Asumsikan bahwa JavaScript memiliki dua thread secara bersamaan. Satu thread menambahkan konten ke node DOM tertentu, dan thread lainnya menghapus node tersebut.
Sebagai bahasa skrip browser, tujuan utama JavaScript adalah untuk berinteraksi dengan pengguna dan memanipulasi DOM .
Ini menentukan bahwa itu hanya dapat berupa single-thread, jika tidak maka akan menyebabkan masalah sinkronisasi yang sangat kompleks. Untuk menghindari kerumitan, JavaScript telah menggunakan single-threaded sejak pertama kali diperkenalkan. Hal ini telah menjadi fitur inti bahasa ini dan diperkirakan akan sulit diubah dalam jangka pendek.
Threading tunggal selalu menjadi masalah. Untuk memanfaatkan kekuatan komputasi CPU multi-core, HTML5 mengusulkan standar Web Worker , yang memungkinkan skrip JavaScript membuat banyak thread. Namun, thread anak sepenuhnya dikontrol oleh thread utama dan tidak boleh mengoperasikan DOM .
Oleh karena itu, standar baru ini tidak mengubah sifat single-thread dari JavaScript .
Web Workers adalah solusi multi-threading JavaScript yang disediakan oleh browser modern. Kita dapat menemukan banyak skenario penggunaan:
1. Kita dapat menggunakan Web Worker untuk melakukan beberapa operasi komputasi intensif;
2. Pemungutan suara dapat dilaksanakan dan negara bagian tertentu dapat diubah;
3. Pembaruan status pesan header, seperti pemberitahuan jumlah pesan di header halaman;
4. Interaksi pengguna frekuensi tinggi, pemeriksaan ejaan, misalnya: membantu pengguna menyelesaikan fungsi koreksi kesalahan masukan dan koreksi berdasarkan kebiasaan masukan pengguna, catatan sejarah, cache, dan informasi lainnya
5. Enkripsi: Enkripsi terkadang bisa sangat memakan waktu, terutama jika Anda perlu sering mengenkripsi banyak data (misalnya, mengenkripsi data sebelum mengirimkannya ke server).
6. Ambil data terlebih dahulu: Untuk mengoptimalkan situs web atau aplikasi web Anda dan meningkatkan waktu pemuatan data, Anda dapat menggunakan Workers
untuk memuat beberapa data terlebih dahulu jika Anda membutuhkannya.
Enkripsi adalah skenario yang bagus untuk menggunakan Web Worker karena tidak memerlukan akses ke DOM atau sihir lainnya, enkripsi hanya menggunakan algoritma untuk melakukan perhitungan. Ketika masyarakat semakin memperhatikan data pribadi yang sensitif, keamanan informasi dan enkripsi telah menjadi prioritas utama. Hal ini tercermin dari kejadian kebocoran data pengguna 12306 baru-baru ini.
Setelah penghitungan dilakukan di Pekerja, penghitungan tersebut akan lancar bagi pengguna dan tidak memengaruhi pengalaman pengguna.
3. Kompatibilitas 4. Konsep dasar1. Pertama-tama ingatlah untuk menilai apakah itu didukung
if (jendela.Pekerja) { ...} 2. Membuat worker baru itu mudah
const myWorker = Pekerja baru('pekerja.js');Metode postMessage() dan event handler onmessage adalah ilmu hitam Pekerja.
3. postMessage digunakan untuk mengirim pesan, dan onmessage digunakan untuk mendengarkan pesan.
const pekerja = Pekerja baru('src/worker.js');pekerja.onmessage = e => { console.log(e.data);};worker.postMessage('Apa kabar!'); Saat digunakan di thread utama, onmessage dan postMessage() harus digantung di objek worker , namun hal ini tidak diperlukan saat digunakan di worker . Alasannya adalah, di dalam worker , worker secara efektif berada dalam lingkup global.
4. Penanganan pengecualian:
pekerja.onerror = fungsi(kesalahan) { console.log(kesalahan.pesan kesalahan;}; 5. Memberhentikan worker
pekerja.terminate();
Thread worker segera dimatikan, tanpa ada peluang bagi thread tersebut untuk menyelesaikan operasinya atau membersihkannya.
6. Di thread worker , workers juga dapat memanggil metode close mereka sendiri untuk menutup:
menutup();5. Mulai cepat
Agar cepat memahaminya, mari kita lakukan contoh kecil: struktur proyeknya adalah sebagai berikut
├── index.html└── src ├── main.js └── pekerja.js
Html
<html><head> <title>Demo Pekerjaan Web</title> <meta charset=UTF-8 /></head><body> <div id=app> Halo Jartto! </div> <script src=src /main.js></script></body></html>
main.js
const pekerja = Pekerja baru('src/worker.js');pekerja.onmessage = e => { const pesan = e.data; console.log(`[Dari Pekerja]: ${message}`); ('app').innerHTML = pesan;};worker.postMessage('Ditulis dengan baik!');Kerja.js
onmessage = e => { const message = e.data; console.log(`[Dari Utama]: ${message}`); if(message.indexOf('Good') > -1) { postMessage('Terima kasih atas dukungan Anda '); }};Kodenya sangat sederhana. Utas utama mengirimkan: "Ditulis dengan sangat baik!"
Pekerja web menerima pesan tersebut dan menemukan bahwa konten tersebut mengandung kata "baik" dan mengirimkannya kembali ke thread utama: "Terima kasih atas dukungan Anda."
6. Keterbatasan 1. Di dalam worker , Anda tidak dapat mengoperasikan node DOM secara langsung, Anda juga tidak dapat menggunakan metode dan properti default dari objek window . Namun, kita dapat menggunakan banyak hal di bawah objek window , termasuk mekanisme penyimpanan data seperti WebSockets , IndexedDB , dan Data Store API khusus FireFox OS .
Berikut contohnya, kita modifikasi main.js :
const pekerja = Pekerja baru('src/worker.js');pekerja.onmessage = e => { const pesan = e.data; console.log(`[Dari Pekerja]: ${message}`); ('aplikasi').innerHTML = pesan;};+ pekerja.onerror = fungsi(kesalahan) {+ console.log(error);+ pekerja.terminate();+ };worker.postMessage('Ditulis dengan baik!'); Mari kita ubah work.js lagi
+ alert('jartto');onmessage = e => { const message = e.data; console.log(`[Dari Utama]: ${message}`); 1) { postMessage('Terima kasih atas dukungan Anda' }};Saat ini, running akan melaporkan:
Hal ini karena: konteks eksekusi worker.js berbeda dengan konteks eksekusi HTML halaman utama. Objek tingkat atas bukanlah Window , konteks global untuk eksekusi woker.js , melainkan WorkerGlobalScope . Mari kita jelaskan secara detail.
2. Transfer data antara workers dan thread utama dilakukan melalui mekanisme pesan seperti ini: kedua belah pihak menggunakan metode postMessage() untuk mengirim pesan mereka sendiri, dan menggunakan event handler onmessage untuk merespons pesan tersebut (pesan disertakan dalam atribut data dari peristiwa Message ).
Dalam proses ini, data tidak dibagikan tetapi disalin.
3. Pembatasan asal yang sama
File skrip yang ditetapkan ke thread Worker harus memiliki asal yang sama dengan file skrip thread utama.
4. Pembatasan berkas
Thread Worker tidak dapat membaca file lokal, artinya tidak dapat membuka sistem file lokal （file://） .
5. File lokal tidak diperbolehkan
SecurityError Tidak Tertangkap: Gagal membuat pekerja:
skrip di '(path)/worker.js'
tidak dapat diakses dari asal 'null'.
Chrome tidak mengizinkan Anda memuat pekerja web saat menjalankan skrip dari file lokal.
Lalu bagaimana cara mengatasinya? Kita dapat memulai server lokal. Disarankan untuk menggunakan http-server , yang sederhana dan mudah digunakan.
6. Kebijakan Keamanan Konten
worker memiliki konteks eksekusinya sendiri, berbeda dari objek document yang membuatnya. Jadi secara umum, worker tidak dibatasi oleh kebijakan keamanan konten document (atau worker induk) yang membuatnya.
Mari kita ambil contoh, dengan asumsi sebuah document memiliki deklarasi header berikut:
Kebijakan-Keamanan-Konten: script-src 'self'
Salah satu tujuan deklarasi ini adalah untuk melarang kode skrip yang ada di dalamnya menggunakan metode eval() . Namun, jika kode skrip membuat worker , kode yang dieksekusi dalam konteks worker dapat menggunakan eval() .
Untuk menentukan CSP bagi seorang pekerja, permintaan untuk mengirimkan kode pekerja itu sendiri harus ditambahkan dengan CSP.
Satu pengecualian adalah jika sumber skrip worker adalah pengidentifikasi unik global (misalnya, URL nya menentukan skema data atau blob ), worker akan mewarisi document atau CSP worker yang membuatnya.
Tentang itu, kita dapat menemukan dokumentasinya di MDN :
self :
Kita bisa menggunakan properti self dari WorkerGlobalScope untuk mendapatkan referensi ke objek itu sendiri.
2. location :
Atribut location mengembalikan objek WorkerLocation yang dikaitkan dengan thread saat dibuat. URL ini mewakili URL absolut dari sumber daya skrip yang digunakan untuk menginisialisasi thread pekerja ini tidak akan berubah meskipun halaman dialihkan beberapa kali.
3. close :
Tutup thread saat ini, mirip dengan terminate .
4. caches :
Konteks saat ini memiliki CacheStorage untuk memastikan ketersediaan offline dan respons terhadap permintaan dapat disesuaikan.
5. console :
Mendukung sintaksis console .
6. importScripts
Kita dapat memuat fungsi perpustakaan di worker melalui url melalui metode importScripts() .
7. XMLHttpRequest
Dengan itu, permintaan Ajax bisa dibuat.
8. Anda dapat menggunakan:
Ada banyak API yang bisa digunakan, jadi saya tidak akan memberikan contoh satu per satu di sini.
Ketika worker menemukan kesalahan yang sedang berjalan, pengendali kejadian onerror akan dipanggil. Ia akan menerima peristiwa bernama error yang memperluas antarmuka ErrorEvent . Acara tidak menggelembung dan dapat dibatalkan.
Untuk mencegah tindakan default terpicu, pekerja dapat memanggil metode preventDefault() dari kejadian kesalahan.
Kami biasanya menggunakan tiga informasi penting berikut untuk kejadian kesalahan:
pekerja.onerror = fungsi(kesalahan) { console.log(kesalahan.pesan kesalahan;};Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.