☰

网页加载分析

测试网页加载速度并显示加载最慢的三个网址的域名。Test the webpage loading speed and display the domain names of the three slowest loading URLs.

// ==UserScript==
// @name         网页加载分析
// @version      1.04
// @description  测试网页加载速度并显示加载最慢的三个网址的域名。Test the webpage loading speed and display the domain names of the three slowest loading URLs.
// @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: 90%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: grey;
            padding: 5px;
            border-radius: 8px;
            box-shadow: 0 0 15px rgba(0,0,0,0.3);
            white-space: nowrap;
            width: 400px;
            z-index: 9999;
            background-color: #f5f5f5;
            color: black;
    `;

    const startTime = performance.now();
    let slowestRequests = [];

    const networkObserver = new PerformanceObserver((list, observer) => {
        const entries = list.getEntries();
        entries.forEach(entry => {
            slowestRequests.push({ name: entry.name, duration: entry.duration });
            slowestRequests.sort((a, b) => b.duration - a.duration);
            slowestRequests = slowestRequests.slice(0, 3);
        });
    });

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

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

        let networkInfo = '';
        if (slowestRequests.length > 0) {
            networkInfo = slowestRequests.map(req => {
                try {
                    const url = new URL(req.name);
                    return `较慢: ${url.hostname} (${req.duration.toFixed(2)}ms)<br>`;
                } catch (error) {
                    return `较慢: Invalid URL (${req.duration.toFixed(2)}ms)<br>`;
                }
            }).join('');
        } else {
            networkInfo = '无信息';
        }

        loadTimeElement.innerHTML = `
            <h2>耗时: ${timeElapsed.toFixed(2)}ms</h2>
            ${networkInfo}
        `;

        document.body.appendChild(loadTimeElement);

        setTimeout(() => {
            loadTimeElement.remove();
        }, 5000);
    });
})();