如何监测Google Docs文本变更以测量端到端延迟？

针对Google Docs切换Canvas渲染后无法通过HTML监控变更的问题，以下是两种可行的实时检测方案：

方案1：监听辅助功能DOM节点变更 #

Google Docs为兼容辅助功能，会在后台维护同步文档内容的DOM树，可通过MutationObserver监听该节点的变化：

// 定位辅助功能文档容器
const docContainer = document.querySelector('[aria-label="Document content"]');
if (!docContainer) {
  console.error('未找到辅助功能文档容器');
  return;
}

// 创建MutationObserver实例
const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    // 监听文本内容或子节点变化
    if (mutation.type === 'characterData' || mutation.type === 'childList') {
      const currentContent = docContainer.textContent.trim();
      console.log(`[${new Date().toISOString()}] 文档内容变更：`, currentContent);
      // 此处可记录时间戳，用于计算同步延迟
    }
  });
});

// 启动监听，包含子树和文本变化
observer.observe(docContainer, {
  childList: true,
  subtree: true,
  characterData: true,
  characterDataOldValue: true
});

// 停止监听的方法（如需）
// observer.disconnect();

优缺点：

• 优点：实现简单，无需解析复杂协议
• 缺点：同步时机略晚于Canvas渲染，和辅助功能侧边栏延迟一致，但仍能满足大部分延迟测量需求

方案2：拦截WebSocket同步消息 #

Google Docs通过WebSocket实现实时协作，拦截并解析这些消息可精准捕获同步触发时刻：

// 重写WebSocket构造函数以拦截消息
const originalWS = window.WebSocket;
window.WebSocket = function(url, protocols) {
  const ws = new originalWS(url, protocols);
  
  ws.addEventListener('message', (event) => {
    try {
      const msgData = JSON.parse(event.data);
      // 根据实际消息结构筛选编辑同步事件（需自行抓包确认字段）
      // 示例：包含mutation或edit操作的消息
      if (msgData?.mutations || msgData?.ops?.length) {
        console.log(`[${new Date().toISOString()}] 检测到协作同步事件`, msgData);
        // 可在此处触发文档内容获取，对比变更前后差异
      }
    } catch (err) {
      // 忽略非JSON格式的控制消息
    }
  });
  
  return ws;
};

优缺点：

• 优点：能捕获同步触发的最早时刻，延迟测量最精准
• 缺点：Google Docs的WebSocket消息结构可能随时变更，需要定期验证字段规则

注意事项 #

• 以上代码均可直接在Chrome DevTools控制台运行，或封装为Tampermonkey脚本使用
• 测量端到端延迟时，需在编辑端记录输入时间戳，同步端记录检测到变更的时间戳，两者差值即为延迟时长

内容的提问来源于stack exchange，提问作者lefalaf