Web前端性能優化

這本書講的前端性能優化，從概述/優化的具體實現/性能監測3個方面來敘述的。 一個網站，性能評價可以用一個字來形容: ”快”，這意味着更少的請求與更快的渲染。 從更少的請求出發，那就意味着從服務器上拿回來的前端3大件，資源體積要更小，請求複用，緩存請求，代碼壓縮，cdn 從更快的渲染出發，圖像/視頻的加載，JS優化，重繪重排，數據存儲，緩存。 剩下的就是性能的檢測，使用瀏覽器自帶的工具或api進行檢查，量化結果。 另一種方案是全鏈路埋點統計，書中沒提。 大綱清晰，就是分節的話，如果按照更快的請求和更快的渲染來講，我覺得閱讀時更容易在腦中形成框架，現在相對比較零散。

很通用的入門書、泛泛而談，很多技術老了

比較完整的體系，可以在工作去完善知識體系。

挺適合初學者瞭解web性能優化的方式。

本書寫的很詳細，詳細闡述了從哪些方面優化前端項目，很有指導性。以下是我閱讀之後的總結，有需要的小夥伴可以參考下~~ 爲什麼要進行性能優化？ 1、用戶的留存率：根據Google營銷平臺提供的調研發現，如果網站頁面的加載時間超過3s，就會有53%的移動網站的訪問遭到用戶拋棄。 2、網站的轉化率：從運營角度來看，網站轉化率是一個非常重要的考量指標，網站轉化率指的是用戶進行了某項目標行爲的訪問次數與總訪問才次數的比率。 用戶如何感知網站性能？ 1、響應：必須在100ms內收到反饋，如果超過100ms的時間，用戶就會感知到延遲； 2、動畫：由於視神經存在反應速度造成，其值是1/24s，即當我們所見的物體移除後，該物體在我們眼中並不會立即小時，會延續存在1/24s的時間； 3、空閒：利用空閒時間處理延遲，可減少預加載的數據大小，以保證網站/應用快速完成加載；處理任務按50ms爲單位分組，保證用戶在發生操作後100ms內給出響應； 4、加載：用戶感知要求我們儘量在1s內完成頁面加載，如果沒有完成，用戶的注意力就會分散到其他事情上，並對當前處理的任務產生中斷感（在1s內完成加載並渲染出頁面的要求，並非要完成所有頁面資源的加載），從用戶感知體驗的角度來說，只要關鍵渲染路徑完成，用戶就會認爲全部加載已完成。 常見的網站性能檢測工具？ 1、chrome任務管理器：查看所有進程的關於GPU、網絡和內存空間的使用情況； 2、chrome的Network面板：查看網站所有資源的請求情況，包括加載時間、尺寸大小、優先級設置及HTTP緩存觸發情況等信息； 3、chrome的Coverage面板：通過它監控並統計出網站應用運行過程中代碼執行的覆蓋率（統計結果包括米格文件字節大小、執行過程中已覆蓋的代碼字節數以及可視化覆蓋率條形圖）； 4、chrome的Memory面板：可以快速生成當前的堆內存快照，或者查看內存隨時間的變化情況； 5、chrome的Performance面板：啓動監控功能後，與網站頁面的任何交互所引發的資源請求、頁面渲染、函數執行及GPU耗時等信息，都會按照時間線的維度記錄下來； 6、chrome的Performance monitor面板：可以實時監控網站應用運行過程中的CPU佔用率、JavaScript內存使用大小、內存中掛的DOM節點數、JS事件監聽次數及頁面發生重繪與重排的處理時間； 7、PageSpeed Insights：檢測網站頁面加載性能的自動化工具，能夠針對移動設備和桌面設備分別進行檢測並生成相應的優化報告； 8、webpagetest網站分析工具：對檢測分析的環境配置進行高度自定義華，內容包括測試節點的物理位置、設備型號、瀏覽器版本、網絡條件和檢測次數等，除此之外還提供目標網站應用於競品之間的性能比較，以及查看網絡路由情況等多種維度下的測試工具。 9、chrome的Lighthouse（燈塔）：通過監控和檢測網站應用的各方面性能表現，爲開發者提供優化用戶體驗和網站性能的知道建議。 10、chrome的Audits面板：將lighthouse集成到了Audits面板中（目前還處於Beta版本階段），廣告性能評估項，主要爲了幫助提升廣告的加載速度和總體質量。 網站具體性能優化方向和優化點？ 1、服務器優化：增加緩存（協商緩存和強緩存）； 2、圖像優化：根本思想是壓縮； 圖像壓縮：根據業務選擇有損壓縮和無損壓縮； 圖像格式：圖像格式選擇依次爲：矢量圖（SVG）=> WebP => JPEG => PNG8 => PNG8，如果存在動畫的話選擇GIF； CSS Sprite（雪碧圖）：通過多張小圖標拼接成一張大圖，有效地減少HTTP請求數量； display：none：瀏覽器部分會加載圖像，如果不清楚會不會加載未顯示的圖像，推薦使用picture或img srcset進行響應式顯示； 3、Web字體：常用的字體格式有EOT、TTF、WOFF和WOFF2；項目一般會通過@font-face聲明字體系列，可以通過對字體資源進行預加載（<link rel="preload">） 4、資源加載 圖像延時加載：Intersection Observer方式、CSS類名方式（通過background-image實現）、原生的延遲加載支持（<img>、<iframe>標籤的loading屬性原生支持延遲加載，loading包含lazy、eager、auto值） 視頻加載：chrome會對視頻資源進行預加載（在html完成加載和解析時觸發DOMContentLoaded事件開始請求視頻資源）；尺寸過大的GIF動畫使用視頻代替（video使用屬性autoplay、muted、loop、playsinline）；基於Intersection Observer用Js實現對延遲加載的控制； 5、首屏加載：在延遲加載的媒體資源到達首屏邊界之前設置一個緩衝區，以便媒體資源在進入視窗之前就開始加載（Intersection Observer，通過rootMargin屬性來建立緩衝）；資源佔位（LQIP或SQIP或Base64圖片等，資源錯誤時顯示錯誤的提示信息）；漸進式顯示JQPEG圖像（採用Image.decode()方法進行一步圖像解碼）； 6、資源優先級：對資源重要性進行判斷劃分優先級；預加載（<link ref="preload">）;預鏈接（<link ref="preconnect" href="xxx">）;預提取（<link rel="prefetch" href="xxx">）； 7、構建優化： 壓縮與合併：HTML壓縮（node的html-minifier插件）、CSS壓縮（clean-css插件）、JavaScript（壓縮uglify-js插件、gulp的gulp-concat合併插件或者webpack的entry和output配置、uglifyjs-webpack-plugin）； 多進程打包：happypack多線程插件； 可視化分析：webpack-bundle-analyzer分析插件； 8、CSS樣式優化：CSS引擎查找樣式表規則匹配順序從右向左，使用BEN規範（中畫線-單下劃線_雙下劃線__）; 9、搜索引擎優化：meta的title、description、keywords；img的alt；使用語義化標籤； 10、緩存：HTTP緩存（設置cache-control屬性值no-store禁止緩存、協商緩存no-cache、服務器代理緩存public和private設置ETag或last-modified）、Service Worker緩存、Push緩存、CDN緩存； 11、數據存儲：保存登錄狀態的Cookie（同步存取）、瀏覽器本地存儲LocalStorage和SessionStorage（同步存取）、客戶端數據持久化存儲方案WebSql和Indexed DB（異步存取）、直接存儲在本機的文件系統上（異步存取）。

知識系統而全面，可以幫助開發者完善自身的知識體系

適合新手入門系統性學習web性能優化知識點