針對低網速的性能優化

此文已由做者吳維偉受權網易雲社區發佈。

歡迎訪問網易雲社區，瞭解更多網易技術產品運營經驗。

在過去的一段時間，隊友在性能優化方面作了不少工做。我如今在這裏默默總結，但願可以追上隊友的腳步~ 這次優化主要針對的是漫畫手機站。相比於PC端的網絡，移動端的網絡環境有着本身的特色：網絡不穩定，低網速的狀況出現的比較頻繁。這次優化的目的是爲了讓用戶在低網速的狀況下也可以擁有更好的體驗。

做爲一個以漫畫爲主題的網站，圖片一直是流量的大頭。若是可以提升圖片的加載速度，那麼頁面的性能就可以有一個顯著的提高。因此此次優化的思路很簡單：在低網速的狀況下選擇加載質量更低的圖片。

那麼，如何去測量網速呢？

圖片的加載時機必定是越早越好，因此咱們指望能拿到從瀏覽器發起請求到頁面開始加載前的那段時間的網絡情況。恰巧window.performance提供的API能夠實現這個功能。window.performance上的每個屬性都有一個默認值0。當對應的事件發生時，對應屬性的值被賦予事件發生時的時間戳。爲了測量網速，咱們考慮瞭如下事件：

• fetchStart 瀏覽器開始請求資源的事件

• responseEnd 響應報文接收結束時的事件

注：其中有一個requestStart事件，看起來與fetchStart相似。其中fetchStart事件發生在DNS查找和創建TCP鏈接以前，而requestStart發生在創建TCP鏈接以後，開始發送請求報文的時候。

經過計算fetchStart和responseEnd的差值，就可以大體估算出用戶當前的網絡情況。

主要步驟

• 圖片存儲在NOS上，能夠經過URL中的參數控制請求圖片的質量

• 經過輪詢的方式監聽responseEnd事件是否發生，爲當前網絡情況定性，快或慢。

• 採用懶加載的方式加載圖片。根據網絡情況的不一樣，加載不一樣質量的圖片。

部分代碼

// 測量網絡情況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();
}

寫在最後

這種優化方案實現起來簡單，並且玩法不只限於控制圖片質量。你們能夠一塊兒發掘出更多的玩法~

網易雲免費體驗館，0成本體驗20+款雲產品！ 

更多網易技術、產品、運營經驗分享請點擊。

相關文章：
【推薦】 深刻淺出「跨視圖粒度計算」--三、EXCLUDE表達式