页面级高并发秒杀优化

最新推荐文章于 2024-07-10 10:19:36 发布

贝刀芬

最新推荐文章于 2024-07-10 10:19:36 发布

阅读量407

点赞数

分类专栏：秒杀系统

本文链接：https://blog.youkuaiyun.com/DLC990319/article/details/107049313

版权

秒杀系统专栏收录该内容

7 篇文章

订阅专栏

一、商品列表页面缓存实现

1.页面缓存

要展示一个页面时，先从缓冲中取；如果取不到，再进行渲染，然后将渲染后的结果写入缓存。

对商品列表页进行优化，修改toList()这个Controller。之前是直接返回html的文件名，让SpringBoot负责渲染。现在将代码改为：

    @RequestMapping(value = "/to_list",produces = "text/html")
    @ResponseBody
    public String toList(Model model, MiaoshaUser user,
                         HttpServletRequest request,HttpServletResponse response){
        model.addAttribute("user",user);
        List<GoodsVo> goodsVos = goodsService.listGoodsVo();
        model.addAttribute("goodsList",goodsVos);
        //先从缓存中取
        ValueOperations<String, String> opsForValue = redisTemplate.opsForValue();
        String html = opsForValue.get(GoodsKey.getGoodsList.getPrefix());
        if(!StringUtils.isEmpty(html)){
            return html;
        }else {
            //取不到手动渲染，使用ThymeleafViewResolver
            WebContext webContext = new WebContext(request, response, request.getServletContext(), request.getLocale(),
                    model.asMap());
            html = thymeleafViewResolver.getTemplateEngine().process("goods_list", webContext);
            if(!StringUtils.isEmpty(html)){
                //写入缓存
 opsForValue.set(GoodsKey.getGoodsList.getPrefix(),html,GoodsKey.getGoodsList.expireSeconds(), TimeUnit.SECONDS);
            }
            return html;
        }
    }

页面缓存的有效期通常是比较短的，只是为了防止短时间内大量访问。这里设置为60s。

看一看这里的页面缓存能带来多大的性能提升：

这是加入缓存之前的压测数据：

这是加入缓存之后的压测数据（5000个用户，循环访问10次）：

怎么QPS还变低了

重新测试，QPS为3000，上涨50%。

2.URL缓存

与页面缓存相似，只不过是带有参数的。用来优化一下详情页面。

3.对象缓存

对象缓存是更细粒度的缓存。页面缓存适合不会经常变动信息，并且访问次数较多的页面。

其实之前就用到了对象缓存，比如在redis中存储token和用户信息，这就属于对象缓存。

（1）优化getById()方法

这是MiaoshaService中getById()的原方法：

	public MiaoshaUser getById(long id) {
		return miaoshaUserDao.getById(id);
	}

非常的简单，只是从数据库中根据Id查询用户。现在我们加入对象缓存。

	public MiaoshaUser getById(long id) {
		//取缓存
		ValueOperations<String, MiaoshaUser> opsForValue = redisTemplate.opsForValue();
		MiaoshaUser user = opsForValue.get(MiaoshaUserKey.getById.getPrefix() + id);
		if(user!=null){
			return user;
		}else {
			MiaoshaUser userDaoById = miaoshaUserDao.getById(id);
			if(userDaoById!=null){
				opsForValue.set(MiaoshaUserKey.getById.getPrefix() + id,userDaoById);
			}
			return userDaoById;
		}
	}

如果要实现修改密码功能，那么步骤应该是：

先把数据存到数据库中
成功后，再让缓存失效

不能先操作缓存，因为如果先让缓存失效，那么在处理数据库的过程中，就有可能会被其他操作重新将旧的数据插入缓存。

二、商品详情页面静态化

直接将页面缓存到浏览器，相比于缓存到redis，效率更高。这里尝试将商品详情页静态化，动态的资源是通过接口发送的。

1.重写Controller

首先，修改Controller代码，将所有的model.addAttribute()删掉，因为这是动态的。

然后定义一个对象，作为向页面传输的值：

@Data
public class GoodsDetailVo {
    private int miaoshaStatus = 0;
    private int remainSeconds = 0;
    private GoodsVo goods;
    private MiaoshaUser miaoshaUser;
}

然后改造Controller，不再返回页面，而是返回一个Result<GoodsDetailVo>，前端通过Ajax获取数据再渲染到页面上。

    @RequestMapping("/to_detail/{goodsId}")
    @ResponseBody
    public Result<GoodsDetailVo> detail(Model model, MiaoshaUser user,
                                        @PathVariable("goodsId")long goodsId){
        GoodsVo goods = goodsService.getByGoodsId(goodsId);

        long startAt = goods.getStartDate().getTime();
        long endAt = goods.getEndDate().getTime();
        long now = System.currentTimeMillis();

        int miaoshaStatus = 0;
        int remainSeconds = 0;
        if(now<startAt){
            //秒杀还未开始
            miaoshaStatus = 0;
            remainSeconds = (int) ((startAt-now)/1000);
        }else if(now>endAt){
            //秒杀已结束
            miaoshaStatus = 2;
            remainSeconds = -1;
        }else{
            //秒杀进行中
            miaoshaStatus = 1;
            remainSeconds = 0;
        }
        GoodsDetailVo goodsDetailVo= new GoodsDetailVo();
        goodsDetailVo.setGoods(goods);
        goodsDetailVo.setMiaoshaStatus(miaoshaStatus);
        goodsDetailVo.setRemainSeconds(remainSeconds);
        goodsDetailVo.setMiaoshaUser(user);
        return Result.success(goodsDetailVo);
    }

2.页面静态化

对html文件做出修改，之前跳转是通过后端进行页面跳转，现在可以直接通过前端进行跳转再请求数据。

在商品列表页的跳转按钮，其href应该这样设置：

<td><a th:href="'/goods_detail.html?goodsId='+${goods.id}">详情</a></td>

此时goods_detail.html应该放在static的目录下，在goods_detail.html文件中获取参数使用的是正则表达式来匹配。

<div class="panel panel-default">
    <div class="panel-heading">秒杀商品详情</div>
    <div class="panel-body">
        <span id="userTip"> 您还没有登录，请登陆后再操作<br/></span>
        <span>没有收货地址的提示。。。</span>
    </div>
    <table class="table" id="goodslist">
        <tr>
            <td>商品名称</td>
            <td colspan="3" id="goodsName"></td>
        </tr>
        <tr>
            <td>商品图片</td>
            <td colspan="3"><img  id="goodsImg" width="200" height="200" /></td>
        </tr>
        <tr>
            <td>秒杀开始时间</td>
            <td id="startTime"></td>
            <td >
                <input type="hidden" id="remainSeconds" />
                <span id="miaoshaTip"></span>
            </td>
            <td>
                <button class="btn btn-primary btn-block" type="button" id="buyButton"οnclick="doMiaosha()">立即秒杀</button>
                <input type="hidden" name="goodsId"  id="goodsId" />
            </td>
        </tr>
        <tr>
            <td>商品原价</td>
            <td colspan="3" id="goodsPrice"></td>
        </tr>
        <tr>
            <td>秒杀价</td>
            <td colspan="3"  id="miaoshaPrice"></td>
        </tr>
        <tr>
            <td>库存数量</td>
            <td colspan="3"  id="stockCount"></td>
        </tr>
    </table>
</div>
</body>
<script>
    function render(detail){
        var miaoshaStatus = detail.miaoshaStatus;
        var  remainSeconds = detail.remainSeconds;
        var goods = detail.goods;
        var user = detail.user;
        if(user){
            $("#userTip").hide();
        }
        $("#goodsName").text(goods.goodsName);
        $("#goodsImg").attr("src", goods.goodsImg);
        $("#startTime").text(new Date(goods.startDate).format("yyyy-MM-dd hh:mm:ss"));
        $("#remainSeconds").val(remainSeconds);
        $("#goodsId").val(goods.id);
        $("#goodsPrice").text(goods.goodsPrice);
        $("#miaoshaPrice").text(goods.miaoshaPrice);
        $("#stockCount").text(goods.stockCount);
        countDown();
    }

    $(function(){
        //countDown();
        getDetail();
    });

    function getDetail(){
        var goodsId = g_getQueryString("goodsId");
        $.ajax({
            url:"/goods/detail/"+goodsId,
            type:"GET",
            success:function(data){
                if(data.code == 0){
                    render(data.data);
                }else{
                    layer.msg(data.msg);
                }
            },
            error:function(){
                layer.msg("客户端请求有误");
            }
        });
    }

    function countDown(){
        var remainSeconds = $("#remainSeconds").val();
        var timeout;
        if(remainSeconds > 0){//秒杀还没开始，倒计时
            $("#buyButton").attr("disabled", true);
            $("#miaoshaTip").html("秒杀倒计时："+remainSeconds+"秒");
            timeout = setTimeout(function(){
                $("#countDown").text(remainSeconds - 1);
                $("#remainSeconds").val(remainSeconds - 1);
                countDown();
            },1000);
        }else if(remainSeconds == 0){//秒杀进行中
            $("#buyButton").attr("disabled", false);
            if(timeout){
                clearTimeout(timeout);
            }
            $("#miaoshaTip").html("秒杀进行中");
        }else{//秒杀已经结束
            $("#buyButton").attr("disabled", true);
            $("#miaoshaTip").html("秒杀已经结束");
        }
    }

</script>

这就是新的页面代码，所有的动态数据都是通过Ajax异步请求来获取的。

三、订单详情页面静态化

1.跳转订单页面

秒杀功能页面的静态化和商品详情相似。当点击“立即秒杀”进入此方法：

    function doMiaosha(){
        $.ajax({
            url:"/miaosha/do_miaosha",
            type:"POST",
            data:{
                goodsId:$("#goodsId").val(),
            },
            success:function(data){
                if(data.code == 200){
                    window.location.href="/order_detail.html?orderId="+data.data.id;
                }else{
                    layer.msg(data.msg);
                }
            },
            error:function(){
                layer.msg("客户端请求有误");
            }
        });
    }

2.MiaoshaController重写

    @PostMapping("/do_miaosha")
    @ResponseBody
    public Result<OrderInfo> miaosha(Model model, MiaoshaUser user, @RequestParam("goodsId")long goodsId){
        if(user==null){
            return Result.error(CodeMsg.SESSION_ERROR);
        }
        //判断商品是否有库存
        GoodsVo goodsVo = goodsService.getByGoodsId(goodsId);
        int stock = goodsVo.getStockCount();
        if(stock<=0){
            return Result.error(CodeMsg.MIAOSHA_OVER);
        }
        //判断是否已经买过此商品（防止一人买多个）
        MiaoshaOrder order = orderService.getOrderById(user.getId(),goodsId);
        if(order!=null){
            return Result.error(CodeMsg.REPEATE_MIAOSHA);
        }
        //开始秒杀：减库存、下订单、写入秒杀订单（事务）
        OrderInfo orderInfo = miaoshaService.miaosha(user,goodsVo);
        return Result.success(orderInfo);
    }

3.订单详情页面

<body>
<div class="panel panel-default" >
    <div class="panel-heading">秒杀订单详情</div>
    <table class="table" id="goodslist">
        <tr>
            <td>商品名称</td>
            <td colspan="3" id="goodsName"></td>
        </tr>
        <tr>
            <td>商品图片</td>
            <td colspan="2"><img  id="goodsImg" width="200" height="200" /></td>
        </tr>
        <tr>
            <td>订单价格</td>
            <td colspan="2"  id="orderPrice"></td>
        </tr>
        <tr>
            <td>下单时间</td>
            <td id="createDate" colspan="2"></td>
        </tr>
        <tr>
            <td>订单状态</td>
            <td id="orderStatus">
            </td>
            <td>
                <button class="btn btn-primary btn-block" type="submit" id="payButton">立即支付</button>
            </td>
        </tr>
        <tr>
            <td>收货人</td>
            <td colspan="2">XXX  18812341234</td>
        </tr>
        <tr>
            <td>收货地址</td>
            <td colspan="2">北京市昌平区回龙观龙博一区</td>
        </tr>
    </table>
</div>
</body>
</html>
<script>
    function render(detail){
        var goods = detail.goods;
        var order = detail.order;
        $("#goodsName").text(goods.goodsName);
        $("#goodsImg").attr("src", goods.goodsImg);
        $("#orderPrice").text(order.goodsPrice);
        $("#createDate").text(new Date(order.createDate).format("yyyy-MM-dd hh:mm:ss"));
        var status = "";
        if(order.status == 0){
            status = "未支付"
        }else if(order.status == 1){
            status = "待发货";
        }
        $("#orderStatus").text(status);

    }

    $(function(){
        getOrderDetail();
    })

    function getOrderDetail(){
        var orderId = g_getQueryString("orderId");
        $.ajax({
            url:"/order/detail",
            type:"GET",
            data:{
                orderId:orderId
            },
            success:function(data){
                if(data.code == 0){
                    render(data.data);
                }else{
                    layer.msg(data.msg);
                }
            },
            error:function(){
                layer.msg("客户端请求有误");
            }
        });
    }
</script>

4.查看是否缓存成功

查看页面，观察到order_detail.html的Status Code是304.

304所表达的含义就是，客户端执行了GET请求，文件并没有变化。这时文件就可以使用本地缓存的html文件了。

但是这样客户端与服务端还是发生了一次交互，如果要客户端直接从浏览器取数据，则还需要一些配置：

#static
spring.resources.add-mappings=true
spring.resources.cache.period= 3600
spring.resources.chain.cache=true
spring.resources.chain.enabled=true
spring.resources.chain.compressed=true
spring.resources.chain.html-application-cache=true
spring.resources.static-locations=classpath:/static/

再次查看：

可以发现，这次的code成了200，并且后面的括号(from disk cache)，说明这就是从缓存获取的页面。

5.OrderController

订单详情数据需要从Controller中请求，所以写一个Controller用来返回数据。

首先创建传输的数据OrderDetailVo：

@Data
public class OrderDetailVo {
    private GoodsVo goods;
    private OrderInfo order;
}

然后根据传入的OrderId将数据写入Vo并返回：

    @GetMapping("/detail")
    @ResponseBody
    public Result<OrderDetailVo> orderInfo(MiaoshaUser user, @RequestParam("orderId") long orderId){
        if(user==null){
            return Result.error(CodeMsg.SESSION_ERROR);
        }
        OrderInfo orderInfo = orderService.getOrderInfoById(orderId);
        if(orderInfo==null){
            return Result.error(CodeMsg.ORDER_NOT_EXIST);
        }
        Long goodsId = orderInfo.getGoodsId();
        GoodsVo goodsVo = goodsService.getByGoodsId(goodsId);
        OrderDetailVo orderDetailVo = new OrderDetailVo();
        orderDetailVo.setGoods(goodsVo);
        orderDetailVo.setOrder(orderInfo);
        return Result.success(orderDetailVo);
    }

四、防止超卖

之前在压测时发现库存会变成负数，说明大量线程并发时会发生线程安全问题。

那么怎么解决呢？

首先在数据库层面，修改SQL语句。

update miaosha_goods set stock_count = stock_count - 1 where goods_id = #{goodsId} and stock_count > 0

这样就可以保证只有在库存数大于0的情况下才会减库存。

现在还有一个问题，那就是一旦一个人同时发送两个请求，同时进入了下订单的方法。那么判断逻辑根本检测不出来，这样一个人就能多次下单。

解决方法还是要通过数据库，可以利用数据库的唯一索引。将MiaoshaOrder表中的userid和orderId合成一个联合索引。

其实这里还有一个问题，老师并没有提到，那就是尽管数量不会为负数了，但是订单还是会超出数量。

五、静态资源优化

JS/CSS压缩，减少流量
多个JS/CSS组合，减少连接数

现在有很多模板可以自动实现这个功能，比如淘宝的Tengine，专门用来打包的Webpack。

CDN 内容分发网络