我正在学习开发 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);
有一个对 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,我的代码中也有循环。那么,我也需要这样做吗?
MM们
相关分类