HTML5 Web Workers
HTML5 introduces the concept of Web Workers for running scripts in a thread-like manner. Web Worker scripts can be started in the background and run in parallel to the main HTML page. This allows heavy lifting tasks like number crunching or graphics processing to be carried out without interrupting the main user interface.
Examples
The example below shows the use Web Workers in a HTML page. Two Web Workers running the worker.js Javascript are started. The line with "onmessage" defines a function that will be called by the worker script for event notifications. In simple words, it is a mechanism for the web worker to send a message to the main page.
<!DOCTYPE html>
<html>
<head>
<title>Web Workers</title>
</head>
<body>
<p>Loop 1: <output id="result1"></output></p>
<p>Loop 2: <output id="result2"></output></p>
<script>
var worker1 = new Worker('worker.js');
worker1.onmessage = function (event) {
document.getElementById('result1').textContent = event.data;
};
var worker2 = new Worker('worker.js');
worker2.onmessage = function (event) {
document.getElementById('result2').textContent = event.data;
};
</script>
</body>
</html>
|
for (var x = 1; x <= 1000; x =x+1)
{
for (var y = 1; y <= 1000000; y =y+1)
;//do nothing
postMessage(x);
}
|
DEMO: http://goo.gl/kL3V8b
HTML:
<!DOCTYPE HTML><html>
<head>
<title>Worker example: One-core computation</title>
<style>
div{
display: inline-block;
}
</style>
</head>
<body>
<p>The loop 1: <div id="result1"></div></p>
<p>The loop 2: <div id="result2"></div></p>
<p>The loop 3: <div id="result3"></div></p>
<p>The loop 4: <div id="result4"></div></p>
<script>
var worker1 = new Worker('worker.js');
worker1.onmessage = function (event) {
document.getElementById('result1').textContent = event.data;
};
var worker2 = new Worker('worker.js');
worker2.onmessage = function (event) {
document.getElementById('result2').textContent = event.data;
};
var worker3 = new Worker('worker.js');
worker3.onmessage = function (event) {
document.getElementById('result3').textContent = event.data;
};
var worker4 = new Worker('worker.js');
worker4.onmessage = function (event) {
document.getElementById('result4').textContent = event.data;
};
</script>
</body>
</html>
JS( worker.js ):
for (var x = 1; x <= 1000; x =x+1)
{
for (var y = 1; y <= 1050000; y =y+1)
;//do nothing
postMessage(x);
}
原文網址:http://www.html5marketplace.com/html5/webworkers.shtml
沒有留言:
張貼留言