效能優化常見謬論——面試別再這樣答了

samciu發表於2019-04-02

引言

前端面試時常常會問的一個問題,“做了哪些效能的優化,取得了什麼效果”。效能確實是我們老生常談的話題,要做好效能優化,首先要準確地評價一個系統效能,本文旨在列舉關於效能的一些常見的謬論。(部分論點來自 Google I/O 2017 大會)

謬論一:“經過我的優化,我的網站載入時間為 X 秒”

這是面試中我聽到最多的陳述,甚至不少文章的也是類似的標題黨,就差加上“震驚了”。這樣陳述最大的問題並不在於不真實,而是不能完全反映事實的全部資訊。就像說我和李嘉誠的平均財富也能富可敵國。

統計學告訴我們,不同的描述性統計量都只能描述分佈的一個側面,沒辦法使用單獨一個甚至幾個統計量就能把總體的分佈描述清楚。

實際上,載入時間會因為使用者不同而有很大的變化,具體取決於使用者的裝置功能以及網路狀況。以單個數字的形式呈現載入時間忽略了遭遇過長載入時間的使用者。要全面準確地反映載入效能的唯一方法是使用以下分佈直方圖來展示:

效能優化常見謬論——面試別再這樣答了

之所以說“我網站的載入時間為 X 秒”是謬論的另一個原因是,載入效能是一種單一指標無法全面反映的使用者體驗。在載入過程中,有多個時刻會影響到使用者對速度的感知,如果只關注其中某個時刻,就可能會遺漏其餘時間內使用者感受到的不良體驗。

如果使用者可以看到頁面上的連結但無法點選,或者可以看到文字框但無法在其中輸入內容,他們可能就不會關心頁面渲染的速度有多快。

謬論二:效能只是 load 時間或者 DOMContentLoaded 時間的問題

load 時間,和 DOMContentLoaded 時間曾一度是開發者關注的傳統效能指標。甚至在9102年的今天,仍然不少開發者只關注著這兩個指標。主要原因大概是因為這兩個指標概念簡單,而且非常容易獲取。

在遙遠的過去,頁面互動簡單( jQuery 就是一把梭),由服務端渲染(主要指 php 和 Java ),載入效能還勉強能用 load 時間,和 DOMContentLoaded 時間來描述。

然而在今天,大量頁面使用非同步渲染,或者說客戶端渲染。繼續用這兩個指標來描述載入效能是非常不可靠的,因為應用是否載入完成、是否可用,已經和 load 時間沒有必然的對應關係。

事實上,不只限於載入期間,在整個應用的生命週期都有可能發生效能不佳的情況。 應用無法迅速響應點選操作,以及無法平滑滾動或產生動畫效果的問題,與載入緩慢一樣都會導致糟糕的使用者體驗。使用者關心的是總體體驗。

例如,假設某網站針對初始渲染進行過優化(主要是 First Paint 和 First Contentful Paint),使使用者在較短的時間內能看見頁面在載入。然而在此之後,該網站需要載入一個花費數秒來解析和執行的大 JS 檔案,只有在 JavaScript 執行之後,頁面上的內容才可供互動。

因此,我們不應該只使用一個指標來衡量載入,而應該衡量整個體驗過程中可能影響使用者對載入感知的每個時刻。

結語

下一篇再講一下以使用者體驗為中心應該關注哪些效能指標。

相關文章