将同步代码转换为异步代码

Question

我正在学习开发 chrome 扩展（同时也在学习 javascript）。我正在试验在 youtube 网页上运行的扩展。问题是当我滚动时，有时网页感觉有点紧张。

所以，我开始寻找可能的原因。我发现了一些不错的视频，包括“what the heck is event loop by Philip Roberts”，他在视频中谈到了事件循环和其他相关内容。这让我想知道是否正是因为这个原因，网页才会感到紧张。内容脚本中的代码是同步的，我对 javascript 中的异步编码经验不多。 promises、async/await 等概念对我来说很陌生。

这是内容脚本中非常高级的代码。

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

调用chrome存储api
一些代码来呈现一个按钮（有一个 click 事件侦听器附加到此按钮，呈现另一个 UI。）
然后我将这个按钮添加到 dom

现在，大部分内容都发生在 getData 回调中。当用户单击该按钮时。扩展名：

从网页中检索数据并进行一些正则表达式匹配，然后将我想要的字符串值存储在数组中a。
然后当我有数组 a 时，我在其上使用 map 创建另一个数组 b
然后对b的所有元素进行另一个操作得到另一个数组c。
现在终于有了数组 c，我调用了另一个生成最终 UI 的函数（使用数组 c 中的值）

这是 getData 的样子：

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
}

现在，所有这些代码都是同步的（除了调用 chrome 存储 API 和一些回调），我相信其中一些操作（如正则表达式匹配）需要时间来阻止事件循环。

那么使用 promises(async/await) 重构整个代码的最佳方式是什么，这样它就不会阻止浏览器访问 rendering/updating UI。我还看到了一些带有 async/await 的循环，我的代码中也有循环。那么，我也需要这样做吗？

Answer 1

JavaScript 是单线程。包括事件循环 - 简单地说，它只是一个用于放入其中的任务的队列。如果您的 JS 代码实际上导致了性能问题，那么异步执行某些操作将无济于事，因为从那时起，该代码无论如何都会阻塞事件循环。

唯一可用的选项是 Web workers。

将同步代码转换为异步代码

converting synchronous code to asynchronous code

javascript

asynchronous

async-await

es6-promise