Changes

The demo is accessible here or through the following URL:<mark>[https://vitokhangnguyen.github.io/WebWorkerDemo/shared.html<https://vitokhangnguyen.github.io/WebWorkerDemo/mark>shared.html]

== Additional Web Worker's Features == === Load External Scripts === In the regular browser'scope, scripts can import to use data or functions from each other by using the <script> tag and adding them to the same HTML file. For example, by doing the following, script2 and script1 will have the same global scope: <pre><script src="/script1.js"></script><script src="/script2.js"></script></pre> However, with the web workers, that would not work because the worker processes do not load the HTML files. To achieve the same effect, the WorkerGlobalScope offers a function namely importScripts(). In the worker's source file, we can do the following so that we can access the global scope of 2 source files: script1.js, script2.js and foobar.js. <pre>importScripts("script1.js", "script2.js", "foobar.js")</pre> Notice that the function can take as many arguments as possible and the effect is going to be the same as importing one by one. === Transferable Objects === It is important to realize that in Web Worker communications, there are no real shared data! The data is transferred among the processes via message passing and the browser implements an algorithm called [https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm Structured Cloning] to perform this. In short, an object in JavaScript is recursively copied and represented in the JSON format to be parsed upon being received. The method has a weakness that if the copied object is too large in size, the process of copying and transmiting this object through a message can take very long. To remedy this issue, most modern browsers nowadays allow transferable objects which means an object would stay in memory and would not be copied while a reference to it is transferred over to the destination process, instead. The old reference to that object in the source process would no longer be available after the transfer. This makes a huge performance boost when transferring large objects. To utilize the feature, the following syntax of the Worker.postMessage() function is employed: <pre>let worker = new Worker('worker.js');worker.postMessage(data, [arrayBuffer1, arrayBuffer2]);</pre> Note that the 1st argument of the function call is the data you want to copy and send and the 2nd argument is an array of items you want to transfer. The array must only contain items of the ArrayBuffer type to be transferred. === Error Handling === Web Worker API provides the capability of handling errors in the worker processes from the main process. When an Error is raised in a worker, an ErrorEvent will be fired to the main process. We can listen to this event by assigning a function to the event handler onerror of the worker object. The following code sets up the main process to print to the console a message when an Error is raised in the worker: <pre>let worker = new Worker('worker.js');worker.onerror = function(e) { console.log(`An error occcured in the ${e.filename} worker at line %{e.lineno}`); console.log(`Error: ${e.message}`);}</pre> Note that the ErrorEvent has 3 special properties which are filename (the name of the worker's source file where the error occured), lineno (the line number in the worker's source file where the error occured) and message (a description of the error).

<li>HTML Living Standard, Web Workers: https://html.spec.whatwg.org/multipage/workers.html. Last updated: 2 Dec. 2020.</li> <li>MDN Web Docs, Web Worker API: https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API. Last updated: 26 Aug. 2020.</li> <li>Can I use..., Support tables for HTML5, CSS3, etc. , Web Workers: https://caniuse.com/webworkers. Last updated: 30 Nov. 2020.</li> <li>Can I use..., Support tables for HTML5, CSS3, etc. , Shared Workers: https://caniuse.com/sharedworkers. Last updated: 30 Nov. 2020.</li> <li>HTML5Rocks, The Problem: JavaScript Concurrency: https://www.html5rocks.com/en/tutorials/workers/basics/. Last updated: 26 Jul. 2020.</li><li>MDN Web Docs, Service Worker API: https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API. Last updated: 16 Nov. 2020.</li><li>MDN Web Docs, ChromeWorker: https://developer.mozilla.org/en-US/docs/Mozilla/Gecko/Chrome/API/ChromeWorker. Last updated: 18 Feb. 2020.</li>