干貨 | 帶你玩轉前端性能優化!【留言送書】

fb2b3d7a97ef46ec679bd6da5fa8021d.png

大家好,我是若川之前送過三次Vue的書,現在又和博文視點合作再次爭取了幾本書,具體送書規則看文末。

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

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

a12114a310043b9f173a278983126468.png

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

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

有人可能會問:

  • 如今計算機和手機的性能都在飛速發展,性能優化還重要嗎?

  • 5G時代已經來臨,無處不在的高速網絡是否已經讓我們不需要再那么在意性能問題?

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

1

安迪-比爾定律

安迪-比爾定律

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

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

這句話的意思是,Intel 一旦向市場推廣了一種新型芯片,Microsoft 就會及時升級自己的軟件產品,以匹配新型芯片的高性能。

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

9924f12327dfec6a32eaa1c119f1464c.png

對于 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 等技術的,以及國內的和海外的,上一個場景的經驗很難對下一個場景直接發揮作用。

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

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

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

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

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

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

d28f189c746e393a3a28a2606e5f1826.png

新書上市,京東限時下單立減50

內容簡介

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

本書分為兩個部分:

  • 如何系統地進行性能優化;

  • 以性能為切面了解前端生態:網絡協議、瀏覽器、構建工具、跨端、CDN 等等。

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

4de9ea105c85fc797abf61f0066bca75.jpeg

作者簡介

c1f89c3e4994e7271496ac66330a6081.png

佘錦鑫(花名當軒)

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

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

精彩書評

當軒的這本書介紹了從“度量、分析、實驗”的方法論到前端生態有關性能的方方面面,是在深度實踐中沉淀出的方法論和知識。當軒曾是我在阿里巴巴的同事,資深開源開發人員,曾在第十五屆D2前端技術論壇擔任講師。希望這本書能夠給廣大讀者帶來醍醐灌頂式的幫助,誠意力薦。

——Node.js布道者,《狼書》作者 | 桑世龍(花名狼叔)

我認為所有的前端萌新都應該買此書,因為這本書細致地介紹了前端性能優化的方方面面。而那些前端老鳥們,我不信,書中每個知識點,你能做到和作者同等的了解程度。

——字節跳動巨量千川工程負責人 | 耿霄

性能是一個值得開發人員長期投入和研究的課題,涉及從底層網絡到上層框架的幾乎所有領域。隨著研究的逐步深入,開發人員會不斷地打開新世界的大門。

錦鑫跟我說他將這些年在性能優化領域的實踐和經驗寫成了書,我非常激動。之前我一直對一起戰斗過的日子沒有留下體系化的沉淀而感到遺憾,沒想到這就來了!在閱讀預覽版本后我發現,錦鑫還是一如既往,非常專業。等本書上市之后,我會立即將其加入團隊優先閱讀的列表。

——Alibaba.com買家基礎技術團隊負責人 | 太泥

性能優化是開發人員一直需要面對的課題,其價值和收益也在不斷被驗證和提升,涉及用戶留存、業務轉化、產品體驗和傳播等方方面面。

錦鑫是我共事多年的同事,這些年一直專注于性能優化方向,并取得了不錯的成績。

本書將理論與實際相結合,從性能度量、工具分析、優化解決等維度為性能優化帶來了新方法、新思路,相信對大部分前端開發人員而言非常有借鑒意義。

——網易云音樂音樂內容前端負責人 | 吳越棟

自Web出現以來,開發人員一直面對各種不同的挑戰,而性能則是最艱巨的挑戰之一。不止瀏覽器需要優化性能,以保證用戶訪問網站的流暢度;前端開發人員也需要優化性能,從而讓用戶在使用服務時可以獲得最佳的體驗。對性能進行優化要求開發人員不僅要對瀏覽器處理頁面的生命流程有高度認識,還要對數據收集分析有比較嚴謹的要求,只有具備了這兩項能力才能完美地突破性能瓶頸,為用戶提供極致的瀏覽體驗。本書作者對數據收集分析、各項性能指標的定義及優化方式有深刻的認識,并將其集結成書,開發人員可以充分利用以突破網站性能瓶頸,為服務帶來最大效益。

——Chrome產品解決方案工程師 | Palances Liao

工程的價值不僅體現良好的架構設計,在保證架構合理的同時對性能進行不斷深入的優化,還體現了工程師追求極致的精神。性能工作很多時候都是業務相關,需要Case by Case地解決問題。市面上一直沒有相應的書籍來總結,截至目前也只有“雅虎三十五條優化軍規”這樣的指導。

本書作者對其工作經驗進行了通用化的整理,希望能給對性能有所追求的讀者帶來一些思考和總結。另外,本書也是作者工作以來對性能攻堅的經驗總結。

——資深前端工程師 | 天翔Skyline

以性能為切面

深度理解前端生態

谷歌、字節、網易群星力薦

121edbcb6fd4b0eb0da8244118eadf5f.png

京東限時下單立減50

快快掃碼搶購吧!

發布:劉恩惠

審核:陳歆懿

a5f31d1a6fb040ca778a36af82e16d90.jpeg

文末福利

小伙伴們,可以在本文留言區留言為什么想要這本書~

抽獎規則:在我的公眾號結合留言內容隨機抽2位獲得新書包郵送。

截止時間:10月17日(周一)晚8點,可能延后,以置頂留言為準。

其他幾本,在我的微信群和朋友圈等抽獎方式送出。

中獎小伙伴,我會聯系兌獎,一般來說,如果當天聯系不上視為作廢。也可以提前掃碼加我微信 ruochuan12 以防失聯。或者發送源碼兩字參與源碼共讀。

98ddc2570c73c2a447980c423175afb8.jpeg

079869975ef10b5ac540ce79caac16f9.gif

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/274520.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/274520.shtml
英文地址,請注明出處:http://en.pswp.cn/news/274520.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

css3學習手記

完全匹配屬性選擇器:[idvalue] 包含匹配選擇器:[id*value] 首字符匹配選擇器:[id^value] 尾字符匹配選擇器:[id$value] 陰影:box-shadow:3px 2px 1px #000 /*其他瀏覽器*/ -webkit-box-shadow:3px 2px 1px #…

如何進入游戲行業_進入設計行業

如何進入游戲行業We’re living in some weird-ass times. One of the unfortunate results of a global pandemic is loss of jobs and financial security. While people continue to deal with this, the prospect of entering a new field — especially one that’s sligh…

據說99%的人不知道 vue-devtools 還能直接打開對應組件文件?

大家好,我是若川。據說 99% 的人不知道 vue-devtools 還能直接打開對應組件文件?本文原理揭秘曾經寫過以上這篇文章, 也是源碼共讀中的第一期(點擊文末閱讀原文直達)。這個功能如下圖所示。歡迎大家來投票,你的投票很重要。如果不…

ux設計中的各種地圖_UX設計中的格式塔原理

ux設計中的各種地圖Gestalt Theory is the theory of visual perception and how our brain pieces together reality. The theory sheds light on how cognition factors into the way viewers read a piece of design. In the German language “Gestalt” means form or sha…

【ASP】簡單Url編碼和Url解碼實例

描述:在數據傳輸或讀取時,有些敏感數據不宜顯示傳輸,特別涉及機密或財務信息,因此使用編碼技術尤為重要。 簡單實例: URL編碼代碼: protected void Button1_Click(object sender, EventArgs e) { …

JetBrains下一代IDE:Fleet 公共預覽版發布

大家好,我是若川。持續組織了近一年的源碼共讀活動,感興趣的可以 點此掃碼加我微信 ruochuan12 參與,每周大家一起學習200行左右的源碼,共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》 包含20余篇源碼文章。歷史面試系…

善用工具_如何善用色彩心理學

善用工具There’s a problem with my movement. Most of us in the profession of trying to change the world have little skills or training in the actual craft of influencing human beings to do stuff — especially stuff that is new to them such as composting, p…

看源碼的第一步,我猜很多人搞錯了~

大家好,我是若川。今天在江西人的前端群里,有個小伙伴問,vueuse 的 vitepress (也就是官方文檔倉庫)怎么搭建的,怎么都沒有 index.json(引用的一個文件)。本文簡單記錄下流程&#x…

序列化說明(轉)

序列化是用來通信的,服務端把數據序列化,發送到客戶端,客戶端把接收到的數據反序列化后對數據進行操作,完成后再序列化發送到服務端,服務端再反序列化數據后對數據進行操作。說白了,數據需要序列化以后才能…

1.1編寫目的_1.目的

1.1編寫目的A friend of mine recently founded Secta Leagues. A company that organises sports leagues for working professionals, where companies play sports against one another in the same industry. The vision is to provide an app that allows interested comp…

Web 應用架構的下一個轉變

Web 技術大概 25 年前開始萌芽,HTTP、HTML、CSS 和 JS 都是在九十年代中期首次被標準化的。直到如今,Web 演變成一個無處不在的應用平臺。隨著 Web 的發展,Web 應用程序的開發架構也在不斷發展。現在有許多用于構建 Web 應用程序的核心架構&a…

生命在于運動?

我有兩個朋友,一個喜歡運動,經常打球騎單車,一個就喜歡宅在家里,最多大家玩的時候去旁觀。兩人常常爭執,一個說:生命在于運動,你看我多健康!一個說:生命在于靜止&#xf…

C++ 學習筆記----類篇

(一)基本概念: 1、類與對象: 1 //聲明類 2 class Human { 3 4 //... Data members and methods go here 5 6 }; 7 8 //定義對象 9 Human human; 2、通常用class聲明類,struct也可以,只不過在信…

ux和ui_設計社交餐廳策展應用程序— UX / UI案例研究

ux和uiSabor, which translates from “taste” or “flavor” in Spanish, is a concept for an iOS app designed to provide users with honest, reliable and relatable restaurant recommendations from friends and family. It is a social restaurant curation applicat…

你不知道的 script 標簽的 defer 與 async 屬性

我持續組織了近一年的源碼共讀活動,感興趣的可以 點此掃碼加我微信 ruochuan12 參與,每周大家一起學習200行左右的源碼,共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》 包含20余篇源碼文章。歷史面試系列。另外:目前建…

我是怎么調試 Element UI 源碼的

我持續組織了近一年的源碼共讀活動,感興趣的可以 點此掃碼加我微信 ruochuan12 參與,每周大家一起學習200行左右的源碼,共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》 包含20余篇源碼文章。歷史面試系列。另外:目前建…

java對象的理解

1、看生成幾個對象,就看new了幾次, Stu s1new Stu(“張三”); Stu s2s1;-這里也是生成了一個對象,只不過s1和s2指向了同一個對象 2、Stu s1new Stu(“張三”); Stu s2 new Stu(“李四”); s1s2;這里生成了兩個對象,但是…

模板緩沖_模板緩沖以及如何使用它可視化體積相交

模板緩沖介紹 (Introduction) The trendy thing in real-time rendering these days is ray-tracing. However, traditional rasterization hasn’t disappeared, and it won’t in the near future. I recommend this blog post on the subject: A hybrid rendering pipeline …

重磅!哈啰 Quark Design 正式開源,下一代跨技術棧前端組件庫

大家好,我是若川。我持續組織了近一年的源碼共讀活動,感興趣的可以 點此掃碼加我微信 ruochuan12 參與,每周大家一起學習200行左右的源碼,共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》 包含20余篇源碼文章。歷史面試…

對lua協程的一點理解

讀《Programming In Lua》協程那一章,比較困惑的還是procuer-consumer那個例子: function consumer(prod)while true dolocal x receive(prod)print(x)end endfunction receive(prod)local status, value coroutine.resume(prod)return value endfunct…