教年轻 AIoT 创业者如何从 0 到 1 实现AIoT 创业项目 了解详情
写点什么

Airbnb 引入 HTTP Streaming,网页性能升级

作者:Rafal Gancarz

  • 2023-07-19
    北京
  • 本文字数:1305 字

    阅读完需:约 4 分钟

Airbnb引入HTTP Streaming,网页性能升级

Airbnb 通过引入HTTP Streaming来提升网站的页面加载性能。他们将测试的每个页面(包括主页)的首次内容绘制(First Contentful Paint,FCP)时间降低了大约 100 毫秒。他们还最小化了后端慢查询对加载时间的影响。


Airbnb 一直在尝试进行可能的改进,以便尽可能快地向网站用户呈现内容。他们发现,只在完全渲染后才发送页面主体并不能提供最佳的用户体验,特别是当页面主体内容依赖后端查询时。此外,网页通常还需要许多额外的资源,如 CSS 文件和外部 JavaScript 文件,浏览器需要下载这些文件,以便正确地向用户显示内容。这些依赖关系经常导致资源请求发生级联,这可以在网络序列视图中看出来,比如 Chrome 的Waterfall



图片来源:https://medium.com/airbnb-engineering/improving-performance-with-http-streaming-ba9e72c66408


一种允许浏览器更早下载外部资源的常见做法是将所有引用它们的标记放在 HTML 页面头部的<head>标签中。浏览器在读取<head>标签时会下载外部资源。通常,这只会在整个 HTML 页面被传输后才会发生,如果页面内容依赖了缓慢的后端查询,则可能需要一些时间。


尽早冲刷(Early Flush)是一种利用 HTTP Streaming 技术让浏览器可以更早地加载外部资源的技术。它需要将 HTML 页面分成两个部分,并使用分块传输编码分别发送它们。在接收并解析了只包含 HTML 页面开头部分的初始块后,浏览器就可以开始下载外部资源。


尽管尽早冲刷并不是什么新技术,但也并没有被广泛使用,因为它需要渲染和发送不完整的 HTML 页面(有些标签没有关闭)。Airbnb 使用基于Express的NodeJS服务器来渲染React开发的网页,并将之前用于渲染整个 HTML 页面的单个 React 组件重新设计拆分为三个单独的组件。


尽早冲刷技术有助于优化 CSS 和 JavaScript 资源的 Waterfall 指标,但并不会降低渲染页面主体的延迟。使用现代 Web 应用程序框架可以在客户端或服务器端渲染内容(服务器端渲染)并分别获取数据,但这需要额外的网络请求。


Airbnb 的 Streaming 处理方法经过了改进,他们引入了第三个块(他们称之为延迟数据块),其中包含了页面所需的数据。他们使用MutationObserver来检测延迟的数据何时被加载,并将数据注入到应用程序网络数据存储中,从而避免了额外的网络请求。



服务器端渲染(SSR)和客户端数据获取并行执行


图片来源:https://medium.com/airbnb-engineering/improving-performance-with-http-streaming-ba9e72c66408


Airbnb 必须解决一些问题才能在他们的技术栈中启用 HTTP Streaming。他们关闭了NGINX中的响应缓冲haproxy负载均衡器中的Nagle算法,允许块响应数据可以不经修改地到达浏览器。


Airbnb 软件工程师Victor Lin总结了他们在这方面的经验,以及一个不断增长的支持 HTTP Streaming 的生态系统:


虽然这个过程充满了挑战,但我们发现,调整现有的 React 应用程序来支持 Streaming 是非常可行和健壮的,尽管最初并不是为了它而设计的。我们也很高兴看到更广泛的前端生态系统朝着优先化 Streaming 的方向发展——从GraphQL的@defer和@streamNext.js的Streaming SSR


原文链接

https://www.infoq.com/news/2023/06/airbnb-web-http-streaming/


相关阅读:

AirBnb开源动画引擎Lottie:采用Core Animation提高性能

Airbnb的统一支付数据读取流程

活动推荐:

2023年9月3-5日,「QCon全球软件开发大会·北京站」 将在北京•富力万丽酒店举办。此次大会以「启航·AIGC软件工程变革」为主题,策划了大前端融合提效、大模型应用落地、面向 AI 的存储、AIGC 浪潮下的研发效能提升、LLMOps、异构算力、微服务架构治理、业务安全技术、构建未来软件的编程语言、FinOps 等近30个精彩专题。咨询购票可联系票务经理 18514549229(微信同手机号)。

2023-07-19 08:002282

评论

发布
暂无评论
发现更多内容

图解Redis:一套方案轻松搞定数据库与缓存数据不一致问题(1)

Java 程序员 后端

吹爆!阿里高工甩出内部强推Redis全栈笔记,Github已获赞78

Java 程序员 后端

上线直接霸榜!阿里内网流传P8大牛的“满级”分布式架构笔记

Java 编程 程序员 架构

同程旅行基于 RocketMQ 高可用架构实践,mysql破解版百度云

Java 程序员 后端

听我讲完redo log、binlog原理,面试官老脸一红,rabbitmq集群同步原理

Java 程序员 后端

四年的开发经验只去面试了蚂蚁金服,无忧一次过,自学linux视频教程推荐

Java 程序员 后端

团队管理(二)-敏捷开发最佳团队协作管理平台,mysql入门很简单视频

Java 程序员 后端

史上最全Spring教程,从零开始带你深入♂学习(二(1),深入实践springbootpdf百度云

Java 程序员 后端

哟,我发现 Dubbo 这波优化好像不够彻底啊?,深入java虚拟机第四版百度网盘

Java 程序员 后端

国内顶级大牛整理:分布式消息中间件实践笔记+分布式核心原理解析

Java 程序员 后端

吊打面试官!Java基础(面向对象,java入门自学书籍推荐

Java 程序员 后端

史上最全Spring教程,从零开始带你深入♂学习(二,java快速排序原理

Java 程序员 后端

同事临走时,给了我这份多线程and高并发(面试题,小米java面试几轮

Java 程序员 后端

同事问我MySQL怎么递归查询,我懵逼了,java面试简历百度云

Java 程序员 后端

嘘,助你一臂之力,快来瞧瞧这份-Spring-面试小抄,百度语音识别接口java

Java 程序员 后端

史上最全SpringBoot教程,从零开始带你深入♂学习(十五

Java 后端

哇塞!这是我见过的最牛逼的性能监控系统,集强大功能于一身

Java 程序员 后端

太为难我了,阿里面试了7轮(5年经验,拿下P7岗offer)

Java 程序员 面试 后端

社招三面阿里“落榜”,幸获内推名额,4面揽下美团offer

Java 架构 面试 后端

听音乐不过瘾?自制一个音乐播放器!,java程序设计基础知识点第七章

Java 程序员 后端

四面美团开发岗,成功斩获offer,这份面经总结终结篇看完就是血赚

Java 程序员 后端

史上最全SpringBoot教程,从零开始带你深入♂学习(九,大厂Java面试真题精选

Java 程序员 后端

五面阿里、三面美团、四面字节跳动,最终拿offer入职字节!

程序员 数据结构 面试 算法

听说Lombok的@Builder不好使?快来试试这个,rocketmq原理面试题

Java 程序员 后端

和程序员谈恋爱的7种体验,linux多线程面试题

Java 程序员 后端

图解Redis数据结构篇之压缩列表,java注解原理解析

Java 程序员 后端

吃透阿里大佬整理的Java面试要点手册,成功五面进阿里(二本学历

Java 程序员 后端

同样是程序员,本科学历凭什么就比专科学历更吃香?,mybatis常见面试题

Java 程序员 后端

三面阿里被挂,竟获内推名额,历经5面拿下口碑offer(Java后台)

Java 编程 程序员 架构 面试

团灭LeetCode!Alibaba技术官甩出的大师级算法宝典真的太香了!

Java 程序员 后端

同事问我MySQL怎么递归查询,我懵逼了(1),阿里java技术专家评级

Java 程序员 后端

  • 扫码添加小助手
    领取最新资料包
Airbnb引入HTTP Streaming,网页性能升级_跨端开发_InfoQ精选文章