【第3559期】深入分析 await fetch() 性能问题及优化方法

主要观点总结

文章探讨了JavaScript中await fetch()可能导致应用变慢的原因，并提供了相应的解决方案。文章涉及的性能问题包括冷启动TCP连接、DNS和TLS的性能问题、response.json()阻塞事件循环、优化响应体大小、在循环中使用await的性能问题，以及使用undici.request提高请求速度等。同时，文章还提到了在不同环境下fetch()优化的适用环境说明，以及其他优化建议。

关键观点总结

关键观点1: 冷启动TCP连接问题

每次调用fetch()都会创建一个新的套接字连接，包括DNS解析、TCP握手和TLS握手等步骤，这可能导致延迟。解决方案是使用Agent来管理Keep-Alive连接，以及使用undici来复用已有的连接，提高请求效率。

关键观点2: DNS和TLS的性能问题

即使使用了Keep-Alive，第一次访问一个新域名时仍然会慢，原因是DNS查询和TLS握手。解决方案是缓存DNS查询结果，避免重复解析，以及增加maxSockets，支持同时处理多个域名。

关键观点3: response.json()阻塞事件循环问题

当服务器返回大量JSON数据时，response.json()会阻塞事件循环，占满100%的CPU资源。解决方案是使用流式解析，在数据流到达时就处理，避免一次性加载整个大文件到内存中。

关键观点4: 优化响应体大小

如果网络速度没问题，但加载依然缓慢，通常是因为数据格式效率底下，或者没有启用压缩。解决方案是前端启用压缩请求，后端启用压缩算法如Brotli。

关键观点5: 在循环中使用await的性能问题

在循环中执行多个异步任务时，如果使用await，它们会按顺序一个一个执行，即使它们本可以并行完成。解决方案是限制并发数量，控制同时进行的请求数量，防止后台被瞬间请求压垮。

关键观点6: 使用undici.request提高请求速度

为了获得更好的性能，建议使用undici的request方法来替代内建的fetch，因为它更快、开销更小。

关键观点7: 适用环境说明

大多数优化策略主要适用于Node.js环境，在浏览器端由于运行环境受限，应关注数据优化点如CORS预检减少、压缩响应内容、控制并发请求等。

免责声明