网页要做国际化，传统套路是抽词条、写配置、改模板、上线后还得维护一堆语言文件。translate.js 从一开始就走反路：不改页面结构、不维护语言包、甚至不需要 API Key——两行 JS 插进去，整个页面自动翻译。
4.1 版本把重点放在私有部署场景，尤其是用大模型做翻译时的用户体验。SSE 增量渲染、跨域 iframe 同步、离线数据优化，每一项都踩在实际部署的痛点上。
SSE 增量渲染：大模型翻译不再"白屏等半天"
私有部署大模型翻译，最头疼的问题是延迟。一个页面几百个节点，逐个丢给大模型翻译，用户盯着白屏等结果，体验直接崩盘。
4.1 引入 SSE（Server-Sent Events）增量渲染机制，核心思路很简单：翻译结果不用等全部完成再一次性替换，而是边翻译边渲染。
服务端每翻译完一个片段，就通过 SSE 推一条事件到前端，前端收到后立即把对应 DOM 节点的文本替换掉。用户看到的效果是：页面文字逐段"流"进目标语言，而不是突然整页切换。
这对私有部署特别关键——你控制了翻译服务端，可以自由实现 SSE 推送；而 translate.js 前端侧只需要配置一个参数就能启用：
<script src="https://cdn.jsdelivr.net/npm/translate.js@4.1/dist/translate.js"></script>
<script>
translate.request.sse.enable = true; // 开启 SSE 增量渲染
translate.request.sse.url = '/api/translate/stream'; // 你的 SSE 端点
translate.execute(); // 执行翻译
</script>
后端 SSE 端点需要按 translate.js 定的格式推送，每条事件携带节点标识和翻译文本。私有部署时你可以在服务端加多层缓存——相同片段第二次请求直接从缓存返回，SSE 通道照样工作，只是推送速度更快。
HY-MT2：私有部署的新翻译引擎选项
4.1 新增对 HY-MT2 翻译引擎的支持。如果你已经在私有环境部署了 HY-MT2 服务，现在可以直接对接，不需要额外适配层。
配置方式和其他引擎一致：
<script>
translate.request.api = 'HY-MT2';
translate.request.hy.mt2.url = 'http://your-server:port/api/mt'; // 私有部署地址
translate.execute();
</script>
HY-MT2 的优势在于私有部署场景下对中文相关语种的翻译质量比较稳定，且响应速度可控。搭配 SSE 增量渲染，整体体验可以做到接近实时。
跨域 iframe 语言同步：postMessage 模块
多语言页面里嵌了跨域 iframe（比如支付页、第三方表单），主页面切换语言时 iframe 不会跟着变，这是个老问题。
4.1 新增 postMessage 模块，主页面切换语言时自动向同页所有 iframe 广播语言变更消息，iframe 内如果也加载了 translate.js，收到消息后立刻同步切换：
<!-- 主页面 -->
<script src="https://cdn.jsdelivr.net/npm/translate.js@4.1/dist/translate.js"></script>
<script>
translate.request.postMessage.enable = true; // 启用跨域同步
translate.language.set('en'); // 切换语言，iframe 会收到广播
</script>
<!-- iframe 内页面 -->
<script src="https://cdn.jsdelivr.net/npm/translate.js@4.1/dist/translate.js"></script>
<script>
translate.request.postMessage.enable = true; // iframe 也开启，接收广播
translate.execute();
</script>
两端都开启 postMessage 模块即可，不需要额外写监听逻辑。跨域安全方面依赖浏览器原生 postMessage 机制，不会突破 iframe 的同域限制。
最简用法：两行 JS 的完整示例
如果你只是想快速让一个页面支持中英切换，不涉及私有部署，最简用法依然是两行：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/translate.js@4.1/dist/translate.js"></script>
</head>
<body>
<h1>欢迎使用 translate.js</h1>
<p>这段文字会被自动翻译为用户选择的语言。</p>
<button onclick="translate.language.set('en')">切换英文</button>
<button onclick="translate.language.set('zh')">切换中文</button>
<script>
translate.execute();
</script>
</body>
</html>
保存为 .html 文件直接打开即可运行。默认使用公共翻译服务，不需要 API Key，也不需要准备任何语言配置文件。SEO 方面，translate.js 在页面渲染后替换文本，搜索引擎抓取的是原始语言内容，翻译层不影响索引。
私有部署场景的推荐配置
把上面几个特性组合起来，私有部署 + 大模型 + SSE 增量渲染 + 跨域同步的完整配置如下：
<script src="https://cdn.jsdelivr.net/npm/translate.js@4.1/dist/translate.js"></script>
<script>
// 翻译引擎：私有部署的 HY-MT2
translate.request.api = 'HY-MT2';
translate.request.hy.mt2.url = 'http://10.0.1.50:8901/api/mt';
// SSE 增量渲染
translate.request.sse.enable = true;
translate.request.sse.url = 'http://10.0.1.50:8901/api/translate/stream';
// 跨域 iframe 同步
translate.request.postMessage.enable = true;
// 离线翻译数据优先（减少网络请求）
translate.request.offline.enable = true;
translate.execute();
</script>
几点注意事项：
- SSE 端点和翻译 API 端点可以部署在同一服务，SSE 端点内部调用翻译引擎后逐段推送，架构上没有额外复杂度。
- 离线数据优先开启后，已有本地缓存的片段直接使用，不再请求服务端，适合高频访问的页面。
- 多层缓存建议在服务端实现：第一层内存缓存（相同文本秒返），第二层 Redis/文件缓存（跨请求复用），第三层才调用大模型。这样 SSE 推送速度在热数据场景下可以做到毫秒级。
4.1 升级检查清单
如果你已经在用 translate.js 旧版本，升级 4.1 时关注这几项：
| 检查项 | 说明 |
|---|---|
| SSE 端点是否就绪 | 私有部署大模型时才需要，公共翻译服务不需要配置 |
| HY-MT2 服务地址 | 已部署 HY-MT2 的才需要配置，否则保持默认引擎 |
| postMessage 跨域 | 页面内有跨域 iframe 的开启，没有则忽略 |
| 离线数据缓存 | 高频页面建议开启，减少重复翻译请求 |
| CDN 版本号 | 确认引用路径中版本号为 4.1，避免加载旧版 |
translate.js 的核心价值始终是"不改页面、不维护语言包"。4.1 把这个价值在私有部署场景下补齐了——大模型翻译的延迟问题用 SSE 增量渲染解决，跨域 iframe 用 postMessage 同步解决，离线数据用本地缓存优先解决。如果你的项目正好在私有部署大模型做网页翻译，这版值得直接升级。