优化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. dart系列之:数学什么的就是小意思,看我dart如何玩转它

    目录 简介 dart:math包的构成 math Random 总结 简介 dart也可以进行数学运算,dart为数学爱好者专门创建了一个dart:math包来处理数学方面的各种操作.dart:mat ...

  2. python爬虫之正则表达式(用在其他地方也可)

    1. 常用的匹配规则 ### 常用的匹配规则 # \w 匹配字母.数字及下划线 # \W 匹配不是字母.数字及下划线的字符 # \s 匹配任意空白字符,等价于[\t\n\t\f] # \S 匹配任意非 ...

  3. JavaScript中var与let的异同点

    var是JavaScript刚出现时就存在的变量声明关键字,而let作为ES6才出现的变量声明关键字,无疑两者之间存在着很大的区别.那么具体有哪些区别呢? 1.作用域表现形式不同,var是函数作用域, ...

  4. day12 函数嵌套

    day12 函数嵌套 一. args与kwargs def index(a,b,c): print(a,b,c) def wrapper(*args,**kwargs): # args=(1,2,3) ...

  5. [项目总结]关于调用系统照相机Activity被销毁问题解决

    在项目中需要启用系统照相机来拍照.本来很容易的一个问题.但在适配中出现了问题. 简单说一下问题: 有些手机拍照成功,有些手机拍完照后确定返回后activity数据丢失,被销毁了. 问题查找: 经过代码 ...

  6. NSURLConnection和Runloop

    - 1.1 涉及知识点(1)两种为NSURLConnection设置代理方式的区别 //第一种设置方式: //通过该方法设置代理,会自动的发送请求 // [[NSURLConnection alloc ...

  7. 实现将rsyslog将日志记录与MySQL中

    准备两个节点 node3:  rsyslog node2:   数据库 准备相应的包 [root@node3 php-fpm.d]#yum install rsyslog-mysql 将数据拷贝到数据 ...

  8. MFC入门示例之访问对话框控件的7种方法

    方法一: 1 //方法一 2 void CMFCApplication2Dlg::OnBnClickedButton1() 3 { 4 int num1, num2, num3; 5 TCHAR ch ...

  9. NGNIX 开启socket分发的使用配置

    worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/err ...

  10. Hadoop期末复习

    Hadoop期末复习 选择题 以下选项中,哪个程序负责HDFS数据存储. B A.NameNode B.DataNode C.Secondary NameNode D.ResourceManager ...