页面优化技术

最新推荐文章于 2024-05-21 21:16:37 发布
最新推荐文章于 2024-05-21 21:16:37 发布
阅读量269 收藏
点赞数
文章标签： java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/meini32/article/details/132812684
版权

页面优化技术

文章目录

1.概述

Aim：减少对数据库的访问

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

Aim：实现前后端分离

  • 页面静态化，前后端分离

Aim:

  • 静态资源优化

Aim:

  • CDN优化

CND优化

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

2.1 页面缓存

页缓存
页面缓存（也称为网页缓存）是一种存储网页数据的机制，以便用户可以在将来访问该页面时更快速地加载。

  • 页面缓存通常由浏览器或服务器实现。
    • 浏览器缓存：当您访问一个网页时，您的浏览器会将该页面的数据（包括HTML、CSS、JavaScript文件、图像等）存储在本地磁盘上。
    • 服务器缓存：服务器缓存是一种由服务器实现的机制，用于存储已经请求和生成的网页数据。当多个用户请求同一页面时，服务器可以从其缓存中加载页面，而不是为每个用户重新生成页面。

步骤

  1. 取缓存
  2. 手动渲染模板
  3. 结果输出
    以下是使用表格的形式总结的关于ThymeleafViewResolver和ApplicationContext的信息：
对象描述/功能
ThymeleafViewResolver1. Thymeleaf的一个类，实现了ViewResolver接口。
2. 用于解析Thymeleaf视图。
3. 可以将逻辑视图名称解析为具体的Thymeleaf视图。
ApplicationContext1. Spring框架的核心接口之一，代表了Spring IoC容器。
2. 负责实例化、配置和组装Bean，并提供对这些Bean的访问。
3. 通过ApplicationContext，可以获取和操作应用程序中的Bean，例如获取Bean的引用、获取应用程序的环境变量等。
4. ApplicationContext有多个实现，例如ClassPathXmlApplicationContext、FileSystemXmlApplicationContext等，用于不同的应用场景。

添加商品缓存类

package com.example.redis;

public class GoodsKey extends BasePrefix{
    private GoodsKey(int expireSeconds, String prefix) {
        super(expireSeconds, prefix);
    }
    public static GoodsKey getGoodsList = new GoodsKey(60, "gl");
    public static GoodsKey getGoodsDetail = new GoodsKey(60, "gd");
}

使用缓存

    @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);

        IWebContext ctx =new WebContext(request,response,
                request.getServletContext(),request.getLocale(),model.asMap());

        //手动渲染
        html = thymeleafViewResolver.getTemplateEngine().process("goods_list", ctx);
        if(!StringUtils.isEmpty(html)) {
            redisService.set(GoodsKey.getGoodsList, "", html);
        }
        return html;
    }

查看缓存
在这里插入图片描述
数据详情页缓存


    @RequestMapping("/to_detail/{goodsId}",produces="text/html")
    @ResponseBody
    public String detail(HttpServletRequest request, HttpServletResponse response,Model model,MiaoShaUser user, @PathVariable("goodsId")long goodsId) {
        model.addAttribute("user", user);

        //取缓存
        String html = redisService.get(GoodsKey.getGoodsDetail, ""+goodsId, String.class);
        if(!StringUtils.isEmpty(html)) {
            return html;
        }

        //手动渲染
        GoodsVo goods = goodsService.getGoodsVoByGoodsId(goodsId);
        model.addAttribute("goods", goods);

        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;
        }
        model.addAttribute("miaoshaStatus", miaoshaStatus);
        model.addAttribute("remainSeconds", remainSeconds);

        IWebContext ctx = new WebContext(request,response,
                request.getServletContext(),request.getLocale(), model.asMap() );

        html = thymeleafViewResolver.getTemplateEngine().process("goods_detail", ctx);
        if(!StringUtils.isEmpty(html)) {
            redisService.set(GoodsKey.getGoodsDetail, ""+goodsId, html);
        }
        return html;
    }

在这里插入图片描述

2.2 对象缓存

对象缓存是一种缓存策略，它将特定的对象根据其标识符（如ID）进行缓存。当通过标识符获取对象时，直接从缓存中返回对象，而不是从数据库中查询。对象缓存与页面缓存和URL缓存的主要区别在于，对象缓存是针对单个对象进行的，而页面缓存和URL缓存则是针对整个页面或URL的缓存。

Q:对象缓存和页面缓存的区别

  • 在页面缓存和URL缓存中，缓存时间通常较短，适用于变化不大的情况，如商品列表等。
    这些缓存策略一般只缓存前一两页的数据，因为大部分用户只会点击一两次页面。当数据更新时，这些缓存策略会自动失效，不需要手动干预。
  • 相比之下，对象缓存的粒度更细，只针对特定的对象进行缓存。
    当对象更新时，必须手动更新缓存，否则会出现数据不一致的情况。在实现对象缓存时，需要注意在更新数据后及时更新缓存，以确保数据的同步性。

在这里插入图片描述

 @Service
public class MiaoshaUserService {

    public static final String COOKI_NAME_TOKEN = "token";

    @Autowired
    MiaoshaUserDao miaoshaUserDao;

    @Autowired
    RedisService redisService;

    //查询
//    public MiaoShaUser getById(long id) {
//        return miaoshaUserDao.getById(id);
//    }

    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;
    }

    //修改用户密码
    public boolean updatePassword(String token, long id, String formPass) {
        //取user
        MiaoShaUser user = getById(id);
        if(user == null) {
            throw new GlobalException(CodeMsg.MOBILE_NOT_EXIST);
        }
        //更新数据库
        MiaoShaUser toBeUpdate = new MiaoShaUser();
        toBeUpdate.setId(id);
        toBeUpdate.setPassword(MD5Util.formPassToDBPass(formPass, user.getSalt()));
        miaoshaUserDao.update(toBeUpdate);
        //处理缓存
        redisService.delete(MiaoshaUserKey.getById, ""+id);
        user.setPassword(toBeUpdate.getPassword());
        redisService.set(MiaoshaUserKey.token, token, user);
        return true;
    }

在这里插入图片描述

2.3 测试效果

商品列表
在这里插入图片描述

添加缓存之后
在这里插入图片描述

获取用户信息用户信息
在这里插入图片描述

添加缓存之后
在这里插入图片描述

3.页面静态化

页面静态化是一种将动态生成的页面内容转化为静态 HTML 文件的技术。
通过将动态页面转化为静态文件，可以减少服务器的负载，提高页面的加载速度，并且有利于搜索引擎的优化（SEO）

  • 优点：利用浏览器缓存页面框架，动态数据通过接口从服务端获取。

页面静态化介绍

package com.example.vo;

import com.example.domain.MiaoShaUser;

//表示商品详细信息的值对象（Value Object）
public class GoodsDetailVo {
    private int miaoshaStatus = 0;
    private int remainSeconds = 0;
    private GoodsVo goods ;
    private MiaoShaUser user;
    public int getMiaoshaStatus() {
        return miaoshaStatus;
    }
    public void setMiaoshaStatus(int miaoshaStatus) {
        this.miaoshaStatus = miaoshaStatus;
    }
    public int getRemainSeconds() {
        return remainSeconds;
    }
    public void setRemainSeconds(int remainSeconds) {
        this.remainSeconds = remainSeconds;
    }
    public GoodsVo getGoods() {
        return goods;
    }
    public void setGoods(GoodsVo goods) {
        this.goods = goods;
    }
    public MiaoShaUser getUser() {
        return user;
    }
    public void setUser(MiaoShaUser user) {
        this.user = user;
    }
}

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE HTML>
<html >
<head>
  <title>商品详情</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <!-- jquery -->
  <script type="text/javascript" src="/js/jquery.min.js"></script>
  <!-- bootstrap -->
  <link rel="stylesheet" type="text/css" href="/bootstrap/css/bootstrap.min.css" />
  <script type="text/javascript" src="/bootstrap/js/bootstrap.min.js"></script>
  <!-- jquery-validator -->
  <script type="text/javascript" src="/jquery-validation/jquery.validate.min.js"></script>
  <script type="text/javascript" src="/jquery-validation/localization/messages_zh.min.js"></script>
  <!-- layer -->
  <script type="text/javascript" src="/layer/layer.js"></script>
  <!-- md5.js -->
  <script type="text/javascript" src="/js/md5.min.js"></script>
  <!-- common.js -->
  <script type="text/javascript" src="/js/common.js"></script>
</head>
<body>

<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>
        <!--
        	<form id="miaoshaForm" method="post" action="/miaosha/do_miaosha">
        		<button class="btn btn-primary btn-block" type="submit" id="buyButton">立即秒杀</button>
        		<input type="hidden" name="goodsId"  id="goodsId" />
        	</form>-->
        <button class="btn btn-primary btn-block" type="button" id="buyButton"onclick="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 doMiaosha(){
    $.ajax({
      url:"/miaosha/do_miaosha",
      type:"POST",
      data:{
        goodsId:$("#goodsId").val(),
      },
      success:function(data){
        if(data.code == 0){
          window.location.href="/order_detail.htm?orderId="+data.data.id;
        }else{
          layer.msg(data.msg);
        }
      },
      error:function(){
        layer.msg("客户端请求有误");
      }
    });

  }

  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>
</html>

页面框架
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
秒杀详情页 页面静态化

接口步骤同上

在这里插入图片描述

恶熊比比
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Java高性能高并发实战之页面优化技术
01-08
文章目录前言正文增加缓存页面静态化，前后端分离页面缓存实际操作URL缓存...页面优化设计（已完结） 在前面学习到了基础的登录功能模块的设计（还在继续完善中）以及Redis封装类的设置对应的是github源码miaosha_2
Java高性能高并发实战之页面优化技术（五）
weixin_44015043的博客
05-03 8531
文章目录前言正文增加缓存页面静态化，前后端分离页面缓存实际操作URL缓存 前言 在前面学习到了基础的登录功能模块的设计（还在继续完善中）以及Redis封装类的设置对应的是github源码miaosha_2的miaosha_2模块。对于模块三部分主要是关于秒杀商品页面的设计主要是权限设计和秒杀时间的倒计时设计后续会持续推出，这部分主要来讲述页面的优化部分的设计。 正文 对于秒杀业务的瓶颈大部分都是来...
前端页面优化方法
m0_64033183的博客
01-17 2768
前端页面优化方法
页面优化有哪些方法？
weixin_42581969的博客
10-30 4889
一、减少操作量     1. 尽量减少 HTTP 请求 合并文件，比如把多个 CSS 文件合成一个；  CSS Sprites 利用 CSS background 相关元素进行背景图绝对定位；      2. 不要在 HTML 中使用缩放图片 缩放图片并没有减少图片的容量，只是控制了图片的大小。     3. Image压缩 使用工具对图片进行压缩，保证质量的同时减少了图片的大小。   ...
前端页面性能优化指标
A__men的博客
02-21 3618
前端页面性能优化指标
springboot-No11-1:页面优化技术Thymeleaf简单实践 之缓存使用
lambda-fk 的专栏
05-05 3041
常见的页面优化技术页面的优化技术分为：缓存和，页面静态化，静态资源优化，CDN优化等其中缓存分为: 页面缓存+url缓存+对象缓存页面缓存也没缓存的时间比较短的。比如10秒钟的缓存时间失效思路： 获取页面缓存，没有的时候重新获取页面然后进行渲染，然后返回使用  Thymeleaf 的话，Springboot中有ThymeleafViewResolver可以帮助我们获取到页面的模板Thymeleaf...
WEB应用前端优化技术与手段策略
01-05
前端优化技术方法有很多，比如页面加载、缓存、图片压缩、减少HTTP请求、JavaScript 优化、CSS、搜索引擎优化、网站运营优化等等
前端页面加载优化
11-23
基于 Struts2 标签的 BigPipe 技术实现 facebook前端加载优化方案，可提高3倍。demo可以运行
项目优化之Ehcache页面缓存
08-26
echache作为前端页面缓存的技术，应用广泛，此文件内部含有代码案例和相关文档
如何快速优化你的PPT页面排版.pdf
10-04
如何快速优化你的PPT页面排版.pdf
jar包增量更新分析
junlaiyan的专栏
05-16 263
借助jdeps分析出jar包的增量文件
SpringBoot接入Knife4j接口文档
博主是个二次元死肥宅~
05-18 680
Knife4j是Java MVC框架集成Swagger生成Api文档的增强解决方案，前身是swagger-bootstrap-ui。
java实现拼图小游戏
monkey108的博客
05-16 622
本文主要提供用java实现的拼图小游戏源代码。
SpringBoot Validation自定义注解之校验指定最小整数
thinkers
05-21 21
1，引入核心关键依赖。
命令执行漏洞（二）
XLbb的博客
05-15 906
POST方法，S2-045-bypass-2漏洞存在！,程序更改为S2-045-bypass-2漏洞测试模式, 响应码: 200。POST方法，S2-046-bypass漏洞存在！POST方法，S2-045-bypass漏洞存在！POST方法，S2-046-1漏洞存在！POST方法，S2-046-2漏洞存在！POST方法，S2-046-3漏洞存在！POST方法，S2-045-1漏洞存在！POST方法，S2-045-3漏洞存在！POST方法，S2-045-2漏洞存在！POST方法，S2-045-4漏洞存在！
java数据结构与算法(验证二叉搜索树)
磐门的博客
05-17 248
节点返回空为ture,节点的值不在对应数据大小范围内返回false。将验证二叉搜索树计算同样可以转换为相同子问题，所以比较适合用递归。node为root的左节点时，max更新为root.val。node为root的右节点时，min更新为root.val。
JVM学习-执行引擎
丢爸
05-21 409
当然是否需要启动JIT编译器将字节码直接编译为对应平台的本地机器指令，则需要根据代码被调用。大部分的程序代码转换为物理机的目标代码或虚拟机能执行的指令集之前，都需要经过下图各个步骤。，将其直接编译为对应平台的本地机器指令，以此提升Java程序的执行性能。”，JIT编译器在运行时会针对那些频繁被调用的热点代码做出。Java代码编译是由Java源码编译器来完成，流程图如下。而定，关于那些需要被编译为本地代码的字节码，称为“Java字节码的执行是由JVM执行引擎来完成。
C++ 11
qq_65112813的博客
05-17 654
对于类类型，如果定义了接受。
【java-数据结构19-队列的模拟实现】
最新发布
2302_80519942的博客
05-21 376
（这个才是重点）同上，没有元素直接返回即可，只有一个元素（全部置空），普通情况（rear等于前驱，rear置为空），
winform页面优化
09-05
对WinForms页面进行优化可以通过以下几个方面来考虑： 1. 减少控件数量：尽量减少页面上的控件数量，只保留必要的控件，这样可以减少页面渲染和布局的开销。 2. 使用虚拟模式加载大量数据：如果页面需要展示大量数据，可以使用虚拟模式加载，只在需要显示的时候才加载数据，这样可以避免一次性加载大量数据导致页面卡顿。 3. 异步加载数据：将耗时的数据加载操作放在后台线程进行，避免阻塞UI线程，提高页面的响应性。 4. 避免频繁的UI刷新：在需要更新UI时，尽量使用批量更新的方式，而不是每次更新都进行一次UI刷新操作。 5. 控件布局优化：合理使用容器控件，如Panel、GroupBox等，对相关联的控件进行分组，可以减少布局计算的开销。 6. 图像资源优化：如果页面中使用了大量的图像资源，可以进行压缩和合并，减小资源文件的大小，提高加载速度。 7. 合理使用缓存：对于一些会频繁使用的数据，可以将其缓存起来，避免重复的查询或计算操作，提高页面的性能。 8. 使用双缓冲技术：开启双缓冲可以减少页面的闪烁现象，提升用户体验。 以上是一些常见的WinForms页面优化技巧，具体要根据实际情况进行分析和调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值