电子商务实验2

实验2 测量“小白鼠”的前端性能

实验过程

image-20230305165121585

选择Wix

image-20230305165310533

查看详细说明

image-20230305165413794

注册账号并完成相关认证

image-20230305165615762

有了帐号之后进入官网，选择新建一个网站

选择店铺类型

image-20230305160458484

店铺名称设置为demo

image-20230305160600779

店铺功能模块

image-20230305160644333

设定商店内容

image-20230305160708348

新增商品

image-20230305161043330

添加自定义商品

“非卖品”，并设置价格为199

image-20230305163747445

添加付款方式，为方便测试，仅添加线下支付功能，并在付款时输入相关提示信息。

image-20230305161953075

设计网站，设置黑色背景主题

image-20230305162308182

上线准备

业务和品牌名称

image-20230305162412181

服务方式

image-20230305162431131

设定关键字

image-20230305162631163

发布网站

image-20230305163356233

在本地浏览器中访问网站，可以成功访问

image-20230305164521541

进入商店

image-20230305164745106

查看自定义的“非卖品”

image-20230305164814592

至此电子商务Web系统搭建完毕

系统要求

由于采用已有框架搭建系统，对于部分环境要求不够清晰，根据经验列出一种可能的服务器端部署的系统要求

  • 基本的硬件环境CPU、内存等
  • 服务器端操作系统多为Linux系统
  • MySQL数据库环境、Redis
  • JDK环境
  • Spring Boot框架
  • Spring MVC

基本功能

  • 网络商店装修、商品展示、购物车等基本商城功能
  • 支付功能
  • 聊天功能
  • 联系表单
  • 展示intergram动态消息

前端性能

在Chrome DevTools中查看首页

image-20230305184750573

在Performance中查看

image-20230305190440032

查看商品页面的加载

image-20230305190743213

发现脚本执行时间显著提升

查看指定商品

image-20230305191017006

由于指定商品页面元素数量较少，加载较快

根据Yahoo网站性能优化的34条规则中的部分对照

  • 发现首页CSS样式集中在demo这个文件中，将这些写入一个文件可以减少http请求数，减少响应时间。
  • 避免了CSS表达式的使用，因为CSS表达式计算频率高而影响性能
  • 但是CSS和JavaScript的位置并不符合规则中CSS放顶部，JavaScript放底部，而是混合在一起。

首页压力测试

并发数为1，10次请求

image-20230305213543783

并发数为8，10次请求

image-20230305213601589

根据不同并发数制表，分别统计首页、商品页面、商品详情页面三个典型页面

首页

横轴为并发数，纵轴rps

image-20230305214607508

横轴为并发数，纵轴为rtt

image-20230305214639542

商品页面

横轴为并发数，纵轴rps

image-20230305215413262

横轴为并发数，纵轴为rtt

image-20230305215424965

商品详情页面

横轴为并发数，纵轴rps

image-20230305215430149

横轴为并发数，纵轴为rtt

image-20230305215435733

posted @ 2023-03-14 16:20  Jareth  阅读(67)  评论(0)    收藏  举报