优化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的更多相关文章

  1. Vue简单项目(页面跳转,参数传递)

    一.页面跳转 1.和上篇文章一样的建文件的步骤 2.建立成功之后,在src文件夹下面添加新的文件夹pages 3.在pages里面添加新的文件Home.Vue和Detail.Vue 4.设Home.V ...

  2. Vue+SpringBoot项目实战(一) 搭建环境

    GitHub 地址: https://github.com/dongfanger/sprint-backend https://github.com/dongfanger/sprint-fronten ...

  3. 前端项目优化 -Web 开发常用优化方案、Vue & React 项目优化

    github github-myBlob 从输入URL到页面加载完成的整个过程 首先做 DNS 查询,如果这一步做了智能 DNS 解析的话,会提供访问速度最快的 IP 地址回来 接下来是 TCP 握手 ...

  4. Vue+SpringBoot+Mybatis的简单员工管理项目

    本文项目参考自:https://github.com/boylegu/SpringBoot-vue 为了完成此项目你需要会springBoot,mybatis的一些基本操作 运行界面 第一步:搭建前端 ...

  5. Springboot项目与vue项目整合打包

    我的环境 * JDK 1.8 * maven 3.6.0 * node环境 1.为什么需要前后端项目开发时分离,部署时合并? 在一些公司,部署实施人员的技术无法和互联网公司的运维团队相比,由于各种不定 ...

  6. [Vue 牛刀小试]:第十七章 - 优化 Vue CLI 3 构建的前端项目模板(1)- 基础项目模板介绍

    一.前言 在上一章中,我们开始通过 Vue CLI 去搭建属于自己的前端 Vue 项目模板,就像我们 .NET 程序员在使用 asp.net core 时一样,我们更多的会在框架基础上按照自己的开发习 ...

  7. docker-compose 部署 Vue+SpringBoot 前后端分离项目

    一.前言 本文将通过docker-compose来部署前端Vue项目到Nginx中,和运行后端SpringBoot项目 服务器基本环境: CentOS7.3 Dokcer MySQL 二.docker ...

  8. SpringBoot + Vue + nginx项目部署(零基础带你部署)

    一.环境.工具 jdk1.8 maven spring-boot idea VSVode vue 百度网盘(vue+springboot+nginx源码): 链接:https://pan.baidu. ...

  9. docker 运行jenkins及vue项目与springboot项目(四.docker运行nginx)

    docker 运行jenkins及vue项目与springboot项目: 一.安装docker 二.docker运行jenkins为自动打包运行做准备 三.jenkins的使用及自动打包vue项目 四 ...

随机推荐

  1. Codeforces 571E - Geometric Progressions(数论+阿巴细节题)

    Codeforces 题目传送门 & 洛谷题目传送门 u1s1 感觉此题思维难度不太大,不过大概是细节多得到了精神污染的地步所以才放到 D1E 的罢((( 首先我们对所有 \(a_i,b_i\ ...

  2. 【豆科基因组】木豆Pigeonpea (Cajanus cajan) 292个自然群体重测序2017NG

    目录 一.来源 二.结果 一.来源 Whole-genome resequencing of 292 pigeonpea accessions identifies genomic regions a ...

  3. [R] venn.diagram保存pdf格式文件?

    vennDiagram包中的主函数绘图时,好像不直接支持PDF格式文件: dat = list(a = group_out[[1]][,1],b = group_out[[2]][,1]) names ...

  4. 66-Reorder List

    Reorder List My Submissions QuestionEditorial Solution Total Accepted: 64392 Total Submissions: 2818 ...

  5. jenkins原理简析

    持续集成Continuous Integration(CI) 原理图: Gitlab作为git server.Gitlab的功能和Github差不多,但是是开源的,可以用来搭建私有git server ...

  6. Excel-统计各分数段人数 frequency()

    FREQUENCY函数 函数名称:FREQUENCY 主要功能:以一列垂直数组返回某个区域中数据的频率分布. 使用格式:FREQUENCY(data_array,bins_array) 参数说明:Da ...

  7. 剖析ApplicationRunner、CommandLineRunner

    需求:SpringBoot项目启动成功后执行某方法 方案:在spring-boot中提供了两种Runner接口:ApplicationRunner和CommandLineRunner,编写自己的类实现 ...

  8. Linux 参数代换 命令 xargs

    xargs 命令也是管道命令中的一员.xargs命令的功能简单来说就是参数代换.那么什么叫做参数代换,这里首先要了解管道的概念.在 linux管道 命令一节中我们详细介绍了管道命令的概念.这里我们只是 ...

  9. day14函数递归调用

    day14函数递归调用 1.装饰器叠加 def deco1(func1): def wrapper1(*args,**kwargs): print('=====>wrapper1 ') res1 ...

  10. Hbase(一)【入门安装及高可用】

    目录 一.Zookeeper正常部署 二.Hadoop正常部署 三.Hbase部署 1.下载 2.解压 3.相关配置 4.分发文件 5.启动.关闭 6.验证 四.HMaster的高可用 一.Zooke ...