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

news/2024/4/24 22:49:57/

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.ppmy.cn/news/48261.html

相关文章

Spring Security --- formLogin配置

目录 环境准备 配置自定义登录表单页面 配置登录成功的跳转页面方式 配置登录失败的跳转页面方式 前端表单参数获取 CustomWebSecurityConfigurerAdapter配置类代码示例 环境准备 创建springboot项目引入spring security框架引入thymeleaf模板引擎 配置自定义登录表单页面…

水平居中、垂直居中的几种方法

水平居中的方法: 若是针对inline, 内联块inline-block, 内联表inline-table, inline-flex元素及img,span,button等元素 父元素设置 text-align:center; 绝对定位;弹性布局;grid网格布局 不定宽块状元素 设置 margin:auto; 绝对定…

第二章:uniapp整合axios之真机测试两问题

第二章:uniapp整合axios之真机测试两问题 上一章节,笔者编写了uniapp整合axios并实现前后端跨域请求的方案,完成了这些基本配置后,在浏览器端的测试基本是可以完成了,但是当笔者将程序运行到手机时,却出现…

springboot mybatis-plus 对接 sqlserver 数据库 批处理的问题 批量更新添加数据 方案三

问题: 在对接 sqlserver数据库的时候 主子表 保存的时候 子表批量保存 使用的 mybatis-plus提供的 saveOrUpdateBatch saveBatch 这两个方法 但是 报错 报错内容为 : com.microsoft.sqlserver.jdbc.SQLServerException: 必须执行该语句才能获得结果。 框…

springboot web项目统一时区方案

背景 springboot项目国际化中,会遇到用户选择的时间和最终存到数据库的时间不一致,可能就是项目开发和部署时的时区没有处理好,导致时间转换出现了问题。 先了解时区都有哪些: 1.GMT:Greenwich Mean Time 格林威治…

Kubernetes Operator开发

案例一 Traefik Operator开发 1.kubebuilder 创建项目 2.Crontroller开发与部署 开发环境准备 kubebuilder 介绍 CRD的开发与部署 Crontroller开发与部署 Operator功能设计 借助operator完成 和企业内部注册中心打通 这里以Traefiketcd的模式为例进行演示说明 在这里etcd p…

1.2和1.3、GCC

1.2和1.3、GCC 1.2和1.3、GCC1.2.1、什么是GCC1.2.2、编程语言的发展1.2.3、GCC工作流程1.2.4、gcc和g的区别1.2.5、GCC常用参数选项实际操作①接下来进行预处理操作(test.c为需要预处理的源代码,test.i为要生成的目标代码)②汇编操作&#x…

多线程基础

1.多线程基础概念 多线程:让程序同时做多件事情 多线程作用:提高效率 并发:在同一时间,有多个指令在单个cpu上交替执行 并行:在同一时刻,有多个指令在多个cpu上同时执行 2.多线程的实现 (1)继承Thread类…

电脑卡顿反应慢怎么处理?电脑提速,4个方法!

案例:电脑卡顿反应慢怎么处理? 【快帮帮我!我的电脑现在越用越卡了,有时候光是打开一个文件都要卡好几分钟,我真的太难了,有什么可以加速电脑反应速度的好方法吗?万分感谢!】 随着…

es7.x集群部署-多台物理机部署-docker环境部署-docker-compose管理

es集群部署文档 部署es服务的三台服务器的ip和host分分别是: iphost_name192.168.1.2web02192.168.1.3storage02192.168.1.4Storage03 这个配置需要在服务器上编写对应的hosts文件,然后才可以使用host进行配置。 本次部署没有外挂配置文件&#xff0…

手把手教你 DVOL

分享本文在朋友圈的读者可获得本文数据和 Python 代码。留个言说已分享(不用截屏)我相信你,我会发给你百度盘下载链接。 本文长度为 6393 字,建议阅读 32 分钟 题图:SignalPlus Dashboard 0 引言 Deribit volatility (…

Qt音视频开发37-识别鼠标按下像素坐标

一、前言 在和视频交互过程中,用户一般需要在显示视频的通道上点击对应的区域,弹出对应的操作按钮,将当前点击的区域或者绘制的多边形区域坐标或者坐标点集合,发送出去,通知其他设备进行处理。比如识别到很多人脸,用户单击某个人脸后指定对该人脸进行详细的信息查询等;…

记录webpack安装

在安装完 yarn以后,yarn安装_阿巴资源站的博客-CSDN博客 然后开始安装webpack 看网上有人说npm install webpack-cli -g没成功,于是没试直接跳过坑 sudo npm install webpack -g --unsafe-permtrue --allow-root 然后提示: webpack -v On…

RabbitMQ:消息中间件

文章目录 概念管理界面简介4中常见交换器类型1.Direct交换器:2.Fanout交换器3.Topic交换器4.headers交换器 对象类型消息传递同步等待使用代码创建队列待续...... 概念 在微服务架构中项目之间项目A调用项目B 项目B调用项目C项目C调用项目D。。 用户必须等待项目之间内容依次的…

【闲聊杂谈】HTTPS原理详解

HTTPS和HTTP的区别 HTTP虽然使用极为广泛, 但是却存在不小的安全缺陷, 主要是其数据的明文传送和消息完整性检测的缺乏, 而这两点恰好是网络支付, 网络交易等新兴应用中安全方面最需要关注的。 关于 HTTP的明文数据传输, 攻击者最常用的攻击手法就是网络嗅探, 试图从传输过程…

亚马逊广告运营常见问答

同一个广告组中,建议投放多少个关键词呢? 同一广告组下我们建议投放的关键词至多不超过50个。 1.如关键词设置过少(且前期无法用数据佐证其精准引流效果时),有可能导致广告曝光量较低; 2.如关键词设置过多…

SAS学习第9章:卡方检验之适合性检验与独立性检验

卡方检验就是统计样本的实际观测值与理论推断值之间的偏离程度,实际观测值与理论推断值之间的偏离程度就决定卡方值的大小,如果卡方值越大,二者偏差程度越大;反之,二者偏差越小;若两个值完全相等时&#xf…

查询练习:按等级查询

建立一个 grade 表代表学生的成绩等级,并插入数据: CREATE TABLE grade (low INT(3),upp INT(3),grade char(1) );INSERT INTO grade VALUES (90, 100, A); INSERT INTO grade VALUES (80, 89, B); INSERT INTO grade VALUES (70, 79, C); INSERT INTO …

U-Boot 命令使用

进入 uboot 的命令行模式以后输入“help”或者“?”,然后按下回车即可查看当前 uboot 所 支持的命令,如图 所示: 我们输入“help(或?) 命令名”既可以查看命令的详细用法,以“bootz”这 个命令为例,我们输…

使用FFMPEG库将YUV编码为H264

准备 ffmpeg 4.4 p准备一段yuv420p的格式的视频原始数据 这里我们使用命令直接提取 ffmpeg -i .\beautlWorld.mp4 -pixel_format yuv420p -s 1280x720 yuv420p_1280x720.yuv 编码流程 大致可以分为以下几步: 1.初始化编码器并设置参数 2.初始化AVPacket和AVFr…