在過去的一段時間难咕，隊(duì)友在性能優(yōu)化方面做了很多工作翘紊。我現(xiàn)在在這里默默總結(jié)藐唠，希望能夠追上隊(duì)友的腳步~
此次優(yōu)化主要針對的是漫畫手機(jī)站。相比于PC端的網(wǎng)絡(luò)踪宠，移動端的網(wǎng)絡(luò)環(huán)境有著自己的特點(diǎn)：網(wǎng)絡(luò)不穩(wěn)定妈嘹，低網(wǎng)速的情況出現(xiàn)的比較頻繁。此次優(yōu)化的目的是為了讓用戶在低網(wǎng)速的情況下也能夠擁有更好的體驗(yàn)柬脸。
作為一個以漫畫為主題的網(wǎng)站毙驯，圖片一直是流量的大頭。如果能夠提高圖片的加載速度垦巴，那么頁面的性能就能夠有一個顯著的提升铭段。所以這次優(yōu)化的思路很簡單：在低網(wǎng)速的情況下選擇加載質(zhì)量更低的圖片。
那么稠项，如何去測量網(wǎng)速呢？
圖片的加載時機(jī)一定是越早越好，所以我們期望能拿到從瀏覽器發(fā)起請求到頁面開始加載前的那段時間的網(wǎng)絡(luò)狀況精刷。恰巧window.performance提供的API可以實(shí)現(xiàn)這個功能。window.performance上的每一個屬性都有一個默認(rèn)值0埂软。當(dāng)對應(yīng)的事件發(fā)生時勘畔，對應(yīng)屬性的值被賦予事件發(fā)生時的時間戳。為了測量網(wǎng)速炫七，我們考慮了以下事件：
-
fetchStart瀏覽器開始請求資源的事件 -
responseEnd響應(yīng)報文接收結(jié)束時的事件
注：其中有一個requestStart事件，看起來與fetchStart類似侠驯。其中fetchStart事件發(fā)生在DNS查找和建立TCP連接之前奕巍，而requestStart發(fā)生在建立TCP連接之后，開始發(fā)送請求報文的時候檩坚。
通過計(jì)算fetchStart和responseEnd的差值诅福，就能夠大致估算出用戶當(dāng)前的網(wǎng)絡(luò)狀況。
主要步驟
- 圖片存儲在NOS上剩檀，可以通過URL中的參數(shù)控制請求圖片的質(zhì)量
- 通過輪詢的方式監(jiān)聽
responseEnd事件是否發(fā)生沪猴，為當(dāng)前網(wǎng)絡(luò)狀況定性采章，快或慢。 - 采用懶加載的方式加載圖片悯舟。根據(jù)網(wǎng)絡(luò)狀況的不同，加載不同質(zhì)量的圖片奋救。
部分代碼
// 測量網(wǎng)絡(luò)狀況
if (typeof performance != 'undefined' && typeof performance.timing != 'undefined') {
window.detectPerformance = function () {
var performanceTiming = performance.timing;
if (performanceTiming.responseEnd == 0) {
setTimeout(window.detectPerformance, 20);
return;
}
var latency = performanceTiming.responseEnd - performanceTiming.fetchStart;
if (latency >= 550) {
window.SLOW_NETWORK = true;
}
}
window.detectPerformance();
}
寫在最后
這種優(yōu)化方案實(shí)現(xiàn)起來簡單尝艘，而且玩法不僅限于控制圖片質(zhì)量姿染。大家可以一起發(fā)掘出更多的玩法~
