converting synchronous code to asynchronous code

Question

I am learning to develop chrome extensions(and at the same time learning javascript as well). I am experimenting with an extension that runs on youtube webpage. The thing is when I scroll, sometimes the webpage kinda feels a little jittery.

So, I started looking for possible reasons. I came across a few good videos including "what the heck is event loop by Philip Roberts" in which he talked about event loop and other related stuff. This made me wonder if it's because of this very reason the webpage feels jittery. The code in the content script is synchronous and I don't have much experience with asynchronous coding in javascript. Concepts like promises, async/await are new to me.

Here is the code in the content script at a very high level.

chrome.storage.sync.get(); // getting some data here
let activateButton = document.createElement("div");
activateButton.id = "activate-ext";
activateButton.addEventListener("click", getData);

there is a call to chrome storage api
some code to render a button(there is a click event listener attached to this button which renders another UI.)
then I added this button to the dom

Now, most of the stuff is happening in the getData callback. When a user clicks on that button. the extension:

retrieve data from the webpage and does some regex matching and then the string values that I want is stored in an array a.
then when I have the array a, I am using a map on it to create another array b
then another operation on all the elements of b to get another array c.
and now finally when I have the array c, I call another function that generates the final UI(using values from the array c)

This is how getData looks like:

function getdata(){
    const regex = /some_regex/g;
    let match = regex.exec(data);
    while (match) {
            a.push(match[index]);
            match = regex.exec(description)
        }
    b = createAnotherArray(a) // this function returns array b 
    c = anotherOperation(b) 
    generateUI(c) // in this function I am rendering the UI
}

Now, all this code is synchronous(apart from the call to chrome storage API and some callbacks) and I believe some of these operations(like regex matching) take time which blocks the event loop.

So what would be the best way to restructure this whole code using promises(async/await) so it does not block the browser from rendering/updating UI. I also saw some loops with async/await and I too have loops in my code too. So, do I need to do that too?

I have news for you. Wrapping synchronous code in a promise does not block any less of the main thread. The synchronous code still takes exactly the same amount of the main thread CPU to run. So, if you're hogging a bit to much of the CPU, then you will still be hogging a bit too much of the CPU, even if you wrap things in promises. What you need to do is to instrument things and find out where the time is really going and which operation is really leading to the jerkiness. Instrument first, redesign only when you have actual performance data that points to the precise problem. — jfriend00
– jfriend00, Commented Jul 27, 2020 at 22:42
Unless the data is very large, the regex loop should be quick and it's not worth restructuring the code. — Barmar
– Barmar, Commented Jul 27, 2020 at 22:42
The only way to turn synchronous processing such as regex.exec into async code is to stick it in a worker thread, which will almost certainly be more effort than it's worth. If your webpage is feeling jittery it's because you're running some code way too often - consider caching results or caching references to buttons or whatever else is being done way too often. — Klaycon
– Klaycon, Commented Jul 27, 2020 at 22:48

Ziarno · Accepted Answer · 2020-07-27 22:47:54Z

1

JavaScript is single-threaded. Event loop included - simply, it's just a queue for tasks put into it. If your JS code is actually causing performance issues doing some stuff asynchronously won't help, since then that code will block the event loop anyway.

Only available option is Web workers.

answered Jul 27, 2020 at 22:47

Ziarno

7,5725 gold badges37 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

converting synchronous code to asynchronous code

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related