45
edits
Changes
→Dedicated Worker
</p>
== Dedicated Worker ==
Dedicated workers are usually referred to when general web workers are mentioned. Dedicated workers are only accessible by the script that spawn them and are often represented in the DedicatedWorkerGlobalScope. Dedicated Workers are compatible with both desktop and mobile browsers. Dedicated workers provide us the capability to offload computation from the master thread to a thread running on another logical processor. We have leveraged dedicated workers in the following demo we hosted on GitHub pages:
[https://vitokhangnguyen.github.io/WebWorkerDemo/index.html https://vitokhangnguyen.github.io/WebWorkerDemo/index.html]
In the demo, we take a 6K image and apply a Sobel filter. This filter is used to emphasize the edges within an image. It is often used in image processing and computer vision. When we ran the serial code, we noticed the UI lagged (when scrolling) and the cursor remained in the pointer state throughout the entire filtering process, delaying the user from interacting with the user interface. We took an extensive look into this lagging using the performance tool in Firefox. We discovered that the DOM clicking event occurred throughout the entire duration of the function execution (8 seconds for my PC) and the FPS even dropped down to a low of 0.38, as shown in the image below.
INSERT PROFILER IMAGE HERE
To counter this, we used Dedicated Workers to perform the CPU intensive calculations on another thread, enabling the user to interact with the website.
'''[https://github.com/vitokhangnguyen/WebWorkerDemo/blob/main/scripts/dedicated.js dedicated.js]'''
INSERT CODE HERE (WITH COMMENTS)
Now running the Sobel filter on a separate thread allows us to continue interacting with the UI but, the execution time slightly increased. This is because we have to instantiate the worker, which takes time and resources. Luckily, we can drastically improve the Sobel filtering process by breaking the image down into horizontal chunks. We do this by getting the height and dividing by the number of processors allowed by the browser, which is obtained using the Windows API (''window.navigator.hardwareConcurrency''). Once we chunk the image, we can create ''n'' number of worker objects based on the hardware concurrency set by the browser and post the chunk of data to them with their ID (''index''). When a worker is finished running, it will send a response using the ''onmesasge'' event handler, so we can assign a function to be executed when the event is triggered. In the file, we passed into the web worker constructor, we refer to the global scope using self and call the ''onmessage'' event handler. This event handler receives the posted data we sent from dedicated.js and initiates the Sobel filtering. Once the filtering is done, the data is posted back by referring to self.
INSERT GRAPH OF THE DATA
Here are the results we got from running the Sobel filter on 10 processors. As we utilize more web workers, the faster the filter is applied to the image.
== Shared Worker ==
