# 频道秒开 (/zh-CN/realtime-media/rtc/build/optimize-and-operate/preload)

> For AI agents: see the complete documentation index at [llms.txt](/llms.txt).

**秒开**是指在观众进入频道时，画面能够在最短的时间内加载并显示出来，没有明显的加载过程。秒开功能可以优化观看体验，让观众能够更快速地进入频道并即刻看到内容，提升观看的连贯性和流畅度。

点击如下视频体验频道秒开：

<video controls width="100%" height="auto" src="https://web-cdn.agora.io/doc-cms/uploads/1724039885659-秒开demo.mp4"></video>

本文介绍如何在你的 App 中实现频道秒开的效果。参考本文完成集成后，在 Windows 和 macOS 端的 Chrome 浏览器上，首帧出图时间最低可至 300 毫秒以内。

## 实现原理 [#实现原理]

下图是秒开最佳实践的原理图：

<DocsImage alt="秒开关键逻辑" src="https://web-cdn.agora.io/doc-cms/uploads/1727075137853-秒开流程图.png" displayWidth="88%" />

## 实现步骤 [#实现步骤]

按照以下流程实现秒开最佳实践：

### 1. 在频道列表页面 [#1-在频道列表页面]

在频道列表页面，对用户视野范围内的频道进行预加载，并按需使用[通配 Token](/zh-CN/realtime-media/rtc/build/security-and-auth/wildcard-token)。

具体操作如下：

- 如果频道总数量不超过 10，通过 [`preload`](/zh-CN/api-reference/rtc/web/interfaces/iagorartc#preload) 方法对所有频道进行预加载。
- 如果频道总数量超过 10，通过 `preload` 方法对仅前 10 个进行频道预加载。如果用户滑动频道列表，那么当滑动停止时，再通过 `preload` 方法对视野范围内的频道进行预加载。
- `preload` 方法的 `token` 参数可以使用[通配 Token](/zh-CN/realtime-media/rtc/build/security-and-auth/wildcard-token)，以加快后续加入频道的速度。

### 2. 与单个频道入口交互 [#2-与单个频道入口交互]

在频道列表页面，用户通过鼠标悬停在某个频道的入口。对于不同的鼠标交互动作，你需要为秒开做的具体操作如下：

#### 2.1 进入频道前 [#21-进入频道前]

用户将鼠标**悬停**到某个频道的入口时，进入频道前，建议提前加入频道，订阅音视频流。

具体操作如下：

- 调用 [`join`](/zh-CN/api-reference/rtc/web/interfaces/iagorartcclient#join) 加入频道，并订阅主播的音视频流。
- 可以在预览的小窗口提前渲染视频。
- `join` 方法的 `token` 参数可以使用[通配 Token](/zh-CN/realtime-media/rtc/build/security-and-auth/wildcard-token)，以加快加入频道的速度。

#### 2.2 进入频道 [#22-进入频道]

用户进入频道时，为减少等待主播视频首帧渲染出图的时间，你可以开启用户进入频道即下发主播媒体流的功能：在调用 `join` 加入频道时，将 `options` 参数中的 `autoSubscribe` 设为 `true`，表示自动订阅主播的媒体流。

```javascript
// 创建 client
const client = AgoraRTC.createClient({
  mode: "live",
  codec: "vp8",
  role: "host",
});
 
// client 加入频道，并且开启 预订阅
await client.join(APP_ID, CNAME, TOKEN, UID / null, {
  // highlight-start
  autoSubscribe: true,
  // highlight-end
});
```

:::warning[注意]
如果设置自动订阅主播的媒体流，声网后台会在用户加入频道时就开始下发媒体流，并开始计费。详见[计费说明](/zh-CN/realtime-media/rtc/reference/billing-strategy#基础服务)。
:::

下文对比开启下发媒体流功能前后，用户进入频道至渲染主播媒体流的步骤：

| **开启前** | **开启后** |
| --- | --- |
| [preload-javascript-html-0-1-0 details](#table-slot-preload-javascript-html-0-1-0) | [preload-javascript-html-0-1-1 details](#table-slot-preload-javascript-html-0-1-1) |

<a id="table-slot-preload-javascript-html-0-1-0"></a>

**preload-javascript-html-0-1-0 details**

1. 用户加入频道
2. 频道下发主播/媒体信息
3. 用户设置订阅频道内媒体流
4. 声网后台开始下发频道内媒体流
5. 用户等待声网后台下发媒体流完成，接收并本地渲染媒体流

<a id="table-slot-preload-javascript-html-0-1-1"></a>

**preload-javascript-html-0-1-1 details**

1. 用户加入频道
2. 声网后台立即下发频道内媒体流
3. 频道下发主播/媒体信息
 4. 用户设置订阅媒体流后，即可立刻接收并本地渲染媒体流

![首帧优化流程](https://web-cdn.agora.io/doc-cms/uploads/1727075418730-首帧优化.png)

当用户触碰频道入口完成有效点击后，进入频道，那么建议操作如下：

- 当用户完成有效点击时，App 界面应该从“频道列表页面”切换到“单个频道页面”，建议你增加页面切换动画。
- 音视频分别调用 [`IRemoteAudioTrack.play`](/zh-CN/api-reference/rtc/web/interfaces/iremoteaudiotrack#play) 和 [`IRemoteVideoTrack.play`](/zh-CN/api-reference/rtc/web/interfaces/iremotevideotrack) 方法，注意视频需要传入指定的 DOM 元素。

#### 2.3 不进入频道 [#23-不进入频道]

如果用户悬停频道入口后，移开鼠标，未完成有效点击，不进入频道，那么建议操作：调用 [`leave`](/zh-CN/api-reference/rtc/web/interfaces/iagorartcclient#leave) 离开频道。

## 注意事项 [#注意事项]

- [通配 Token](/zh-CN/realtime-media/rtc/build/security-and-auth/wildcard-token) 可以加快加入频道的速度，但是可能会引起“炸房”风险，请结合具体需求决定是否使用通配 Token。
- 预先加入上述频道会增加额外的费用，请在使用时注意。详见[基础服务](/zh-CN/realtime-media/rtc/reference/billing-strategy#基础服务)。

## 相关文档 [#相关文档]

当前秀场直播场景已实现秒开秒切功能，相关信息可参考[实现秒开秒切](/zh-CN/solutions/showroom/build/video-loader/integrate)。