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

Question

我正在学习开发 chrome 扩展（同时也在学习 javascript）。我正在试验在 youtube 网页上运行的扩展。事情是当我滚动时，有时网页有点紧张。于是，我开始寻找可能的原因。我看到了一些不错的视频，包括Philip Roberts 的“事件循环到底是什么”，他在视频中谈到了事件循环和其他相关内容。这让我想知道是否正是因为这个原因，网页才会感到紧张。内容脚本中的代码是同步的，我对 javascript 中的异步编码没有太多经验。promises,之类的概念async/await对我来说是新的。这是内容脚本中非常高级别的代码。chrome.storage.sync.get(); // getting some data herelet 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) 重构整个代码的最佳方式是什么，这样它就不会阻止浏览器呈现/更新 UI。我也看到了一些循环async/await，我的代码中也有循环。那么，我也需要这样做吗？

Answer 1

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

唯一可用的选项是Web workers。