javascript - Pouch 查询阻塞了 dom

Question

这是我测试 pouchdb 查询的代码:

主文件:

var myAudio = new Audio("http://www.stephaniequinn.com/Music/Allegro%20from%20Duet%20in%20C%    20Major.mp3");
myAudio.play();
var worker = new Worker('worker.js');
worker.postMessage("start worker");
worker.addEventListener('message', function(e) {
   console.log('Worker said: ', e.data);
}, false);

Worker.js:

importScripts("pouchdb-5.2.0.min.js");

self.addEventListener('message', function(e) {
    queryDocs();
}, false);

function queryDocs(){
    localDB.allDocs({
        include_docs: true,
        attachments: true
    }, function(err, response) {
        if (err) { return console.log(err); }
        self.postMessage("returned docs:", response);
   });
}

步骤: 1.我在一个正在播放音频的node.js应用程序中运行它。 2.现在，在播放音频时，我必须查询 pouchDB。我使用命令“cpulimit -p processId -l 60”将应用程序的所有实例的 cpu 限制为 60%。(以低配置进行测试。这样它应该在低配置机器上工作而不会出现卡顿)

问题:如果未使用“cpulimit”命令，那么它工作正常意味着我能够查询 pouchdb 而不会出现音频口吃，但如果我使用命令“cpulimit”限制 cpu，那么音频就会口吃。

要求:如何让它在低配置的机器上运行而不卡顿？

Answer 1

如果 PouchDB 在 Web Worker 中运行，则无法阻止 DOM。然而，在主线程 main 中流式传输音频可能会导致 DOM 阻塞。您可以使用 Chrome 中的时间轴 View 来查看主线程上正在运行的内容，以及阻止 DOM 的内容。

另一个可能阻塞 DOM 的事情是从后台线程向主线程发送大量数据。在上面的查询中，您似乎使用的是 attachments: true 但不是 binary: true。这意味着 PouchDB 正在提取 base64 字符串数据并在 postMessage 中通过网络发送它。更有效的选择可能是使用 Blob，将其转换为 ArrayBuffer(例如使用 blob-util )，然后将其作为 Transferable 发送。 .