如何用JS監控網絡流量

在JavaScript中，你可以使用Performance API來監控網絡流量。Performance API提供了與網頁性能相關的詳細信息，包括網絡請求的時間線。以下是如何使用Performance API來監控網絡流量的基本步驟：

1. 獲取Performance數據：使用performance.getEntries()或performance.getEntriesByType()方法來獲取性能條目。

2. 分析網絡請求：遍歷性能條目，檢查每個條目的entryType屬性，以確定它是資源、標記、測量還是函數調用。

3. 篩選網絡請求：如果你只對網絡請求感興趣，你可以檢查條目類型是否為resource。

4. 提取信息：從每個網絡請求條目中提取所需的信息，如請求的URL、發起時間、響應時間、傳輸大小等。

下面是一個簡單的例子，展示了如何使用Performance API來監控頁面加載過程中的網絡流量：

// 等待頁面加載完成
window.onload = function() {
    // 獲取所有性能條目
    var entries = performance.getEntries();

    // 遍歷性能條目
    entries.forEach(function(entry) {
        // 檢查條目類型是否為'resource'
        if (entry.entryType === 'resource') {
            // 輸出網絡請求的信息
            console.log('Name: ' + entry.name);
            console.log('Start Time: ' + entry.startTime);
            console.log('Duration: ' + (entry.responseEnd - entry.startTime));
            console.log('Transfer Size: ' + entry.transferSize);
            console.log('Encoded Body Size: ' + entry.encodedBodySize);
            console.log('Decoded Body Size: ' + entry.decodedBodySize);
            console.log('---');
        }
    });
};

請注意，performance.getEntries()返回的是一個數組，包含了頁面加載過程中的所有性能條目。如果你想要監控特定類型的資源或者想要更細粒度的控制，你可以使用performance.getEntriesByType('resource')來獲取僅包含資源請求的數組。

此外，如果你想要實時監控網絡流量，你可能需要定期調用這些方法，并計算兩次調用之間的差異。

最后，由于隱私和安全的考慮，某些瀏覽器可能會限制或禁用Performance API的某些功能，因此在使用時需要注意兼容性問題。