优化vue+springboot项目页面响应时间:waiting(TTFB) 及content Download

TTFB全称Time To First Byte,是指网络请求被发起到从服务器接收到地一个字节的这段时间。包含了TCP连接时间、发送HTTP请求时间和获得相应消息第一个字节的时间。
环境: 开发 vue Cascader 级联选择器,listview接口一次性请求树结构数据接近5w条(3.9MB),nginx 反向代理 部署vue 、部署springboot,同机部署 mysql。
问题:生产环境,请求listview接口就waiting(TTFB) 4秒,content Download 16 秒,总计需要20秒,时间太长了。
开发环境,本机部署nginx,连接远程服务器端mysql. 请求listview接口就waiting(TTFB) 4秒,content Download 1 秒,总计需要5秒。
优化方法有如下:
1)服务端数据库链接地址串 及 vue 服务器链接地址,改外网ip 、域名 、localhost 、proxy_pass为 127.0.0.1 ,直接影响waiting(TTFB)。原因:127.0.0.1无需解析,localhost还要本地DNS解析。
MYSQL的安全策略的问题,对于每一个连接以及每一个操作,MYSQL都会check当前用户的主机名,so,当我们对数据库进行op的时候,MYSQL数据库服务器都会check一次主机名,这就导致了我们远端操作数据库的客户端出现几秒钟的等待状态。
2)前端需要tree 数据结构,如果直接返回List, 前端处理慢,直接改用后端处理。后端处理方式:使用Map<id, object>存放id 和对象本身。查询父节点id时,直接map.get( parentID)获取父节点对象,追加到父节点的childList中。注意不要使用递归,非常慢。也不要使用双层循环。
3)返回给前端树结构数据字段只有必要字段:id,name,parent_id,children, 删除多余字段
4)nginx 及vue 开启 gzip
5)查询语句优化,使用explain分析,创建索引,强制使用索引,使用关联查询【join】代替子查询,使用varchar/nvarchar 代替char/nchar ,因为首先变长字段存储空间小,可以节省存储空间,其次对于查询来说,在一个相对较小的字段内搜索效率显然要高些。
6) vue端ajax中的setRequestHeader设置请求头, Connection:keep-alive
7)nginx 配置http2
8) 服务器dns解析 vi /etc/hosts 添加 ip 域名

经过以上优化后,listview接口请求耗时减少到10秒内。

再怎么优化呢?查了网上不少资料,最后再想了一下,springboot 项目接口返回数据是否可以压缩。度娘说可以。
application.yml
server:
compression:
enabled: true
min-response-size: 1024
mime-types: application/javascript,application/json,application/xml,text/html,text/xml,text/plain,text/css,image/*
再次对比结果: 传输数据大小456kb,响应时间1.33秒,到此总算告一段落

但请教大拿说,waiting(TTFB)还可以再优化一下 控制在500ms内才算正常。
待后期再想想办法。

推荐这些技术文章:

优化vue+springboot项目页面响应时间:waiting(TTFB) 及content Download

优化vue+springboot项目页面响应时间:waiting(TTFB) 及content Download
TTFB全称Time To First Byte,是指网络请求被发起到从服务器接收到地一个字节的这段时间。包含了TCP连接时间、发送HTTP请求时间和获得相应消息第一个字节的时间。
环境: 开发 vue Cascader 级联选择器,listview接口一次性请求...

HTTP状态码整理

HTTP状态码
1. 1XX
 信息。服务器接受请求,需要请求者继续执行操作。
 100
 客户端应当继续发送请求。这个临时响应是用来通知客户端它的部分请求已经被服务器接收,且仍未被拒绝。客户端应当继续发送请求的剩余部分,或者如果请求已经完成,忽略这个响应。服务器必须在请求完成后向客户端发送一个最终响应。
 101
 服务器已经理解了客户端的请求,并将通过Upgrade 消息头通知客户端采用不同...

vue项目nginx部署

找到Nginx文件夹中 config / nginx.conf 文件
1、启用gzip压缩。 在http模块下配置

# gzip config
gzip on;
gzip_min_length 1k;
gzip_comp_level 9;
gzip_types text/plain application/javascript application/x-javascript text/css...

请求响应浏览器时乱码

@RequestMapping(value="/BigVshop",method=RequestMethod.GET, produces = "text/html;charset=UTF-8")

...

超时时间已到,在操作完成之前超时时间已过或服务器未响应

问题
我在连接远程项目里,数据库可以连接到,项目也可以获取到,但是在浏览页面的时候,出现超时时间已到,在操作完成之前超时时间已过或服务器未响应

最佳回答
把超时设置长点。

...

文章标题:优化vue+springboot项目页面响应时间:waiting(TTFB) 及content Download
文章链接:https://www.dianjilingqu.com/326.html
本文章来源于网络,版权归原作者所有,如果本站文章侵犯了您的权益,请联系我们删除,联系邮箱:saisai#email.cn,感谢支持理解。
THE END
< <上一篇
)">
下一篇>>