首页 > 其他分享 >支付宝云开发 H5 页面渲染提升优化实践

支付宝云开发 H5 页面渲染提升优化实践

时间:2023-12-11 14:32:08浏览次数:36  
标签:支付宝 缓存 渲染 SSR 开发 H5 页面

支付宝云开发产品是一款蚂蚁集团独立自研的 Serverless 小程序一站式开发平台。蚂蚁内部 FaaS 产品有多年的研发、实践积累,并在内部众多业务线大规模应用,基于蚂蚁 FaaS 产品蚂蚁团队打造了全新的支付宝云开发产品。

云开发产品具备极速弹性能力、高性能、高稳定性,在满足业务场景的同时能够节省更多成本。

支付宝云开发 H5 页面渲染提升优化实践_H5

云开发产品与支付宝小程序生态能够更好的集成,未来更多的蚂蚁核心科技能力都会通过云开发产品对外开放。

在与客户的沟通中,我们了解到有些客户对于 FaaS 在处理大流量、大规模场景下应用有些顾虑,为此介绍此案例在高并发和大规模工作负载下的实际应用。


01:业务场景

支付宝内有许多在线 H5 页面,例如花呗、借呗、保险、双十一/双十二大促、红包码、五福等,这些页面的打开速度对于支付宝整体的产品体验和业务转化率有着极大影响。因此,提升支付宝内在线 H5 页面的首屏打开速度,对于基础平台和业务而言,都至关重要。


02:业务痛点和诉求

业界出现流式渲染方案,可以极好的解决中低端机型 CPU 资源有限的问题,极大的提升用户体验,尤其是在低端手机场景下,差距非常明显。

因此,我们迫切需要采取一些技术手段,拉齐低端手机的性能,提升H5 页面的首屏打开速度和用户体验,达到行业领先水平。


03:技术选型


为什么选择支付宝云开发作为 H5 计算能力?
  • Serverless:免运维是至关重要的一环,具备这项能力后可推广给所有前端开发者。
  • 性能:云开发具有极强的冷启动性能,100ms 内,扩容能力强,进一步增强 Serverless 能力。

为什么选择 SSR 作为渲染能力?
  • CSR [1] 存在一个无法解决问题,基本链路是 请求 HTML -> 请求 JS -> 请求数据 -> 渲染数据,至少需要 3 个请求才能将内容展示,而 SSR [2] 仅需一个请求即可展示内容,天然比 CSR 快。
  • 拉齐低端机性能,服务端执行过程会比低端机更快。

过去尝试过多次 SSR 没做成,为什么现在又提?
  • 过去没有真正的 Serverless 能力
  • 2022-06-14 发布的 react 18.2 提供了流式响应的能力,对比以往的 SSR 能力,首屏返回更快


为什么选择 RSC [3] 作为渲染能力的增强?
  • 过去没有真正的 Serverless 能力
  • SSR 存在一个众所周知的问题,在千人千面场景下,SSR 的内容无法缓存,因此我们将 SSR 仅用于可缓存部分,最差情况为纯骨架屏。
  • 无法做 CDN 缓存:我们的 SSR 链路为 CDN -> 云开发,存在两次公网调用、一次函数启动、一次函数执行,存在无法避免的启动延迟问题,大约在 300ms 以上。(FCP 做到了 500ms 没法继续优化了)
  • 无法做夜鹰 [5] 缓存:无法利用端上缓存,html 网络下载命中 CDN 缓存的情况下,需要 170+ms,而如果直接走夜鹰缓存,html 的加载为 ms 级(chrome 打开一个本地文件仅需要 3ms)。
  • 目前的单页应用存在一个通用的 JS bundler 体积问题,体积越大前端加载的耗时将会越长,并且这是缓存也无法解决的问题。RSC 技术将组件渲染都放在了服务端,可以显著减少客户端的 bundler 大小,并且 smallfish [4] 完全可以建设一个通用的基础 runtime,使之在各个应用之间可以复用。


04:技术方案

  • 通过云开发函数作为后端服务解决 SSR 的问题
  • 通过 stream 解决首屏打开慢的问题
  • 支付宝云开发产品通过 grpc stream 转协议支持用户接入层和函数开发层的开放协议标准

支付宝云开发 H5 页面渲染提升优化实践_云开发_02

05:实际效果

通过支付宝云开发技术优化,响应时间性能提升了 100% 。

支付宝云开发 H5 页面渲染提升优化实践_支付宝云开发_03

视屏录制于购入价格 160 的低端 Android 机型,首屏打开时间:

  • SSR:3 秒
  • CSR:6 秒

SSR 使得我们不需要有太多的优化投入就能收获极好的性能收益,成本由投入人力变成了投入 Serverless 计算资源。


06:未来规划

未来支付宝将借助支付宝云开发产品,持续提升支付宝 H5 页面的低端机性能和首屏打开体验,不断探索新的技术方案,比如实时的低延时 SSR 方案,开箱即用的 React Server Component 方案等,为用户提供更加便捷、高效的开发服务。同时支付宝云开发产品也会继续探索更低成本、更高性能、更安全可信的计算模式,提供极致编程体验。

了解更多「支付宝云开发」能力,可点击前往 >> 支付宝 · 云开发


[1] CSR:Client Side Render,客户端渲染技术。

[2] SSR:Server Side Render,服务端渲染技术,解决客户端渲染性能差问题。

[3] RSC:React Server Component,服务端组件,解决客户端 JS 体积大执行效率低问题。

[4] Smallfish:蚂蚁 H5 研发框架,可以研发应用、组件。

[5] 夜鹰(CCDN):蚂蚁容器 CDN 方案,具有端上缓存能力。


标签:支付宝,缓存,渲染,SSR,开发,H5,页面
From: https://blog.51cto.com/u_16283807/8773079

相关文章

  • js获取当前页面域名判断跳转网址输出不同内容
    js代码可以实现一些html语言无法实现的功能,比如通过js代码获取当前访问的域名。通过js代码判断当前访问域名可以进行跳转等功能。js获取当前页面域名判断跳转网址代码:<scripttype="text/javascript"> host=window.location.host;if(host=="www.adminwl.com") { window.loca......
  • ubuntu-购买云服务器修改为root权限并安装宝塔上线官网静态页面
    1、首先在购买服务器时会让你填写用户名和密码,需要记住,然后登录默认是 在设置密码时默认登录名为ubuntu不可选 2、使用vim /etc/ssh/sshd_config修改下面的参数:PermitRootLogin yes保存退出,重启ssh服务(systemctl restart sshd)。然后在控制台重置密码,选择自定义用户,填......
  • 【UniApp】-uni-app-OptionAPI应用生命周期和页面生命周期
    前言好,经过上个章节的介绍完毕之后,了解了一下uni-app-修改组件主题和样式那么了解完了uni-app-修改组件主题和样式之后,这篇文章来给大家介绍一下uni-app-OptionAPI应用生命周期和页面生命周期首先不管三七二十一,先来新建一个项目搭建演示环境创建一个全新的项目:然后在......
  • Vite多页面打包教程:一步步实现多页面应用
    前言Vite是一个快速的现代化前端构建工具,它提供了快速的开发体验和高效的打包能力。在本教程中,我们将学习如何使用Vite实现多页面打包,让你的应用能够拥有多个独立的页面。步骤1:创建页面文件夹首先,在你的项目根目录下创建一个名为pages的文件夹。这个文件夹将用于存放每个页面的......
  • Django - 在后台上传文章封面图 - 并在前端页面展示
    需要用到 models.ImageField(),它继承自 models.FileField(), 用ImageField的时候需要安装pillowpipinstallpillow-ihttps://pypi.douban.com/simple/ 首先,进行媒体文件配置:settings中配置:#真正存储图片的文件夹MEDIA_ROOT=os.path.join(BASE_DIR,"media")#......
  • odoo17.0 微信支付 支付宝 顺丰速递 圆通速递
    随着odoo17.0的发布,新代码的架构变动,导致之前的一些模块已经不能使用,因此,我们集中把常用的这几个模块率先进行了升级。本次发布的新模块有:微信支付支付宝支付顺丰速递圆通速递微信支付和支付宝支付我们在安装了在线商城模块之后,在设置-支付提供商中就可以看到微信支付/支......
  • 红米K70E支付宝无指纹支付选项的解决方法
    红米K70E这台手机,支付宝里无指纹支付选项,百度了一下,也没结果。自己摸索了下,终于折腾出了指纹支付。 解决方法:在手机-设置-指纹、面部与密码-指纹解锁-指纹支付-支付宝-更新证书。杀掉支付宝APP,重进支付宝。  OK ......
  • 使用FreeMacker生成静态页面
             我们在生成静态页面时需要先new一个configuration对象,并将Freemacker的版本给它,如果我们的模板是文件则我们需要获得他的路径,以及使用DirectoryForTemplateLoading驱动,如果是字符串,则使用StringTemplateLoader驱动,通常我们是用的字符串驱动,之后我们将模板驱动放......
  • 在winform中使用blazor hybrid构建页面
    1、BlazorHybrid简介BlazorHybrid使开发人员能够将桌面和移动本机客户端框架与.NET和Blazor结合使用。在BlazorHybrid应用中,Razor组件在设备上是本机运行的。这些组件通过本地互操作通道呈现到嵌入式Web视图控件。组件不在浏览器中运行,并且不涉及WebAssembly。R......
  • uniapp滑动页面时警告Unable to preventDefault inside passive event listener due t
    翻译:没有添加被动事件监听器来阻止’touchstart‘事件,请考虑添加事件管理者’passive’,以使页面更加流畅。原因:由于浏览器必须要在执行事件处理函数之后,才能知道有没有掉用过 preventDefault(),这就导致了浏览器不能及时响应滚动,略有延迟。所以为了让页面滚动的效果如丝般顺滑......