前端黑科技:美团网页首帧优化实践
前言 自JavaScript诞生以来,前端技术发展非常迅速。移动端白屏优化是前端界面体验的一个重要优化方向,Web 前端诞生了 SSR 、CSR、预渲染等技术。在美团支付的前端技术体系里,通过预渲染提升网页首帧优化,从而优化了白屏问题,提升用户体验,并形成了最佳实践。 在前端渲染领域,主要有以下几种方式可供选择: CSR 预渲染 SSR 同构 优点 不依赖数据FP 时间最快客户端用户体验好内存数据共享 不依赖数据FCP 时间比 CSR 快客户端用户体验好内存数据共享 SEO 友好首屏性能高,FMP 比 CSR 和预渲染快 SEO 友好首屏性能高,FMP 比 CSR 和预渲染快客户端用户体验好内存数据共享客户端与服务端代码公用,开发效率高 缺点 SEO 不友好FCP 、FMP 慢 SEO 不友好FMP 慢 客户端数据共享成本高模板维护成本高 Node 容易形成性能瓶颈 通过对比,同构方案集合 CSR 与 SSR 的优点,可以适用于大部分业务场景。但由于在同构的系统架构中,连接前后端的 Node 中间层处于核心链路,系统可用性的瓶颈就依赖于 Node ,一旦作为短板的 Node 挂了,整个...