☰

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% 。

ავტორი
yzcjd
დღიური ინსტალაციები
8
მთლიანი ინსტალაციები
8
რეიტინგი
1 0 0
ვერსია
1.02
შექმნილია
25.04.2025
განახლებულია
25.04.2025
Size
4,93 KB
ლიცენზია
MIT
გამოყენებს მათ

【主要优化】
1. 预加载、预连接，DNS 预解析。 preload、preconnect、dns-prefetch
2. 常见资源预缓存：JS/CSS/字体/图标/播放器脚本/静态 CDN 内容/Google 常用资源。字体：Roboto, Noto Sans；样式：base.css, www-player.css；核心 JS：base.js, polymer.js, player.js
3. 浏览器缓存机制 + DOM 元素复用，多标签复用资源，同时开 50 个视频不卡顿。
避免 MutationObserver 重复运行，
避免

重复插入导致无效 DOM 节点膨胀（每页一百多条），
避免页面切换时不断触发 observer：YouTube 使用 SPA 单页应用架构，会频繁发生 DOM 变化
4. 资源合理限制：使用 debounce() 限流 MutationObserver，避免 CPU 抢占；限制最大资源分析数，防止卡顿（默认上限 100）。
5. 小优化：提前加载视频播放器资源。
s/player/xxx/base.js、polymer.js、www-player.css
屏幕外自动预加载图片：img[src*="ytimg.com"]
YouTube 在渲染时会将视频内容延后，设置页面 priority 属性提前加载
自动推测资源延迟加载点并“温预载”，scroll into view 部分尝试监听 DOM 或滚动后预抓内容。（类似视频推荐板块）


LightHouse 评分： 2.9 ==> 3.5，跨标签暂无法评测。
【单页面重要指标优化对比，除了该脚本，其它脚本不变】
提升）网页主要内容加载缓慢：Largest Contentful Paint（LCP）耗时 9.2 秒 ==> 3.8 秒，提升 58.7%
提升）首次渲染出文字或图片用时偏高：First Contentful Paint（FCP）耗时 1.7 秒 ==> 1.1 秒 ，提升 35.3%
提升）可视内容整体渲染速度慢：Speed Index 耗时 8.8 秒 ==> 7.0 秒，提升 20.5%
降低）阻塞总时间，用户交互限制 Total Blocking Time 2,520 毫秒 ==> 2,680 毫秒，几乎不变
降低）视觉稳定性，界面元素偏移概率 Cumulative Layout Shift 0.022 ==> 0.097，无痕模式稳定 0.27，这个值只要装了扩展和脚本每次测试都会波动。