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

【问题标题】：converting synchronous code to asynchronous code将同步代码转换为异步代码
【发布时间】：2020-07-28 06:47:54
【问题描述】：

我正在学习开发 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 storage 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 的循环，我的代码中也有循环。那么，我也需要这样做吗？

【问题讨论】：

我有消息要告诉你。在 Promise 中包装同步代码不会阻塞任何主线程。同步代码仍然需要完全相同数量的主线程 CPU 来运行。所以，如果你占用了过多的 CPU，那么即使你将事情包装在 Promise 中，你仍然会占用过多的 CPU。您需要做的是对事物进行检测并找出时间的真正去向以及哪些操作真正导致了抖动。仪器优先，只有当您拥有指向确切问题的实际性能数据时才重新设计。
除非数据很大，否则正则表达式循环应该很快，不值得重构代码。
将诸如regex.exec 之类的同步处理转换为异步代码的唯一方法是将其粘贴在工作线程中，这几乎肯定会付出更多的努力而不值得。如果您的网页感觉紧张，那是因为您过于频繁地运行某些代码 - 请考虑缓存结果或缓存对按钮的引用或其他任何经常执行的操作。

标签： javascript asynchronous async-await es6-promise

【解决方案1】：

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

唯一可用的选项是Web workers。

【讨论】：