首先看一張?jiān)L問(wèn)TT貓首頁(yè)的截圖：
測(cè)試環(huán)境為谷歌瀏覽器，暫且不討論其它瀏覽器，截圖下方我們可以觀察到以下參數(shù)：
DOMContentLoaded：1.42s | Load：2.31s
以上參數(shù)是在CTRL+F5下測(cè)試的，也就是說(shuō)不存在瀏覽器本地緩存一說(shuō)，DOM渲染時(shí)間為1.42s，整個(gè)頁(yè)面load時(shí)間為2.31s。
在互聯(lián)網(wǎng)世界中有一個(gè)八秒原則就體現(xiàn)了這網(wǎng)站打開(kāi)速度的重要性。網(wǎng)絡(luò)用戶(hù)在訪(fǎng)問(wèn)網(wǎng)站的時(shí)候，如果時(shí)間太長(zhǎng)則會(huì)放棄對(duì)該網(wǎng)站的繼續(xù)訪(fǎng)問(wèn)；反之，如果網(wǎng)站頁(yè)面打開(kāi)時(shí)間短，那么你的網(wǎng)站將會(huì)獲得用戶(hù)的喜歡。天貓打開(kāi)的速度為1-2s左右，這樣的速度都是被用戶(hù)認(rèn)可的理想速度；如果在3~5秒，那么這個(gè)時(shí)間就是不是太理想了；如果高于8秒那么用戶(hù)就會(huì)直接關(guān)閉網(wǎng)頁(yè)，不再訪(fǎng)問(wèn)。
如何優(yōu)化
- HTTP1.0時(shí)代，合并靜態(tài)文件(JS、CSS)，常見(jiàn)的手段比如Nginx的第三方模塊nginx-http-concat，減少請(qǐng)求加速訪(fǎng)問(wèn)。盡管TT貓使用了CDN并且開(kāi)啟了HTTP2.0，如果你仔細(xì)觀察TT貓的Elements，會(huì)發(fā)現(xiàn)一些靜態(tài)請(qǐng)求還是使用了合并請(qǐng)求。
靜態(tài)請(qǐng)求文件(JS、CSS)，在沒(méi)有CDN的情況下建議使用單獨(dú)的域名請(qǐng)求訪(fǎng)問(wèn)。因?yàn)樵谕粫r(shí)間針對(duì)同一域名下的請(qǐng)求有一定數(shù)量限制，超過(guò)限制數(shù)目的請(qǐng)求會(huì)被阻塞。多個(gè)域名會(huì)加大請(qǐng)求的并發(fā)量。因?yàn)樨埓罅渴褂昧薈DN，這里就不能夠展示了，具體可以F12查看博客園的CSS、JS以及圖片的引用。
異步加載JS，使用HTML 5 屬性 async，當(dāng)頁(yè)面繼續(xù)進(jìn)行解析時(shí)，腳本將被執(zhí)行，async 屬性?xún)H適用于外部腳本（只有在使用 src 屬性時(shí)）。
使用CSS控制背景圖的方式，比如我們把常見(jiàn)的圖標(biāo)放置在一張圖片上，CSS控制顯示，減少請(qǐng)求數(shù)量。
壓縮靜態(tài)文件(JS、CSS)，減少網(wǎng)絡(luò)傳輸，本地壓縮方式如UglifyJS 、YUI compressor以及JsMin，服務(wù)端壓縮手段如Nginx的GIZP。
圖片延時(shí)加載，對(duì)于首頁(yè)滿(mǎn)屏的圖片TT貓應(yīng)該是采用滾動(dòng)加載，使用延遲加載在可提高網(wǎng)頁(yè)下載速度。在某些情況下，它也能幫助減輕服務(wù)器負(fù)載。
盡量少的使用cookie存儲(chǔ)大量數(shù)據(jù)，建議使用本地存儲(chǔ)代替，減少不必要的數(shù)據(jù)請(qǐng)求。
JS引入方式，建議非預(yù)加載的JS在網(wǎng)頁(yè)底部引入，瀏覽器渲染網(wǎng)頁(yè)是從上往下，頁(yè)面是用戶(hù)能看到的也能直觀感受到的，而js代碼是用戶(hù)看不到的，屬于“幕后”的東西， 把“幕后”的東西放到最下面。
CDN加速，其基本思路是盡可能避開(kāi)互聯(lián)網(wǎng)上有可能影響數(shù)據(jù)傳輸速度和穩(wěn)定性的瓶頸和環(huán)節(jié)，使內(nèi)容傳輸?shù)母?、更穩(wěn)定。更有打不死CDN ，無(wú)攻擊時(shí)使用加速節(jié)點(diǎn)，有攻擊時(shí)自動(dòng)切換高防節(jié)點(diǎn)，加速與防護(hù)同時(shí)享有。
開(kāi)啟HTTPS安全訪(fǎng)問(wèn)，按理說(shuō)應(yīng)該會(huì)影響訪(fǎng)問(wèn)速度，但是HTTP2.0時(shí)代這個(gè)事情不存在了，新特性多路復(fù)用、壓縮頭信息以及二進(jìn)制格式傳輸數(shù)據(jù)帶給飛一樣的感覺(jué)。
最后說(shuō)一下帶寬，再牛逼的優(yōu)化沒(méi)有基礎(chǔ)保障也是白扯，帶寬的作用也就不言而喻了。就好比六車(chē)道和單車(chē)道的公路，單位時(shí)間內(nèi)的車(chē)流量就能很好的襯托出老司機(jī)此時(shí)此刻的心情。
當(dāng)然說(shuō)到車(chē)，首先你得有個(gè)好車(chē)，即使公路再寬，車(chē)不中也不行，就好比2017年了你安裝的還是128KB的帶寬，即使TT貓25G的全系帶寬也救不了你。
知識(shí)補(bǔ)充
部分同學(xué)可能會(huì)好奇，DOMContentLoaded和load到底有什么區(qū)別，首先我們先看下DOM文檔加載的步驟
- 解析HTML結(jié)構(gòu)。
- 加載外部腳本和樣式表文件。
- 解析并執(zhí)行腳本代碼。
- DOM樹(shù)構(gòu)建完成。
- 加載圖片等外部文件。
- 頁(yè)面加載完畢。
DOMContentLoaded是在DOM樹(shù)構(gòu)建完成之后觸發(fā)的，而load是在頁(yè)面加載完畢觸發(fā)的，所有l(wèi)oad的時(shí)間要比DOMContentLoaded的時(shí)間稍微長(zhǎng)一些。
//DOMContentLoaded 事件，不需要等待圖片等其他資源加載完成
$(document).ready(function() {
// ...代碼...
});
//load-頁(yè)面上所有的資源（圖片，音頻，視頻等）被加載以后才會(huì)觸發(fā)load事件
$(document).load(function() {
// ...代碼...
});
所以一般情況下，我們初始化JS的時(shí)候沒(méi)有特殊要求使用ready即可。
如果大家打開(kāi)瀏覽器F12自己測(cè)試，截圖中的前兩個(gè)參數(shù)是一直在變化的，其實(shí)TT貓?jiān)诤笈_(tái)自己默默的加載了許多資源文件，只是用戶(hù)察覺(jué)不到罷了。
推薦閱讀
三分鐘讀懂TT貓分布式、微服務(wù)和集群之路
三分鐘深入TT貓之故障轉(zhuǎn)移
Nginx學(xué)習(xí)之緩存配置
Nginx學(xué)習(xí)之HTTP/2.0配置
Nginx學(xué)習(xí)之合并請(qǐng)求連接加速網(wǎng)站訪(fǎng)問(wèn)
阿里云Redis加速Discuz論壇訪(fǎng)問(wèn)
阿里云Redis加速Typecho博客訪(fǎng)問(wèn)
