Web Worker
程序员文章站
2022-07-03 16:11:02
...
<!DOCTYPE html>
<html>
<body>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<br /><br />
<script>
var w;
function startWorker()
{
if(typeof(Worker)!=="undefined")
{
if(typeof(w)=="undefined")
{
w=new Worker("dem.js");
}
w.onmessage = function (event) {
document.getElementById("result").innerHTML=event.data;
};
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers...";
}
}
function stopWorker()
{
w.terminate();
}
</script>
</body>
</html>
var i=0;
function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
一、概述
A web worker is a JavaScript running in the background, without affecting the performance of the page.
What is a Web Worker?
When executing scripts in an HTML page, the page becomes unresponsive until the script is finished.
A web worker is a JavaScript that runs in the background, independently of other scripts, without affecting the performance of the page. You can continue to
do whatever you want: clicking, selecting things, etc., while the web worker runs in the background.
二、使用方法及步骤
(1)
检查浏览器是否支持
Check Web Worker Support
Before creating a web worker, check whether the user's browser supports it:
if(typeof(Worker)!=="undefined")
{
// Yes! Web worker support!
// Some code.....
}
else
{
// Sorry! No Web Worker support..
}
(2)
Create a Web Worker File
Now, let's create our web worker in an external JavaScript.
Here, we create a script that counts. The script is stored in the "demo_workers.js" file:
var i=0;
function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
The important part of the code above is the postMessage() method - which is used to posts a message back to the HTML page.
Note: Normally web workers are not used for such simple scripts, but for more CPU intensive tasks.
(3)
Create a Web Worker Object
Now that we have the web worker file, we need to call it from an HTML page.
The following lines checks if the worker already exists, if not - it creates a new web worker object and runs the code in "demo_workers.js":
if(typeof(w)=="undefined")
{
w=new Worker("demo_workers.js");
}
Then we can send and receive messages from the web worker.
Add an "onmessage" event listener to the web worker.
w.onmessage=function(event){
document.getElementById("result").innerHTML=event.data;
};
When the web worker posts a message, the code within the event listener is executed. The data from the web worker is stored in event.data.
(4)
Terminate a Web Worker
When a web worker object is created, it will continue to listen for messages (even after the external script is finished) until it is terminated.
To terminate a web worker, and free browser/computer resources, use the terminate() method:
w.terminate();
三、注意事项
Web Workers and the DOM
Since web workers are in external files, they do not have access to the following JavaScript objects:
The window object
The document object
The parent object
web worker must run in container
上一篇: 项目中遇到的知识点
推荐阅读
-
利用CSS制作脸书_html/css_WEB-ITnose
-
求教,QQ和YY那个弹窗结构是用什么语言结构?html?xml?结合的是c c++ 还是?_html/css_WEB-ITnose
-
CSS兼容性总结_html/css_WEB-ITnose
-
IE和FF高度差_html/css_WEB-ITnose
-
position:fixed对元素影响的疑问?_html/css_WEB-ITnose
-
border-radius 知识点_html/css_WEB-ITnose
-
Web技术进阶—PHP构建网站
-
B/S(Web)实时通讯解决方案分享
-
java 返回图片到页面_html/css_WEB-ITnose
-
Codeforces Round #259 (Div. 2) A B C 三连发_html/css_WEB-ITnose