运行在 CCV2 环境上的 Angular 服务器端渲染应用的性能瓶颈分析

简介: 运行在 CCV2 环境上的 Angular 服务器端渲染应用的性能瓶颈分析

Angular 应用程序中使用服务器端渲染,出于以下几种原因:

  1. SSR 有助于搜索引擎优化。 搜索引擎爬虫可以解析通过服务器端渲染的 HTML 页面源代码。而运行在 CSR 模式下的单页面应用,页面源代码是在客户端浏览器里执行复杂的 JavaScript 生成,现代很多爬虫对此内容无能为力。
  2. Facebook 和 Twitter 等社交媒体平台,可在共享时显示 SSR 渲染出的网站的预览。
  1. 在服务器上呈现网页后,页面内容可以被缓存,从而能够更快的响应用户相同的页面请求。

要在 Angular 应用程序中实现服务器端渲染,可以使用 Angular Universal package.

当我们使用 Angular Universal 时,向 OCC 服务器发起业务数据请求的 API 触发两次。首先是在服务器渲染页面时实行一次,第二次是在客户端应用程序启动时触发。这种 API 重复触发的方式会导致延迟问题和糟糕的用户体验,因为发生这种情况时屏幕通常会闪烁(flickering).

此外,SAP CCV2 上的 SSR 容器是运行 Node.js 代码的地方,因此更容易受到性能下降的影响。在选择 Node.js 和 server.js jsapps-* 之后,可以从 Dynatrace 中的技术和进程页面查看 CPU 和内存。注意 SSR 应用文件的名称可能不同,默认为 main.js.

随后的页面将显示所选任何给定指标的平均利用率。 单击单个 pod 将进入其进程详细信息页面,其中可以查看有关 cpu/内存利用率和重新启动时间的信息。 对于 SSR,有关 CPU 的详细信息将在系统性能选项卡下,而有关 V8 内存使用的详细信息将在 Node.js 指标选项卡下。

当发现 SSR Pod 的 CPU 利用率居高不下时,基于 Node.js 的设计,尽管我们可以通过垂直扩展来缓解这个问题, 另一方面,如果并发请求的数量很大,那么也可以考虑通过水平扩展的方式来降低每个 Pod 的 CPU 利用率。


尽可能多地消除 Spartacus Storefront 中 CPU 密集型代码 ,必要时可以研究是否能够将逻辑转移到 OCC 层执行。


相关文章
|
9天前
|
弹性计算 JavaScript 应用服务中间件
在一台ECS服务器上优雅部署多环境:实践攻略
在ECS上部署多环境应用,通过Nginx反向代理实现。规划端口或子域名区分开发、测试和生产环境。配置应用监听不同端口,如Node.js应用修改启动脚本。【6月更文挑战第21天】
125 3
|
20天前
|
监控 关系型数据库 MySQL
|
5天前
|
JavaScript 前端开发 开发者
Angular框架:企业级Web应用的强大后盾
Angular,谷歌支持的JavaScript框架,因其组件化架构、双向数据绑定、依赖注入和路由系统,成为企业级Web开发首选。组件化促进代码重用,如`AppComponent`示例。双向数据绑定简化DOM操作,减少手动工作。依赖注入通过示例展示易管理依赖,提升测试性。路由则支持SPA开发,平滑页面过渡。Angular的特性增强了开发效率和应用质量,使其在Web开发领域保持领先地位。【6月更文挑战第25天】
13 2
|
28天前
|
负载均衡 Linux 应用服务中间件
Linux环境下快速实现两台服务器上的文件夹共享
Linux环境下快速实现两台服务器上的文件夹共享
52 2
Linux环境下快速实现两台服务器上的文件夹共享
|
4天前
|
Linux Shell Python
linux服务器python2升级安装python3.7环境
linux服务器python2升级安装python3.7环境
14 0
|
1月前
|
JavaScript Serverless 网络架构
Next.js与SSR:构建高性能服务器渲染应用
创建Next.js项目使用`create-next-app`,每个页面自动支持SSR。动态路由如`pages/posts/[id]`,在`getStaticPaths`和`getServerSideProps`中获取数据。利用静态优化和预渲染提升性能,动态导入减少初始加载时间。使用`next/image`优化图片,自定义服务器增加控制,集成第三方库如Redux。优化SEO,利用i18n支持多语言,使用Serverless模式和Web Workers。项目支持TypeScript,创建`_error.js`处理错误,部署到Vercel并使用工具进行性能监控和优化。
160 4
|
28天前
|
关系型数据库 应用服务中间件 数据库
编程入门(一)【Web服务器环境的部署】
编程入门(一)【Web服务器环境的部署】
47 1
|
10天前
|
网络协议 网络安全 数据安全/隐私保护
如何在IDEA中使用固定公网地址SSH远程连接服务器开发环境(三)
在IDEA中通过固定公网地址SSH远程连接服务器开发环境,需要配置固定TCP端口以避免地址随机变化。首先,升级cpolar至专业版及以上,然后在官网保留一个固定TCP地址。进入cpolar管理界面,编辑隧道信息,将保留的固定地址填入,更新隧道。最后,在IDEA中新建SSH连接,输入固定地址和端口,验证连接。成功后,即可稳定远程开发。
|
10天前
|
网络协议 Java Linux
如何在IDEA中使用固定公网地址SSH远程连接服务器开发环境(二)
在IDEA中通过Cpolar实现固定公网地址SSH远程连接到Linux服务器开发环境,主要步骤包括:1) 在Linux服务器上安装Cpolar,使用一键脚本进行安装和启动服务;2) 登录Cpolar Web UI,创建隧道,指定隧道名称、协议、本地地址(SSH默认端口22)、临时随机TCP端口和中国地区;3) 使用生成的公网TCP地址在IDEA中新建SSH连接,输入该地址和端口,完成远程连接。这种方式允许开发者在任何地方通过固定的公网地址进行远程开发,而无需公网IP。
|
10天前
|
安全 网络协议 Linux
如何在IDEA中使用固定公网地址SSH远程连接服务器开发环境(一)
该文介绍了如何通过IDEA设置远程连接Linux服务器的步骤,使用Cpolar内网穿透工具实现在没有公网IP的情况下进行远程开发。主要内容包括检查Linux SSH服务、本地连接测试、在Linux上安装Cpolar、创建远程连接的公网地址、公网远程连接测试以及固定连接公网地址。文章还提供了相关截图辅助说明,适用于IDEA2023.2.5版本。