测试网页加载速度并显示加载最慢的三个网址的域名，支持Via浏览器toast调用或者高斯模糊显示开关。
当前为
// ==UserScript==
// @name 网页加载分析(改)
// @version 1.12
// @description 测试网页加载速度并显示加载最慢的三个网址的域名，支持Via浏览器toast调用或者高斯模糊显示开关。
// @description:en Test webpage loading speed, display the three slowest domains, support Via browser toast.
// @match *://*/*
// @run-at document-start
// @author yzcjd & nobody
// @author2 Lama AI 辅助
// @namespace https://scriptcat.org/zh-CN/users/157252
// @exclude *://*.cloudflare.com/*
// @exclude *://*.recaptcha.net/*
// @license MIT
// @grant GM_setValue
// @grant GM_getValue
// @grant GM_registerMenuCommand
// ==/UserScript==
(function() {
'use strict';
const currentDomain = location.hostname || 'unknown';
const domainSettings = GM_getValue('domainSettings', {});
const isEnabled = domainSettings[currentDomain] !== false;
const useBlurDisplay = GM_getValue('useBlurDisplay', false);
if (typeof GM_registerMenuCommand === 'function') {
GM_registerMenuCommand(
`${isEnabled ? '❌禁用' : '✅启用'} 网页加载测试（${currentDomain}）`,
() => {
domainSettings[currentDomain] = !isEnabled;
GM_setValue('domainSettings', domainSettings);
alert(`网页加载测试已${!isEnabled ? '✅启用' : '❌禁用'}（${currentDomain}），刷新页面生效。`);
}
);
GM_registerMenuCommand(
`${useBlurDisplay ? '❌禁用' : '✅启用'} 高斯模糊显示`,
() => {
GM_setValue('useBlurDisplay', !useBlurDisplay);
alert(`高斯模糊显示已${!useBlurDisplay ? '✅启用' : '❌禁用'}，刷新页面生效。`);
}
);
if (!isEnabled) return;
}
// 创建显示元素
const loadTimeElement = document.createElement('div');
loadTimeElement.id = 'loadTimeDisplay';
loadTimeElement.style.cssText = `
position: fixed;
top: 85%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(255, 255, 255, 0.3); /* 半透明毛玻璃背景 */
backdrop-filter: blur(16px); /* 高斯模糊 */
-webkit-backdrop-filter: blur(16px); /* 兼容 Safari */
padding: 12px 20px; /* 舒适内边距 */
border-radius: 22px; /* iOS 风格圆角 */
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15); /* 柔和阴影 */
white-space: nowrap;
width: auto; /* 自适应宽度 */
max-width: 90%; /* 防止溢出 */
z-index: 9999;
color: #1C2526; /* 深色文字，确保可读 */
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* iOS 字体 */
font-size: 15px; /* 优雅字体大小 */
font-weight: 500; /* 适中字重 */
text-align: center; /* 文字居中 */
border: 1px solid rgba(255, 255, 255, 0.25); /* 微弱边框增加质感 */
opacity: 0; /* 初始透明 */
transition: opacity 0.3s ease-in-out; /* 淡入动画 */
`;
// 兼容不支持 backdrop-filter 的浏览器
if (!CSS.supports('backdrop-filter', 'blur(16px)')) {
loadTimeElement.style.background = 'rgba(240, 240, 240, 0.85)';
}
const startTime = performance.now();
const slowestRequests = new Set();
const maxSlowRequests = 3;
const networkObserver = new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
slowestRequests.add({
name: entry.name,
duration: entry.duration,
});
if (slowestRequests.size > maxSlowRequests) {
const sorted = Array.from(slowestRequests).sort((a, b) => b.duration - a.duration);
slowestRequests.clear();
sorted.slice(0, maxSlowRequests).forEach((req) => slowestRequests.add(req));
}
});
});
networkObserver.observe({
entryTypes: ['resource']
});
window.addEventListener('load', () => {
networkObserver.disconnect();
const endTime = performance.now();
const timeElapsed = endTime - startTime;
const sortedRequests = Array.from(slowestRequests).sort((a, b) => b.duration - a.duration);
const networkInfo = sortedRequests.length ?
sortedRequests
.map((req) => {
try {
const url = new URL(req.name);
return `Slow: ${url.hostname} (${req.duration.toFixed(2)}ms)`;
} catch {
return `Slow: Invalid URL (${req.duration.toFixed(2)}ms)`;
}
})
.join('\n') :
'[none]';
const networkInfoHTML = sortedRequests.length ?
sortedRequests
.map((req) => {
try {
const url = new URL(req.name);
return `slow: ${url.hostname} (${req.duration.toFixed(2)}ms)<br>`;
} catch {
return `slow: Invalid URL (${req.duration.toFixed(2)}ms)<br>`;
}
})
.join('') :
'[none]';
if (window.via && typeof window.via.toast === 'function' && !useBlurDisplay) {
window.via.toast(`Time: ${timeElapsed.toFixed(2)}ms\n${networkInfo}`);
} else {
loadTimeElement.innerHTML = `<h2 style="margin:0;font-size:16px;font-weight:600">Time: ${timeElapsed.toFixed(2)}ms</h2>${networkInfoHTML}`;
document.body.appendChild(loadTimeElement);
requestAnimationFrame(() => {
loadTimeElement.style.opacity = '1';
});
setTimeout(() => {
requestAnimationFrame(() => {
loadTimeElement.style.opacity = '0';
});
setTimeout(() => loadTimeElement.remove(), 300);
}, 2600);
}
slowestRequests.clear();
});
})();