02|如何使用流式传输减少等待时间
月影

你好,我是月影。
前一节课我们使用最简单的 HTTP 协议来处理请求响应,作为前端工程师的你,应该对这块内容并不陌生吧。
接下来呢,我们来了解一下对于初级前端工程师来说稍微复杂一点的内容,那就是通过流式(streaming)的传输方式来使用大模型 API。
为什么要使用流式传输
在具体实践之前,先来说说为什么要使用流式传输。
由于大模型通常是需要实时推理的,Web 应用调用大模型时,它的标准模式是浏览器提交数据,服务端完成推理,然后将结果以 JSON 数据格式通过标准的 HTTP 协议返回给前端,这个我们在上一小节里已经通过例子体会过。
但是这么做有一个问题,主要是推理所花费的时间和问题复杂度、以及生成的 token 数量有关。比如像第一节课里那样,只是简单问候一句,可能 Deepseek 推理所花费的时间很少,但是如果我们提出稍微复杂一点的要求,比如编写一本小说的章节目录,或者撰写一篇千字的作文,那么 AI 推理的时间会大大增加,这在具体应用中就带来一个显而易见的问题,那就是用户等待的时间。
而你应该已经发现,我们在使用线上大模型服务时,不管是哪一家大模型,通常前端的响应速度并没有太慢,这正是因为它们默认采用了流式(streaming)传输,不必等到整个推理完成再将内容返回,而是可以将逐个 token 实时返回给前端,这样就大大减少了响应时间。
公开
同步至部落
取消
完成
0/2000
笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结

1. 流式传输的优势是能够实时返回推理过程中生成的token,减少用户等待时间,提高响应速度。 2. 实现流式传输的关键步骤包括设置stream参数为false,使用POST请求调用API,并在浏览器端利用HTML5标准的ReadableStream API来处理数据,实现动态接收和处理流式数据。 3. 流式传输的处理逻辑涉及在浏览器端利用TextDecoder对二进制数据进行解码,循环读取数据并按行拆分,处理每一条以"data:"开头的数据,从中提取需要增量更新的内容,实现数据的流式传输和动态接收。 4. 通过示例学习流式传输,可以演示如何在Deepseek Platform下使用流式传输来减少用户等待时间,以及关键的代码实现部分。 5. 流式传输的实际应用范围适用于大多数文本模型,能够在模型推理过程中及时返回生成的token,提高前端工程师处理大模型API的效率。 6. 通过流式传输减少用户等待时间的方法是通过设置stream参数为true,实现AI以流式传输的方式输出内容,从而减少用户的等待时间。 7. 流式传输的实践意义在于处理复杂请求时能够显著减少用户等待时间,提升用户体验,适用于需要实时推理的大模型API。 8. 流式传输的实现机制通过对API调用机制和浏览器处理请求的逻辑进行详细解释,展示了流式传输的实现机制和原理。 9. 流式传输的应用范围适用于处理复杂请求、实时推理的场景,能够提高前端工程师处理大模型API的效率,改善用户体验。 10. Server-Sent Events (SSE) 是一种允许服务器主动推送实时更新给浏览器的技术,除了实时推送数据外,还可以支持自定义事件和内容的续传,适合长时间保持连接的应用场景。
仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《跟月影学前端智能体开发》,新⼈⾸单¥59
《跟月影学前端智能体开发》,新⼈⾸单¥59
立即购买
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
登录 后留言
精选留言
由作者筛选后的优质留言将会公开显示,欢迎踊跃留言。
收起评论