Pekerja Web baharu dalam HTML5 dan merupakan teknologi yang digunakan untuk melaksanakan pemprosesan latar belakang dalam aplikasi web
Dalam HTML4, program yang dibuat oleh js semuanya berutas tunggal Jika ia mengambil masa yang lama, antara muka web tidak akan bertindak balas untuk masa yang lama, dalam kes yang paling teruk, kotak gesaan skrip akan muncul:
Minta skrip mengambil masa terlalu lama untuk dijalankan. . . . Ini membawa kita kepada protagonis artikel ini: API Pekerja Web
Menggunakan API ini, pengguna boleh membuat urutan berjalan di latar belakang dengan mudah Untuk mencipta program latar belakang adalah sangat mudah:
var worker = new Worker('*.js');
Nota: Urutan latar belakang tidak boleh mengakses halaman atau objek tetingkap
Ia boleh dihantar melalui Mesej dan menerima mesej dan menghantar data dengan urutan latar belakang:
worker.onmessage = function (e) {};
worker.postMessage = function (e) {};
Sila beritahu saya Dan:
< ;/title><br> <script type ="text/javascript"><br> function count() {<br> var num = 10000000000;<br> var r = 0;<br> untuk (var i = 1; i < bilangan i ) { <br /> r = i;<br /> }<br /> makluman(r);<br /> }<br /> hitung();<br /> </skrip><br> </kepala><br> < ;badan><br> </badan><br> </html><br><br>
</div>
<br><br><img alt="" src="http://files.jb51.net/file_images/article/201304/2013042415483316.jpg">
Jadi bingkai cantik saya keluar. . . Tetapi menggunakan pekerja web tidak akan: <p><br><br></p>
<div class="msgheader"><div class="right">
<span style="CURSOR: pointer" onclick="copycode(getid('phpcode69'));">Menyalin kod<u></u></span>Kodnya adalah seperti berikut:</div></div>
<div class="msgborder" id="phpcode69">< ;!DOCTYPE html><br> <html xmlns="http://www.w3.org/1999/xhtml"><br> <head><br> <title></ tajuk><br> <script type="text/javascript"><br> var worker = new Worker('c.js');<br> worker.onmessage = function (e) {<br> alert( 'dan: ' e.data);<br> };<br> function calculate() {<br> var num = 1000000;<br> worker.postMessage(num);<br> }<br> calculate() ;<br> </script><br> </head><br> <body><br> </body><br> </html><br><br>
</div>
<br><br><div class="msgheader"><div class="right">
<span style="CURSOR: pointer" onclick="copycode(getid('phpcode70'));">Salin kod<u></u></span>Kod tersebut adalah seperti berikut:</div></div>
<div class="msgborder" id="phpcode70">onmessage = fungsi (e) {<br> var num = e.data ;<br> var r = 0;<br> untuk (var i = 1; i < num; i ) {<br> r = i;<br> }<br> postMessage(r );<br>} <br><br>
</div>
<p><img alt="" src="http://files.jb51.net/file_images/article/201304/2013042415483317.jpg">
</p>Saya kadang-kadang tertanya-tanya, kenapa saya mengira nombor yang begitu besar sedangkan saya tiada apa-apa yang perlu dilakukan? . . . . Sudah tentu ini gimik yang membosankan, tetapi saya fikir ada senario yang mungkin memerlukannya. <p>
</p>Semasa saya belajar api fail tadi, ada operasi untuk membaca fail tempatan Jika fail terlalu besar, saya tertanya-tanya adakah ini boleh digunakan? Perlu mencubanya apabila belajar untuk kali kedua. <p>
</p>
<p>Berinteraksi data dengan urutan <strong></strong>
</p>Kami melengkapkan fungsi di sini, menjana tatasusunan secara rawak di latar depan, dan kemudian mengira di latar belakang bahawa ia boleh dibahagikan kepada 3 dan kembali ke latar depan untuk dicetak: <p><br><br></p>
<div class="msgheader"> <div class="right">
<span style="CURSOR: pointer" onclick="copycode(getid('phpcode71'));">Salin kod<u></u></span>Kod adalah seperti berikut:</div>
<div class="msgborder" id="phpcode71">
<br>主程序 <br> <!DOCTYPE html><br> <html xmlns="http://www.w3.org/1999/xhtml"><br> <head><br> <tajuk></tajuk><br> <gaya><br> rentang<br> {<br> pelapik: 10px;<br> }<br> </style><br> < skrip src="../jquery-1.7.1.js" type="text/javascript"></script><br> <script type="text/javascript"><br> $(dokumen ).ready(function () {<br> var worker = new Worker('t1.js');<br> worker.postMessage('');<br> worker.onmessage = function (e) {<br> var arr = e.data.split(';');<br> untuk (var i = 0, len = arr.length; i < len; i ) {<br /> var dom = $('<span> ;' arr[i] '</span>');<br> $('#body').tambah(dom);<br> }<br> }<br> });<br> <br> </script><br> </head><br> <body><br> <div id='body' style=' lebar: 400px; putus-kata:pecah-semua; word-wrap:break-word; '><br> </div><br> </body><br> </html><br>
</div>
<br><br><div class="msgheader">
<div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode72'));"><u>复制代码</u></span></div>代码如下:</div>
<div class="msgborder" id="phpcode72">
<br>生成数组的程序 <br> onmessage = function (e) ; arr.push(parseInt(Math.random() * 100));<br> }<br> <br> var worker = new Worker( 't2.js');<br> worker.postMessage(JSON.stringify(arr));<br> worker.onmessage = fungsi (e) {<br> //把挑选结果发回前台<br> postMessage( e.data);<br> };<br> }<br><br><br>
</div>
<br><br><div class="msgheader"><div class="right">复制代码<span style="CURSOR: pointer" onclick="copycode(getid('phpcode73'));"><u></u>代码如下:</span>
</div></div>判断数组所有数据是否被3整除 <div class="msgborder" id="phpcode73"> onmessage = function (e) {<br> var arr = JSON> ;<br> var arr = JSON>. '';<br> untuk (var i = 0, len = arr.length; i < len; i ) {<br> if (parseInt(arr[i]) % 3 == 0) {<br> if (str != '') str = ';';<br> str = arr[i];<br> }<br> }<br> postMessage(str);<br> close();<br> <br> };<br><br><br>
</div>
<p>
<img alt="" src="http://files.jb51.net/file_images/article/201304/2013042415483320.jpg">程序逻辑描述：</p>
<p>这里用了个线程嵌套</p>
<p>首先执行前台程序，这里初始化了一个子线程“t1”用于将100个数组初>
</p>
<p>t2 接收t1数据，计算后将将字符串转给t1，t1转给前台，前台执行自己的流程结束</p>
<p>
</p>
<p>结语</p>
<p></p>简单来说，我这里就是声明子线程，然后发送数来说，我这里就是声明子线程，然后发送数捐玭片果皆可。<p>
<strong>这里看来，结合上次的通信API Web Sockets ，可以将2个结合做一个网页聊天程序，付序地数据库一些东西用到。<br>
<br>这个样子可能是个不错的东西。 </strong></p>
</div></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Kenyataan：</span><div>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</div></div></div><div class="nphpSytBox"><span>Artikel sebelumnya：<a class="dBlack" title="Berdasarkan Kanvas HTML5: Penjelasan terperinci tentang rentetan, laluan, latar belakang dan kemahiran tutorial pictures_html5" href="http://m.php.cn/ms/faq/6324.html">Berdasarkan Kanvas HTML5: Penjelasan terperinci tentang rentetan, laluan, latar belakang dan kemahiran tutorial pictures_html5</a></span><span>Artikel seterusnya：<a class="dBlack" title="Berdasarkan Kanvas HTML5: Penjelasan terperinci tentang rentetan, laluan, latar belakang dan kemahiran tutorial pictures_html5" href="http://m.php.cn/ms/faq/6328.html">Berdasarkan Kanvas HTML5: Penjelasan terperinci tentang rentetan, laluan, latar belakang dan kemahiran tutorial pictures_html5</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Artikel berkaitan</h2><em><a href="http://m.php.cn/ms/article.html" class="bBlack"><i>Lihat lagi</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/ms/faq/348281.html" title="AlloyTouch全屏滚动插件 30秒搞定顺滑H5页" class="aBlack">AlloyTouch全屏滚动插件 30秒搞定顺滑H5页</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ms/faq/348372.html" title="HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)" class="aBlack">HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ms/faq/348373.html" title="HTML5 canvas 9绘制图片实例详解" class="aBlack">HTML5 canvas 9绘制图片实例详解</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ms/faq/348374.html" title="正则表达式与HTML5新元素" class="aBlack">正则表达式与HTML5新元素</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ms/faq/348469.html" title="NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法" class="aBlack">NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法</a><div class="clear"></div></li></ul></div></div><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/ms/"><b class="icon1"></b><p>Rumah</p></a></li><li><a href="http://m.php.cn/ms/course.html"><b class="icon2"></b><p>Kursus</p></a></li><li><a href="http://m.php.cn/ms/wenda.html"><b class="icon4"></b><p>Soal Jawab</p></a></li><li><a href="http://m.php.cn/ms/login"><b class="icon5"></b><p>saya</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/ms/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/ms/"><b class="icon1"></b><span>Rumah</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ms/course.html"><b class="icon2"></b><span>Kursus</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ms/article.html"><b class="icon3"></b><span>Artikel</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ms/wenda.html"><b class="icon4"></b><span>Soal Jawab</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ms/dic.html"><b class="icon6"></b><span>Kamus</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ms/course/type/99.html"><b class="icon7"></b><span>Manual</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ms/xiazai/"><b class="icon8"></b><span>Muat turun</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ms/faq/zt" title="Topik"><b class="icon12"></b><span>Topik</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/ms/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/ms/" >Rumah</a></div><div class="swiper-slide"><a href="http://m.php.cn/ms/article.html" class="hover">Artikel</a></div><div class="swiper-slide"><a href="http://m.php.cn/ms/wenda.html" >Soal Jawab</a></div><div class="swiper-slide"><a href="http://m.php.cn/ms/course.html" >Kursus</a></div><div class="swiper-slide"><a href="http://m.php.cn/ms/faq/zt" >Topik</a></div><div class="swiper-slide"><a href="http://m.php.cn/ms/xiazai" >Muat turun</a></div><div class="swiper-slide"><a href="http://m.php.cn/ms/game" >Permainan</a></div><div class="swiper-slide"><a href="http://m.php.cn/ms/dic.html" >Kamus</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a onclick="javascript:setlang('en');" class="language course-right-orders chooselan " href="javascript:;"><span>English</span><span>（EN）</span></a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a><a onclick="javascript:setlang('ja');" class="language course-right-orders chooselan " href="javascript:;"><span>日本語</span><span>（JA）</span></a><a onclick="javascript:setlang('ko');" class="language course-right-orders chooselan " href="javascript:;"><span>한국어</span><span>（KO）</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>Melayu</span><span>（MS）</span></a><a onclick="javascript:setlang('fr');" class="language course-right-orders chooselan " href="javascript:;"><span>Français</span><span>（FR）</span></a><a onclick="javascript:setlang('de');" class="language course-right-orders chooselan " href="javascript:;"><span>Deutsch</span><span>（DE）</span></a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', {
slidesPerView : 'auto',
observer: true,//修改swiper自己或子元素时，自动初始化swiper
observeParents: true,//修改swiper的父元素时，自动初始化swiper
});
</script></div></div><!--顶部导航 end--><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) {
var _times = times || -1, //100次
_interval = interval || 20, //20毫秒每次
_self = this,
_selector = this.selector, //选择器
_iIntervalID; //定时器id
if( this.length ){ //如果已经获取到了，就直接执行函数
func && func.call(this);
} else {
_iIntervalID = setInterval(function() {
if(!_times) { //是0就退出
clearInterval(_iIntervalID);
}
_times <= 0 || _times--; //如果是正数就 --
_self = $(_selector); //再次选择
if( _self.length ) { //判断是否取到
func && func.call(_self);
clearInterval(_iIntervalID);
}
}, _interval);
}
return this;
}
$("table.syntaxhighlighter").wait(function() {
$('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>");
});
$(document).on("click", ".cnblogs_code_footer",function(){
$(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide();
});
$('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}});
</script></body></html>