JavaScript是单线程语言,前面的任务没做完,后面的任务只能等着。
web worker可以为JavaScript创建多线程环境,好处是,一些计算密集型或高延迟的任务,被 Worker 线程负担了,主线程(通常负责 UI 交互)就会很流畅,不会被阻塞或拖慢。
Web Worker 有以下几个使用注意点。
(1)同源限制
分配给 Worker 线程运行的脚本文件,必须与主线程的脚本文件同源。
(2)DOM 限制
Worker 线程所在的全局对象,与主线程不一样,无法读取主线程所在网页的 DOM 对象,也无法使用document、window、parent这些对象。但是,Worker 线程可以navigator对象和location对象。
(3)通信联系
Worker 线程和主线程不在同一个上下文环境,它们不能直接通信,必须通过消息完成。
(4)脚本限制
Worker 线程不能执行alert()方法和confirm()方法,但可以使用 XMLHttpRequest 对象发出 AJAX 请求。
(5)文件限制
Worker 线程无法读取本地文件,即不能打开本机的文件系统(file://),它所加载的脚本,必须来自网络。
具体的一些函数和使用方法看看阮老师的博客
阮一峰web worker
下面是我用web worker写的一个小demo,最近绿茶挺火的,我叫他“茶艺聊天室”
![在这里插入图片描述](/img/loading.gif)
html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="css/communication.css"> </head> <body> <div class="communicated"> <div class="bigBox"> <div class="connent"> <div class="contant" id="window-talk"> </div> <div class="send"> <form action="/upload/img" method="post" enctype="multipart/form-data" name="photo" id="selectPro" target="nm_iframe" multiple="multiple"> <input type="file" name="photo" id="inputphoto" value="" multiple="multiple"> </form> <div name="sent" id="msg1" class="seatArea" placeholder="请输入发送内容" contenteditable="true" style="overflow: auto;"></div> <button class="stuSend" id="btn">发送</button> </div> </div> </div>
</div> <script type="text/javascript" src="./talk.js"></script> </body> </html>
|
css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194
| *{ padding: 0; margin: 0; list-style: none; text-decoration: none; } html{ background: #eee5e5; } .communicated{ width: 100%; height: 100%; } .bigBox{ position: relative; margin: 0 auto; width: 1260px; height: auto; background-size: 15%; background-position: 142px 246px,931px 227px; background-repeat: no-repeat,no-repeat; } .return{ position: absolute; top: 0px; left: 20px; width: 100px; height: 100px; background-image: url(../img/fanhui.png); background-size: contain; background-repeat: no-repeat; } .connent{ margin: 50px auto; width: 600px; height: 500px; border-radius: 10px; } .contant{ border: 1px solid #888; position: relative; width: 600px; height: 350px; overflow: auto; border-radius: 10px 10px 0 0; background: #fff; } .send{ position: relative; width: 600px; height: 150px; border: 1px solid #888; background: #fff; border-top: none; border-radius: 0 0 5px 5px; } .seatArea{ margin: 0px; width: 579px; border: none; height: 110px; resize: none; font-size: 18px; padding: 10px; } .stuSend{ position: absolute; right: 10px; bottom: 6px; border: none; border-radius: 10px; width: 70px; height: 30px; text-align: center; color: #333; cursor: pointer; } .stuSend:focus{ outline: none; } .own{ float: right; overflow: auto; border-radius: 5px; padding: 10px; margin: 10px 0; background: #7fff00; max-width: 300px; height: auto; margin: 10px 0; } .bg-green{
background: #9eea6a; } .bg-white{
background: #eee; } .other{ float: left; overflow: auto; border-radius: 5px; padding: 10px; max-width: 300px; height: auto; margin: 10px; } .line{ float: left; width: 580px; } .seatArea:focus{ outline: none; border: none; } .stuSend:hover{ color: #fff; background: #8e0b02; } #data-list {
position: absolute; right: 80px; bottom: 6px; border: none; border-radius: 10px; width: 116px; height: 30px; text-align: center; color: #333; cursor: pointer; border: 1px black; display: block;
} #data-list>*{ width: 98px; height: 21px; } #get-page{ width: 300px; height: 100px; display: block; margin: auto; } .history{ display: block; text-align: center; font-size: 14px; color:#6b9bdc; } .loadding{ margin: 0 auto; width: 20px; }
.photo{ width: 30px; height: 30px; position: absolute; bottom: 110px; right: 10px; cursor: pointer; } #inputphoto{ position: absolute; bottom: 97px; right: 5px; opacity: 0; width: 40px; height: 40px; z-index: 3; cursor: pointer; } .seatArea:empty:before{ content: attr(placeholder); color: #888; }
.seatArea:focus:before{ content:none; } .seatArea img{ height: 100px; }
|
js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41
| var msg1 = document.getElementById("msg1"); msg1.addEventListener("keydown",function(e) { if(e.keyCode === 13){ order() } })
if(typeof(Worker)!=="undefined"){ var myWorker = new Worker("my_task.js"); myWorker.onmessage = function (oEvent) { console.log("Worker said : " + oEvent.data); }; document.getElementById("btn").onclick=order }else{ alert("不支持web worker "); } function order() { var msg= document.getElementById("msg1").innerHTML; document.getElementById("msg1").innerHTML = " " myWorker.postMessage(msg); var div=document.createElement("div"); div.className = "line"; var div2 = document.createElement('div'); div2.innerHTML= msg; div2.className = "bg-green own" div.appendChild(div2) document.getElementById("window-talk").appendChild(div); myWorker.onmessage=function(data){ var div_inner=document.createElement("div"); div_inner.className = "line"; var div2_inner = document.createElement('div'); div2_inner.innerHTML= msg; div2_inner.className = "bg-white other" div_inner.appendChild(div2_inner) div2_inner.innerHTML=data.data.msg; div_inner.appendChild(div2_inner); document.getElementById("window-talk").appendChild(div_inner); } }
|
1 2 3 4 5 6 7 8 9 10 11 12
| var send = ['你好骚啊', '你要这样想我也没办法','滚'] var i = 0; onmessage = function (oEvent) {
postMessage( { time:new Date(), msg:send[i] }); i == 2 ? i = 0 : i++; };
|