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根节点)
<div id="app"></div> --这个过程加载骨架屏
2.加载静态资源,css,js(不包含图片)
3.解析js,生成html
<div id="app">（这个时候可能就是有一个背景色或者大的轮廓）--FCP（包含页面的基本框架，但是没有数据内容）
<div class="head"></div>
<div class="body"></div>
</div>
4.ajax请求 0.5s （从此往前一直就是白屏）
5.数据渲染 ---FMP（包含页面所有元素和数据，图片和视频可能还没有加载）
<div id="app">（这个时候可能就是有一个背景色或者大的轮廓）
<div class="head">很好</div>
<div class="body">哈哈哈</div>
</div>
****路由跳转的时候，触发的是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中声明的资源，比如 <link href="a.css">
<link rel="preload">-->加载的内容看配置了什么，配置决定资源加载的优先级
b..prefetch --->
link -- prefetch
<link rel="prefetch" href="/pic.png">
dns--prefetch （UDP协议）
<link rel="dns-prefetch" href="/pic.png">
prerender--prefetch
<link rel="prerender" href="ww.baidu.com">
c..preconnect
DNS TLS协商 TCP握手
11.webwork
12.pwa
13.http chunk
rollup
vuecli自己搭建
看资料看mdn
udp和tcp协议的区别
