Komentar: Pekerja web adalah teknologi baru yang ditambahkan dalam HTML5 untuk mengimplementasikan pemrosesan backend dalam aplikasi web.
Web Workers adalah teknologi baru yang ditambahkan dalam HTML5 untuk mengimplementasikan pemrosesan latar belakang dalam aplikasi web.
Di HTML4, program-program yang dibuat oleh JS semuanya berhadapan tunggal. Jika butuh waktu lama, antarmuka web tidak akan merespons untuk waktu yang lama. Dalam kasus terburuk, kotak prompt skrip akan muncul:
Ini meminta skrip berjalan terlalu lama, apakah akan melanjutkan. . . . Jadi protagonis artikel ini diperkenalkan: API Pekerja Web
Menggunakan API ini, pengguna dapat dengan mudah membuat utas yang berjalan di latar belakang, dan sangat mudah untuk membuat program latar belakang:
var pekerja = pekerja baru ('*. js');
CATATAN: Benang latar tidak dapat mengakses halaman atau objek jendela.
Data dapat dilewati dengan utas latar belakang dengan mengirim pesan dan menerima pesan:
worker.onMessage = function (e) {};
worker.postmessage = function (e) {};
Mari Bicara Tentang Jumlahan:
<! Doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> </title>
<type skrip = "Teks/JavaScript">
fungsi menghitung () {
var num = 10000000000;
var r = 0;
untuk (var i = 1; i <num; i ++) {
r += i;
}
waspada (r);
}
menghitung();
</script>
</head>
<body>
</body>
</html>
Jadi bingkai saya yang indah diberikan. . . Tetapi menggunakan pekerja web tidak akan:
<! Doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> </title>
<type skrip = "Teks/JavaScript">
var pekerja = pekerja baru ('c.js');
worker.onMessage = function (e) {
peringatan ('dan:' + e.data);
};
fungsi menghitung () {
var num = 1000000;
worker.postmessage (num);
}
menghitung();
</script>
</head>
<body>
</body>
</html>
onMessage = function (e) {
var num = e.data;
var r = 0;
untuk (var i = 1; i <num; i ++) {
r += i;
}
postmessage (r);
}
Terkadang saya berpikir, mengapa saya menghitung jumlah yang begitu besar jika saya tidak ada hubungannya. . . . . Tentu saja ini adalah trik yang membosankan, tapi saya pikir ada skenario yang mungkin memerlukan ini.
Ketika saya mempelajari API file sebelumnya, ada operasi untuk membaca file lokal. Jika file terlalu besar, itu akan sangat lambat. Saya ingin tahu apakah ini bisa diterapkan? Penting untuk mencobanya selama studi kedua.
Berinteraksi data dengan utas
Kami menyelesaikan fungsi di sini, secara acak menghasilkan array di latar depan, dan kemudian kembali ke latar depan untuk mencetak di latar belakang jika perhitungan dapat 3 dari 3:
Program utama
<! Doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> </title>
<tyle>
menjangkau
{
padding: 10px;
}
</tyle>
<skrip src = "../ jQuery-1.7.1.js" type = "text/javascript"> </script>
<type skrip = "Teks/JavaScript">
$ (dokumen) .ready (function () {
var pekerja = pekerja baru ('t1.js');
worker.postmessage ('');
worker.onMessage = function (e) {
var arr = e.data.split (';');
untuk (var i = 0, len = arr.length; i <len; i ++) {
var dom = $ ('<span>' + arr [i] + '</span>');
$ ('#body'). append (dom);
}
}
});
</script>
</head>
<body>
<div>
</div>
</body>
</html>
Program yang menghasilkan array
onMessage = function (e) {
var arr = [];
untuk (var i = 0; i <100; i ++) {
arr.push (parseInt (math.random () * 100));
}
var pekerja = pekerja baru ('t2.js');
worker.postmessage (json.stringify (arr));
worker.onMessage = function (e) {
// Kirim hasil pemilihan kembali ke meja depan
postmessage (e.data);
};
}
Tentukan apakah semua data dalam array dibagi dengan 3
onMessage = function (e) {
var arr = json.parse (e.data);
var str = '';
untuk (var i = 0, len = arr.length; i <len; i ++) {
if (parseInt (arr [i]) % 3 == 0) {
if (str! = '') str += ';';
str += arr [i];
}
}
postmessage (str);
menutup();
};
Deskripsi Logika Program:
Sarang utas digunakan di sini
Pertama, jalankan program latar depan, di mana utas anak T1 diinisialisasi untuk menginisialisasi 100 array.
Kemudian Thread Anak T1 menginisialisasi utas anak T2 (digunakan untuk melintasi array, mengambil nomor yang dapat dibagi dengan 3, dan membentuk string), dan T1 meneruskan data array ke T2
T2 menerima data T1, dan setelah perhitungan, itu akan mentransfer string ke T1, T1 ke meja depan, dan meja depan akan menjalankan logikanya sendiri
Proses berakhir
Kesimpulan
Sederhananya, saya mendeklarasikan utas anak di sini, lalu mengirim data ke postmessage anak, dan kemudian menunggu hasilnya.
Tampaknya dikombinasikan dengan soket web API komunikasi terakhir, dua dapat digabungkan ke dalam program obrolan web, dan bahkan beberapa basis data penyimpanan/lokal dapat digunakan.
Ini mungkin hal yang baik.