7

ボタンのクリック後に Web ワーカーを呼び出すアプリがあります。計算はワーカーに移動され、UI が軽減され、計算中のユーザー アクションに反応するようになります。

すべてがうまくいき、約 0.8 ～ 1.5 秒後にワーカーが応答を送信します。必要なすべての DOM アクションを実行しますが、このworker.onmessage後ガベージ コレクターが表示され、CPU に応じて 2 秒以上 UI が実質的にブロックされます。UIのブロックは私が防ぎたいものなので、これは本当に私を混乱させます.

タイムライン/メモリ コンソール タブのスクリーンショットは次のとおりです。

ご覧のとおり、ガベージ コレクター イベントはすべての DOM 操作の直後に発生します。実際には、再描画イベントは 1 つだけです (DocumentFragmentが使用されます)。

主な js コード:

var sortWorker = new Worker('js/contactsorter.js');
sortWorker.onmessage = function(e) {
    var messages = [];
    e.data.forEach(function(userDoc) {
        var contactSection = _drawContact(userDoc);
        messages.push(contactSection);
    });
    
    meta.append(messages); // this actually appends document fragment as a child
};

sortWorker.postMessage(postMessageData);

contactsorter.js (ワーカー):

onmessage = function(e) {
    var uid, output = [], usersStat = {};

    // calculations...
    
    postMessage(output);
    close();
};

この場所でこれらのガベージ コレクター イベントを回避する方法はありますか?

UPD: ガベージ コレクター イベントの時間は、ワーカーに送信されたデータ量に依存するようです。
UPD2: シャットダウンおよび起動後、ガベージ コレクター イベントが 2 回しか発生しないため、UI が 1 秒未満ブロックされます。ん？

4

1 に答える 1