秒杀系统（四）：页面优化技术

页面优化技术

1.页面缓存+URL缓存+对象缓存
2.页面静态化，前后端分类
3.静态资源优化
4.CDN优化

页面缓存+URL缓存+对象缓存

并发的瓶颈在数据库，如何减少对数据库的访问呢？
最有效的方式就是加缓存，通过加不同粒度的缓存，最大粒度的页面缓存，最小粒度的对象缓。

页面缓存

1.取缓存
2.手动渲染模板
3.结果输出

/**
 * 页面缓存：所有的客户端请求过来返回的都是同一个页面，例如用户访问淘宝，返回的首页都是同一个页面
 * produces="text/html" 直接返回html的源代码
 * @param request
 * @param response
 * @param model
 * @return
 */
@RequestMapping(value="/to_list", produces="text/html")
    @ResponseBody
    public String list(HttpServletRequest request, HttpServletResponse response, Model model,MiaoshaUser user) {
    	model.addAttribute("user", user);
    	//取缓存
    	String html = redisService.get(GoodsKey.getGoodsList, "", String.class);
    	if(!StringUtils.isEmpty(html)) {
    		return html;
    	}
    	List<GoodsVo> goodsList = goodsService.listGoodsVo();
    	model.addAttribute("goodsList", goodsList);
//    	 return "goods_list";
    	SpringWebContext ctx = new SpringWebContext(request,response,
    			request.getServletContext(),request.getLocale(), model.asMap(), applicationContext );
    	//手动渲染
    	html = thymeleafViewResolver.getTemplateEngine().process("goods_list", ctx);
    	if(!StringUtils.isEmpty(html)) {
    		redisService.set(GoodsKey.getGoodsList, "", html);
    	}
    	return html;
    }

原本服务器要从数据库中查找商品列表，修改后先在redis看是否后缓存，如果与缓存，直接返回缓存中的商品列表页，减少了对数据库的访问。缓存的保存时间太长则网页的实时性不能保证，太短则不能能减少对数据库的访问量。

URL缓存

/**
 * URL级别的缓存，例如用户点击商品详情，不同的商品返回不一样的详情，那就需要每一个url都做缓存
 * @param request
 * @param response
 * @param model
 * @param id
 * @return
 */
@RequestMapping(value="/getUserById/{id}", produces="text/html")
@ResponseBody
public String getUserById(HttpServletRequest request, HttpServletResponse response,
                          Model model, @PathVariable Integer id) {

    //取缓存
    String html = redisService.get(USERLISTKEY+id, String.class);
    if(!StringUtils.isEmpty(html)) {
        return html;
    }

    //业务代码
    TestUser testUser = testService.getTestUserById(id-1);
    model.addAttribute("testUser", testUser);

    WebContext ctx = new WebContext(request,response,request.getServletContext(),
            request.getLocale(), model.asMap());
    //手动渲染
    html = thymeleafViewResolver.getTemplateEngine().process("testUser", ctx);
    if(!StringUtils.isEmpty(html)) {
        redisService.set(USERLISTKEY+id, 60, html);
    }
    return html;
}

对象缓存

public MiaoshaUser getById(long id) {
		//取缓存
		MiaoshaUser user = redisService.get(MiaoshaUserKey.getById, ""+id, MiaoshaUser.class);
		if(user != null) {
			return user;
		}
		//取数据库
		user = miaoshaUserDao.getById(id);
		if(user != null) {
			redisService.set(MiaoshaUserKey.getById, ""+id, user);
		}
		return user;
	}

页面静态化

常用技术：AngularJS、vue.js
优点：利用浏览器的缓存
传统的jsp，thymeleaf实际上都是动态的，即时做了页面缓存，客户端还是需要从服务端下载页面数据，想象一下，你的网站，一秒钟被访问了100w次，每次下载的数据是1k，流量是相当庞大的.
如果做了静态化，静态化就是所有页面都是纯的html，通过ajax请求服务器，拉到数据，渲染页面。这样有什么好处？如果做了静态化，浏览器是可以把静态页面缓存到客户端的，这样页面数据就不需要重复下载了，只需要下载动态的数据就可以了。

静态资源的优化

1. JS/CSS 压缩，减少流量(webpack)

2.多个JS/CSS组合，减少连接数(TCP/IP三次握手肯定会耗时，淘宝的Tengine是在nginx的基础上做了一些改进，支持组合多个CSS/JS文件的访问请求变成一个请求)

CDN的优化

CDN的全称是Content Delivery Network，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络，CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的是使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度。

总结

并发大的问题的瓶颈是数据库，最有效的方法就是缓存。从用户访问页面开始，可以静态资源优化，可以页面静态化。发送请求的时候可以通过cdn优化。请求到服务端，可以将页面缓存到redis中。