Introduction and use of multithreading of Web Workers
What are Web Workers
Web Workers is a multi-threaded solution for JavaScript provided by HTML5
We can assign some programs with a large amount of computation to Web Workers so that the main thread will not be frozen due to the continuous calculation (occupied) and other user interaction operations cannot respond, thus freeing the main thread
Note: the child threads of ==Web Workers are completely controlled by the main thread and cannot manipulate DOM==, so the nature of JavaScript as a single-threaded non-blocking language does not change
How do I use Web Workers
Main API used
// Create a Web Workers instance
const worker = new Worker(path)
// Send data to another thread
worker.postMessage(data)
// The callback function executed after the data is retrieved
worker.onmessage = function () {}
Copy the codeFirst we need to create a JS file that defines Web Workers
/* The worker.js file will be used as a thread split */
// onMessage is a callback function that is executed when receiving data from the autonomous thread
var onmessage = function (e){
console.log('Thread receives data from the main thread:${e.data}`)
var number = e.data
var result = fibonacci2(number)
console.log('The data sent by the thread to the main thread...${result}`)
postMessage(result) PostMessage () sends data to the main thread after calculation
}
// Compute module
function fibonacci2(number) {
if (number <= 2) {return 1
}else{
return fibonacci2(number-1) + fibonacci2(number-2)}}Copy the codeIn the main thread we need to create the Web Workers instance and pass the data it needs to compute to the thread
<body>
<input type="text" placeholder="Value">
<button>To calculate</button>
<script>
const input = document.getElementsByTagName('input') [0]
const button = document.getElementsByTagName('button') [0]
// Define a worker instance in the current main thread
const worker = new Worker('worker.js')
button.onclick = function () {
var number = input.value
if(number){
//console.log(fibonacci2(number)) // This step is the most computationalstep, so it needs to be handled by splitthreads
console.log('The main thread sends data to the slave thread... `)
// Send the data to be computed to the thread
worker.postMessage(number)
// The callback function is executed when data from the thread is received
worker.onmessage = function (e){
console.log('The main thread receives data from the thread:${e.data}`)}}}</script>
</body>
Copy the codeOne might notice that the onMessage callback and postMessage() in worker.js are global object methods, so we need to look at its this
/ / in the worker. In js
console.dir(this) / / global object for DedicatedWorkesGlobalScope
Copy the codeThreading workers have their own global objects
Methods such as alert() that belong to the global object Window cannot be called because the global object is no longer window
The goal of the designers is that the thread splitter only serves the master thread, not replaces the main thread