Web Comprehensive Optimization Script（web综合优化脚本）

Optimize non-first screen CSS, hardware acceleration, event throttling, debouncing, and more.
当前为 2025-04-03 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         Web Comprehensive Optimization Script（web综合优化脚本）
// @namespace    http://tampermonkey.net/
// @version      2.4
// @description  Optimize non-first screen CSS, hardware acceleration, event throttling, debouncing, and more.
// @author       KiwiFruit
// @match        *://*/*
// @grant        none
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    // 工具函数：事件节流
    const throttle = (func, delay) => {
        let lastCall = 0;
        return function(...args) {
            const now = new Date().getTime();
            if (now - lastCall >= delay) {
                lastCall = now;
                func.apply(this, args);
            }
        };
    };

    // 工具函数：防抖
    const debounce = (func, delay) => {
        let timer;
        return function(...args) {
            clearTimeout(timer);
            timer = setTimeout(() => func.apply(this, args), delay);
        };
    };

    // 定义 calculateRootMargin 在最前面
    const calculateRootMargin = () => {
        const windowHeight = window.innerHeight;
        const marginBottom = Math.max(0, windowHeight * 0.1); // 例如，取窗口高度的10%
        return `0px 0px ${marginBottom}px 0px`;
    };

    // 模块：加载外部资源
    const loadResource = (url, type) => new Promise((resolve, reject) => {
        const element = document.createElement(type === 'script' ? 'script' : 'link');
        if (type === 'script') {
            element.src = url;
        } else {
            element.rel = 'stylesheet';
            element.href = url;
        }
        element.onload = resolve;
        element.onerror = () => reject(new Error(`${type} loading failed: ${url}`));
        document.head.appendChild(element);
    });

    const loadScript = url => loadResource(url, 'script');
    const loadStylesheet = href => loadResource(href, 'stylesheet');

    // 模块：硬件加速
    const initHardwareAcceleration = () => {
        const className = 'enable-hardware-acceleration';
        const styleSheet = `
.${className} {
    transform: translateZ(0) !important; 
    will-change: transform !important;
}`;
        const styleElement = document.createElement('style');
        styleElement.type = 'text/css';
        styleElement.appendChild(document.createTextNode(styleSheet));
        document.head.appendChild(styleElement);

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add(className);
                } else {
                    entry.target.classList.remove(className);
                }
            });
        }, { rootMargin: calculateRootMargin(), threshold: 0 });

        return { observer };
    };

    // 模块：非首屏CSS懒加载
    const initializeNonFirstScreenCssLazyLoading = async () => {
        document.querySelectorAll('.lazy-css').forEach(async (element) => {
            const href = element.getAttribute('data-lazy-css');
            if (href) {
                try {
                    await loadStylesheet(href);
                    element.parentElement.removeChild(element);
                } catch (error) {
                    console.error('Failed to load lazy CSS:', error);
                }
            }
        });
    };

    // DOM 变化监听模块
    let mutationObserver;

    const observeDomChanges = () => {
        mutationObserver = new MutationObserver(throttle(mutations => {
            mutations.forEach(mutation => {
                mutation.addedNodes.forEach(node => {
                    if (node.nodeType === 1) {
                        handleNode(node);
                    }
                });
            });
        }, 100)); // 增加节流，每100ms最多触发一次

        // 开始观察 body 的子节点变化
        mutationObserver.observe(document.body, { childList: true, subtree: true });
    };

    // 清理 DOM 变化观察器
    const cleanupMutationObserver = () => {
        if (mutationObserver) {
            mutationObserver.disconnect();
            mutationObserver = null;
        }
    };

    // 处理新增的 DOM 节点
    const handleNode = (node) => {
        if (node.classList.contains('lazy-css') && node.hasAttribute('data-lazy-css')) {
            const href = node.getAttribute('data-lazy-css');
            loadStylesheet(href)
                .then(() => {
                    if (node.parentElement) {
                        node.parentElement.removeChild(node);
                    }
                })
                .catch(error => console.error('Failed to load lazy CSS:', error));
        }
    };

    // 动态生成首屏CSS资源
    const generateCriticalCssUrls = () => {
        const hostname = window.location.hostname; // 获取当前域名
        const criticalCssUrls = [];

        // 根据域名动态生成首屏CSS路径
        if (hostname.includes('example.com')) {
            criticalCssUrls.push('/styles/example-critical.css'); // 替换为实际路径
        } else if (hostname.includes('anotherwebsite.com')) {
            criticalCssUrls.push('/styles/anotherwebsite-critical.css'); // 替换为实际路径
        } else {
            // 默认加载一个通用的首屏CSS文件
            criticalCssUrls.push('/styles/default-critical.css'); // 替换为实际路径
        }

        return criticalCssUrls.map(cssPath => `${window.location.origin}${cssPath}`);
    };

    // 初始化示例
    const initialize = async () => {
        if (!window.IntersectionObserver || !window.ResizeObserver) {
            console.warn('Your browser does not support some required features.');
            return;
        }

        // 动态生成首屏CSS资源并优先加载
        const criticalCssUrls = generateCriticalCssUrls();

        // 并行加载首屏CSS资源
        await Promise.all(criticalCssUrls.map(href => loadStylesheet(href)));

        // 初始化其他模块
        initHardwareAcceleration();
        await initializeNonFirstScreenCssLazyLoading();

        // 监听 DOM 变化
        observeDomChanges();

        // 示例：添加滚动事件节流
        window.addEventListener('scroll', throttle(() => {
            console.log('Scroll event triggered (throttled)');
        }, 200));

        // 示例：添加窗口调整大小事件防抖
        window.addEventListener('resize', debounce(() => {
            console.log('Resize event triggered (debounced)');
        }, 300));
    };

    // 页面卸载时清理资源
    const cleanup = () => {
        cleanupMutationObserver();
    };

    // 页面加载完成后初始化
    document.addEventListener("DOMContentLoaded", () => {
        initialize().catch(console.error);
    });

    // 页面卸载时清理
    window.addEventListener("beforeunload", () => {
        cleanup();
    });
})();
欢迎访问Greasy Fork镜像
