心得技巧
优化vue+springboot项目页面响应时间：waiting(TTFB) 及content Download
发布时间：2022-06-27 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了优化vue+springboot项目页面响应时间：waiting(TTFB) 及content Download，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
优化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所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
猜你在找的心得技巧相关文章
- clion结合vcpkg以及GTest的使用 2022-07-07
- EGF 2022-06-06
- ExtJS 布局-Column布局（Column layout） 2022-06-05
- 颜色之ARGB与RGB、RGBA的区别与介绍 2022-04-15
- rgba中的a是什么意思 CSS之RGBA颜色指南 2022-04-15
- rootfs -根文件系统制作 2022-07-07
- 网页简单布局之结构与表现原则分享 2022-04-15
- 小项目中怎么防止Vue的闪现画面效果 2022-04-15
- 隐藏 Web 中的元素方法及优缺点教程详解 2022-04-15
- 告别硬编码让你的前端表格自动计算的实例代码 2022-04-15
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新心得技巧教程