首屏加載緩慢優(yōu)化

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)。

靜態(tài)資源
動(dòng)態(tài)資源

# TTFB 過長(zhǎng)的原因

  1. 如上訴所說(shuō)伏社,TTFB受服務(wù)器及網(wǎng)速帶寬影響抠刺,網(wǎng)絡(luò)是最容易想到的因素之一

  2. 我們知道,對(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)性能。

  3. 如果網(wǎng)頁(yè)中保存了過多的cookie侣姆,這些cookie被頻繁的在服務(wù)器和客戶端之間傳輸砌左,也會(huì)造成響應(yīng)增長(zhǎng)問題。
    ?

# 優(yōu)化

  1. 使用緩存铺敌。
    ? 使用緩存可以降低非首次加載的大量請(qǐng)求汇歹,減低與服務(wù)端交互的頻次

  2. 網(wǎng)絡(luò)問題
    ? 頻繁有用戶出現(xiàn)網(wǎng)絡(luò)問題,可以使用CDN偿凭,把頁(yè)面同步到離用戶比較近的CDN節(jié)點(diǎn)上产弹,減少時(shí)延

  3. Cookie問題
    ? 這就是你編程功底的體現(xiàn)了,是否合理使用cookie,也可以轉(zhuǎn)化部分cookie信息到header上痰哨,或者通過其他方式實(shí)現(xiàn)


?

白屏過長(zhǎng)

# 原因
  1. 網(wǎng)絡(luò)時(shí)延高
  2. 文件較大
  3. 腳本過大阻塞渲染
  4. 資源重復(fù)加載
  5. 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>增加deferasync來(lái)改變腳本執(zhí)行的時(shí)機(jī)

4. 資源重復(fù)下載

? 如果不是必須春缕,避免使用no-store的去請(qǐng)求頭盗胀,使用緩存

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市锄贼,隨后出現(xiàn)的幾起案子票灰,更是在濱河造成了極大的恐慌,老刑警劉巖宅荤,帶你破解...
    沈念sama閱讀 222,681評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件屑迂,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡膘侮,警方通過查閱死者的電腦和手機(jī)屈糊,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門的榛,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)琼了,“玉大人,你說(shuō)我怎么就攤上這事夫晌〉裥剑” “怎么了?”我有些...
    開封第一講書人閱讀 169,421評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵晓淀,是天一觀的道長(zhǎng)所袁。 經(jīng)常有香客問我,道長(zhǎng)凶掰,這世上最難降的妖魔是什么燥爷? 我笑而不...
    開封第一講書人閱讀 60,114評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮懦窘,結(jié)果婚禮上前翎,老公的妹妹穿的比我還像新娘。我一直安慰自己畅涂,他們只是感情好港华,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評(píng)論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著午衰,像睡著了一般立宜。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上臊岸,一...
    開封第一講書人閱讀 52,713評(píng)論 1 312
  • 那天橙数,我揣著相機(jī)與錄音,去河邊找鬼帅戒。 笑死商模,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播施流,決...
    沈念sama閱讀 41,170評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼响疚,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了瞪醋?” 一聲冷哼從身側(cè)響起忿晕,我...
    開封第一講書人閱讀 40,116評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎银受,沒想到半個(gè)月后践盼,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,651評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡宾巍,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評(píng)論 3 342
  • 正文 我和宋清朗相戀三年咕幻,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片顶霞。...
    茶點(diǎn)故事閱讀 40,865評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡肄程,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出选浑,到底是詐尸還是另有隱情蓝厌,我是刑警寧澤,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布古徒,位于F島的核電站拓提,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏隧膘。R本人自食惡果不足惜代态,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望疹吃。 院中可真熱鬧蹦疑,春花似錦、人聲如沸互墓。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)篡撵。三九已至判莉,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間育谬,已是汗流浹背券盅。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留膛檀,地道東北人锰镀。 一個(gè)月前我還...
    沈念sama閱讀 49,299評(píng)論 3 379
  • 正文 我出身青樓娘侍,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親泳炉。 傳聞我的和親對(duì)象是個(gè)殘疾皇子憾筏,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容