网页加载分析

测试网页加载速度并显示部分网络请求信息。
目前为 2024-12-28 提交的版本。查看最新版本。
换行
// ==UserScript==
// @name         网页加载分析
// @version      1.0
// @description  测试网页加载速度并显示部分网络请求信息。
// @match        *://*/*
// @run-at       document-start
// @grant        none
// @namespace    https://greasyfork.org/users/1171320
// @license MIT
// ==/UserScript==

(function() {
    'use strict';

    const loadTimeElement = document.createElement('div');
    loadTimeElement.id = 'loadTimeDisplay';
    loadTimeElement.style.cssText = `
        position: fixed;
        top: 10px;
        right: 10px;
        background: #f5f5f5;
        padding: 10px;
        border-radius: 8px;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
        z-index: 9999;
        font-family: sans-serif;
    `;

    const startTime = performance.now();
    let longestRequest = null;

    const networkObserver = new PerformanceObserver((list, observer) => {
        const entries = list.getEntries();
        entries.forEach(entry => {
            if (!longestRequest || entry.duration > longestRequest.duration) {
                longestRequest = entry;
            }
        });
    });

    networkObserver.observe({ entryTypes: ['resource'] });

    window.addEventListener('load', () => {
        const endTime = performance.now();
        const timeElapsed = endTime - startTime;

        let networkInfo = '';
        if (longestRequest) {
            networkInfo = `最慢请求: ${longestRequest.name} (${longestRequest.duration.toFixed(2)}ms)<br>`;
        } else {
            networkInfo = '网络请求信息不可用';
        }

        loadTimeElement.innerHTML = `
            <h2>页面加载时间: ${timeElapsed.toFixed(2)}ms</h2>
            ${networkInfo}
        `;

        document.body.appendChild(loadTimeElement);

        setTimeout(() => {
            loadTimeElement.remove();
        }, 15000); //Display for 15 seconds
    });
})();