頻繁なリクエストのJavaScriptデザインパターンパフォーマンスの最適化のプロキシモード

この記事を読む前に、以前のJavaScriptデザインパターンのプロキシモードを確認することをお勧めします。

1.需要

ファイル同期機能を実行しているとしましょう。チェックボックスを選択すると、対応するファイルが別のバックアップサーバーに同期されます。

2.実現する

まず、htmlにn個のチェックボックスを作成します。

<body>
    <input type="checkbox" id="1" />1
    <input type="checkbox" id="2" />2
    <input type="checkbox" id="3" />3
    <input type="checkbox" id="4" />4
    <input type="checkbox" id="5" />5
    <input type="checkbox" id="6" />6
    <input type="checkbox" id="7" />7
    <input type="checkbox" id="8" />8
    <input type="checkbox" id="9" />9
</body>

仮想プロキシなしでHTTPリクエストを送信する

const syncFile = function (id) {
    console.log(`开始同步文件,id为:${id}`);
}
const checkbox = document.getElementsByTagName('input');
checkbox.map(c => {
    c.onclick = function () {
        if (this.checked === true) {
            syncFile(this.id);
        }
    }
})

この方法で実装した場合、ユーザーがチェックボックスを一定時間連続してクリックすると、同時に複数のリクエストが送信され、頻繁なネットワークリクエストによりかなりのオーバーヘッドが発生します。

仮想プロキシを使用してhttpリクエストをマージする

const syncFile = function (id) {
    console.log(`开始同步文件,id为:${id}`);
}
const proxySyncFile = function () {
    let cache = [], // 保存一段时间内需要同步的ID
        timer;      // 定时器
    return function (id) {
        cache.push(id);
        if (timer) { // 保证不会覆盖已经启动的定时器
            return;
        }
        timer = setTimeout(function(){
            syncFile(cache.join(',')); // 2秒后向本体发送需要同步的ID集合
            clearTimeout(timer);       // 清空定时器
            timer = null;
            cache.length = 0;          // 清空ID集合
        }, 2000);
    }
}
const checkbox = document.getElementsByTagName('input');
checkbox.map(c => {
    c.onclick = function () {
        if (this.checked === true) {
            proxySyncFile(this.id);
        }
    }
})

頻繁なリクエストを解決するために、プロキシ関数proxySyncFileを使用して一定期間内にリクエストを収集し、最後にそれらを一度にサーバーに送信します。

3.アイデアの要約

同じ期間に頻繁なネットワークリクエストが発生した場合、仮想プロキシオブジェクトを作成し、この期間のリクエストをキャッシュし、タイマーを使用して、n秒前にマージされたリクエストを発行できます。したがって、複数のリクエストが1つのリクエストになり、パフォーマンスが大幅に最適化されます。

注：リファレンスブック「JavaScriptのデザインパターンと開発方法」

頻繁なリクエストのJavaScriptデザインパターンパフォーマンスの最適化のプロキシモード

1.需要

2.実現する

3.アイデアの要約

おすすめ