HTML5 webworker api介紹

webworker的背景
JavaScript是單線程的票摇,所以當我們需要在同一個頁面背后做某些事情的時候怎么辦拘鞋?通常的做法是使用settimeout,但是html5給我們提供了一個方便的方法 webworker(工作線程)
但是使用它有一些限制:
Web Worker無法訪問DOM節(jié)點矢门;
Web Worker無法訪問全局變量或是全局函數(shù)盆色;
Web Worker無法調(diào)用alert()或者confirm之類的函數(shù);
Web Worker無法訪問window祟剔、document之類的瀏覽器全局變量隔躲;
我們可以使用它做一些比較耗時的處理

<!DOCTYPE html>
    <head>
        <title>worker</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <script>
            function init(){
                //創(chuàng)建一個Worker對象,并向它傳遞將在新線程中執(zhí)行的腳本url
                var worker = new Worker('worker.js');
                //接收worker傳遞過來的數(shù)據(jù)
                worker.onmessage = function(event){
                    document.getElementById('result').innerHTML+=event.data+"<br/>" ;
                };
            };
        </script>
    </head>
    <body onload = "init()">
        <div id="result"></div>
    </body>
</html>

work.js

var i = 0;
function timedCount(){
    for(var j = 0, sum = 0; j < 100; j++){
        for(var i = 0; i < 100000000; i++){
            sum+=i;
        };
    };
    //將得到的sum發(fā)送回主線程
    postMessage(sum);
};
//將執(zhí)行timedCount前的時間物延,通過postMessage發(fā)送回主線程
postMessage('Before computing, '+new Date());
timedCount();
//結(jié)束timedCount后宣旱,將結(jié)束時間發(fā)送回主線程
postMessage('After computing, ' +new Date());

上面代碼執(zhí)行的流程是:創(chuàng)建的worker對象,并用onmessage方法接收worker.js里面postMessage傳遞過來的數(shù)據(jù)(event.data)叛薯,并將數(shù)據(jù)追加到div#result中浑吟。
執(zhí)行結(jié)果如下


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市耗溜,隨后出現(xiàn)的幾起案子组力,更是在濱河造成了極大的恐慌,老刑警劉巖抖拴,帶你破解...
    沈念sama閱讀 210,914評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件燎字,死亡現(xiàn)場離奇詭異,居然都是意外死亡阿宅,警方通過查閱死者的電腦和手機候衍,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,935評論 2 383
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來家夺,“玉大人,你說我怎么就攤上這事伐弹±觯” “怎么了?”我有些...
    開封第一講書人閱讀 156,531評論 0 345
  • 文/不壞的土叔 我叫張陵惨好,是天一觀的道長煌茴。 經(jīng)常有香客問我,道長日川,這世上最難降的妖魔是什么蔓腐? 我笑而不...
    開封第一講書人閱讀 56,309評論 1 282
  • 正文 為了忘掉前任,我火速辦了婚禮龄句,結(jié)果婚禮上回论,老公的妹妹穿的比我還像新娘散罕。我一直安慰自己,他們只是感情好傀蓉,可當我...
    茶點故事閱讀 65,381評論 5 384
  • 文/花漫 我一把揭開白布欧漱。 她就那樣靜靜地躺著,像睡著了一般葬燎。 火紅的嫁衣襯著肌膚如雪误甚。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,730評論 1 289
  • 那天谱净,我揣著相機與錄音窑邦,去河邊找鬼。 笑死壕探,一個胖子當著我的面吹牛冈钦,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播浩蓉,決...
    沈念sama閱讀 38,882評論 3 404
  • 文/蒼蘭香墨 我猛地睜開眼派继,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了捻艳?” 一聲冷哼從身側(cè)響起驾窟,我...
    開封第一講書人閱讀 37,643評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎认轨,沒想到半個月后绅络,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,095評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡嘁字,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,448評論 2 325
  • 正文 我和宋清朗相戀三年恩急,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片纪蜒。...
    茶點故事閱讀 38,566評論 1 339
  • 序言:一個原本活蹦亂跳的男人離奇死亡衷恭,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出纯续,到底是詐尸還是另有隱情随珠,我是刑警寧澤,帶...
    沈念sama閱讀 34,253評論 4 328
  • 正文 年R本政府宣布猬错,位于F島的核電站窗看,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏倦炒。R本人自食惡果不足惜显沈,卻給世界環(huán)境...
    茶點故事閱讀 39,829評論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望逢唤。 院中可真熱鬧拉讯,春花似錦涤浇、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,715評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至盖彭,卻和暖如春纹烹,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背召边。 一陣腳步聲響...
    開封第一講書人閱讀 31,945評論 1 264
  • 我被黑心中介騙來泰國打工铺呵, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人隧熙。 一個月前我還...
    沈念sama閱讀 46,248評論 2 360
  • 正文 我出身青樓片挂,卻偏偏與公主長得像,于是被迫代替她去往敵國和親贞盯。 傳聞我的和親對象是個殘疾皇子音念,可洞房花燭夜當晚...
    茶點故事閱讀 43,440評論 2 348

推薦閱讀更多精彩內(nèi)容

  • 最近在閱讀這本Nicholas C.Zakas(javascript高級程序設(shè)計作者)寫的最佳實踐、性能優(yōu)化類的書...
    undefinedR閱讀 2,154評論 0 30
  • 前端面試題的簡單整理躏敢,都只是大概回答闷愤,具體某些問題的具體理解后續(xù)會補上。 前端頁面有哪三層構(gòu)成件余,分別是什么?作用是...
    李歡li閱讀 476評論 0 2
  • 1. Java基礎(chǔ)部分 基礎(chǔ)部分的順序:基本語法讥脐,類相關(guān)的語法,內(nèi)部類的語法啼器,繼承相關(guān)的語法旬渠,異常的語法,線程的語...
    子非魚_t_閱讀 31,597評論 18 399
  • 如今媒體網(wǎng)絡(luò)風行的年代,面對一事一物一人损谦,公說公有理岖免,婆說婆有理,你是否被眼花撩亂的生活方式和人生觀念左右得...
    shaix閱讀 406評論 2 1
  • 這是一款全中文的益智游戲成翩,可以和好友一起體驗中國特色文化成語的魅力觅捆,還可以通過微信分享赦役、求助和挑戰(zhàn)你的朋友們麻敌,看看...
    初生牛犢就怕虎閱讀 576評論 0 0