使用JavaScript监控网络流量

在JavaScript中，你有几种方法来监控和分析网络流量。以下是几种主要的方法：

1. 使用Navigation Timing API

// 获取页面加载性能数据
const performanceData = window.performance.timing;

// 计算页面加载时间
const loadTime = performanceData.loadEventEnd - performanceData.navigationStart;
console.log(`页面加载时间: ${loadTime}ms`);

// 计算DNS查询时间
const dnsTime = performanceData.domainLookupEnd - performanceData.domainLookupStart;
console.log(`DNS查询时间: ${dnsTime}ms`);

// 计算TCP连接时间
const tcpTime = performanceData.connectEnd - performanceData.connectStart;
console.log(`TCP连接时间: ${tcpTime}ms`);

2. 使用Resource Timing API

// 获取所有资源的加载性能数据
const resources = performance.getEntriesByType("resource");

resources.forEach(resource => {
    console.log(`资源: ${resource.name}`);
    console.log(`加载时间: ${resource.duration}ms`);
    console.log(`DNS查询: ${resource.domainLookupEnd - resource.domainLookupStart}ms`);
    console.log(`TCP连接: ${resource.connectEnd - resource.connectStart}ms`);
    console.log(`响应时间: ${resource.responseEnd - resource.responseStart}ms`);
});

3. 使用PerformanceObserver

// 创建性能观察者
const observer = new PerformanceObserver(list => {
    list.getEntries().forEach(entry => {
        console.log(`资源: ${entry.name}`);
        console.log(`类型: ${entry.entryType}`);
        console.log(`开始时间: ${entry.startTime}`);
        console.log(`持续时间: ${entry.duration}`);
    });
});

// 观察资源加载性能
observer.observe({ entryTypes: ["resource"] });

// 观察长任务(long tasks)
observer.observe({ entryTypes: ["longtask"] });

4. 使用Service Worker拦截请求

// 在Service Worker中
self.addEventListener('fetch', event => {
    const startTime = performance.now();

    event.respondWith(
        fetch(event.request)
            .then(response => {
                const endTime = performance.now();
                const fetchTime = endTime - startTime;

                console.log(`请求URL: ${event.request.url}`);
                console.log(`响应状态: ${response.status}`);
                console.log(`获取时间: ${fetchTime}ms`);

                return response;
            })
    );
});

5. 使用XMLHttpRequest和Fetch API的封装

// 封装fetch API
const originalFetch = window.fetch;
window.fetch = function(...args) {
    const startTime = performance.now();

    return originalFetch.apply(this, args).then(response => {
        const endTime = performance.now();
        console.log(`请求URL: ${args[0]}`);
        console.log(`耗时: ${endTime - startTime}ms`);
        return response;
    });
};

// 封装XMLHttpRequest
const originalXHROpen = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function(method, url) {
    this._url = url;
    this._startTime = performance.now();

    this.addEventListener('load', function() {
        const endTime = performance.now();
        console.log(`XHR请求: ${this._url}`);
        console.log(`状态: ${this.status}`);
        console.log(`耗时: ${endTime - this._startTime}ms`);
    });

    return originalXHROpen.apply(this, arguments);
};

6. 使用WebSocket监控

// 监控WebSocket流量
const originalWebSocket = window.WebSocket;
window.WebSocket = function(url) {
    const socket = new originalWebSocket(url);

    socket.addEventListener('open', () => {
        console.log(`WebSocket连接到: ${url}`);
    });

    socket.addEventListener('message', (event) => {
        console.log(`收到WebSocket消息: ${event.data.length}字节`);
    });

    socket.addEventListener('close', () => {
        console.log(`WebSocket连接关闭: ${url}`);
    });

    return socket;
};

注意事项

1. 这些方法主要用于前端性能监控和分析，不能替代专业的网络监控工具
2. 出于安全考虑，JavaScript无法直接访问原始网络数据包
3. 跨域请求的详细时间信息可能会受到限制
4. 在生产环境中使用时应考虑性能影响

以上方法可以帮助你了解网页加载过程中各个阶段的网络性能，对于优化网页性能非常有帮助。