前后端分离项目优化页面调用接口速度

原创 已于 2023-03-17 10:24:32 修改
· 778 阅读 · 0 ·
版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#gzip压缩 #前后端分离项目优化接口响应 #vue页面优化数据加载速度

于 2023-03-17 10:22:46 首次发布
文章介绍了通过后端应用配置和Nginx服务器配置启用GZIP压缩来优化资源加载速度的方法。在后端，通过在application.yml文件中开启压缩配置可显著减小文件大小。在Nginx层面，调整gzip配置参数能进一步控制压缩效果。实验证明，GZIP压缩能有效减少资源大小，提高页面响应速度。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

本篇文章主要从后端角度出发进行修改优化，通过gzip压缩压缩资源的方式来提升页面的加载速度。

主要可以通过以下两种方式实现gzip压缩：

目录

1、后端配置

2、nginx配置

1、后端配置

直接在application.yml文件添加如下配置，然后重启即可生效。

server:
  compression:
    enabled: true #true表示开启压缩  false关闭压缩

效果如图：

接下来我们测试看下开启与关闭时的区别；

false关闭gzip压缩时，打开职工管理页面测试以下两个接口，效果如图所示： 

true开启gzip压缩时，打开职工管理页面测试以下两个接口，效果如图所示： 

最低0.47元/天 解锁文章
nginx网页加速秘籍：7步打造加载快如闪电的网站，你还在慢悠悠地等待吗？
java专栏
06-02 496
🔥关注墨瑾轩，带你探索Java的奥秘🚀🔥超萌技术攻略，轻松晋级编程高手🚀🔥技术宝库已备好，就等你来挖掘🚀🔥订阅墨瑾轩，智趣学习不孤单🚀🔥即刻启航，编程之旅更有趣🚀让我们携手深入HTML请求后端性能优化的奇幻之旅。这次探险的目标是：让你的网页加载速度飞起来，让用户体验爽到飞起！我们将通过一系列实战总结，深度剖析每一个优化技巧，确保即便是初学者也能跟上节奏，动手实践。
长页面多模块调接口优化
weixin_54714100的博客
04-17 350
背景：查询近3年数据之类的，接口就会有大量数据需要查询做聚合，因此接口响应较慢。同时前端页面有大量不同维度展示的图表，渲染阻塞时间过长，用户体验较差，长时间loading，导致无法交互。因此前端做了一个懒加载功能。
前后端分离的项目，排查接口响应时间过长的原因
weixin_55413092的博客
01-17 4809
可能影响服务接口响应的原因 1/2 前后端分离：前端的请求由Nginx负载均衡转发 判断响应时间是否过长 浏览器F12查看“Resource Scheduling Duration”以及“Request/Response Duration”（其中“Waiting”一项对标后端业务处理总时间） 分析 网络不稳定（请求丢包） 当前环境内瞬时负载过高，导致某一时刻请求阻塞，工作负载过高整体业务处理能力降低 2/2 前后端分离：后端接口业务处理时间 判断响应时间是否过长 计算本地接口响应时间（可分段计算各
SpringBoot使用异步调用提高接口访问速度
Curtisjia的博客
10-28 1688
目录开启异步调用使用默认异步调用自定义线程池处理回调 开启异步调用 在主函数里面加上@EnableAsync import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.scheduling.annotation.EnableAsync; @SpringBootApplica
前后端分离开发，这几个技巧让页面加载速度提高
公众号：Java后端
11-27 1539
优质文章，及时送达作者：夜行风来源：https://urlify.cn/UNVFNf之前用 vuecli做了个博客，是一个单页面项目，大概有十个路由，直接 npm ru...
前后端分离：怎样能提高对接效率，并且代码更优雅呢？
wdjnb的博客
05-16 1616
现在大多数公司项目框架，基本都是属于前后端分离模式，这种模式会涉及到一个前后端对接问题，无论是对前端或者是后台服务，维护一套完善且规范的接口是非常有必要的，这样不仅能够提高对接效率，也可以让我的代码看起来更加简洁优雅。 修改前后最大的区别是我们不用在每个接口单独捕获异常，也不用在每个接口都要组装一遍返回参数，可以参考下面这张对比图： 一、SpringBoot不使用统一返回格式 默认情况下，SpringBoot会有如下三种返回情况。 1.1 字符串 @GetMapping("/getUse
layui+thinkphp前后端分离.rar
08-24
在现代Web开发中，前后端分离已经成为一种主流模式，它能有效提升开发效率，优化项目结构，提高代码的可维护性和可扩展性。本教程将围绕“layui+thinkphp前后端分离.rar”这套源码，深入探讨如何利用Layui前端框架与...
vue项目前后端分离设计
最新发布
爱分享的程序员
04-25 1659
在Vue前端架构中，通过分层结构和模块化设计实现高效的前后端分离，需要系统性规划各层职责、接口管理和数据流控制。以下是结合业界最佳实践的完整方案：
前后端分离系统架构模式图
01-09
5. 更好的用户体验：由于前后端分离模式下，前端可以独立于后端进行快速响应，使得页面加载速度提升，用户体验得到改善。 6. 支持多种前端展示：后端提供的API接口可以同时服务于不同的前端展现形式，如Web页面、...
若依前后端分离如何写移动端接口_都快0202年了，你竟然还不懂前后端分离......
weixin_39827304的博客
11-22 724
作者：fuzhongmin05来源：https://urlify.cn/uIJB3i# 背景前后端分离已成为互联网项目开发的业界标准使用方式，通过nginx+tomcat的方式(也可以中间加一个nodejs)有效的进行解耦，并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务(多种客户端，例如：浏览器，车载终端，安卓，IOS等等)打下坚实的基础。这个步骤是系统架构...
关于前后端分离导致数据加载体感不佳的一点思考
柷敔的博客
09-01 496
vue编写前端页面 加载表格使用后端接口，这就使得每次点开网站时相当于请求两次。反观php实现方案，只需要请求一次服务器就好了，响应速度提高。那么对于vue这种前后端分离的设计，怎么解决呢？
Springboot+vue的社区医疗综合服务平台（有报告） Javaee项目，springboot vue前后端分离项目
04-21
资源详情：https://blog.youkuaiyun.com/2302_78191516/article/details/136280442
停用缓存可能会导致前后端都加载缓慢，具体原因有哪些？
weixin_50614575的博客
05-29 339
因此，在开发过程中，应该充分利用缓存技术，减少不必要的请求和资源加载，同时对前后端代码进行优化，提高响应效率。
缩短接口响应时间_解决方案
春风化雨
10-31 1235
1、精简业务逻辑实现 精简业务逻辑，减少不必要的业务处理 2、缓存接口入参出参，并设置超时时间，个别接口长期不变性 恒久不变的固定查询，可以进行缓存，设置超时时间，避免永久不变 3、缓存热数据，缩短接口响应时间 热数据缓存，避免直接查数据库 4、接口拆分，且方便组合使用 ...
php解决缓慢http请求,如何解决php post太慢的问题
weixin_29663861的博客
03-09 1171
php post太慢的解决办法：首先强制协议为1.0；然后将头部设置送出为“Expect”；最后强制使用IPV4协议解析域名即可。php的curl函数模拟post、get数据提交，速度非常慢的处理办法如果你用 curl_setopt 函数来与远程的webservice或者抓取页面的处理时，有时会遇到很奇怪的现象，首次访问的速度异常的慢，基本上要5s-10s的时间让人奔溃。但是怎么查也差不出问题出在...
前端加载访问速度优化（Nginx）
呼啦啦啦啦啦的博客
12-19 3242
nginx优化前端访问加载速度。
前端页面请求接口较多怎么优化?
weixin_43502666的博客
10-30 3299
但需要注意的是，在进行接口聚合时，要考虑到后端接口之间的依赖关系、并发调用的性能影响以及数据的转换和组装等因素。(2)后端响应聚合：在后端服务层通过网关或代理的方式，将多个后端接口的响应进行聚合，然后返回给 BFF 层。BFF 架构模式通过在后端引入一个针对前端应用的专用服务层，将原本的 接口API 服务器分解成多个微服务，每个微服务只提供某个具体的功能接口。BFF 接口聚合是指在 BFF（Backend For Frontend）架构中，将多个后端接口聚合成一个接口，以满足前端应用的需求;
后端接口性能差，该从哪些方面进行优化？
老男孩的架构路
07-27 715
我的一个思路是可以通过Redis的事件发布机制，只要我们所有的服务都订阅Redis的某个事件，一旦数据进行了改动，那么就发布事件，所有订阅了相关事件的服务就可以接收到消息并将对应的缓存删除。但是如果不管我们使用Sysnchrnoized关键字，jdk的lock锁，还是分布式锁，我们都需要控制好锁的粒度，如果锁的粒度很大，显然会影响到我们系统的吞吐量。通常我们会利用Redis作为分布式缓存中间件，但是在使用Redis的时候，我们对key的设计要合理，不然出现BigKey，很有可能影响到我们接口的响应速度。..
postman接口执行速度比网页调用接口快的原因
web_ding的博客
04-26 5047
背景： 经常在测试人员看见页面加载缓慢就会提个bug让前端同学优化，前端同学看到是接口加载缓慢，于是前端同学通知后端同学，后端同学用postman跑了一下，告诉前端，我这很快啊，于是就进入了撕逼甩锅的过程。。。 区别的原因： 原因1：https请求的时候，web网页会多了ssl校验，特别是第一次加载接口的时候，后面再刷新页面就会发现快了，因为后面就不校验ssl了 原因2：web调用的环境比较复杂，调用一个接口的时候，很多情况下是多个动作一起运行的，资源之间的争夺，部分情况会出现导致接口运行缓慢的..
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

想养一只！

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值