如何去除chrome扩展Firefox插件的弹出延迟？

Question

我正在从chrome和firefox建立一个批量下载扩展，以下载大量文件。该扩展的弹出式窗口具有取消pauseresume功能。当下载少量文件时，弹出的窗口可以正常工作。然而，当下载较多的文件时，弹出菜单需要很长时间才能真正弹出（或者有些时候根本就没有弹出），可能是因为扩展程序变得非常忙碌，一次处理了很多文件。有什么办法可以消除这种延迟吗？

manifest.json

    "default_popup": "html/popup.html"
  },

popup.html

let bgPage = chrome.extension.getBackgroundPage(); //Getting the variables from the background page

let idsOfDownload = [];
idsOfDownload = bgPage.downloadIds;
console.log(idsOfDownload);

let cancel = document.createElement("button");
cancel.id = "cancel";
cancel.className = "btn";
cancel.innerHTML='<i class="fa fa-stop-circle"></i> Cancel All</button>';
document.body.appendChild(cancel);

$('body').width(350); 

setInterval(function(){

    let downloadString = LZString.decompress(localStorage.getItem('downloadLinks'));

    if(downloadString === "") return;

    let downloadLinks =  JSON.parse(downloadString);

    if (downloadLinks !== undefined && downloadLinks !== null && downloadLinks !== "null") {
        let status = `Total pending download: ${downloadLinks.length}`;
        jQuery("#download-status").html(status);
    }
},1000);


$(cancel).click(function () {
    chrome.runtime.sendMessage({message: "cancel-download"});
});

Answer 1

• 一般DOM都很慢，所以如果你有很多元素，你应该只显示可见的东西，其余的在滚动时按需绘制。有很多库和框架可以做到这一点。

• LZString在处理大字符串时可能会很慢，所以考虑不要使用它，或者在一个 网络工作者 并通过标准DOM消息传递数据。

• window.localStorage是同步的，所以如果数据很大的话，速度也会很慢，可以考虑切换到异步存储，比如chrome.storage.local或者IndexedDB。

最重要的是，使用 开发工具剖析器 而不是猜测。分析完结果后，你会发现有哪些地方需要修复rewriting。弹出窗口有自己的开发工具（见 如何打开它).