实验2 测量“小白鼠”的前端性能
实验过程
- https://ecommerceguide.com/ecommerce-platforms/
- 系统来自网站中选择的已有框架
选择Wix
查看详细说明
注册账号并完成相关认证
有了帐号之后进入官网，选择新建一个网站
选择店铺类型
店铺名称设置为demo
店铺功能模块
设定商店内容
新增商品
添加自定义商品
“非卖品”，并设置价格为199
添加付款方式，为方便测试，仅添加线下支付功能，并在付款时输入相关提示信息。
设计网站，设置黑色背景主题
上线准备
业务和品牌名称
服务方式
设定关键字
发布网站
在本地浏览器中访问网站，可以成功访问
进入商店
查看自定义的“非卖品”
至此电子商务Web系统搭建完毕
系统要求
由于采用已有框架搭建系统，对于部分环境要求不够清晰，根据经验列出一种可能的服务器端部署的系统要求
- 基本的硬件环境CPU、内存等
- 服务器端操作系统多为Linux系统
- MySQL数据库环境、Redis
- JDK环境
- Spring Boot框架
- Spring MVC
基本功能
- 网络商店装修、商品展示、购物车等基本商城功能
- 支付功能
- 聊天功能
- 联系表单
- 展示intergram动态消息
前端性能
在Chrome DevTools中查看首页
在Performance中查看
查看商品页面的加载
发现脚本执行时间显著提升
查看指定商品
由于指定商品页面元素数量较少，加载较快
根据Yahoo网站性能优化的34条规则中的部分对照
- 发现首页CSS样式集中在demo这个文件中，将这些写入一个文件可以减少http请求数，减少响应时间。
- 避免了CSS表达式的使用，因为CSS表达式计算频率高而影响性能
- 但是CSS和JavaScript的位置并不符合规则中CSS放顶部，JavaScript放底部，而是混合在一起。
首页压力测试
并发数为1，10次请求
并发数为8，10次请求
根据不同并发数制表，分别统计首页、商品页面、商品详情页面三个典型页面
首页
横轴为并发数，纵轴rps
横轴为并发数，纵轴为rtt
商品页面
横轴为并发数，纵轴rps
横轴为并发数，纵轴为rtt
商品详情页面
横轴为并发数，纵轴rps
横轴为并发数，纵轴为rtt
