<!-- 在文档入口页注入预解析脚本 -->
<link rel="preload" as="fetch" crossorigin="anonymous" 
      href="https://api.docs.example.com/v1/documents/{docId}/structure?depth=2">
<script>
  // 利用 IdleCallback 在主线程空闲时解析文档骨架
  requestIdleCallback(() => {
    fetch('/api/documents/{docId}/skeleton')
      .then(res => res.json())
      .then(skeleton => {
        // 预构建虚拟 DOM 树，首屏渲染直接复用
        window.__DOC_SKELETON__ = skeleton;
      });
  }, { timeout: 2000 });
</script>

// 协作行为预测模型（简化版）
class CollaborationPrefetcher {
  constructor() {
    this.prefetchQueue = new Set();
    this.userBehavior = {
      scrollDepth: 0,
      activeSections: new Set(),
      collaboratorFocus: new Map() // userId -> sectionId
    };
  }

  // 监听滚动与协作者光标位置
  observe() {
    window.addEventListener('scroll', this.throttle(this.onScroll, 200));
    this.ws.on('cursor:move', (data) => this.onCollaboratorFocus(data));
  }

  onScroll() {
    const depth = window.scrollY / document.body.scrollHeight;
    this.userBehavior.scrollDepth = depth;
    this.predictNextSections(depth);
  }

  onCollaboratorFocus(data) {
    this.userBehavior.collaboratorFocus.set(data.userId, data.sectionId);
    // 协作者正在编辑的区段，优先级最高
    this.prefetchSection(data.sectionId, 'high');
  }

  predictNextSections(currentDepth) {
    const nextSections = this.getSectionsInRange(currentDepth + 0.1, currentDepth + 0.3);
    nextSections.forEach(section => this.prefetchSection(section.id, 'normal'));
  }

  prefetchSection(sectionId, priority = 'normal') {
    if (this.prefetchQueue.has(sectionId)) return;
    
    const url = `/api/sections/${sectionId}/render?format=html&images=webp`;
    const link = document.createElement('link');
    link.rel = priority === 'high' ? 'preload' : 'prefetch';
    link.as = 'fetch';
    link.href = url;
    link.crossOrigin = 'anonymous';
    document.head.appendChild(link);
    this.prefetchQueue.add(sectionId);
  }
}

# Nginx 配置示例：针对不同资源类型差异化缓存策略
location ~* .(html|json)$ {
    # 文档结构/元数据：短缓存 + 必须重新验证
    add_header Cache-Control "private, max-age=60, must-revalidate";
    etag on;
}

location ~* .(js|css|woff2|webp|avif)$ {
    # 静态资源：长缓存 + 不变性校验
    add_header Cache-Control "public, max-age=31536000, immutable";
    # 启用 Brotli 压缩
    brotli on;
    brotli_types text/css application/javascript font/woff2 image/webp image/avif;
}

location /api/documents/ {
    # 协作 API：无缓存，但支持条件请求
    add_header Cache-Control "no-store, must-revalidate";
    # 支持 If-None-Match / If-Modified-Since
    etag on;
    last_modified on;
}

// sw.js - 协作文档专用 Service Worker
const CACHE_NAME = 'doc-collab-v3';
const STATIC_ASSETS = ['/editor.bundle.js', '/styles.css', '/fonts/inter.woff2'];
const DOCUMENT_CACHE = 'document-content';

// 安装：预缓存静态资源
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME).then(cache => cache.addAll(STATIC_ASSETS))
  );
  self.skipWaiting();
});

// 激活：清理旧版本缓存
self.addEventListener('activate', (event) => {
  event.waitUntil(
    caches.keys().then(keys => 
      Promise.all(keys.filter(k => k !== CACHE_NAME).map(k => caches.delete(k)))
    )
  );
  self.clients.claim();
});

// 请求拦截：分策略处理
self.addEventListener('fetch', (event) => {
  const { request } = event;
  const url = new URL(request.url);

  // 1. 文档内容：Stale-While-Revalidate（秒开 + 后台更新）
  if (url.pathname.startsWith('/api/documents/') && url.searchParams.get('format') === 'html') {
    event.respondWith(staleWhileRevalidate(request, DOCUMENT_CACHE));
    return;
  }

  // 2. 图片资源：Cache First（带宽敏感）
  if (request.destination === 'image') {
    event.respondWith(cacheFirst(request, CACHE_NAME));
    return;
  }

  // 3. 协作实时消息：Network Only（不缓存）
  if (url.pathname.includes('/ws/') || url.pathname.includes('/realtime/')) {
    return; // 直接透传
  }

  // 4. 其他：Network First（兜底）
  event.respondWith(networkFirst(request, CACHE_NAME));
});

// Stale-While-Revalidate 实现
async function staleWhileRevalidate(request, cacheName) {
  const cache = await caches.open(cacheName);
  const cached = await cache.match(request);
  
  // 后台发起更新请求
  const fetchPromise = fetch(request).then(response => {
    if (response.ok) cache.put(request, response.clone());
    return response;
  }).catch(() => cached); // 网络失败回退缓存

  // 有缓存直接返回，无缓存等待网络
  return cached || fetchPromise;
}

# CDN 配置示例（以 Cloudflare Workers 为例）
# 1. 边缘缓存键包含文档版本号
cache_key = "${doc_id}:${version}:${resource_type}"

# 2. 文档更新时，通过 API 触发边缘缓存清除
# POST https://api.cloudflare.com/client/v4/zones/:zone_identifier/purge_cache
{
  "tags": ["doc:12345", "doc:12345:sections:*"],
  "hosts": ["cdn.docs.example.com"]
}

# 3. 协作者光标/选区等实时数据：完全不缓存，走专用 WebSocket 通道

// 根据网络质量动态调整渲染策略
class AdaptiveRenderer {
  constructor() {
    this.networkQuality = 'good'; // good | poor | offline
    this.setupNetworkMonitoring();
  }

  setupNetworkMonitoring() {
    // 使用 Network Information API + 自定义探测
    const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
    if (connection) {
      connection.addEventListener('change', () => this.updateQuality(connection));
      this.updateQuality(connection);
    }
    
    // 补充：定期探测实际下载速度
    setInterval(() => this.probeBandwidth(), 30000);
  }

  updateQuality(connection) {
    const { effectiveType, downlink, rtt } = connection;
    if (effectiveType === 'slow-2g' || effectiveType === '2g' || downlink < 0.5 || rtt > 300) {
      this.networkQuality = 'poor';
    } else if (navigator.onLine === false) {
      this.networkQuality = 'offline';
    } else {
      this.networkQuality = 'good';
    }
    this.applyRenderingStrategy();
  }

  applyRenderingStrategy() {
    switch (this.networkQuality) {
      case 'good':
        // 全量渲染：高清图片、完整样式、实时协作光标
        this.enableFeature(['hd-images', 'full-styles', 'realtime-cursors', 'comments']);
        break;
      case 'poor':
        // 降级渲染：WebP 低质量图片、简化样式、仅显示自己光标、评论折叠
        this.enableFeature(['low-q-images', 'minimal-styles', 'self-cursor-only', 'collapsed-comments']);
        // 启用虚拟滚动，仅渲染可视区
        this.virtualScroll.enable();
        break;
      case 'offline':
        // 离线模式：仅展示 SW 缓存的最后版本，标记只读，本地队列操作待同步
        this.enableFeature(['cached-only', 'read-only', 'local-queue']);
        this.showOfflineBanner();
        break;
    }
  }
}

// 资源加载失败重试策略
async function fetchWithRetry(url, options = {}, maxRetries = 3) {
  const baseDelay = 1000; // 1s
  const maxDelay = 10000; // 10s
  
  for (let attempt = 0; attempt <= maxRetries; attempt++) {
    try {
      const response = await fetch(url, {
        ...options,
        // 弱网下缩短超时，避免长时间阻塞
        signal: AbortSignal.timeout(attempt === 0 ? 10000 : 5000)
      });
      
      if (!response.ok) throw new Error(`HTTP ${response.status}`);
      return response;
    } catch (error) {
      if (attempt === maxRetries) throw error;
      
      // 指数退避 + 全抖动
      const delay = Math.min(baseDelay * Math.pow(2, attempt), maxDelay);
      const jitter = Math.random() * delay;
      await new Promise(r => setTimeout(r, jitter));
      
      // 记录重试日志供监控分析
      console.warn(`[Retry ${attempt + 1}/${maxRetries}] ${url} - ${error.message}, waiting ${jitter.toFixed(0)}ms`);
    }
  }
}

// performance-monitor.js
class CollaborationPerformanceMonitor {
  constructor() {
    this.metrics = {
      // 预加载命中率
      prefetchHitRate: { hit: 0, total: 0 },
      // 缓存命中率（按层级）
      cacheHitRate: { memory: 0, disk: 0, sw: 0, cdn: 0, total: 0 },
      // 渲染关键节点
      renderMilestones: {},
      // 协作延迟
      collaborationLatency: []
    };
  }

  // 资源加载拦截记录
  recordResourceLoad(resourceType, source, duration) {
    this.metrics.cacheHitRate[source] = (this.metrics.cacheHitRate[source] || 0) + 1;
    this.metrics.cacheHitRate.total++;
    
    // 上报至分析平台
    this.report('resource_load', {
      type: resourceType,
      source, // memory | disk | sw | cdn | network
      duration,
      timestamp: Date.now()
    });
  }

  // 预加载命中记录
  recordPrefetchHit(hit) {
    this.metrics.prefetchHitRate.total++;
    if (hit) this.metrics.prefetchHitRate.hit++;
  }

  // 协作消息往返延迟
  recordCollaborationLatency(latencyMs) {
    this.metrics.collaborationLatency.push(latencyMs);
    // 保留最近 100 个样本
    if (this.metrics.collaborationLatency.length > 100) this.metrics.collaborationLatency.shift();
  }

  // 定期上报聚合指标
  startReporting(interval = 60000) {
    setInterval(() => this.flushMetrics(), interval);
  }

  flushMetrics() {
    const p50 = this.percentile(this.metrics.collaborationLatency, 50);
    const p95 = this.percentile(this.metrics.collaborationLatency, 95);
    
    this.report('collab_performance_summary', {
      prefetchHitRate: this.metrics.prefetchHitRate.hit / this.metrics.prefetchHitRate.total || 0,
      cacheHitRate: {
        memory: this.metrics.cacheHitRate.memory / this.metrics.cacheHitRate.total || 0,
        disk: this.metrics.cacheHitRate.disk / this.metrics.cacheHitRate.total || 0,
        sw: this.metrics.cacheHitRate.sw / this.metrics.cacheHitRate.total || 0,
        cdn: this.metrics.cacheHitRate.cdn / this.metrics.cacheHitRate.total || 0
      },
      collaborationLatency: { p50, p95 },
      timestamp: Date.now()
    });
    
    // 重置计数器
    this.metrics.prefetchHitRate = { hit: 0, total: 0 };
    this.metrics.cacheHitRate = { memory: 0, disk: 0, sw: 0, cdn: 0, total: 0 };
  }

  percentile(arr, p) {
    if (!arr.length) return 0;
    const sorted = [...arr].sort((a, b) => a - b);
    const idx = Math.ceil(p / 100 * sorted.length) - 1;
    return sorted[Math.max(0, idx)];
  }

  report(eventName, data) {
    // 发送至数据平台（如 ClickHouse、InfluxDB、Datadog 等）
    navigator.sendBeacon('/api/telemetry', JSON.stringify({ event: eventName, ...data }));
  }
}

# Nginx 配置：开启 Early Hints (需 Nginx 1.25+ / OpenResty)
location /api/documents/ {
    # 1. 立即发送 103 响应，包含关键资源预加载提示
    early_hints on;
    early_hints_links "
        </static/editor.core.v3.js>; rel=preload; as=script,
        </static/styles.critical.css>; rel=preload; as=style,
        </api/documents/$arg_docId/skeleton>; rel=preload; as=fetch; crossorigin=anonymous
    ";
    
    # 2. 后续正常处理业务逻辑生成 200 响应
    proxy_pass http://doc_backend;
}

# Nginx QUIC 配置片段 (OpenResty/NGINX Plus)
server {
    listen 443 quic reuseport;
    listen 443 ssl http2; # 回退
    
    # 启用 0-RTT (需客户端支持，且仅用于幂等 GET 请求)
    ssl_early_data on;
    
    # 关键：为文档静态资源添加 Early Data 标识
    location ~* .(js|css|woff2|webp|avif)$ {
        add_header Early-Data "1" always;
        proxy_cache_valid 200 1y;
    }
    
    # 协作 API 禁用 0-RTT (非幂等)
    location /api/collab/ {
        proxy_set_header Early-Data $ssl_early_data;
        # 后端应用层校验 $http_early_data == "1" 时拒绝写操作
    }
}

<!-- 文档编辑器入口 HTML -->
<head>
  <!-- 最高优先级：编辑器核心框架 -->
  <link rel="preload" href="/editor.core.js" as="script" fetchpriority="high">
  
  <!-- 高优先级：当前视口首屏图片 -->
  <img src="/doc/123/page1.webp" fetchpriority="high" loading="eager">
  
  <!-- 低优先级：协作者头像、非首屏图片 -->
  <img src="/avatars/user_456.jpg" fetchpriority="low" loading="lazy">
  <img src="/doc/123/page5.webp" fetchpriority="low" loading="lazy">
  
  <!-- 预取：下一章节内容，最低优先级 -->
  <link rel="prefetch" href="/api/documents/123/sections/2?format=html" fetchpriority="low">
</head>

// sw.js - 根据网络质量动态改写 Fetch Priority
self.addEventListener('fetch', (event) => {
  if (event.request.destination === 'image') {
    const url = new URL(event.request.url);
    // 弱网下强制降低非首屏图片优先级
    if (isPoorNetwork() && url.searchParams.get('priority') !== 'high') {
      // 通过 Range 请求或延迟响应模拟低优先级
      event.respondWith(throttledFetch(event.request, 50)); // 限速 50KB/s
    }
  }
});

// 缓存键生成器：包含文档版本、用户权限、渲染上下文
class CacheKeyGenerator {
  static generate(docId, context) {
    const { 
      version,           // 文档全局版本号 (Lamport Clock / CRDT Version Vector)
      userRole,          // 'owner' | 'editor' | 'viewer' | 'commenter'
      theme,             // 'light' | 'dark' | 'auto'
      fontScale,         // 0.8 | 1.0 | 1.2 | 1.5
      locale,            // 'zh-CN' | 'en-US'
      devicePixelRatio   // 1 | 2 | 3
    } = context;
    
    // 核心原则：版本号变化 = 缓存强制失效
    // 权限/主题变化 = 不同缓存副本 (Vary 语义)
    return `doc:${docId}:v${version}:r${userRole}:t${theme}:fs${fontScale}:l${locale}:dpr${devicePixelRatio}`;
  }
  
  // 批量失效策略：文档更新时，仅失效该版本前缀
  static getInvalidationPrefix(docId) {
    return `doc:${docId}:*`;
  }
}

// Cloudflare Worker: Edge Document Rendering
export default {
  async fetch(request, env, ctx) {
    const url = new URL(request.url);
    const docId = url.pathname.split('/')[2];
    const version = url.searchParams.get('v') || 'latest';
    
    // 1. 尝试从 KV 读取全量渲染缓存
    const cacheKey = `rendered:${docId}:v${version}`;
    let html = await env.DOC_CACHE.get(cacheKey, { type: 'text' });
    
    if (!html) {
      // 2. 缓存未命中：回源获取基础文档 + 近期操作日志
      const [baseDoc, ops] = await Promise.all([
        fetch(`${env.ORIGIN}/api/documents/${docId}/base?v=${version}`),
        fetch(`${env.ORIGIN}/api/documents/${docId}/ops?since=${version - 100}&limit=50`)
      ]);
      
      // 3. 边缘侧执行 OT/CRDT 合并 (需将合并逻辑编译为 WASM 模块)
      const merger = await import('./ot-merger.wasm');
      html = merger.applyOps(await baseDoc.text(), await ops.json());
      
      // 4. 回写边缘缓存 (TTL 短，如 60s，配合主动失效)
      ctx.waitUntil(env.DOC_CACHE.put(cacheKey, html, { expirationTtl: 60 }));
    }
    
    // 5. 注入实时协作 WebSocket 连接点 (指向最近边缘节点)
    html = injectRealtimeEndpoint(html, env.WS_ENDPOINT);
    
    return new Response(html, {
      headers: { 
        'Content-Type': 'text/html; charset=utf-8',
        'Cache-Control': 'public, max-age=30, stale-while-revalidate=300',
        'X-Edge-Rendered': 'true'
      }
    });
  }
}

// Android 原生容器：离线包管理器
public class DocOfflinePackageManager {
    private static final String PACKAGE_DIR = "doc_offline_packages";
    
    // App 启动/后台时预下载高频文档离线包
    public void preloadHighFrequencyDocs(List<String> docIds) {
        for (String docId : docIds) {
            // 1. 查询本地版本
            String localVersion = getLocalVersion(docId);
            
            // 2. 请求云端差分清单
            DiffManifest manifest = apiClient.getDiffManifest(docId, localVersion);
            if (manifest == null || manifest.isEmpty()) continue;
            
            // 3. 下载差分资源 (支持断点续传)
            DownloadTask task = new DownloadTask.Builder()
                .setUrls(manifest.getResourceUrls())
                .setDestDir(getPackageDir(docId))
                .setVerifyCallback(this::verifyIntegrity)
                .setOnComplete(() -> applyPatch(docId, manifest.getNewVersion()))
                .build();
            downloadManager.enqueue(task);
        }
    }
    
    // WebView 拦截请求，优先加载离线包
    @Override
    public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) {
        String url = request.getUrl().toString();
        if (url.contains("/api/documents/") && url.contains("format=html")) {
            String docId = extractDocId(url);
            String localPath = findLocalResource(docId, url);
            if (localPath != null) {
                return new WebResourceResponse("text/html", "utf-8", new FileInputStream(localPath));
            }
        }
        return super.shouldInterceptRequest(view, request);
    }
}

// Web 端：检测原生桥接并切换传输层
class HybridTransport {
  constructor() {
    this.channel = this.detectNativeChannel() ? 'native' : 'websocket';
    this.ws = null;
    this.nativeBridge = window.ReactNativeWebView || window.webkit?.messageHandlers?.collab;
  }
  
  detectNativeChannel() {
    return !!(window.ReactNativeWebView || window.webkit?.messageHandlers?.collab);
  }
  
  send(message) {
    if (this.channel === 'native') {
      // 原生通道：二进制协议 (Protobuf)，无帧开销，心跳由原生层维持
      this.nativeBridge.postMessage(JSON.stringify({ type: 'collab_send', payload: message }));
    } else {
      this.ws?.send(JSON.stringify(message));
    }
  }
  
  onMessage(callback) {
    if (this.channel === 'native') {
      window.document.addEventListener('message', (e) => {
        if (e.data.type === 'collab_recv') callback(e.data.payload);
      });
    } else {
      this.ws.onmessage = (e) => callback(JSON.parse(e.data));
    }
  }
}

# 缓存数据分级标准 (参考 GB/T 35273-2020)
数据分级:
  L1_公开数据: 
    示例: [公开模板、官方字体、CDN 通用图标]
    缓存策略: CDN 公共缓存、浏览器长缓存、可预加载
    合规要求: 无敏感信息，可自由分发
    
  L2_租户内部公开数据:
    示例: [团队共享文档结构、公开评论、协作者头像]
    缓存策略: CDN 私有缓存 (带 Token 鉴权)、SW 缓存、HTTP Cache (private)
    合规要求: 租户隔离，禁止跨租户缓存共享
    
  L3_敏感业务数据:
    示例: [文档正文内容、未公开评论、审批流转记录、水印信息]
    缓存策略: 
      - 严禁 CDN 缓存 (Cache-Control: no-store, private)
      - SW 仅缓存加密后的 Blob (AES-GCM, 密钥存于 IndexedDB + 生物识别保护)
      - 内存缓存仅限当前会话，页面卸载即清零
    合规要求: 
      - 落盘加密
      - 访问审计日志
      - 支持「即时撤销」: 权限变更 1s 内全网缓存失效
      
  L4_高度敏感/监管数据:
    示例: [合同签署痕迹、法律文书、涉密标记段落]
    缓存策略: **全链路零缓存**，仅内存流式渲染，禁止任何形式持久化
    合规要求: 
      - 禁用 Service Worker
      - 禁用 HTTP 缓存
      - 禁用预加载/预取
      - 响应头强制: Cache-Control: no-store, no-cache, must-revalidate, private

// Rust -> WASM: 增量布局计算核心
#[wasm_bindgen]
pub struct LayoutEngine {
    nodes: Vec<LayoutNode>,
    dirty_regions: Vec<Rect>,
}

#[wasm_bindgen]
impl LayoutEngine {
    #[wasm_bindgen(constructor)]
    pub fn new(json: &str) -> LayoutEngine {
        let nodes: Vec<LayoutNode> = serde_json::from_str(json).unwrap();
        LayoutEngine { nodes, dirty_regions: vec![] }
    }
    
    // 仅重算脏区域，返回变更指令供 JS 批量应用
    pub fn relayout(&mut self, mutations: &str) -> String {
        let mutations: Vec<Mutation> = serde_json::from_str(mutations).unwrap();
        self.mark_dirty(&mutations);
        let changes = self.compute_incremental();
        serde_json::to_string(&changes).unwrap()
    }
}

# 1. 客户端声明拥有的字典 (版本 N-1 的文档内容哈希)
GET /api/documents/123?v=105 HTTP/1.1
Available-Dictionary: :sha-256=:abc123...:; "v104"

# 2. 服务端检测到字典匹配，返回差分压缩响应
HTTP/1.1 200 OK
Content-Encoding: zstd-dict
Use-Dictionary: :sha-256=:abc123...:; "v104"
Content-Length: 2.1KB  # 原始 45KB

# 3. 客户端使用本地缓存的 v104 内容作为字典解压

// WebTransport 双向流 + WebCodecs 硬解渲染
const transport = new WebTransport('https://collab.example.com/transport');
await transport.ready;

// 1. 可靠有序流：发送协作操作 (OT/CRDT)
const sender = transport.sendStreams.createBidirectionalStream();
const writer = sender.writable.getWriter();
writer.write(encodeOp(op));

// 2. 数据报流：发送光标/选区/心跳 (允许乱序/丢包，低延迟)
const dgSender = transport.datagrams.writable.getWriter();
setInterval(() => dgSender.write(encodeCursor(cursor)), 50);

// 3. 接收远端渲染指令流 (而非原始操作，减少客户端计算)
const receiver = transport.receiveStreams.getReader();
while (true) {
  const { value, done } = await receiver.read();
  if (done) break;
  // value 为 WebCodecs 兼容的 VideoFrame / AudioData 或绘制指令
  renderer.decodeAndPaint(value); 
}