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

我正在学习开发 chrome 扩展(同时也在学习 javascript)。我正在试验在 youtube 网页上运行的扩展。事情是当我滚动时,有时网页有点紧张。

于是,我开始寻找可能的原因。我看到了一些不错的视频,包括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);

  1. 有一个对 chrome 存储 api 的调用

  2. 一些代码来呈现一个按钮(有一个click事件监听器附加到这个呈现另一个 UI 的按钮。)

  3. 然后我将这个按钮添加到 dom

现在,大部分事情都发生在getData回调中。当用户单击该按钮时。扩展名:

  1. 从网页检索数据并进行一些正则表达式匹配,然后将我想要的字符串值存储在一个数组a中。

  2. 然后当我有数组时a,我map在它上面使用一个来创建另一个数组b

  3. 然后对的所有元素进行另一个操作b以获得另一个数组c

  4. 现在终于有了数组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,我的代码中也有循环。那么,我也需要这样做吗?


犯罪嫌疑人X
浏览 98回答 1
1回答

MM们

JavaScript 是单线程的。包括事件循环 - 简单地说,它只是一个用于放入其中的任务的队列。如果您的 JS 代码实际上导致了性能问题,那么异步执行某些操作将无济于事,因为从那时起,该代码无论如何都会阻塞事件循环。唯一可用的选项是Web workers。
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript