
簡介
傳統上,舊有的效能研究專注在加速伺服端的東西。但在幾年前,Steve Souders 著名地開
啟了一個研究方向,指出主要的效能瓶頸發生在客戶端(client side),特別是在位元組資
料從伺服端被推送到客戶端的方式。「降低 HTTP 請求數」(Reduce HTTP requests)成
為了前端效能加速的座右銘,而在今天這個行動瀏覽器(通常運行在比寬頻連線還要慢上
十倍的網路上)充斥的世界中,這個考量更為重要了。
這些研究專注在延遲(latency)與頻寬(bandwidth),而這也是今日的效能研究之焦點
所在。你大概已經對標準的 HTTP 瀑布圖(waterfall chart,圖 28-1)感到很熟悉了。
然而,我們開始看到,前端的效能考量重點逐漸移到前端堆疊(frontend stack,HTML/
CSS/JS)的每個元件上了。特別是,有很多人把焦點放在 JavaScript 的效能上,這點可從
jsPerf(http://jsperf.com/)受歡迎的程度,以及 JavaScript profilers(JavaScript 效能評測
器)的嶄露頭角中看出。
頁面載入之後: UI 層
這些都很好沒錯,不過我們忽略了同等重要的部分:表現(presentation,即 UI)層。雖
然有些 UI 效能訣竅已經在社群中流傳了好幾年,它們通常是附帶的,尖端研究的主要焦
點還是放在頻寬與延遲上。舉例來說,考量到 CSS 時,我們會專注在減少 CSS 檔案的大
超越頻寬(Bandwidth ...