web综合优化脚本

Optimize rendering, event handling, resource loading, and more.
安裝腳本 ?
換行
// ==UserScript==
// @name         web综合优化脚本
// @namespace    http://tampermonkey.net/
// @version      3.0.1
// @description  Optimize rendering, event handling, resource loading, and more.
// @author       KiwiFruit
// @match        *://*/*
// @grant        none
// @license      MIT
// ==/UserScript==
(function () {
    'use strict';

    // ========================
    // 配置中心
    // ========================
    const config = {
        debug: false,
        throttleDelay: 200,
        debounceDelay: 300,
        retryAttempts: 3,
        retryDelay: 1000,
        criticalCssPaths: {
            'example.com': '/styles/example-critical.css',
            'anotherwebsite.com': '/styles/anotherwebsite-critical.css',
            default: '/styles/default-critical.css'
        },
        lazyCssSelector: '.lazy-css',
        rootMarginFactor: 0.1,
        enableWebWorker: true,
        batchStyleUpdate: true
    };

    // ========================
    // 日志系统
    // ========================
    const logger = {
        debug: (msg) => {
            if (config.debug) console.log(`[DEBUG] ${msg}`);
        },
        warn: (msg) => console.warn(`[WARN] ${msg}`),
        error: (msg) => console.error(`[ERROR] ${msg}`)
    };

    // ========================
    // 工具函数
    // ========================
    const throttle = (func, delay) => {
        let lastCall = 0;
        return function (...args) {
            const now = Date.now();
            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);
        };
    };

    const calculateRootMargin = () => {
        const windowHeight = window.innerHeight;
        const marginBottom = Math.max(0, windowHeight * config.rootMarginFactor);
        return `0px 0px ${marginBottom}px 0px`;
    };

    // ========================
    // 样式批量更新系统
    // ========================
    class StyleBatchUpdater {
        static pendingUpdates = new Map();
        static updateScheduled = false;

        static batchUpdate(element, styles) {
            if (!config.batchStyleUpdate) {
                Object.assign(element.style, styles);
                return;
            }
            if (!this.pendingUpdates.has(element)) {
                this.pendingUpdates.set(element, {});
            }
            const currentUpdates = this.pendingUpdates.get(element);
            Object.assign(currentUpdates, styles);
            if (!this.updateScheduled) {
                this.updateScheduled = true;
                requestAnimationFrame(() => this.processBatch());
            }
        }

        static processBatch() {
            this.pendingUpdates.forEach((styles, element) => {
                Object.assign(element.style, styles);
            });
            this.pendingUpdates.clear();
            this.updateScheduled = false;
        }

        static batchAddClass(elements, className) {
            if (!Array.isArray(elements)) elements = [elements];
            if (!config.batchStyleUpdate) {
                elements.forEach(el => el.classList.add(className));
                return;
            }
            elements.forEach(element => {
                if (!this.pendingUpdates.has(element)) {
                    this.pendingUpdates.set(element, {});
                }
                const classList = this.pendingUpdates.get(element).classList || [];
                classList.push({ action: 'add', className });
                this.pendingUpdates.get(element).classList = classList;
            });
            if (!this.updateScheduled) {
                this.updateScheduled = true;
                requestAnimationFrame(() => this.processClassBatch());
            }
        }

        static batchRemoveClass(elements, className) {
            if (!Array.isArray(elements)) elements = [elements];
            if (!config.batchStyleUpdate) {
                elements.forEach(el => el.classList.remove(className));
                return;
            }
            elements.forEach(element => {
                if (!this.pendingUpdates.has(element)) {
                    this.pendingUpdates.set(element, {});
                }
                const classList = this.pendingUpdates.get(element).classList || [];
                classList.push({ action: 'remove', className });
                this.pendingUpdates.get(element).classList = classList;
            });
            if (!this.updateScheduled) {
                this.updateScheduled = true;
                requestAnimationFrame(() => this.processClassBatch());
            }
        }

        static processClassBatch() {
            this.pendingUpdates.forEach((operations, element) => {
                if (operations.classList) {
                    operations.classList.forEach(op => {
                        if (op.action === 'add') {
                            element.classList.add(op.className);
                        } else {
                            element.classList.remove(op.className);
                        }
                    });
                }
            });
            this.pendingUpdates.clear();
            this.updateScheduled = false;
        }
    }

    // ========================
    // 资源加载器
    // ========================
    class ResourceLoader {
        static loadResource(url, type) {
            return 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);
            });
        }

        static async loadWithRetry(loaderFn, maxRetries = config.retryAttempts, delay = config.retryDelay) {
            for (let i = 0; i < maxRetries; i++) {
                try {
                    return await loaderFn();
                } catch (error) {
                    if (i === maxRetries - 1) {
                        logger.error(`Resource load failed after ${maxRetries} attempts: ${error.message}`);
                        throw error;
                    }
                    logger.warn(`Retrying in ${delay / 1000}s...`);
                    await new Promise(resolve => setTimeout(resolve, delay));
                }
            }
        }

        static async loadStylesheet(href) {
            await this.loadWithRetry(() => this.loadResource(href, 'stylesheet'));
            logger.debug(`Stylesheet loaded: ${href}`);
        }

        static async loadScript(src) {
            await this.loadWithRetry(() => this.loadResource(src, 'script'));
            logger.debug(`Script loaded: ${src}`);
        }
    }

    // ========================
    // 硬件加速优化
    // ========================
    class HardwareAcceleration {
        static init() {
            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) {
                        StyleBatchUpdater.batchAddClass(entry.target, className);
                    } else {
                        StyleBatchUpdater.batchRemoveClass(entry.target, className);
                    }
                });
            }, { rootMargin: calculateRootMargin(), threshold: 0 });

            return observer;
        }
    }

    // ========================
    // 非首屏CSS懒加载
    // ========================
    class LazyCssLoader {
        static init() {
            if (!window.IntersectionObserver) {
                this.fallback();
                return;
            }
            const observer = new IntersectionObserver((entries, io) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        const element = entry.target;
                        const href = element.getAttribute('data-lazy-css');
                        if (href) {
                            ResourceLoader.loadStylesheet(href).then(() => {
                                if (element.parentElement) {
                                    element.parentElement.removeChild(element);
                                }
                            });
                        }
                        io.unobserve(element);
                    }
                });
            }, { rootMargin: calculateRootMargin(), threshold: 0 });

            document.querySelectorAll(config.lazyCssSelector).forEach(el => observer.observe(el));
        }

        static fallback() {
            logger.warn('IntersectionObserver not supported, falling back to polling...');
            const checkVisible = () => {
                document.querySelectorAll(config.lazyCssSelector).forEach(element => {
                    const rect = element.getBoundingClientRect();
                    if (rect.top < window.innerHeight && rect.bottom > 0) {
                        const href = element.getAttribute('data-lazy-css');
                        ResourceLoader.loadStylesheet(href).then(() => {
                            if (element.parentElement) {
                                element.parentElement.removeChild(element);
                            }
                        });
                    }
                });
            };
            setInterval(checkVisible, 500);
        }
    }

    // ========================
    // Web Worker
    // ========================
    class WorkerManager {
        static init() {
            if (!config.enableWebWorker || !window.Worker) {
                logger.warn('Web Worker not available or disabled.');
                return;
            }
            const workerCode = `
                self.onmessage = function(e) {
                    const result = heavyProcessing(e.data);
                    self.postMessage(result);
                };
                function heavyProcessing(data) {
                    let sum = 0;
                    for (let i = 0; i < data; i++) {
                        sum += Math.sqrt(i);
                    }
                    return sum;
                }
            `;
            const blob = new Blob([workerCode], { type: 'application/javascript' });
            const url = URL.createObjectURL(blob);
            const worker = new Worker(url);
            worker.onmessage = function(e) {
                logger.debug('Worker result:', e.data);
            };
            worker.postMessage(1000000);
        }
    }

    // ========================
    // 事件绑定（节流/防抖）
    // ========================
    class EventManager {
        static init() {
            window.addEventListener('scroll', throttle(() => {
                logger.debug('Scroll event triggered (throttled)');
                this.handleScroll();
            }, config.throttleDelay));
            window.addEventListener('resize', debounce(() => {
                logger.debug('Resize event triggered (debounced)');
                this.handleResize();
            }, config.debounceDelay));
        }

        static handleScroll() {
            const elements = document.querySelectorAll('.scroll-affect');
            const scrollY = window.scrollY;
            StyleBatchUpdater.batchUpdate(document.documentElement, {
                '--scroll-position': `${scrollY}px`
            });
            elements.forEach(element => {
                const shouldUpdate = element.getBoundingClientRect().top < window.innerHeight * 0.8;
                if (shouldUpdate) {
                    StyleBatchUpdater.batchAddClass(element, 'scrolled');
                } else {
                    StyleBatchUpdater.batchRemoveClass(element, 'scrolled');
                }
            });
        }

        static handleResize() {
            const width = window.innerWidth;
            const breakpoint = 768;
            const elements = document.querySelectorAll('.responsive-element');
            if (width < breakpoint) {
                StyleBatchUpdater.batchAddClass(elements, 'mobile-view');
                StyleBatchUpdater.batchRemoveClass(elements, 'desktop-view');
            } else {
                StyleBatchUpdater.batchAddClass(elements, 'desktop-view');
                StyleBatchUpdater.batchRemoveClass(elements, 'mobile-view');
            }
        }
    }

    // ========================
    // DOM变化监听
    // ========================
    class DomMonitor {
        static init() {
            const observer = new MutationObserver(throttle(mutations => {
                mutations.forEach(mutation => {
                    mutation.addedNodes.forEach(node => {
                        if (node.nodeType === 1 && node.matches(config.lazyCssSelector)) {
                            LazyCssLoader.init();
                        }
                    });
                });
            }, 100));
            observer.observe(document.body, { childList: true, subtree: true });
        }
    }

    // ========================
    // 初始化流程
    // ========================
    class App {
        static async init() {
            const hostname = window.location.hostname;
            let criticalCssUrl;
            if (hostname.includes('example.com')) {
                criticalCssUrl = config.criticalCssPaths['example.com'];
            } else if (hostname.includes('anotherwebsite.com')) {
                criticalCssUrl = config.criticalCssPaths['anotherwebsite.com'];
            } else {
                criticalCssUrl = config.criticalCssPaths.default;
            }

            if (criticalCssUrl) {
                try {
                    await ResourceLoader.loadStylesheet(`${window.location.origin}${criticalCssUrl}`);
                } catch (error) {
                    logger.error(`Failed to load critical CSS: ${error.message}`);
                }
            }

            HardwareAcceleration.init();
            LazyCssLoader.init();
            DomMonitor.init();
            EventManager.init();
            WorkerManager.init();
            logger.debug('Optimization script initialized');
        }
    }

    // ========================
    // 页面生命周期管理
    // ========================
    document.addEventListener("DOMContentLoaded", () => {
        App.init().catch(error => logger.error(`Initialization failed: ${error.message}`));
    });

    window.addEventListener("beforeunload", () => {
        StyleBatchUpdater.pendingUpdates.clear();
        logger.debug('Page is unloading...');
    });

})();
欢迎访问Greasy Fork镜像
