☰

YouTube 多标签页优化 -- YouTube Smart Resource Booster (Dynamic & Lazy)

快如闪电！！提前预加载 YouTube 视频页的关键资源（JS/CSS/字体/懒加载图片等），并优化连接与加载顺序。LightHouse 评分由 29 提升至 35，【单标签性能】LCP 耗时 9.2 秒 ==> 3.8 秒，提升 58.7%；FCP 耗时 1.7 秒 ==> 1.1 秒 ，提升 35.3%；Speed Index 耗时 8.8 秒 ==> 7.0 秒，提升 20.5% 。

// ==UserScript==
// @name         YouTube 多标签页优化 -- YouTube Smart Resource Booster (Dynamic & Lazy)
// @namespace   https://gf.zukizuki.org/users/1171320
// @description  快如闪电！！提前预加载 YouTube 视频页的关键资源（JS/CSS/字体/懒加载图片等），并优化连接与加载顺序。LightHouse 评分由 29 提升至 35，【单标签性能】LCP 耗时 9.2 秒 ==> 3.8 秒，提升 58.7%；FCP 耗时 1.7 秒  ==> 1.1 秒 ，提升 35.3%；Speed Index 耗时 8.8 秒 ==> 7.0 秒，提升 20.5% 。
// @version 1.02
// @match        *://www.youtube.com/watch*
// @author         yzcjd
// @author2       ChatGPT4 辅助
// @grant        none
// @license MIT
// ==/UserScript==


(function () {
  'use strict';

  const MAX_RESOURCES = 100;
  const loaded = new Set();
  const lazyImages = new Set();
  const head = document.head || document.getElementsByTagName('head')[0];

  // ✅ 1. CDN 提前连接
  const preconnectDomains = [
    'https://www.youtube.com',
    'https://i.ytimg.com',
    'https://vi.ytimg.com',
    'https://fonts.googleapis.com',
    'https://fonts.gstatic.com',
    'https://googleads.g.doubleclick.net',
    'https://www.google.com',
    'https://yt3.ggpht.com'
  ];
  preconnectDomains.forEach(domain => {
    ['preconnect', 'dns-prefetch'].forEach(rel => {
      const link = document.createElement('link');
      link.rel = rel;
      link.href = domain;
      if (rel === 'preconnect') link.crossOrigin = 'anonymous';
      head.appendChild(link);
    });
  });

  // ✅ 类型判断
  function getAsType(url) {
    if (url.endsWith('.js')) return 'script';
    if (url.endsWith('.css')) return 'style';
    if (url.includes('fonts') || url.endsWith('.woff2')) return 'font';
    if (/\.(jpg|jpeg|png|webp)/.test(url)) return 'image';
    return 'fetch';
  }

  // ✅ 通用资源 preload
  function preloadCommonResources() {
    const nodes = Array.from(document.querySelectorAll('link[rel=stylesheet], script[src], link[href*="fonts"]'));
    let count = 0;
    for (const node of nodes) {
      const href = node.href || node.src;
      if (!href || loaded.has(href)) continue;
      const preload = document.createElement('link');
      preload.rel = 'preload';
      preload.href = href;
      preload.as = getAsType(href);
      preload.crossOrigin = 'anonymous';
      if (preload.as === 'font') preload.type = 'font/woff2';
      head.appendChild(preload);
      loaded.add(href);
      if (++count >= MAX_RESOURCES) break;
    }
  }

  // ✅ 播放器核心 preload（base.js, www-player.css）
  function preloadPlayerAssets() {
    const links = Array.from(document.querySelectorAll('script[src*="/s/player/"], link[href*="/s/player/"]'));
    links.forEach(link => {
      const href = link.src || link.href;
      if (!href || loaded.has(href)) return;
      const preload = document.createElement('link');
      preload.rel = 'preload';
      preload.href = href;
      preload.as = getAsType(href);
      preload.crossOrigin = 'anonymous';
      head.appendChild(preload);
      loaded.add(href);
    });
  }

  // ✅ 提高资源优先级
  function elevatePriority() {
    document.querySelectorAll('img, iframe, video').forEach(el => {
      if (!el.getAttribute('fetchpriority')) {
        el.setAttribute('fetchpriority', 'high');
      }
    });
  }

  // ✅ preload 封面图和推荐图（主动探测 ytimg）
  function preloadVideoImages() {
    document.querySelectorAll('img[src*="ytimg.com"]').forEach(img => {
      const src = img.src;
      if (!src || lazyImages.has(src)) return;
      const preload = document.createElement('link');
      preload.rel = 'preload';
      preload.as = 'image';
      preload.href = src;
      head.appendChild(preload);
      lazyImages.add(src);
    });
  }

  // ✅ debounced 执行（避免频繁触发）
  function debounce(fn, delay = 300) {
    let timer;
    return () => {
      clearTimeout(timer);
      timer = setTimeout(fn, delay);
    };
  }

  // ✅ 播放器加载监测（调试用，可关闭）
  function watchPlayerReady() {
    const start = performance.now();
    const interval = setInterval(() => {
      const player = document.getElementById('movie_player');
      if (player && typeof player.getPlayerState === 'function') {
        const now = performance.now();
        console.log('[✅ Player Ready]', (now - start).toFixed(0) + 'ms');
        clearInterval(interval);
      }
    }, 100);
  }

  // ✅ 初始预加载 & DOM 观察器
  const runAll = () => {
    preloadCommonResources();
    preloadPlayerAssets();
    preloadVideoImages();
    elevatePriority();
  };

  const observer = new MutationObserver(debounce(runAll, 500));
  observer.observe(document.documentElement, { childList: true, subtree: true });

  // ✅ 初始执行 + 滚动时懒图 preload + 播放器监测
  runAll();
  window.addEventListener('scroll', () => {
    requestIdleCallback(preloadVideoImages, { timeout: 1000 });
  });
  watchPlayerReady(); // 可注释掉调试用日志

})();