前端面試時經常會問的一個問題,「作了哪些性能的優化,取得了什麼效果」。性能確實是咱們老生常談的話題,要作好性能優化,首先要準確地評價一個系統性能,本文旨在列舉關於性能的一些常見的謬論。(部分論點來自 Google I/O 2017 大會)php
這是面試中我聽到最多的陳述,甚至很多文章的也是相似的標題黨,就差加上「震驚了」。這樣陳述最大的問題並不在於不真實,而是不能徹底反映事實的所有信息。就像說我和李嘉誠的平均財富也能富可敵國。前端
統計學告訴咱們,不一樣的描述性統計量都只能描述分佈的一個側面,沒辦法使用單獨一個甚至幾個統計量就能把整體的分佈描述清楚。面試
實際上,加載時間會由於用戶不一樣而有很大的變化,具體取決於用戶的設備功能以及網絡情況。以單個數字的形式呈現加載時間忽略了遭遇過長加載時間的用戶。要全面準確地反映加載性能的惟一方法是使用如下分佈直方圖來展現:性能優化
之因此說「我網站的加載時間爲 X 秒」是謬論的另外一個緣由是,加載性能是一種單一指標沒法全面反映的用戶體驗。在加載過程當中,有多個時刻會影響到用戶對速度的感知,若是隻關注其中某個時刻,就可能會遺漏其他時間內用戶感覺到的不良體驗。網絡
若是用戶能夠看到頁面上的連接但沒法點擊,或者能夠看到文本框但沒法在其中輸入內容,他們可能就不會關心頁面渲染的速度有多快。異步
load 時間,和 DOMContentLoaded 時間曾一度是開發者關注的傳統性能指標。甚至在9102年的今天,仍然很多開發者只關注着這兩個指標。主要緣由大概是由於這兩個指標概念簡單,並且很是容易獲取。性能
在遙遠的過去,頁面交互簡單( jQuery 就是一把梭),由服務端渲染(主要指 php 和 Java ),加載性能還勉強能用 load 時間,和 DOMContentLoaded 時間來描述。優化
然而在今天,大量頁面使用異步渲染,或者說客戶端渲染。繼續用這兩個指標來描述加載性能是很是不可靠的,由於應用是否加載完成、是否可用,已經和 load 時間沒有必然的對應關係。動畫
事實上,不僅限於加載期間,在整個應用的生命週期都有可能發生性能不佳的狀況。 應用沒法迅速響應點擊操做,以及沒法平滑滾動或產生動畫效果的問題,與加載緩慢同樣都會致使糟糕的用戶體驗。用戶關心的是整體體驗。網站
例如,假設某網站針對初始渲染進行過優化(主要是 First Paint 和 First Contentful Paint),使用戶在較短的時間內能看見頁面在加載。然而在此以後,該網站須要加載一個花費數秒來解析和執行的大 JS 文件,只有在 JavaScript 運行以後,頁面上的內容纔可供交互。
所以,咱們不該該只使用一個指標來衡量加載,而應該衡量整個體驗過程當中可能影響用戶對加載感知的每一個時刻。
下一篇再講一下以用戶體驗爲中心應該關注哪些性能指標。