vue性能优化

vue首屏优化--问题

首屏的加载速度慢：加载过程类似于同步的操作，比较耗时
首页白屏：加载过程耗时，直到数据渲染白屏才结束
FP (First Paint) 首次绘制
FCP (First Contentful Paint) 首次内容绘制
LCP (Largest Contentful Paint) 最大内容渲染
DCL (DomContentloaded)
FMP(First Meaningful Paint) 首次有效绘制
L (onLoad)
TTI (Time to Interactive) 可交互时间
TBT (Total Blocking Time) 页面阻塞总时长
FID (First Input Delay) 首次输入延迟
CLS (Cumulative Layout Shift) 累积布局偏移
SI (Speed Index)

SPA(单页应用)--加载过程

1.加载html ---FP(仅有一个div根节点)

--这个过程加载骨架屏
2.加载静态资源,css,js(不包含图片)
3.解析js,生成html

（这个时候可能就是有一个背景色或者大的轮廓）--FCP（包含页面的基本框架，但是没有数据内容）

4.ajax请求 0.5s （从此往前一直就是白屏）
5.数据渲染 ---FMP（包含页面所有元素和数据，图片和视频可能还没有加载）

（这个时候可能就是有一个背景色或者大的轮廓）

很好

哈哈哈

****路由跳转的时候，触发的是ajax请求，一般不会出现白屏的状态，需要的资源已加载

vue首屏优化--解决

1.loading
2.骨架屏：页面数据尚未加载前先给用户展示出页面的大致结构，直到请求数据返回后再渲染页面，补充进需要显示的数据内容（就是一个简单的html和css）
3.路由动态加载(动态组件):不能将所有的js全部引入main.js，否则加载js的过程耗时（第二步），使用动态加载。
在babel中配置plugin-syntax-dynamic-import ==> 路由动态加载
component: () => import('@/components/children/Test1') ==>路由懒加载

4.抽取公共库：多次使用的组件，加载一次，下次使用缓存，不要多次加载
webpack4,一个新的配置optimization.splitChunks --- 分割代码，抽出公用代码

5.ssr，预渲染，同构
ssr：服务端渲染，-->请求--->node(执行vue项目)--->html-->返回给客户端
同构渲染：一套代码多端使预渲染：webpack打包的时候 vue打包出来的项目--->无头浏览器--->获取到预渲染的页面的html--->插入index.html(此时首页已经形成)--->放在CDN（预渲染将首屏出现提前到第一步FP阶段）
安装预渲染的插件：npm install prerender-spa-plugin -D
6.单页变成多页
webpack entry多个入口
7.资源请求时间片的处理
8.cdn
9.quickLink(谷歌的)---(npm文档中) --->在浏览器空闲的时候，去解析预加载我可能要跳转的页面，而不是触发的去解析加载。有a标签的时候或者滚动之后出现a的时候就去解析预加载

a..proload
浏览器预加载：只是加载html中声明的资源，比如
-->加载的内容看配置了什么，配置决定资源加载的优先级
b..prefetch --->
link -- prefetch

dns--prefetch （UDP协议）

prerender--prefetch

c..preconnect
DNS TLS协商 TCP握手

11.webwork
12.pwa
13.http chunk
rollup

vuecli自己搭建

看资料看mdn

udp和tcp协议的区别