天天看點

别想了,這本前端性能秘籍,你鐵定需要!

很多人可能有耐心花費一兩個小時在一家火鍋店門口排隊,但幾乎沒有人願意等30s去加載一個短視訊。

事實上,對于大多數的 App 或網站來說,别說是30s,即使是3s也足以讓大量使用者放棄等待轉而去做其他的事情。

别想了,這本前端性能秘籍,你鐵定需要!

Google 發現,如果頁面加載時間超過3s,53%的移動網站通路活動将難以為繼。

性能對于開發人員來說是一個經久不衰的話題,也是使用者體驗的重要因素。

有人可能會問:

  • 如今計算機和手機的性能都在飛速發展,性能優化還重要嗎?
  • 5G時代已經來臨,無處不在的高速網絡是否已經讓我們不需要再那麼在意性能問題?

這就要從 Web 領域一大性能原理——安迪-比爾定律說起。

1

安迪-比爾定律

安迪-比爾定律

安迪-比爾定律源于“Andy gives, Bill takes away.”。

Andy 指的是 Intel 原 CEO 安迪·格魯夫,Bill 則是 Microsoft 原 CEO 比爾·蓋茨。

這句話的意思是,Intel 一旦向市場推廣了一種新型晶片,Microsoft 就會及時更新自己的軟體産品,以比對新型晶片的高性能。

硬體提高的性能,很快就被軟體消耗掉了。

别想了,這本前端性能秘籍,你鐵定需要!

對于 Web 領域來說,網絡和終端裝置的性能确實在飛速發展。然而,幾十年來 Web 技術也變得越來越複雜,在網絡上傳輸的不再是一個簡單的頁面。

讓我們回到網際網路(World Wide Web)誕生的 20 世紀 90 年代,第一個網頁浏覽器WorldWideWeb 僅支援 HTML 格式的圖檔、文字和超連結。

經過幾十年的發展,在網絡上傳輸的内容越來越豐富,使用浏覽器打開的是高清流媒體、實時網絡直播,甚至是直接在浏覽器中運作的專業協同應用。

可以預見的是,越來越多原來隻能在桌面平台上運作的大型軟體也出現在了 Web 平台上,以借助 Web 平台易于傳播、跨平台等特性,充分發揮協作互通的優勢。

從 2011 年到 2020 年,桌面端和移動端的頁面傳輸位元組數(加載完成一個頁面需要傳輸的資料量)逐年上漲,分别約增加了 329%和 1178%。

随着網絡基礎建設的不斷更新換代,更多原來受限于基礎設施無法廣泛滿足的需求大量湧現。例如,近幾年短視訊的興起,很大程度上就是因為大多數使用者的網絡能夠在可以接受的時間内加載完視訊。

這就是安迪-比爾定律,可以想象,随着未來網絡狀況的進一步改善,又會有新的媒體和應用形式消耗提升的網絡傳輸能力。

盡管提供硬體和軟體的可能不再是 Intel 和 Microsoft,但隻要人們對于新功能和體驗的追求一直存在,性能優化就是經久不衰的話題。

2

性能優化的魅力

很多人都聽過斯坦門茨畫一條線 1 萬美元的故事,故事是這樣的:

美國福特公司曾有一台電機出現故障,導緻整個工廠中的房間都不能運轉。福特公司請來很多專家檢查,就是找不到問題在哪裡。于是請來斯坦門茨,斯坦門茨在電機旁聚精會神地聽了 3 天,又要了梯子,爬上爬下忙了很久。最後他在電機的一個部位用粉筆畫了一條線,寫下了“這裡的線圈多繞了 16 圈”。福特公司按圖索骥解決了故障。

在平均月薪為 5 美元的當時,斯坦門茨索要了 1 萬美元的酬勞:畫一條線,1 美元;知道在哪兒畫線,9999 美元。

如果說工程師最大的快樂來自創造,那麼第二大的快樂來自對精密系統的了解。從中不僅可以領略前人解決問題的設計方案所蘊含的智慧,還能享受抽絲剝繭最終精準找到問題的成就感。

性能優化就是一個典型場景,要做的是了解複雜系統并從中找到性能問題的關鍵所在。有時甚至能根據問題的表現和對系統的了解,在沒有直接發現具體問題時就推測出現問題的真正原因,整個過程充滿了預言的魔力。

3

性能優化 = 分析方法 + 技術原理

不同場景的性能優化經驗不同,面向計算機的和面向手機的、純 Web 技術的和 Weex/React Native 等技術的,以及國内的和海外的,上一個場景的經驗很難對下一個場景直接發揮作用。

了解性能優化的讀者大多聽說過“雅虎三十五條優化軍規”,裡面總結了性能優化需要遵循的一些規則,如合并請求等。但在大多數情況下,直接套用這些規則并不會為頁面帶來非常明顯的性能收益。

不過,其背後的分析思路總是相似的,能夠用來找到一套行之有效的方法幫助我們一步步接近性能目标。相比于記住正确但未必有效的具體規則,掌握這些通用的方法能讓我們在複雜的生産環境中找到正确的道路。

如果說分析方法是解決性能問題的指南針,那麼對技術原理和系統的了解就是照明燈,隻有方向但看不到腳下的路是無法前行的。

優化一個系統的性能也一樣,分析出這個系統在某個階段的性能存在問題,卻不了解系統背後的運作原理,就好像知道方向卻看不見路,隻能摸黑前進。

是以,方法與技術原理結合才是性能優化的制勝法寶。

《前端性能揭秘》就以此為原則給了一套通用的解決方案,力求授人以漁而非授人以魚。

别想了,這本前端性能秘籍,你鐵定需要!

内容簡介

本書把“度量”、“分析”和“實驗”部分放在開頭部分,把方法放在具體的技術細節之前,用案例和思考相結合的方式建立面對性能問題時的解決思路,有了方法的指導,我們在遇到具體問題的時候才能進行具體分析。

本書分為兩個部分:

  • 如何系統地進行性能優化;
  • 以性能為切面了解前端生态:網絡協定、浏覽器、建構工具、跨端、CDN 等等。

雖然名為前端性能揭秘,但涉及領域遠遠不止前端。全書系統性從性能的度量、分析、優化、防腐,抽絲剝繭般地娓娓道來,既有大量理論基礎,也有紮實實戰佐證,值得一讀。

别想了,這本前端性能秘籍,你鐵定需要!

作者簡介

别想了,這本前端性能秘籍,你鐵定需要!

佘錦鑫(花名當軒)

畢業于江南大學理學院,阿裡巴巴前前端技術專家,曾負責Alibaba.com海外版性能優化,講師、開源愛好者。

現就職于網易雲音樂,對Web性能、跨端、可視化搭建等領域有較深入的了解。