淘东电商项目(73) -秒杀系统(前端优化)

简介: 淘东电商项目(73) -秒杀系统(前端优化)

引言

本文代码已提交至Github,有兴趣的同学可以下载来看看:https://github.com/ylw-github/taodong-shop

《淘东电商项目》安全架构设计模块的文章已经讲解完了,有兴趣的童鞋可以阅读下:

前面安全架构设计,主要介绍了如下几种:

  • 基于网关实现IP黑名单与名单拦截
  • API接口实现Token授权认证
  • 使用MD5实现API接口验证签名,防止抓包篡改数据
  • 基于Oauth2.0 实现API接口开放平台
  • 接口参数使用网关实现防止XSS、SQL注入

本文开始讲解「秒杀系统模块」,这篇博客主要讲解前端优化这一部分。

本文目录结构:

l____引言

l____ 1.什么是秒杀系统?

l________ 1.1 秒杀介绍

l________ 1.2 秒杀的常见方式

l________ 1.3 秒杀遇到的问题

l________ 1.4 秒杀的解决方案

l____ 2.前端优化

l________ 2.1 前端为什么要优化?

l________ 2.2 前端优化方案

l________ 2.3 Nginx实现页面缓存

1.什么是秒杀系统?

1.1 什么是秒杀系统?

“秒杀” 网上竞拍的一种新方式,所谓“秒杀”,就是网络卖家发布一些超低价格的商品,所有买家在同一时间网上抢购的一种销售方式。由于商品价格低廉,往往一上架就被抢购一空,有时只用一秒钟,其中12306抢票就是一个秒杀案例。

1.2 秒杀的常见方式

  • 一元秒杀:此种秒杀一般都是限量1件或者几件,秒杀价格绝对低到令人无法相信也无法抗拒而不去参与,此种秒杀一般在开始之后1-3秒之内就会秒杀完毕,抢购速度相当之快,有意参与此种秒杀的秒客电脑配置一定要好,而且网速上一定要比其它的秒客占据更大的优势,才能够提高秒中概率;
  • 低价限量秒杀:此种形式也可以理解为低折扣秒杀,限量不限时,秒完即止,此种秒杀形式商家提供一定数量的商品,直至秒完即止,对于秒客来说在时间的把握上要求没有那么苛刻,能够秒中的概率相对来说是很大的,例如:小米手机、12306。
  • 低价限时限量秒杀:此种形式也可以理解为低折扣秒杀,限时限量,在规定的时间内,无论商品是否秒杀完毕,该场秒杀都会结束,对于秒客来说在时间的把握上要求没有那么苛刻,但是下手一定要及时,过了规定的秒杀时间就不能够参与,秒中的概率一般都会很大,但是时间上一定要把握好;

1.3 秒杀遇到的问题

秒杀抢购的特征:短时间并发量非常大、高并发

前端层面

  1. 突然增加的网络及服务器带宽
  2. 用户实现重复提交

业务层面

  1. 如何防止商品超卖问题?
  2. 服务器单台机器承受不了?
  3. 如何限制用户操作频率?
  4. 如何防止用户作弊行为?

1.4 秒杀的解决方案

正常电子商务流程:

  1. 查询商品;
  2. 创建订单;
  3. 扣减库存;
  4. 更新订单;
  5. 付款;
  6. 卖家发货。

秒杀业务特性流程:

  1. 低廉价格;
  2. 大幅推广;
  3. 瞬时售空;
  4. 一般是定时上架;
  5. 时间短、瞬时并发量高;

秒杀实现技术挑战:

  1. 秒杀技术挑战:假设某网站秒杀活动只推出一件商品,预计会吸引1万人参加活动,也就说最大并发请求数是10000,秒杀系统需要面对的技术挑战有:
  2. 对现有网站业务造成冲击: 秒杀活动只是网站营销的一个附加活动,这个活动具有时间短,并发访问量大的特点,如果和网站原有应用部署在一起,必然会对现有业务造成冲击,稍有不慎可能导致整个网站瘫痪。

解决方案:将秒杀系统独立部署,甚至使用独立域名,使其与网站完全隔离。

问题1:用户量逐渐增多,并发量随着增高,超出了Redis吞吐量如何解决?

  • 答:采用Redis集群和高可用。

问题2:当修改商品库存的请求增多,数据库访问压力增大,如何解决?

  • 答:通过消息中间间异步形式执行SQL语句或者数据库采用分表分库。

问题3: 秒杀系统如果在高并发情况下,造成宕机呢?如何不影响到其他系统?

  • 答: 秒杀采用微服务架构,独立域名部署,使用docker虚拟化技术实现快速扩容。

2.前端优化

2.1 为什么需要前端优化?

在一个网站中,大部分的服务器请求带宽资源都被静态资源占用了,静态资源包含(CSS/IMG/JS/MP4)等,而HTTP协议接口占用带宽资源非常小,比如:

1M宽带等于等于128KB/S ,如果加载一个网页含静态资源需要640/KB ,那么就需要5秒时间加载整个网页。

想让用户的请求及时的发送到服务器端上,服务器带宽一定足够,所以这时候网站一定要实现动静分离架构模式,将静态资源与动态资源分开,静态资源放入到CDN服务器端上。

2.2 前端优化方案

前端的优化方案具体指的是静态资源优化方案,方式有如下几种:

  1. js/css/img实现压缩减少带宽的传输、将静态资源放入第三方资源服务器中(例如七牛云、阿里OSS等)。
  2. 商品详情页面使用Nginx+Lua+OpenResty实现商品详情页面的优化。
  3. 提交后按钮disabled,禁止用户重复提交。

2.3 Nginx实现页面缓存

1.nginx配置文件内容如下(nginx端口为7788,系统门户端口为8080):

events {
  #的最大连接数(包含所有连接数)1024
  worker_connections  1024;  ## Default: 1024
}
http{
   # 代理缓存配置
   proxy_cache_path "./taodong_cachedata"  levels=1:2 keys_zone=taodongcache:256m inactive=1d max_size=1000g; 
   server {
     listen 7788;
     location /{
        #使用缓存名称
        proxy_cache taodongcache;
        #对以下状态码实现缓存
        proxy_cache_valid 200 206 304 301 302 1d;
        #缓存的key
        proxy_cache_key $request_uri;
        add_header X-Cache-Status $upstream_cache_status;
        #反向代理地址
        proxy_pass http://127.0.0.1:8080;
      }
   }
}

2.配置文件下新建文件夹:

mkdir taodong_cachedata

3.浏览器使用Nginx访问:http://127.0.0.1:7788/login,可以看到访问正常,Nginx反向代理到了门户系统)

4.关闭门户系统,再次访问http://127.0.0.1:7788/login,可以看到访问的是Nginx缓存的页面,由于里面的动态码需要访问门户后台获取,因此不显示。

目录
相关文章
|
设计模式 前端开发 JavaScript
14分布式电商项目 - 前端分层以及控制器继承
14分布式电商项目 - 前端分层以及控制器继承
83 0
|
缓存 NoSQL 前端开发
秒杀系统设计的 5 个要点:前端三板斧+后端两条路!
高并发,cache,锁机制 基于缓存架构redis,Memcached的先进先出队列。
|
前端开发
从0到上线开发企业级电商项目_前端_01_sublime使用技巧
一、用户设置 { "color_scheme": "Packages/Color Scheme - Default/Monokai.tmTheme", "font_size": 14, "tab_size": 4, "translate_tabs_to...
989 0
|
30天前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
127 2
|
30天前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
37 0
|
30天前
|
人工智能 自然语言处理 运维
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。
|
30天前
|
存储 弹性计算 算法
前端大模型应用笔记(四):如何在资源受限例如1核和1G内存的端侧或ECS上运行一个合适的向量存储库及如何优化
本文探讨了在资源受限的嵌入式设备(如1核处理器和1GB内存)上实现高效向量存储和检索的方法,旨在支持端侧大模型应用。文章分析了Annoy、HNSWLib、NMSLib、FLANN、VP-Trees和Lshbox等向量存储库的特点与适用场景,推荐Annoy作为多数情况下的首选方案,并提出了数据预处理、索引优化、查询优化等策略以提升性能。通过这些方法,即使在资源受限的环境中也能实现高效的向量检索。
|
30天前
|
机器学习/深度学习 弹性计算 自然语言处理
前端大模型应用笔记(二):最新llama3.2小参数版本1B的古董机测试 - 支持128K上下文,表现优异,和移动端更配
llama3.1支持128K上下文,6万字+输入,适用于多种场景。模型能力超出预期,但处理中文时需加中英翻译。测试显示,其英文支持较好,中文则需改进。llama3.2 1B参数量小,适合移动端和资源受限环境,可在阿里云2vCPU和4G ECS上运行。
|
30天前
|
前端开发 算法 测试技术
前端大模型应用笔记(五):大模型基础能力大比拼-计数篇-通义千文 vs 文心一言 vs 智谱 vs 讯飞vsGPT
本文对比测试了通义千文、文心一言、智谱和讯飞等多个国产大模型在处理基础计数问题上的表现,特别是通过链式推理(COT)提示的效果。结果显示,GPTo1-mini、文心一言3.5和讯飞4.0Ultra在首轮测试中表现优秀,而其他模型在COT提示后也能显著提升正确率,唯有讯飞4.0-Lite表现不佳。测试强调了COT在提升模型逻辑推理能力中的重要性,并指出免费版本中智谱GLM较为可靠。
前端大模型应用笔记(五):大模型基础能力大比拼-计数篇-通义千文 vs 文心一言 vs 智谱 vs 讯飞vsGPT
|
2月前
|
SpringCloudAlibaba JavaScript 前端开发
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
分布式组件、nacos注册配置中心、openfegin远程调用、网关gateway、ES6脚本语言规范、vue、elementUI
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架