架构重构 V1.3.7.2 发布

ResourceShare 企业级跨域
资源共享解决方案

如同瑞士军刀一般，解决 iframe 资源加载瓶颈。支持 VM 虚拟路径映射、Blob 传输优化、可视化 UI 监控以及智能错误诊断。 为大规模复杂 Web 应用打造的高性能底层引擎。

探索功能 查看 Github 项目
ResourceShare Monitor Panel

全链路性能与体验优化

不仅仅是加载脚本，而是提供一套完整的资源治理方案。

高性能传输

智能判断资源体积。小于 1MB 使用 PostMessage 直接传输，超大文件自动切换为 Blob URL 方式，突破浏览器消息传递限制。

虚拟路径映射 (V1.3.7.2)

自动为远程资源生成 VM_ 前缀的虚拟文件名（如 VM_jquery.min.js），保留完整的 SourceURL 路径层级，极大提升开发者调试体验。

智能错误诊断

内置规则引擎，自动识别常见的加载错误（如 jQuery 缺失、CORS 限制），并提供具体的解决方案建议，告别无头苍蝇式排查。

ARCHITECTURE

可视化 UI 管理系统

系统内置了一套基于 Web Components 的轻量级 UI 管理器。通过毛玻璃风格的悬浮面板，您可以实时监控资源加载进度、查看分类日志，甚至在发生严重错误时通过遮罩层获取诊断信息。

  • 启动页与进度条

    优雅的加载动画，缓解用户等待焦虑。

  • 分级日志控制

    UI 日志与 DevTools 日志独立控制，生产环境可完全关闭 UI 日志以节省性能。

RS_CONFIG.js V1.3.7.2 
window.RS_CONFIG = {
  VERSION: '1.3.7.2',               // 当前系统版本号
  COPYRIGHT: '© 2026 GVSDS Team',  // 版权声明
  SOURCE_FILE: 'ResourceShare.js', // 源文件标识名称
  
  ENABLE_UI: true,                 // 是否启用可视化界面 (启动页/日志/弹窗)

  POST_MESSAGE_LIMIT: 1 * 1024 * 1024, // 消息传输大小阈值 (1MB)，超过转Blob
  BLOB_LIMIT: 1024 * 1024 * 1024,     // Blob数据处理限制 (1GB)，防内存溢出
  SCRIPT_TIMEOUT: 5 * 60 * 1000,     // 脚本加载超时时间 (5分钟)，超时强制释放
  PING_INTERVAL: 100,                // 子页向父页握手间隔
  PING_TIMEOUT: 5000,                // 父页握手响应超时 (5秒)
  REQUEST_TIMEOUT: 10000,            // 资源请求超时 (10秒)

  RETRY: {
    COUNT: 3,            // 失败重试次数
    DELAY: 1500          // 重试间隔
  },

  Z_INDEX: {
    SPLASH: 2147483647,  // 启动页层级 (最高)
    PROGRESS: 2147483646, // 进度条层级
    PANEL: 2147483645,    // 日志面板层级
    ERROR: 2147483648     // 错误弹窗层级
  },
  
  LOG_LEVEL_UI: 'debug',       // UI面板日志级别 ('debug'/'info'/'error'/'none')
  LOG_LEVEL_DEVTOOLS: 'error', // 浏览器控制台日志级别 ('debug'/'info'/'error'/'none')

  LOG_LEVEL_MAP: {
    debug: ['info', 'success', 'warning', 'danger', 'cache', 'request'], // 调试模式允许所有类型
    info: ['info', 'success', 'warning', 'danger'],                       // 信息模式排除缓存/请求
    error: ['danger'],                                                     // 错误模式仅显示危险
    none: []                                                               // 关闭日志
  },

  ANIMATION: {
    SPLASH_HIDE: 800,      // 启动页隐藏动画时长
    PROGRESS_COMPLETE: 800,// 进度条完成动画时长
    PANEL_HIDE: 500,       // 面板隐藏动画时长
    ERROR_SLIDE_UP: 400,   // 错误弹窗滑入动画时长
    LOG_FADE_IN: 200       // 日志条目淡入动画时长
  },
  
  UI_STYLE: {
    FONT_FAMILY: "'Segoe UI Variable', 'Segoe UI', sans-serif", // 系统字体
    MONO_FONT: "'Consolas', 'Monaco', monospace",              // 代码字体
    BLUR_VALUE: '20px',      // 背景模糊度
    SHADOW_OPACITY: 0.12     // 阴影透明度
  }
};

Architecture

父级分发，多子级复用

告别每个 iframe 都重新下载 jQuery 或 Vue 的低效时代。

Top Window 资源持有者 / 缓存中心
Iframe A
Cached
Iframe B
Cached
Iframe C
Cached
Iframe D
Cached

极速加载 (0ms Latency)

首个 iframe 请求资源后，后续所有同源 iframe 均直接从父级内存读取 Blob URL 或 PostMessage 消息，网络延迟为零。

流量节省

对于 100 个 iframe 加载同一套 2MB 的 UI 库，系统仅消耗 2MB 流量，而非 200MB，显著降低服务器带宽成本。

同源安全握手

内置 Ping/Pong 握手机制，严格校验 Origin，确保资源只在授权的同源 iframe 间流转，防止数据泄露。

父对子 (P2C) 共享逻辑

在传统的 iframe 架构中，每个 iframe 都是一个独立的浏览器上下文，拥有独立的网络栈和缓存。 如果你的页面有 5 个子窗格，每个都需要加载 jQuery (85KB)，那么你浪费了 400KB 的带宽和 5 次 DNS 查询时间。

  • 1
    父页面优先获取 Parent Window 发起 HTTP 请求，将资源存储在内存 Map 中。
  • 2
    建立握手通道 Child Window 启动时自动 PostMessage Ping 父页面，验证同源。
  • 3
    Blob 传输与执行 父页面将缓存转化为 Blob URL 或 直接传输数据，子页面通过 URL.createObjectURL 即时执行脚本。
Parent Window (Top Level)
ResourceShare Manager
Cache: Map ✓ jQuery Loaded
Ping/Pong
PostMessage (Blob)
Child Iframe 1
Dashboard Pane
Ready (Cached)
Child Iframe 2
Settings Pane
Ready (Cached)

父页面：资源中枢

1

发起网络请求

父页面负责所有的跨域资源下载。系统自动拦截 <resource-share> 标签声明的资源，并发起 fetch 请求。

2

缓存与预处理

下载的内容被存储在父页面的 Map 缓存中。对于大文件，自动转换为 Blob URL；对于小文件，直接文本存储。

3

监听子请求 & 分发

父页面开启 message 监听器。一旦收到子页面的 resource-request 信号，立即从缓存提取数据并通过 postMessage 推回。

子页面：轻量接入

1

握手与请求

子页面初始化时，向父页面发送 resource-share-ping 确认连接。随后解析自身的 <resource-share> 标签，生成请求列表。

2

接收资源并执行

收到父页面 postMessage 传来的 Blob URL 或字符串内容后，立即创建 <script> 或 <style> 标签并注入 DOM。

3

降级机制 (Fallback)

如果无法连接到父页面（例如跨域限制），子页面会自动降级，直接向 CDN 发起请求，确保业务不受影响。

多子场景下的性能碾压

假设系统有 1 个父页面和 5 个子 iframe，共同加载 3 个公共库（jQuery, Vue, ElementUI）

传统加载模式

  • 每个页面独立向 CDN 发起请求
  • 重复下载相同资源 6 次 (1父+5子)
  • 浪费带宽，加载时间长
总网络请求
18 次

ResourceShare 模式

  • 仅父页面发起 3 次网络请求
  • 5 个子页面瞬间并发获取 (PostMessage)
  • 节省 83% 的外部请求
总网络请求
3 次

智能错误诊断系统

当脚本执行失败时，系统不仅显示错误，更会提供修复建议。

!
系统严重错误
ResourceShare 遇到不可恢复的错误
智能诊断与建议
jQuery 依赖错误:
脚本依赖 jQuery，但似乎未加载或加载顺序错误。
解决方案: 请检查 resource-share 中 jQuery 是否在其他依赖库之前声明。
错误堆栈跟踪
TypeError: $ is not defined
at VM_app_main.js:12:5
at executeScript (ResourceShare.js:420)

实时规则匹配

内置的 DIAGNOSTIC_RULES 包含多种常见错误的特征检测。一旦捕获异常，系统会遍历规则库，匹配错误特征并生成 HTML 诊断报告。

网络层异常捕捉

不仅限于 JavaScript 语法错误。对于网络请求超时、4xx/5xx 状态码、CORS 跨域拦截等底层网络问题，同样提供明确的指引。

TypeError ReferenceError NetworkError

开箱即用，零配置启动

只需引入一个 JS 文件，并使用自定义标签声明资源，系统将自动完成脚本拦截、加载、映射和执行的整个生命周期。

index.html 


<!-- 1. 引入系统 -->
<script src="https://cdn.gvsds.com/ResourceShare/ResourceShare-1.3.7.2.js"></script>

<!-- 2. 声明需要管理的资源 -->
<resource-share 
    type="script" 
    src="https://cdn.../jquery.min.js">
</resource-share>

<resource-share 
    type="style" 
    href="https://cdn.../app.css">
</resource-share>

<!-- 3. 正常书写业务代码，无需额外等待逻辑 -->
<script>
    window.resourceShareManager.on('ready', () => {
        $('#app').show(); // jQuery 确保已加载
    });
</script>