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)求頭盗胀,使用緩存