vue首屏優(yōu)化--問題
首屏的加載速度慢：加載過程類似于同步的操作，比較耗時
首頁白屏：加載過程耗時，直到數(shù)據(jù)渲染白屏才結(jié)束
FP (First Paint) 首次繪制
FCP (First Contentful Paint) 首次內(nèi)容繪制
LCP (Largest Contentful Paint) 最大內(nèi)容渲染
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根節(jié)點)
<div id="app"></div> --這個過程加載骨架屏
2.加載靜態(tài)資源,css,js(不包含圖片)
3.解析js,生成html
<div id="app">（這個時候可能就是有一個背景色或者大的輪廓）--FCP（包含頁面的基本框架，但是沒有數(shù)據(jù)內(nèi)容）
<div class="head"></div>
<div class="body"></div>
</div>
4.ajax請求 0.5s （從此往前一直就是白屏）
5.數(shù)據(jù)渲染 ---FMP（包含頁面所有元素和數(shù)據(jù)，圖片和視頻可能還沒有加載）
<div id="app">（這個時候可能就是有一個背景色或者大的輪廓）
<div class="head">很好</div>
<div class="body">哈哈哈</div>
</div>
****路由跳轉(zhuǎn)的時候，觸發(fā)的是ajax請求，一般不會出現(xiàn)白屏的狀態(tài)，需要的資源已加載
vue首屏優(yōu)化--解決
1.loading
2.骨架屏：頁面數(shù)據(jù)尚未加載前先給用戶展示出頁面的大致結(jié)構(gòu)，直到請求數(shù)據(jù)返回后再渲染頁面，補充進需要顯示的數(shù)據(jù)內(nèi)容（就是一個簡單的html和css）
3.路由動態(tài)加載(動態(tài)組件):不能將所有的js全部引入main.js，否則加載js的過程耗時（第二步），使用動態(tài)加載。
在babel中配置plugin-syntax-dynamic-import ==> 路由動態(tài)加載
component: () => import('@/components/children/Test1') ==>路由懶加載
4.抽取公共庫：多次使用的組件，加載一次，下次使用緩存，不要多次加載
webpack4,一個新的配置optimization.splitChunks --- 分割代碼，抽出公用代碼
5.ssr，預渲染，同構(gòu)
ssr：服務端渲染，-->請求--->node(執(zhí)行vue項目)--->html-->返回給客戶端
同構(gòu)渲染：一套代碼多端使預渲染：webpack打包的時候 vue打包出來的項目--->無頭瀏覽器--->獲取到預渲染的頁面的html--->插入index.html(此時首頁已經(jīng)形成)--->放在CDN（預渲染將首屏出現(xiàn)提前到第一步FP階段）
安裝預渲染的插件：npm install prerender-spa-plugin -D
6.單頁變成多頁
webpack entry多個入口
7.資源請求時間片的處理
8.cdn
9.quickLink(谷歌的)---(npm文檔中) --->在瀏覽器空閑的時候，去解析預加載我可能要跳轉(zhuǎn)的頁面，而不是觸發(fā)的去解析加載。有a標簽的時候或者滾動之后出現(xiàn)a的時候就去解析預加載
a..proload
瀏覽器預加載：只是加載html中聲明的資源，比如 <link href="a.css">
<link rel="preload">-->加載的內(nèi)容看配置了什么，配置決定資源加載的優(yōu)先級
b..prefetch --->
link -- prefetch
<link rel="prefetch" href="/pic.png">
dns--prefetch （UDP協(xié)議）
<link rel="dns-prefetch" href="/pic.png">
prerender--prefetch
<link rel="prerender" href="ww.baidu.com">
c..preconnect
DNS TLS協(xié)商 TCP握手
11.webwork
12.pwa
13.http chunk
rollup
vuecli自己搭建
看資料看mdn
udp和tcp協(xié)議的區(qū)別
