大家好,我是若川。之前送過三次Vue的書,現在又和博文視點合作再次爭取了幾本書,具體送書規則看文末。
很多人可能有耐心花費一兩個小時在一家火鍋店門口排隊,但幾乎沒有人愿意等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 等技術的,以及國內的和海外的,上一個場景的經驗很難對下一個場景直接發揮作用。
了解性能優化的讀者大多聽說過“雅虎三十五條優化軍規”,里面總結了性能優化需要遵循的一些規則,如合并請求等。但在大多數情況下,直接套用這些規則并不會為頁面帶來非常明顯的性能收益。
不過,其背后的分析思路總是相似的,能夠用來找到一套行之有效的方法幫助我們一步步接近性能目標。相比于記住正確但未必有效的具體規則,掌握這些通用的方法能讓我們在復雜的生產環境中找到正確的道路。
如果說分析方法是解決性能問題的指南針,那么對技術原理和系統的理解就是照明燈,只有方向但看不到腳下的路是無法前行的。
優化一個系統的性能也一樣,分析出這個系統在某個階段的性能存在問題,卻不理解系統背后的運行原理,就好像知道方向卻看不見路,只能摸黑前進。
因此,方法與技術原理結合才是性能優化的制勝法寶。
《前端性能揭秘》就以此為原則給了一套通用的解決方案,力求授人以漁而非授人以魚。
新書上市,京東限時下單立減50
內容簡介
本書把“度量”、“分析”和“實驗”部分放在開頭部分,把方法放在具體的技術細節之前,用案例和思考相結合的方式建立面對性能問題時的解決思路,有了方法的指導,我們在遇到具體問題的時候才能進行具體分析。
本書分為兩個部分:
如何系統地進行性能優化;
以性能為切面了解前端生態:網絡協議、瀏覽器、構建工具、跨端、CDN 等等。
雖然名為前端性能揭秘,但涉及領域遠遠不止前端。全書系統性從性能的度量、分析、優化、防腐,抽絲剝繭般地娓娓道來,既有大量理論基礎,也有扎實實戰佐證,值得一讀。
作者簡介
佘錦鑫(花名當軒)
畢業于江南大學理學院,阿里巴巴前前端技術專家,曾負責Alibaba.com海外版性能優化,講師、開源愛好者。
現就職于網易云音樂,對Web性能、跨端、可視化搭建等領域有較深入的理解。
精彩書評
當軒的這本書介紹了從“度量、分析、實驗”的方法論到前端生態有關性能的方方面面,是在深度實踐中沉淀出的方法論和知識。當軒曾是我在阿里巴巴的同事,資深開源開發人員,曾在第十五屆D2前端技術論壇擔任講師。希望這本書能夠給廣大讀者帶來醍醐灌頂式的幫助,誠意力薦。
——Node.js布道者,《狼書》作者 | 桑世龍(花名狼叔)
我認為所有的前端萌新都應該買此書,因為這本書細致地介紹了前端性能優化的方方面面。而那些前端老鳥們,我不信,書中每個知識點,你能做到和作者同等的了解程度。
——字節跳動巨量千川工程負責人 | 耿霄
性能是一個值得開發人員長期投入和研究的課題,涉及從底層網絡到上層框架的幾乎所有領域。隨著研究的逐步深入,開發人員會不斷地打開新世界的大門。
錦鑫跟我說他將這些年在性能優化領域的實踐和經驗寫成了書,我非常激動。之前我一直對一起戰斗過的日子沒有留下體系化的沉淀而感到遺憾,沒想到這就來了!在閱讀預覽版本后我發現,錦鑫還是一如既往,非常專業。等本書上市之后,我會立即將其加入團隊優先閱讀的列表。
——Alibaba.com買家基礎技術團隊負責人 | 太泥
性能優化是開發人員一直需要面對的課題,其價值和收益也在不斷被驗證和提升,涉及用戶留存、業務轉化、產品體驗和傳播等方方面面。
錦鑫是我共事多年的同事,這些年一直專注于性能優化方向,并取得了不錯的成績。
本書將理論與實際相結合,從性能度量、工具分析、優化解決等維度為性能優化帶來了新方法、新思路,相信對大部分前端開發人員而言非常有借鑒意義。
——網易云音樂音樂內容前端負責人 | 吳越棟
自Web出現以來,開發人員一直面對各種不同的挑戰,而性能則是最艱巨的挑戰之一。不止瀏覽器需要優化性能,以保證用戶訪問網站的流暢度;前端開發人員也需要優化性能,從而讓用戶在使用服務時可以獲得最佳的體驗。對性能進行優化要求開發人員不僅要對瀏覽器處理頁面的生命流程有高度認識,還要對數據收集分析有比較嚴謹的要求,只有具備了這兩項能力才能完美地突破性能瓶頸,為用戶提供極致的瀏覽體驗。本書作者對數據收集分析、各項性能指標的定義及優化方式有深刻的認識,并將其集結成書,開發人員可以充分利用以突破網站性能瓶頸,為服務帶來最大效益。
——Chrome產品解決方案工程師 | Palances Liao
工程的價值不僅體現良好的架構設計,在保證架構合理的同時對性能進行不斷深入的優化,還體現了工程師追求極致的精神。性能工作很多時候都是業務相關,需要Case by Case地解決問題。市面上一直沒有相應的書籍來總結,截至目前也只有“雅虎三十五條優化軍規”這樣的指導。
本書作者對其工作經驗進行了通用化的整理,希望能給對性能有所追求的讀者帶來一些思考和總結。另外,本書也是作者工作以來對性能攻堅的經驗總結。
——資深前端工程師 | 天翔Skyline
以性能為切面
深度理解前端生態
谷歌、字節、網易群星力薦
京東限時下單立減50
快快掃碼搶購吧!
發布:劉恩惠
審核:陳歆懿
文末福利
小伙伴們,可以在本文留言區留言為什么想要這本書~
抽獎規則:在我的公眾號結合留言內容隨機抽2位,獲得新書包郵送。
截止時間:10月17日(周一)晚8點,可能延后,以置頂留言為準。
其他幾本,在我的微信群和朋友圈等抽獎方式送出。
中獎小伙伴,我會聯系兌獎,一般來說,如果當天聯系不上視為作廢。也可以提前掃碼加我微信 ruochuan12 以防失聯。或者發送源碼兩字參與源碼共讀。