Comment: Web Workers is a new technology added in HTML5 to implement backend processing in web applications.
Web Workers is a new technology added in HTML5 to implement background processing in web applications.
In HTML4, the programs created by js are all single-threaded. If it takes a long time, the web interface will not respond for a long time. In the worst case, a script prompt box will pop up:
It prompts that the script runs for too long, whether to continue. . . . So the protagonist of this article is introduced: Web Workers API
Using this API users can easily create threads running in the background, and it is very simple to create background programs:
var worker = new Worker('*.js');
Note: Background threads cannot access pages or window objects.
Data can be passed with background threads by sending messages and receiving messages:
worker.onmessage = function (e) {};
worker.postMessage = function (e) {};
Let's talk about summing:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function calculate() {
var num = 10000000000;
var r = 0;
for (var i = 1; i < num; i++) {
r += i;
}
alert(r);
}
calculate();
</script>
</head>
<body>
</body>
</html>
So my beautiful frame was given. . . But using web workers won't:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
var worker = new Worker('c.js');
worker.onmessage = function (e) {
alert(' and:' + e.data);
};
function calculate() {
var num = 1000000;
worker.postMessage(num);
}
calculate();
</script>
</head>
<body>
</body>
</html>
onmessage = function (e) {
var num = e.data;
var r = 0;
for (var i = 1; i < num; i++) {
r += i;
}
postMessage(r);
}
Sometimes I think, why do I calculate such a large number if I have nothing to do. . . . . Of course this is a boring trick, but I think there is a scenario that may require this.
When I was learning the file api earlier, there was an operation to read local files. If the file is too large, it will be very slow. I wonder if this can be applied? It is necessary to try it during the second study.
Interact data with threads
We complete a function here, randomly generate an array in the foreground, and then return to the foreground to print in the background if the calculation can be 3 out of 3:
Main program
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
span
{
padding: 10px;
}
</style>
<script src="../jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var worker = new Worker('t1.js');
worker.postMessage('');
worker.onmessage = function (e) {
var arr = e.data.split(';');
for (var i = 0, len = arr.length; i < len; i++) {
var dom = $('<span>' + arr[i] + '</span>');
$('#body').append(dom);
}
}
});
</script>
</head>
<body>
<div>
</div>
</body>
</html>
The program that generates an array
onmessage = function (e) {
var arr = [];
for (var i = 0; i < 100; i++) {
arr.push(parseInt(Math.random() * 100));
}
var worker = new Worker('t2.js');
worker.postMessage(JSON.stringify(arr));
worker.onmessage = function (e) {
//Send the selection results back to the front desk
postMessage(e.data);
};
}
Determine whether all data in the array is divided by 3
onmessage = function (e) {
var arr = JSON.parse(e.data);
var str = '';
for (var i = 0, len = arr.length; i < len; i++) {
if (parseInt(arr[i]) % 3 == 0) {
if (str != '') str += ';';
str += arr[i];
}
}
postMessage(str);
close();
};
Program logic description:
A thread nesting is used here
First, execute the foreground program, where a child thread t1 is initialized to initialize 100 arrays.
Then the child thread t1 initializes the child thread t2 (used to traverse the array, take out numbers that can be divisible by 3, and form a string), and t1 passes the array data to t2
t2 receives t1 data, and after calculation, it will transfer the string to t1, t1 to the front desk, and the front desk will execute its own logic
Process ends
Conclusion
Simply put, I am declaring the child thread here, then sending data to the child postMessage, and then waiting for the result.
It seems that combined with the last communication API Web Sockets, two can be combined into a web chat program, and even some local storage/local databases can be used.
This may be a good thing.