简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Rumah
Artikel
Soal Jawab
Kursus
Topik
Muat turun
Permainan
Kamus
kemas kini terkini

Rumah  >  Artikel  >  hujung hadapan web  >  Panduan penggunaan Pekerja Web untuk petua tutorial HTML5_html5

Panduan penggunaan Pekerja Web untuk petua tutorial HTML5_html5

WBOY
WBOYasal
2016-05-16 15:46:231243semak imbas

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
  1. //worker.js
  2. onmessage =fungsi (evt){
  3. var d = evt.data;//Dapatkan data dihantar melalui evt.data
  4. postMessage( d );//Hantar data yang diperolehi ke utas utama
  5. }

Halaman HTML: test.html


Kod XML/HTMLSalin kandungan ke papan keratan
  1. >  
  2. <html>  
  3. <<span gaya="lebar: auto; tinggi: auto; terapung: tiada;" id="20_nwp"><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"><span gaya="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">kepala span>a>< /span>>  
  4.  <meta http-equiv=" Jenis Kandungan" kandungan="teks/html;  charset=utf-8"/>   
  5.  <skrip taip="teks/ <span style="lebar: auto; ketinggian: auto; terapung: tiada;" id="21_nwp">< 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">< ;span gaya="color:#0000ff;font-size:14px;width:auto; height:auto;float:none;">javascriptspan>a>span>">  
  6. //WEB页主线程   
  7. var pekerja =baharu Pekerja("worker.js"); //创建一个Worker对象并向它传递将在新线程中执行的脚本的URL   
  8.  pekerja.postMessage("hello world");     //向worker发送数据   
  9.  worker.onmessage =fungsi(evt){     //接收worker传过来>的教月<span gaya="lebar: auto; tinggi: auto; terapung: tiada ;" id="22_nwp">< 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"><span gaya="warna:#0000ff ;font-size:14px;width:auto;height:auto;float:none;">函数 rentang>a>span>  
  10.    console.log(evt.<span gaya= "lebar: auto; tinggi: auto; terapung: tiada;" id="23_nwp"><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"><span gaya="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">data< /span>a>jarak>);              //输出worker发送来的数据   
    11.  }
  11. skrip>
  12. kepala>
  13. <badan>badan>
  14. 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
  2. var fibonacci =fungsi(n) {
  3. kembali n <2? : arguments.callee(n -1) arguments.callee(n -2);
    4. };
  5. //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
  1. //fibonacci.js
  2. varfibonacci =fungsi(n) {
  3. kembali n <2? n : arguments.call(n -1) arguments.call(n -2);   
  4. };   
  5. onmessage =fungsi(acara) {
  6. var n = parseInt(event."lebar: auto; tinggi: auto; float: tiada;" id="16_nwp">"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 >"color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">data< ; /span, 10);   
  7. postMessage(fibonacci(n));   
  8. };  


　　HTML Open:fibonacci.html

Kod XML/HTMLKonfigurasi Kod Antarabangsa
  1. >  
  2. <html>  
  3. <<span gaya="lebar: auto; tinggi: auto; terapung: tiada;" id="11_nwp"><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"><span gaya="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">kepala span>a>< /span>>  
  4. <meta http-equiv=" Jenis Kandungan" kandungan="teks/html;  charset=utf-8"/>   
  5. <tajuk>pekerja web fibonacci tajuk>  
  6. <skrip taip="teks/ <span style="lebar: auto; ketinggian: auto; terapung: tiada;" id="12_nwp">< 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">< ;span gaya="color:#0000ff;font-size:14px;width:auto; height:auto;float:none;">javascriptspan>a>span>">  
  7.   memuat =fungsi(){   
  8.       var pekerja =baharu Pekerja('fibonacci.js');     
  9.       worker.addEventListener('message', function(event) {   
  10.         var pemasa2 = (baharu Tarikh()).valueOf();   
  11.            console.log( '结果：' acara.<span gaya🎜>🎜 ="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"><span gaya= "warna:#0000ff;font-size:14px;width:auto;height:auto;float:none;">dataspan>a> span>
  12. , '时间:'  pemasa2, '用时：'  ( pemasa2  - pemasa ) );          }, salah);   
  13.       var pemasa = (baharu Tarikh()).valueOf();   
  14.       console.log('开始计算：40','时间:'  pemasa );   
  15.       setTimeout(function(){   
  16.           console.log('定时器<span gaya<span gaya>"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"><span gaya="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">函数span>a>       },1000);   
  17.       worker.postMessage(40);   
  18.       console.log('我在计算数列的时候执行了', '时间:'  (new Date()).valueOf() );   
  19.   }     
  20.   skrip>  
  21. <span gaya= "lebar: auto; tinggi: auto; terapung: tiada;" id="15_nwp"><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"><span gaya="warna:#0000ff;font-size:14px;width:auto;height:auto;float:none;">kepalaspan>a>< ;/span>>  
  22. <badan>  
  23. badan>  
  24. html>  


　　在Chrome中打开fibonacci.html，控制台得到如下输出：
 
开始计算：50 时🎗：40 时🎗：40计算数列的时候执行了 时间:1316508212734
定时器

Kod XML/HTML复制内容到剪贴板
  1. <span gaya="lebar: auto; tinggi : auto;  terapung: tiada;" id="9_nwp"><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"><span gaya="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">函数span>a>span>  

在计算数列时执行了 时间: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
复制内容到剪贴板
  1. // /aj/webWorker/core.js   
  2. fungsi $E(id) {   
  3.     kembali document.getElementById(id);   
  4. }   
  5. onload =fungsi() {   
  6.     //通过pekerja web加载   
  7.     $E('workerLoad').onclick =fungsi() {   
  8.         var url ='http://js.wcdn.cn/aj/mblog/face2' ;   
  9.         var d = (baharu Tarikh()).valueOf();   
  10.         var pekerja =baharu Pekerja(url);   
  11.         worker.onmessage =fungsi(obj) {   
  12.             console.log('pekerja web: '  ((baharu Tarikh()).nilai Of - d));   
  13.         };   
  14.     };   
  15.     //通过jsonp加载   
  16.     $E('jsonpLoad').onclick =fungsi() {   
  17.         var url ='http://js.wcdn.cn/aj/mblog/face1' ;   
  18.         var d = (baharu Tarikh()).valueOf();   
  19.         STK.core.io.scriptLoader({   
  20.             kaedah:'siaran',   
  21.             url : url,   
  22.             selesai : fungsi() {   
  23.                 console.log('jsonp: '  ((baharu Tarikh()) nilai d));   
  24.             }   
  25.         });   
  26.     };   
  27.     //通过ajax< /span>加载   
  28.     $E('ajaxLoad').onclick =fungsi() {   
  29.         var url ='http://js.wcdn.cn/aj/mblog/face' ;   
  30.         var d = (baharu Tarikh()).valueOf();   
  31.         STK.core.io.ajax({   
  32.             url : url,   
  33.             di Selesai : fungsi(json) {   
  34.                 console.log('ajax: '  ((baharu Tarikh()) nilai d));   
  35.             }   
  36.         });   
  37.     };   
  38. };  

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

 

Kod XML/HTML复制内容到剪贴板
  1. >  
  2. <html>  
  3. <<span gaya="lebar: auto; tinggi: auto; terapung: tiada;" id="4_nwp"><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"><span gaya="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">kepala span>a>< /span>>  
  4. <meta http-equiv=" Jenis Kandungan" kandungan="teks/html;  charset=utf-8"/>   
  5. <tajuk>Contoh pekerja: muat < span gaya="lebar: auto; tinggi: auto; terapung: tiada;" id="5_nwp"><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"><span gaya="color:#0000ff;font-size:14px;width:auto;height:auto;float :tiada;">dataspan>< ;/a>span>tajuk>
    6.   
  6. <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">< ;span gaya="color:#0000ff;font-size:14px;width:auto; height:auto;float:none;">javascriptspan>a>span>">skrip>  
  7. <skrip taip="teks/ javascript" src="http://js.wcdn.cn/aj/webWorker/core.js" >skrip>  
  8. kepala>  
  9. <badan>  
  10.     <input taip="butang"  id="beban pekerja" nilai="pekerja web加载">input>  
  11.     <input taip="butang"  id="jsonpLoad" nilai="jsonp加载">input>> 
  12.     <input taip="butang"  id="<span style="lebar: auto; ketinggian: auto; float: tiada;" id="7_nwp">< 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">< ;span gaya="color:#0000ff;font-size:14px;width:auto; height:auto;float:none;">ajaxspan>a>span>Muat" nilai="ajax加载">masukan>  
  13. badan>  
  14. html>  

　　设置HOST
 

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




复制代码代码如下:
pekerja web: 174
jsonp: 25
8

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：
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
Artikel sebelumnya：Perkongsian kod untuk menulis jam pada halaman web menggunakan kemahiran tutorial HTML5_html5 tulenArtikel seterusnya：Perkongsian kod untuk menulis jam pada halaman web menggunakan kemahiran tutorial HTML5_html5 tulen

Artikel berkaitan

Lihat lagi