在一些容易被忽视但又非常重要的场景，可能会有许多严重影响性能却很容易解决的问题。

本文最早于 2017 年 12 月 5 日发表（原文链接），主要介绍了 Airbnb web 端访问量最大的页面之一——房源详情页的 react 性能优化过程，其中用到的方法、工具和经验心得。
作者： Joe Lencioni，Airbnb web 基础架构工程师
译者：Yvan Zhong，Airbnb 中国实习工程师
校对：Lawrence Lin，Airbnb 中国全栈工程师

我们使用 React Router 和 Hypernova 开发支持服务端渲染的单页面应用。第一个应用场景是airbnb.com 的核心预订流程。在今年年初（注：本文原作于 2017 年），我们完成了首页和房源搜索结果页面的迁移并取得了很好的效果。下一步计划是把房源详情页面加入到单页面应用中。

airbnb.com房源详情页面: https://www.airbnb.com/rooms/8357

这就是我们的房源详情页面。在整个搜索过程中，用户可能会多次访问该页面，查看不同的房源。这个页面是 airbnb.com 上访问量最大，最重要的页面之一，因此我们希望弄清楚所有影响性能的细节！

每个页面都不可避免地会有一些交互操作，如滚动、点击、输入。作为单页面应用迁移工作的一部分，我希望排查房源详情页面中所有由交互操作引起的性能问题。我们希望页面可以快速启动并保持流畅，让用户拥有更好的体验。

通过分析，修复和再次分析的过程，这个关键页面的交互性能得到了显著改善，可以给用户带来更加流畅的预定体验。在这篇文章中，您将了解到我用来分析这个页面的技术以及优化页面的工具，并能从火焰图中看到改变带来的影响。

方法

对页面的分析是通过Chrome的性能工具记录的：

• 打开隐身窗口（这样我的浏览器插件不会干扰到分析）
• 在本地开发环境中访问要分析的页面，并在查询字段中使用 ?react_perf（以启用 React 的User Timing annotations)，同时禁用一些会减慢页面速度的 dev-only 功能，比如 axe-core）
• 单击录制按钮⚫️
• 与页面交互（例如滚动，单击，输入）
• 再次单击录制按钮

奈斯