TTFB
# 什么是 TTFB
? TTFB，Time to First Byte 的縮寫，又叫首字節(jié)響應(yīng)時(shí)間泪电。指的是瀏覽器開始接受服務(wù)器響應(yīng)數(shù)據(jù)的時(shí)間般妙，包含 后臺(tái)處理時(shí)間 + 重定向時(shí)間，是反應(yīng)服務(wù)端響應(yīng)熟讀的重要指標(biāo)歪架。時(shí)間越短，說(shuō)明服務(wù)器響應(yīng)的速度越快霹陡。
#TTFB 多長(zhǎng)算長(zhǎng)
? TTFB 主要受服務(wù)器硬件和網(wǎng)絡(luò)環(huán)境影響和蚪，可以查看國(guó)內(nèi)一些優(yōu)秀的網(wǎng)站，不難發(fā)現(xiàn)大多TTFB都在50ms以下烹棉，受網(wǎng)絡(luò)因素波動(dòng)也不超過100ms攒霹。所以，當(dāng)網(wǎng)站大部分資源的TTFB在50ms以下浆洗，少數(shù)在50~100ms中時(shí)催束，說(shuō)明已經(jīng)達(dá)到了比較理想的狀態(tài)。
# TTFB 過長(zhǎng)的原因
如上訴所說(shuō)伏社，TTFB受服務(wù)器及網(wǎng)速帶寬影響抠刺，網(wǎng)絡(luò)是最容易想到的因素之一
我們知道，對(duì)于動(dòng)態(tài)網(wǎng)頁(yè)來(lái)說(shuō)摘昌，服務(wù)器收到用戶打開一個(gè)頁(yè)面的請(qǐng)求時(shí)速妖，首先要在指定位置找到該頁(yè)面，然后分析該頁(yè)面依賴的資源聪黎，從數(shù)據(jù)庫(kù)中讀取頁(yè)面首次加載需要的數(shù)據(jù)罕容，再把這些數(shù)據(jù)傳入到模板中渲染，再返回給用戶稿饰。由于查詢數(shù)據(jù)和渲染模板需要一些時(shí)間锦秒，這個(gè)過程沒有完成之前，瀏覽器就會(huì)處理等待接收服務(wù)器響應(yīng)的狀態(tài)喉镰，如果沒處理好邏輯旅择，就直接影響到響應(yīng)性能。
如果網(wǎng)頁(yè)中保存了過多的cookie侣姆，這些cookie被頻繁的在服務(wù)器和客戶端之間傳輸砌左，也會(huì)造成響應(yīng)增長(zhǎng)問題。
?
# 優(yōu)化
使用緩存铺敌。
? 使用緩存可以降低非首次加載的大量請(qǐng)求汇歹，減低與服務(wù)端交互的頻次網(wǎng)絡(luò)問題
? 頻繁有用戶出現(xiàn)網(wǎng)絡(luò)問題，可以使用CDN偿凭，把頁(yè)面同步到離用戶比較近的CDN節(jié)點(diǎn)上产弹，減少時(shí)延Cookie問題
? 這就是你編程功底的體現(xiàn)了，是否合理使用cookie，也可以轉(zhuǎn)化部分cookie信息到header上痰哨，或者通過其他方式實(shí)現(xiàn)
?
白屏過長(zhǎng)
# 原因
- 網(wǎng)絡(luò)時(shí)延高
- 文件較大
- 腳本過大阻塞渲染
- 資源重復(fù)加載
- cookie影響
# 解決辦法
1. 網(wǎng)絡(luò)時(shí)延高
? 如上胶果，使用CDN部署在離用戶比較近的服務(wù)器節(jié)點(diǎn)上
2. 文件較大
? 遇到文件較大的情況，有
（1）用戶看到的頁(yè)面不能是你的源碼斤斧，現(xiàn)在vue項(xiàng)目或react項(xiàng)目基本都使用webpack打包早抠，能減少一定的體積。
（2）可以開啟Nginx的gzip功能撬讽。其工作原理就是：當(dāng)用戶請(qǐng)求資源時(shí)蕊连，其在服務(wù)器端進(jìn)行壓縮，客戶端執(zhí)行下載游昼，到本地后瀏覽器在執(zhí)行解壓甘苍。用一定的性能換下載時(shí)間。但機(jī)器的執(zhí)行速度和下載速度不是一個(gè)數(shù)量級(jí)烘豌。這里有一個(gè)gzip的配置案例
server {
listen 80;
server_name localohst;
gzip on; //開啟gzip壓縮
gzip_min_length 1k; //最小的長(zhǎng)度载庭，避免壓縮變大
gzip_buffers 4 16k; //設(shè)置緩存的單位，壓縮的時(shí)候要分配的緩沖區(qū)廊佩，緩沖區(qū)以16K為單位囚聚，往緩沖區(qū)寫入內(nèi)容的時(shí)候超過16K的時(shí)候，那么就會(huì)按照4倍的大小創(chuàng)建新的緩沖區(qū)标锄，也就是建立一個(gè)64K的存儲(chǔ)靡挥，這樣把壓縮的內(nèi)容倒進(jìn)去
gzip_comp_level 6; //壓縮級(jí)別1-9，比如level為1的話鸯绿，壓縮的比例比較低跋破，但是效率比較高，比如100K的文件壓縮之后還剩40K或者50K瓶蝴，但是處理的時(shí)間很短毒返；如果level為9的話，壓縮的效果最好舷手，效率會(huì)低一點(diǎn)拧簸，比如還是100K的文件，壓縮的會(huì)更小男窟，甚至20K 盆赤，這樣對(duì)cpu消耗會(huì)高點(diǎn)，一般設(shè)置中間差不多
gzip_type text/plain application/javascript text/css application/xml; //定義了壓縮的類型歉眷，默認(rèn)壓縮圖片牺六，text/html的壓縮無(wú)需指定，否則報(bào)錯(cuò)
location / {
root /data/apps/abc.com;
index index.html;
}
}
? 添加了gzip壓縮汗捡，如果在資源響應(yīng)頭里看到如下信息淑际，則表示添加成功
?
3. 渲染被腳本阻塞
? 檢查你的腳本文件之間的相關(guān)性，檢查是否有自執(zhí)行邏輯等對(duì)頁(yè)面渲染影響的因素，可以給<script>增加defer 或 async來(lái)改變腳本執(zhí)行的時(shí)機(jī)
4. 資源重復(fù)下載
? 如果不是必須春缕，避免使用no-store的去請(qǐng)求頭盗胀，使用緩存
