深入 HTML5 Web Worker 应用实践：多线程编程（3）工作线程（Web Worker）应用与实践3
|
- UID
- 1066743
|
深入 HTML5 Web Worker 应用实践：多线程编程（3）工作线程（Web Worker）应用与实践3
应用场景三：HTML5 线程代理多线程代理技术
随着多核处理器的流行，现代的计算机一般都拥有多核的 CPU，这也使得任务能够在处理器级别上并发执行。如果我们要在一个具有多核 CPU 的客户端上用单线程去执行程序即处理业务逻辑，往往不能最大化的利用系统资源。因此，在这种情况下我们可以将一个耗时或者复杂的任务拆分成多个子任务，把每一个子任务分担给一个工作线程，这样多个工作现场就共同承担了单个线程的工作负载，同时又能够并发的去执行，最大化的利用了系统资源（CPU、内存、I/O 等）。
下面我们向读者提供一个线程代理应用的例子：计算全球人口的数量。
清单 16. 主页面（仅仅是用来显示计算结果）代码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
| <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Shared worker example: how to use delegation worker in HTML5</title>
<script>
var worker = new SharedWorker('delegationworker.js');
var log = document.getElementById('response_from_worker');
worker.onmessage = function (event) {
//resolve the population from delegation worker
var resultdata=event.data;
var population=resultdata.total_population;
var showtext='The total population of the word is '+population;
document.getElementById('response_from_worker').textContent = showtext;
};
</script>
</head>
<body onload=''>
<output id='response_from_worker'>
Shared worker example: how to use delegation worker in HTML5
</output>
</body>
</html>
|
清单 17. 主工作线程代码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
| /*
* define the country list in the whole word
* take following Array as an example
*/
var country_list = ['Albania','Algeria','American','Andorra','Angola','Antigua','....'];
// define the variable to record the population of the word
var total_population=0;
var country_size=country_list.length;
var processing_size=country_list.length;
for (var i = 0; i < country_size; i++)
{
var worker = new Worker('subworker.js');
//wrap the command, send to delegations
var command={command:'start',country:country_list};
worker.postMessage(command);
worker.onmessage = update_results;
}
/*
* this function will be used to update the result
* @param event
* @return
*/
function storeResult(event)
{
total_population += event.data;
processing_size -= 1;
if (processing_size <= 0)
{
//complete the whole work, post results to web page
postMessage(total_population);
}
}
|
清单 18. 代理线程代码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
| //define the onmessage hander for the delegation
onmessage = start_calculate;
/*
* resolve the command and kick off the calculation
*/
function start_calculate(event)
{
var command=event.data.command;
if(command!=null&&command=='start')
{
var coutry=event.data.country;
do_calculate(country);
}
onmessage = null;
}
/*
* the complex calculation method defined here
* return the population of the country
*/
function do_calculate(country)
{
var population = 0;
var cities=//get all the cities for this country
for (var i = 0; i < cities.length; i++)
{
var city_popu=0;
// perform the calculation for this city
//update the city_popu
population += city_popu;
}
postMessage(population);
close();
}
|
|
|
|
|
|
|
