SSR在天猫优品大促会场的探索实践

news2025/4/7 10:08:27

99d700d25fdf334b2087f4dbfc3b7a78.gif

BBC 发现其网站加载时间每增加一秒,用户便会流失 10%。为提高页面的秒开率,我们不断探索着优化策略,仅仅在浏览器领域下的优化已经满足不了我们的极致要求,开始往服务端方向不断探索。本文将讨论业务接入SSR的几个问题:

  1. SSR究竟适合哪些业务?

  2. 接入SSR后,性能带来了哪些提升?

  3. 业务接入SSR有哪些成本?

70e1f3e4e0adcd278d3c5f6c7310e97f.png

SSR适合哪些业务?

SSR是将页面渲染的过程放在了服务端去执行,对于性能较低的低端机或者网络情况不佳的时候,不需要等待js下载执行就可以直接渲染页面。再加上通常我们会在node层去做首屏接口的聚合,对于用户来说,是可以更快得看到完整渲染的首页,没有抖动的渲染过程,有着更好的用户体验。



5b0fe49deb3b6357a2bb0f7ef0e50175.png

总的来说,SSR的优劣势是:

优势

  1. 有利于首屏渲染

  2. 有利于SEO

  3. 对于中低端机型,有较大的性能提升

劣势:

  1. 页面白屏时间会较长,渲染完成到真正可交互还需要一段时间

  2. 服务端压力较大,会大量占用服务端cpu资源

  3. 开发要求高,学习成本相对较高

对于以上的优劣势,再结合本次优化的页面具有以下几个特点,决定采用SSR的渲染方案进行优化:

多渠道投放,分享场景多,引流新用户:业务方会和各种渠道合作,将页面外投来获客。作为需要快速留住用户的落地页,对首屏渲染性能会有着较高的要求。

中低端设备占比高:中低端用户占比 60-70%。低端机主要的性能瓶颈在于代码执行和渲染时间长。



dfa6a5bd9f9cc30e80665aed1935a1a4.png

结果对比

左csr,右ssr;浏览器访问,高速3G网络下;

jsTracker  SFSP (2022-10-28 00:00:00 —— 2022-11-02 00:00:00)
渲染方式低端机中端机高端机
CSR1648.02ms 1543.64ms1257.86ms(-211ms)
SSR1545.39ms(-103ms)1531.11ms 1468.47ms

用户平均数据

TMQ首屏时间
渲染方式低端机( vivo vivo Y67  )高端机(Realme X50)
CSR2510 ms1640ms
SSR1420 ms(-1090ms,-43%)880ms(-760ms,-46%)

单个机型数据

从用户数据对比上来看,低端机性能有所提升,但是高端机反而有降低。这个是符合预期的,因为对于高端机来说,特别是IOS,端侧的性能反而是优于服务器的,SSR的优势反而得不到发挥。但是在天猫优品大促的场景下,用户低端机的平均数据并没有得到很大提升,我们分析有如下几个原因:

  1. 我们的页面是一个新页面,目前比较简单,js大小只有97.1 kB,没能体现出SSR请求资源方面的优越性

  2. 在CSR和SSR的场景下,我们都使用了首屏的聚合接口。唯一的差别就是渲染方式的差别,在目前手机性能普遍提升的大环境下,就导致数据差异并不大。



so,从这次实践中,可以得出SSR在一些资源较大,较复杂,首屏接口较多的页面,能发挥出更大的优势。

从tmq的单个机型的性能对比中,我们还是可喜的发现数据有不错的提升。so,在之后,我们可以针对某些低性能机型,进行相应的SSR优化。

9d851e7b14e76ebf61360170aef9e708.png

SSR选型

ICE3.0和RAX的SSR方案对比:

方案

工程化

SSR能力

优势

劣势

Rax

1、支持一体化,在一个工程中完成页面逻辑和渲染服务的维护,开发、调试、发布更加简单

2、前后端同构,同一份代码既可以进行 CSR 渲染,也可以进行 SSR 渲染

2、低运维成本,无需维护独立 Node 应用,部署即获得 SSR 页面

可降级/自动降级/个性化/自定义日志

稳定、建设时间较久

rax体系难以应用到一些最新react社区能力

ICE 3.0

1、react体系,能力更丰富

2、提供流式渲染能力

现有的业务组件都是rax体系,需要兼容和踩坑

因为项目对时间和稳定性都有比较高的要求,所以最后我们还是选择了Rax体系。在稳定性的保障上,Serverless 平台提供了基础的灰度、回滚、监控的能力,Rax提供了自动降级能力(当SSR链路出错时,会自动降级到CSR)。

aabb6a879cb9b1ad9731bc645fd5281f.png



目前,我们上线以来,通过监控观测,SSR的降级率保持在4%以下,服务还是很稳定的。

c5f69e193f5785ec6f1f67568b263175.png

5ea9a887e7f08d3c4888f1ac67770e1e.jpeg

开发成本

会有很多同学关心,如果将原有的rax应用直接切换到SSR一体化应用中来,成本会有多大?

在SSR的工程中,和CSR工程还是比较类似的,增加了apis目录用于承载渲染函数,还有一些FaaS工程的基本配置。

  1. pages 目录:和普通 CSR 工程一样,承载着页面的渲染逻辑,开发模式和 CSR 应用一样,只需保持代码同时可在 Node 环境下运行即可。

  2. apis 目录:是面向 FaaS 函数的,在 render 目录下,提供了 SSR 渲染函数的入口,其主要工作是调用 Pages 的产物进行渲染。通常,业务开发需要介入的部分是,进行业务数据接口的调用,来准备用于渲染的业务数据。

.
├── build.json
├── f.yml                                    # 函数平台配置
├── jest.config.js
├── midway.config.ts
├── package.json
├── src
│   ├── apis                                 # 函数源码
│   │   ├── configuration.ts
│   │   ├── lambda                           # 接口
│   │   │   ├── index.test.ts
│   │   │   └── index.ts
│   │   ├── render                           # 渲染函数
│   │   │   └── index                                    
│   │   │       └── index.ts
│   │   └── typings
│   │       └── context.d.ts
│   ├── app.json
│   ├── app.ts
│   ├── components/
│   ├── document/
│   ├── pages/                                          
│   └── typings.d.ts
└── tsconfig.json

从CSR到SSR的主要工作就是在于聚合首屏接口,改变一下之前获取数据的方式,同时兼容一下SSR和CSR两种渲染方式,保证稳定性。

在前端的工程中,难免会有方法或者库会使用到浏览器环境才有的变量,如 location、navigator等。为保证 SSR 和 CSR 编码的一致性,需要提供在服务器端模拟浏览器环境的能力。

还需注意的是Server 端的渲染过程是一个同步的操作,其本质是将 JSX 组件渲染为 HTML 字符串。因此,setState、hooks 这类异步更新状态的方法以及组件的 生命周期 方法,在 Server 端不会被执行。

在开发过程中,应尽量避免将用于渲染初始页面的数据通过异步的方式来更新。

eedd4f7b1d2f9fb33ee0bab42b755d73.jpeg



bcc8d2701f5a94a44c298d008f3edfb7.jpeg

总结思考

  SSR并不是适合所有业务

要结合业务场景和项目状况来综合考虑性能优化的手段,SSR并不是一个万能神方,还是需要对症下药。



  更好的SSR

  1. 选择性:结合数据,我们发现中低端机更适合SSR,根据机型来选择不同的渲染方式会更科学,并且也会减少服务器压力。

  2. 流式渲染:当服务端计算时间过长或者网络环境不好时,用户会看到比较长的白屏时间;可以通过 ER 先返回一段 HTML 流给用户,让用户可见骨架屏,减少白屏时间。

  3. 静态 SSR 、动态更新:在页面没有个性化要求的时候,可以走静态化SSR,将html缓存到cdn上,来达到性能更优的目标。在个性化要求较高的时候,可以使用静态SSR和动态更新的方案,来优化静态链路。

bc489c4f5d1651e1db77c945213567d5.jpeg

62f08a8d63d6970d97a83fe05e2d3014.jpeg

团队介绍

我们是大淘宝技术创新业务前端团队,目前负责消费电子、家装家居、汽车的线上线下零售新模式的探索,面向淘内淘外,提供商家、门店、消费者最佳用户体验。团队沉淀了一定的XR、3D、2D渲染引擎创新体验技术,同时面向全栈领域团队探索了 Serverless 云端研发模式,在消费者前台,通过端智能等手段提升消费者效率,同样面向工程领域,在跨端、前端工程化、中后台微前端都有一些沉淀。如果你是一位充满想象的终端极客,欢迎你的加入,通过自己的技术想法去改变创新业务的终端表达。目前急需校招生小伙伴,简历请投递至: murong.zr@alibaba-inc.com。

¤ 拓展阅读 ¤

3DXR技术 | 终端技术 | 音视频技术

服务端技术 | 技术质量 | 数据算法

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/434101.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

《3-链表》

链表 引言: 存储数组需要内存空间连续,当我们需要申请一个很大的数组时,系统不一定存在这么大的连续内存空间。 而链表则更加灵活,不需要内存是连续的,只要剩余内存空间大小够用即可 1.定义 : 「链表 Lin…

设计模式-结构型模式之装饰模式

3. 装饰模式3.1. 模式动机一般有两种方式可以实现给一个类或对象增加行为:继承机制使用继承机制是给现有类添加功能的一种有效途径,通过继承一个现有类可以使得子类在拥有自身方法的同时还拥有父类的方法。但是这种方法是静态的,用户不能控制…

CSS基础——盒子模型

目录 简介 盒子模型组成 内容区 内边距 边框 border-width border-color border-style border 外边距 负值 auto 简写属性 垂直外边距的重叠 浏览器默认设置 内联元素的盒子 简介 在网页中,一切都是可以看作为“盒子”。 在css处理网页的时候&…

音游判定原理详解——从触摸屏幕到判定音符【Project SEKAI攻略】

“音乐游戏”一般简称为“音游”,玩家需要配合音乐的节奏来进行一定的动作。 《Project SEKAI》作为一个“移动端音游”,绝大多数玩家会使用手机、平板电脑等移动设备的触摸屏进行游玩,也有极少数的玩家不按常理出牌,使用手台、键…

英国站亚马逊纽扣电池标准

英国标准协会(BSI)于2021年4月30日发布了纽扣(非锂)和纽扣(锂)电池的国家标准PAS 7055:2021。 该标准是根据2005年通用产品安全法规的规定制定的(GPSR) 并关注投放到英国市场的产品的安全性。 PAS 7055:202…

数据库实验 | 第1关:建立和调用存储过程(不带输出参数的存储过程)

任务描述 本关任务: 该实验是针对数据表jdxx,该数据表有四个字段,分别是省份(sf)、城市(cs)、区县(qxmc)、街道(name)。 例如,查询天心区(qxmc)的所有字段的值结果如图所示 任务要求 建立存储过程 dqxx(in city varchar(10),i…

6.S081——虚拟内存部分——xv6源码完全解析系列(4)

0.briefly speaking 点击跳转到上一篇博客 好,现在进入下一个话题,就是物理内存分配器(kernel/kalloc.c)。在简单介绍完内核态的物理内存分配器之后,之后简单带过一下两个头文件riscv.h和memorylayout.h这两个头文件,因为它们都…

.Net Core从零学习搭建权限管理系统 - 课程简介

课程简介目录 🚀前言一、课程背景二、课程目的三、系统功能四、系统技术架构五、课程特点六、课程适合人员七、课程规划的章节八、最后 🚀前言 本文是《.Net Core从零学习搭建权限管理系统》教程专栏的导航站(点击链接,跳转到专栏…

(1条消息) CodeForces 1278 B.A and B(Math)

题目如下: 题解 or 思路 首先我们需要知道: 对于: s u m 1 2 3 4 . . . n sum 1 2 3 4 ... n sum1234...n s u m a b , ( a ∈ [ 0 , s u m ] ) sum a b, (a \in [0, sum]) sumab,(a∈[0,sum]) 这个在此就不再证明 于是我…

vcpkg添加自定义包安装

文章目录 前言新建overlay-ports编写baseline.json编写openssl.json编写配置修改vcpkg.json修改portfile.cmake 挂载安装后话 前言 vcpkg收集了很多C的包,可总是会有没收录进去的,以openssl 3.0.0版本举例,这个版本vcpkg没有收录进去&#x…

String的不可变特性

1 问题 如何理解“String是不可变的,但是可以变”? 2 方法 (1)String的不可变特性体现在内容和长度 首先在idea中点开查看String这个类是如何定义的 可以看到这样一行代码:private final char value[]; 正是因为这个数…

基于Simulink单载波链路射频波束成形仿真

一、前言 此示例展示了如何在 Simulink中对 IEEE 802.11ad单载波链路进行建模,其中包括具有射频波束成形功能的相控阵天线。 二、介绍 此模型模拟具有射频波束成形的 802.11ad 单载波 (SC)链路。多个数据包通过自由空间传输,然后射…

图片转为pdf怎么弄?简单几个步骤轻松转换

在日常工作和生活中,我们常常需要将图片转换为PDF格式的文档,以满足资料存档和共享的需要。虽然转换过程看起来有些麻烦,但只要选择正确的工具和方法,就能轻松完成。 下面,小编将为大家介绍两种常见的将图片转换为PDF…

生成对抗网络(GAN) 理论概念、改进模型与练习题

生成对抗网络(GAN) 生成对抗网络的基本概念模型提出模型类型模型功能模型目标模型结构模型训练模型实质模型缺点模型生成器的构造模型损失函数 生成对抗网络的改进模型DCGANWGANWGAN-GPACGAN 生成对抗网络的题型 生成对抗网络的基本概念 模型提出 2014…

Grad-CAM的详细介绍和Pytorch代码实现

Grad-CAM (Gradient-weighted Class Activation Mapping) 是一种可视化深度神经网络中哪些部分对于预测结果贡献最大的技术。它能够定位到特定的图像区域,从而使得神经网络的决策过程更加可解释和可视化。 Grad-CAM 的基本思想是,在神经网络中&#xff…

体验编写Vue框架项目实例的详细步骤2(包括git仓库使用,element-ui的使用和eslint校验关闭)

1.在src目录下新建pages文件夹用来放页面。新建文件Index.vue,首页 在Index.vue中搭建vue基本结构。 在element官网Element - The worlds most popular Vue UI framework中选择想要的组件。 我选择是Container布局容器。选择好样式点击显示代码复制相关代码至Ind…

【安全运维】小微企业的安全运维工具用哪款好?

即使是小微企业,也同样面临着安全运维的困扰,同样面临着数据泄露、资产难管理的问题,因此选择一款合适的安全运维工具是非常必要的。那你知道小微企业的安全运维工具用哪款好? 小微企业的安全运维工具用哪款好? 【回…

全景视角下的世界探索——三维全景地图

引言:随着数字技术和虚拟现实技术的发展,三维全景地图已成为一种新型地图展示方式,深受人们的关注和喜爱。三维全景地图以其真实逼真、互动性强、展示效果好等特点,正在越来越多的领域得到应用。 三维全景地图的特点 1.真实逼真 …

Elasticsearch(黑马)

初识elasticsearch ​​. 安装elasticsearch 1.部署单点es 1.1.创建网络 因为我们还需要部署kibana容器,因此需要让es和kibana容器互联。这里先创建一个网络: docker network create es-net 1.2.加载镜像 这里我们采用elasticsearch的7.12.1版本的…

【云原生概念和技术】1.2 云原生技术概括(下)

如果想了解或者学习云原生的友友们,欢迎订阅哦~🤗,目前一周三更,努力码字中🧑‍💻…目前第一章是一些介绍和概念性的知识,可以先在脑海里有一个知识的轮廓,从第二章开始就…