第 1 章：跨模块通信与渲染帧率——为什么这两件事值得你花时间？

做过复杂前端项目的朋友都知道，两个看似不相关的技术点，往往是崩盘的导火索。

跨模块通信和渲染帧率监控，就是这样的两个角色。

一个管数据能不能跑对，一个管画面能不能跑流畅。单独看哪个好像都挺简单，但合在一起，稍不注意就把整个应用拖下水。

我个人习惯，在接手任何中大型项目的前两周，先把这两块的底细摸清楚。为什么？因为我曾经在一个大型后台项目中，就因为忽视了跨模块通信的耦合问题，导致整个页面卡到没法用。嗯，那次教训挺深刻的。

什么是跨模块通信？

说白了，就是应用中不同部分之间的数据交换。

模块可能是多个 iframe、不同的 Web Component、独立打包的微前端子应用，甚至只是两个不共享状态树的普通组件。

你们想想看，一个后台系统往往有几十个业务模块。订单模块改了数据，库存模块要立刻知道，支付模块又要收到通知。模块之间直接 import 引用？那代码就乱成一锅粥了。

常见的跨模块通信场景

1. 组件间通信——父子组件、兄弟组件，通过 props、事件、context 等。
2. 模块间通信——不同业务模块（如订单模块与支付模块），通过事件总线、发布订阅、Redux 等。
3. iframe 通信——嵌入第三方页面时，通过 postMessage。
4. Service Worker 通信——离线缓存场景，通过 MessageChannel 或 postMessage。
5. 微前端通信——主子应用、子应用之间，通过自定义事件、共享状态、通信库等。

通信方式	耦合度	性能开销	适用场景
Props/Callbacks	高	低	父子组件
事件总线	中	中	同页模块间
postMessage	低	中高（需序列化）	iframe / Worker
共享状态（Redux/Zustand）	低	中（需 diff）	中大型应用
BroadcastChannelAPI	低	低	同源多标签页

那渲染帧率又是什么？

渲染帧率，就是浏览器每秒能绘制多少帧画面。一般我们盯着 60fps 这个目标——每帧可用时间只有 16.6 毫秒。

你想想看，用户在界面上点击一个按钮，期望的是瞬间反馈。如果帧率掉到 30fps 甚至更低，那种卡顿感就很明显了。

我在监控一个可视化大屏项目时，发现一个数据列表的每次更新都触发了整屏重绘。帧率直接从 60 掉到 10。找了好久才发现是跨模块消息广播时，每个模块都排队做了大量 reflow。

为什么把这两个话题放到一门课里？

因为它们是同一条绳子上的蚂蚱。

• 跨模块通信一旦设计不当，会引起大量不必要的消息传递，进而触发频繁的布局重算和渲染。
• 渲染帧率监控能倒推出通信链路里的性能瓶颈。
• 反过来，优化通信策略往往能直接提升帧率，一举两得。

随便举个例子：给你一段用 postMessage 做跨模块通信的代码。看起来简单，但如果你不做批量处理，消息一多，主线程就被撑死了。

// 不推荐的写法：每条消息立即触发一次渲染
window.addEventListener('message', (event) => {
  // 直接更新DOM
  document.getElementById('data').textContent = event.data.payload;
});

// 推荐的写法：合并消息，批量渲染
let pending = [];
window.addEventListener('message', (event) => {
  pending.push(event.data.payload);
  if (!pending._timer) {
    pending._timer = requestAnimationFrame(() => {
      document.getElementById('data').textContent = pending.join(', ');
      pending = [];
      pending._timer = null;
    });
  }
});

同样的逻辑，用 requestAnimationFrame 合并后，帧率就能稳在 60fps 附近。

帧率监控的基本方法

我记得刚开始做帧率监控时，都会写个简易的帧率计算器：

let lastTime = performance.now();
let frames = 0;
function tick() {
  frames++;
  const now = performance.now();
  const delta = now - lastTime;
  if (delta >= 1000) {
    console.log(`FPS: ${frames}`);
    frames = 0;
    lastTime = now;
  }
  requestAnimationFrame(tick);
}
requestAnimationFrame(tick);

但这种方式只能粗糙地看看平均值。你想想看，它没法捕捉到那一瞬间的掉帧。

本章知识体系总览

下面的 SVG 图展示了整个章节的核心结构。你看，左边是跨模块通信，右边是渲染帧率监控；中间通过性能优化策略联通。每个分支下都有具体的技术手段和工具。

这张图可以当成这堂课的地图。后续每个章节都会深入到某个具体技术点，比如 micro frontends 的沙箱通信、Frame Timing API 的精确解析、批量更新对帧率的实测影响等。