Panduan penggunaan Pekerja Web untuk petua tutorial HTML5

Rumah

hujung hadapan web

Tutorial H5

Panduan penggunaan Pekerja Web untuk petua tutorial HTML5_html5

May 16, 2016 pm 03:46 PM

html5 worker

Web Workers ialah penyelesaian berbilang benang javascript yang disediakan oleh HTML5 Kami boleh menyerahkan beberapa kod intensif secara pengiraan kepada pekerja web untuk dijalankan tanpa membekukan antara muka pengguna.
1: Cara menggunakan Pekerja

Prinsip asas Web Worker ialah menggunakan kelas Worker untuk memuatkan fail javascript dalam utas utama semasa javascript untuk membuka utas baharu, yang mempunyai kesan pelaksanaan tanpa sekatan dan menyediakan data antara utas utama dan benang baharu. Antara muka yang ditukar: postMessage, onmessage.

Jadi bagaimana untuk menggunakannya, mari lihat contoh:

Kod JavaScriptSalin kandungan ke papan keratan

//worker.js
onmessage =fungsi (evt){
var d = evt.data;//Dapatkan data dihantar melalui evt.data
postMessage( d );//Hantar data yang diperolehi ke utas utama
}

Halaman HTML: test.html

Kod XML/HTMLSalin kandungan ke papan keratan

<!DOCTYPE HTML>
<html>
<<a gaya="teks- hiasan: tiada;" mpid="20" sasaran ="_kosong" href="http://cpro.baidu.com/ cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=619521ab1ccffd45&k=head&k0=head&kdi0=0&luki=6&n=601&c7 =1&id_penjual=1&sid=45fdcf1cab219561&ssp2= 1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http://www.admin10000.com/document/1183.html&urlid=0" idid 🎜>"20_nwl">kepala </a>>
<meta http-equiv=" Jenis Kandungan" kandungan="teks/html; charset=utf-8"/>
<skrip taip="teks/ < a gaya="teks-hiasan: tiada;" mpid="21" sasaran="_kosong" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di= . &t=tpclicked3_hc&tu=u1922429&u=http://www.admin10000.com/document/ 1183.html&urlid=0" id="21_nwl">&lt ;span gaya="color:#0000ff;font-size:14px;width:auto; height:auto;float:none;">javascript</a>">
//WEB页主线程
var pekerja =baharu Pekerja("worker.js"); //创建一个Worker对象并向它传递将在新线程中执行的脚本的URL
pekerja.postMessage("hello world"); //向worker发送数据
worker.onmessage =fungsi(evt){ //接收worker传过来>的教月< a gaya="teks-hiasan: tiada;" mpid="22" sasaran="_kosong" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch =0&di=128&fv=0&is_app=0&jk=619521ab1ccffd45&k=��&k0=��&kdi0=0&luki=2&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_4b1=1&seller_id=1&seller_41=1 &stid=0&t=tpclicked3_hc&tu=u1922429&u=http ://www.admin10000.com/document/1183.html&urlid=0" id="22_nwl">函数</ rentang></a>
console.log(evt.<a gaya="teks-hiasan: tiada;" mpid="23" sasaran="_kosong" href="http://cpro.baidu.com/cpro/ ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=619521ab1ccffd45&k=data&k0=data&kdi0=0&luki=4&n=11&p708 eller_id=1&sid=45fdcf1cab219561&ssp2=1&stid= 0&t=tpclicked3_hc&tu=u1922429&u=http://www.admin10000.com/document/1183.html&urlid=0" id= "23_nwl">data</a></jarak>); //输出worker发送来的数据
</skrip>
</kepala>
<badan></badan>
</html>

Selepas membuka test.html dengan penyemak imbas Chrome, konsol mengeluarkan "hello world", menunjukkan bahawa pelaksanaan program berjaya.

Melalui contoh ini kita dapat melihat bahawa menggunakan pekerja web terutamanya dibahagikan kepada bahagian berikut

utas utama WEB:

1. Muatkan fail JS melalui worker = new Worker( url ) untuk mencipta pekerja dan mengembalikan contoh pekerja.

　2. Hantar data kepada pekerja melalui kaedah worker.postMessage(data).

3. Ikat kaedah worker.onmessage untuk menerima data yang dihantar oleh pekerja.

4. Anda boleh menggunakan worker.terminate() untuk menamatkan pelaksanaan pekerja.

Urutan baharu pekerja:

　1. Hantar data ke utas utama melalui kaedah postMessage(data).

　2. Ikat kaedah onmessage untuk menerima data yang dihantar oleh utas utama.
2: Apa yang Pekerja boleh buat

Kini setelah kami tahu cara menggunakan pekerja web, apakah kegunaannya dan apakah masalah yang boleh kami selesaikan. Mari kita lihat contoh urutan fibonacci.

Semua orang tahu bahawa dalam matematik, jujukan fibonacci ditakrifkan secara rekursif: F0=0, F1=1, Fn=F(n-1) F(n-2) (n>=2, n∈N* ), dan pelaksanaan javascript yang biasa ialah:

Kod JavaScriptSalin kandungan ke papan keratan

var fibonacci =fungsi(n) {
kembali n <2? : arguments.callee(n -1) arguments.callee(n -2);
//fibonacci(36)

Menggunakan kaedah ini dalam Chrome untuk melaksanakan urutan fibonacci 39 mengambil masa 19097 milisaat, tetapi apabila ia datang untuk mengira 40, penyemak imbas secara langsung menggesa bahawa skrip itu sibuk.

Memandangkan JavaScript dilaksanakan dalam satu urutan, penyemak imbas tidak boleh melaksanakan skrip JavaScript lain semasa proses pengiraan jujukan dan urutan pemaparan UI juga akan digantung, menyebabkan penyemak imbas memasuki keadaan zombi. Menggunakan pekerja web untuk meletakkan proses pengiraan jujukan ke dalam urutan baharu akan mengelakkan situasi ini. Lihat contoh secara khusus:

Kod JavaScript

Salin kandungan ke papan keratan

//fibonacci.js
varfibonacci =fungsi(n) {
kembali n <2? n : arguments.call(n -1) arguments.call(n -2);
};
onmessage =fungsi(acara) {
var n = parseInt(event.<a style="text-decoration: none;" mpid="16" target="_blank" ref="http://cpro.baidu ... =0&rs=1&id_penjual= 1&sid =45fdcf1cab219561&ssp2=1&time=0&t=tpclicked3_hc&tu=u1922429&u=http://www.admin10000.com/document/1183.html&url=0" id" id" id >data&lt ; /span</a>, 10);
postMessage(fibonacci(n));
};

　　HTML Open:fibonacci.html

Kod XML/HTMLKonfigurasi Kod Antarabangsa

<!DOCTYPE HTML>
<html>
<<a gaya="teks- hiasan: tiada;" mpid="11" sasaran ="_kosong" href="http://cpro.baidu.com/ cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=619521ab1ccffd45&k=head&k0=head&kdi0=0&luki=6&n=601&c7 =1&id_penjual=1&sid=45fdcf1cab219561&ssp2= 1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http://www.admin10000.com/document/1183.html&urlid=0" idid 🎜>"11_nwl">kepala </a>>
<meta http-equiv=" Jenis Kandungan" kandungan="teks/html; charset=utf-8"/>
<tajuk>pekerja web fibonacci</ tajuk>
<skrip taip="teks/ < a gaya="teks-hiasan: tiada;" mpid="12" sasaran="_kosong" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di= . &t=tpclicked3_hc&tu=u1922429&u=http://www.admin10000.com/document/ 1183.html&urlid=0" id="12_nwl">&lt ;span gaya="color:#0000ff;font-size:14px;width:auto; height:auto;float:none;">javascript</a>">
memuat =fungsi(){
var pekerja =baharu Pekerja('fibonacci.js');
worker.addEventListener('message', function(event) {
var pemasa2 = (baharu Tarikh()).valueOf();
console.log( '结果：' acara.🎜 ="lebar: auto; tinggi: auto; terapung: tiada;" id="13_nwp" ><a gaya=" text-decoration: tiada;" mpid="13" sasaran="_kosong" href="http://cpro.baidu. com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=619521ab1ccffd45&k=data&k0=data&kdi0=0&luki=4&n0=10&p=10&n=100 0&rs=1&id_penjual=1&sid= 45fdcf1cab219561&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http://www.admin10000.com/document/1183.html&urlid=0" "13_nwl">data</a>
, '时间:' pemasa2, '用时：' ( pemasa2 - pemasa ) ); }, salah);
var pemasa = (baharu Tarikh()).valueOf();
console.log('开始计算：40','时间:' pemasa );
setTimeout(function(){
console.log('定时器"lebar: auto; tinggi: auto; terapung: tiada;" id="14_nwp" ><a gaya="teks-hiasan : tiada;" mpid="14" sasaran<🎜 🎜>="_kosong" href="http://cpro.baidu.com/cpro /ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=619521ab1ccffd45&k=��7&k0=��&rb&kdi0=0&luki=2&n=60&c=10&10 =1&seller_id=1&sid=45fdcf1cab219561&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http://www.admin10000.com/document/1183.html&urlid=0"0" 🎜>="14_nwl">函数</a> },1000);
worker.postMessage(40);
console.log('我在计算数列的时候执行了', '时间:' (new Date()).valueOf() );
}
</skrip>
</<a gaya="teks -hiasan: tiada;" mpid="15" sasaran="_kosong" href="http://cpro.baidu.com /cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=619521ab1ccffd45&k=head&k0=head&kdi0=0&luki=p=0_010&luki=6&n=6101 &rs=1&id_penjual=1&sid=45fdcf1cab219561&ssp2 =1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http://www.admin10000.com/document/1183.html&urlid=0" id== "15_nwl">kepala</a>&lt ;/span>>
<badan>
</badan>
</html>

　　在Chrome中打开fibonacci.html，控制台得到如下输出：

开始计算：50 时🎗：40 时🎗：40计算数列的时候执行了时间:1316508212734
定时器

Kod XML/HTML复制内容到剪贴板

<a gaya="teks-hiasan: tiada;" mpid="9" sasaran=" _blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id =0&c=berita&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=619521ab1ccffd45&k=��&k0=��&kdi0=0&luki=2&n=10&p=baidu&q=06011078&s=06011078_06011078 1cab219561&ssp2=1&stid=0&t =tpclicked3_hc&tu=u1922429&u=http://www.admin10000.com/document/1183.html&urlid=0" id=> 9_nwl">函数</a>

在计算数列时执行了时间:1316508213735
结果：102334155 时间:13165082628201：　　这个例子说明在worker中执行的fibonacci数列的计算并不会影响到主线程的代猁数列的计算并不会影响到主线程的代猁，有猁立的线程中计算，只是在计算完成之后将结果发回主线程。

　　利用 web worker我们可以在前端执行一些复杂的大量运算而不会影响页面的年页睢恶心的脚本正忙提示。

　　下面这个例子使用了 web worker来计算场景中的像素，场景打开时是一片一一一片计算一块像素值。

　　http://nerget.com/rayjs-mt/rayjs.html

　　三：Pekerja的其他尝试

　　我们已经知道Worker通过接收一个URL来创建一个worker，那么我们是否可接收一个URL来创建一个worker，那么我们是否可们是否可们是否可以刁可以刁可以切sonp的请求呢，大家知道jsonp是通过插入script标签来加载json数据的，而script元素在加载和执行过程中都是阻塞式的，如果能利用 pekerja web实现异步加载将会非常>不鎔。

　　下面这个例子将通过 web worker、jsonp、ajax三种不同的方式来加载一个169.42KB🌈169.42KB

Kod JavaScript

复制内容到剪贴板

// /aj/webWorker/core.js
fungsi $E(id) {
kembali document.getElementById(id);
}
onload =fungsi() {
//通过pekerja web加载
$E('workerLoad').onclick =fungsi() {
var url ='http://js.wcdn.cn/aj/mblog/face2' ;
var d = (baharu Tarikh()).valueOf();
var pekerja =baharu Pekerja(url);
worker.onmessage =fungsi(obj) {
console.log('pekerja web: ' ((baharu Tarikh()).nilai Of - d));
};
};
//通过jsonp加载
$E('jsonpLoad').onclick =fungsi() {
var url ='http://js.wcdn.cn/aj/mblog/face1' ;
var d = (baharu Tarikh()).valueOf();
STK.core.io.scriptLoader({
kaedah:'siaran',
url : url,
selesai : fungsi() {
console.log('jsonp: ' ((baharu Tarikh()) nilai d));
}
});
};
//通过<a style="text-decoration: none;" mpid="8" target="_blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=619521ab1ccffd4 =ajax&k0=ajax&kdi0=0&luki=8&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=45fdcf1cab219561&ssp2=1&stid=0&t=tc2clicked=0&t=tp2. 10000.com/document/1183.html&urlid=0" id ="8_nwl">ajax</a>加载
$E('ajaxLoad').onclick =fungsi() {
var url ='http://js.wcdn.cn/aj/mblog/face' ;
var d = (baharu Tarikh()).valueOf();
STK.core.io.ajax({
url : url,
di Selesai : fungsi(json) {
console.log('ajax: ' ((baharu Tarikh()) nilai d));
}
});
};
};

　　HTML页面：/aj/webWorker/worker.html

Kod XML/HTML复制内容到剪贴板

<!DOCTYPE HTML>
<html>
<<a gaya="teks- hiasan: tiada;" mpid="4" sasaran ="_kosong" href="http://cpro.baidu.com/ cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=619521ab1ccffd45&k=head&k0=head&kdi0=0&luki=6&n=601&c7 =1&id_penjual=1&sid=45fdcf1cab219561&ssp2= 1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http://www.admin10000.com/document/1183.html&urlid=0" idid 🎜>"4_nwl">kepala </a>>
<meta http-equiv=" Jenis Kandungan" kandungan="teks/html; charset=utf-8"/>
<tajuk>Contoh pekerja: muat <aa 🎜> gaya="teks-hiasan: tiada;" mpid= "5" sasaran="_kosong" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk =619521ab1ccffd45&k=data&k0=data&kdi0=0&luki=4&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=45fdcf1cab219561&ssp20=t=u 429&u=http://www.admin10000.com/document/1183.html&urlid=0 " id="5_nwl">data&lt ;/a></ tajuk>
<skrip src="http: //js.t.sinajs.cn/STK/js/gaea.1.14.js" taip="text/< ;span style="lebar: auto; ketinggian: auto; terapung: tiada;" id="6_nwp">< a gaya="teks-hiasan: tiada;" mpid="6" sasaran="_kosong" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di= . &t=tpclicked3_hc&tu=u1922429&u=http://www.admin10000.com/document/ 1183.html&urlid=0" id="6_nwl">&lt ;span gaya="color:#0000ff;font-size:14px;width:auto; height:auto;float:none;">javascript</a>"></skrip>
<skrip taip="teks/ javascript" src="http://js.wcdn.cn/aj/webWorker/core.js" ></skrip>
</kepala>
<badan>
<input taip="butang" id="beban pekerja" nilai="pekerja web加载"></input>
<input taip="butang" id="jsonpLoad" nilai="jsonp加载"></input>>
<input taip="butang" id="< a gaya="teks-hiasan: tiada;" mpid="7" sasaran="_kosong" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di= . d=0&t=tpclicked3_hc&tu=u1922429&u=http://www.admin10000.com/document/ 1183.html&urlid=0" id="7_nwl">&lt ;span gaya="color:#0000ff;font-size:14px;width:auto; height:auto;float:none;">ajax</a>Muat" nilai="ajax加载"></masukan>
</badan>
</html>

　　设置HOST

复制代码

代码:

　　通过 http://js.wcdn.cn/aj/webWorker/worker.html 访问页面然后分别通过三种方式加载方式加载敾卮访加载敾卮🎜>

复制代码代码如下:

pekerja web: 174

jsonp: 25

Nachdem ich es mehrmals versucht hatte, stellte ich fest, dass die Zeit zum Laden von Daten über JSONP und Ajax nicht viel unterschiedlich ist und die Ladezeit von Web Worker immer auf einem hohen Niveau war, sodass die Verwendung von Web Worker zum Laden von Daten immer noch relativ ist langsam, selbst bei großen Datenmengen. Es kann sein, dass es einige Zeit dauert, bis Worker neue Threads initialisiert. Es gibt keinen anderen Vorteil, als dass es beim Laden nicht blockiert.

Kann Web Worker das domänenübergreifende Laden von JS unterstützen? Dieses Mal greifen wir über http://127.0.0.1/aj/webWorker/worker.html auf die Ladeschaltfläche „Web Worker laden“ zu Download Es erfolgt keine Antwort und unter FF6 wird ein Fehler angezeigt. Daraus können wir erkennen, dass Web Worker das domänenübergreifende Laden von JS nicht unterstützt, was eine schlechte Nachricht für Websites ist, die statische Dateien auf einem separaten statischen Server bereitstellen.

Web Worker kann also nur zum Laden von JSON-Daten in derselben Domäne verwendet werden, Ajax kann dies jedoch bereits und ist effizienter und vielseitiger. Lassen Sie den Arbeiter tun, was er gut kann.
Viertens: Zusammenfassung

Web-Worker sehen nett aus, sind aber voller Teufel.

Was wir tun können:

1. Sie können einen JS laden, um eine große Anzahl komplexer Berechnungen durchzuführen, ohne den Hauptprozess hängen zu lassen, und über postMessage und onmessage kommunizieren

2. Sie können über importScripts(url)

zusätzliche Skriptdateien in den Worker laden

　3. Sie können setTimeout(), clearTimeout(), setInterval() und clearInterval()

verwenden

4. Sie können XMLHttpRequest verwenden, um Anfragen zu senden

5. Kann auf einige Eigenschaften des Navigators zugreifen

Was sind die Einschränkungen:

1. JS kann nicht domänenübergreifend geladen werden

　2. Der Code im Worker kann nicht auf das DOM zugreifen

3. Die Implementierung von Worker in verschiedenen Browsern ist nicht konsistent. FF erlaubt beispielsweise die Erstellung neuer Worker, Chrome jedoch nicht

　4. Nicht jeder Browser unterstützt diese neue Funktion

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn