淘东电商项目（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 秒杀遇到的问题

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

前端层面

扫描二维码关注公众号，回复： 11271185 查看本文章

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

业务层面

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

1.4 秒杀的解决方案

正常电子商务流程：

查询商品；
创建订单；
扣减库存；
更新订单；
付款；
卖家发货。

秒杀业务特性流程：

低廉价格；
大幅推广；
瞬时售空；
一般是定时上架；
时间短、瞬时并发量高；

秒杀实现技术挑战：

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

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

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

答：采用Redis集群和高可用。

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

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

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

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

2.前端优化

2.1 为什么需要前端优化？

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

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

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

2.2 前端优化方案

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

js/css/img实现压缩减少带宽的传输、将静态资源放入第三方资源服务器中（例如七牛云、阿里OSS等）。
商品详情页面使用Nginx+Lua+OpenResty实现商品详情页面的优化。
提交后按钮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缓存的页面，由于里面的动态码需要访问门户后台获取，因此不显示。