去哪儿网前端性能优化与开发工具实践

"该资源为‘去哪儿网’的前端性能优化及开发工具介绍，主要涵盖性能优化策略和相关开发工具的使用。内容包括对机票双程搜索性能优化的过程，以及一个名为qzz的开发/部署工具的介绍。" 在前端性能优化方面，文档首先介绍了去哪儿网作为中国领先的在线旅行平台，其业务涉及机票、酒店等多个领域，随着业务的发展，性能优化成为了一个重要课题。针对机票双程搜索性能的问题，主要体现在以下几个方面： 1. 接口数据量过大：以北京到上海的查询为例，原始接口返回的数据量过大，经过gzip压缩后仍有783.7k，未压缩时高达11.8M。 2. 前端解析数据缓慢：数据解析耗时约2到3秒，导致页面卡顿。 3. 前端计算量大：前端需要处理所有数据以进行最低价排序和过滤项内容的显示。 4. 数据加载顺序不合理：基础信息接口需先调用，影响整体加载速度。 为解决这些问题，去哪儿网采取了以下优化策略： 1. 接口拆分：将原有接口拆分为摘要接口和详细信息接口，摘要接口提供初步信息，详细信息通过懒加载获取。 2. 数据加载调整：将基础信息接口与初始数据合并，优化数据处理流程。 3. 重构前端代码：将低价计算和过滤项统计移至后端处理，减轻前端负担。 这些优化措施显著提升了性能，接口大小显著降低，首屏加载和展示时间大幅缩短，性能提升达94.6%。优化过程中强调了性能优化应与业务需求紧密结合。 在开发工具方面，文档提到了一个名为qzz的工具，它是一个命令行工具，支持开发环境、测试环境和线上环境之间的切换，同时具备本地开发调试和集成发布的功能，能够适应多系统环境。qzzlocal、qzzdev和qzzprd分别代表本地开发、开发环境和生产环境的快捷方式，方便开发者进行不同环境的切换和调试。 这个资源提供了前端性能优化的具体案例和实用的开发工具，对于从事前端开发或希望提升网站性能的人员具有很高的参考价值。