前端性能揭秘

前端性能揭秘讀書筆記模板01思維導(dǎo)圖讀書筆記作者介紹內(nèi)容摘要目錄分析精彩摘錄目錄0305020406思維導(dǎo)圖性能讀者方面優(yōu)化性能工作小結(jié)性能第章工具瀏覽器任務(wù)字體開率方法論流暢度均值秒分析方法關(guān)鍵字分析思維導(dǎo)圖內(nèi)容摘要內(nèi)容摘要本書主要介紹用于指導(dǎo)前端性能優(yōu)化工作的通用優(yōu)化方法，從網(wǎng)絡(luò)、瀏覽器、構(gòu)建工具、跨端技術(shù)和CDN等方面介紹不同技術(shù)、系統(tǒng)對性能的影響，同時幫助讀者了解如何有效優(yōu)化性能。本書從性能的度量、分析和實(shí)驗(yàn)這三個方面開始，首先介紹性能優(yōu)化的一些通用方法，然后將性能作為一個切面幫助讀者了解與前端技術(shù)棧和性能有關(guān)的知識。通過觀察此切面，系統(tǒng)的工作原理等知識被賦予了另外一層意義。利用這種聯(lián)系，把工作原理真正運(yùn)用到工作中，對性能優(yōu)化方面起著重要作用。本書面向的讀者為具有一定經(jīng)驗(yàn)的Web開發(fā)工程師，以及對前端開發(fā)或Web開發(fā)有一定了解的開發(fā)人員。同時，假定讀者能夠進(jìn)行簡單的網(wǎng)頁開發(fā)，并且具備相關(guān)的基礎(chǔ)知識。讀書筆記讀書筆記比較提綱型：從方法論，網(wǎng)絡(luò)協(xié)議、瀏覽器、工程、跨端、CDN大概系統(tǒng)講了下性能相關(guān)的方方面面，對整體了解、初學(xué)入門有幫助更加深度的內(nèi)容需要進(jìn)一步結(jié)合具體問題去深挖。介紹了最新視角下的前端性能優(yōu)化方法論：度量（均值、分位數(shù)、秒開率、首屏、流暢度）、分析（TTFB、DOMReady、Load）、實(shí)驗(yàn)（A/Btest），工具：Devtool、TTFB（RTT）、ServiceWorker（監(jiān)聽fetch、調(diào)用catch）、構(gòu)建工具（treeshaking、splittting、壓縮）、SSR（同構(gòu)、緩存、數(shù)據(jù)預(yù)取、按需渲染、流式渲染）、Hybrid。目錄分析第1章從實(shí)踐開始1.1HelloWorld1.2現(xiàn)實(shí)開發(fā)的例子1.3小結(jié)第2章度量第3章分析第4章實(shí)驗(yàn)第5章工具第2篇性能優(yōu)化方法論第2章度量2.1科學(xué)的方法2.2初識PerformanceAPI2.3均值、分位數(shù)和秒開率2.4度量首屏2.5度量流暢度2.6CoreWebVitals2.7小結(jié)第3章分析3.1分析方法3.2常用的過程指標(biāo)3.3PerformanceAPI詳解3.4分階段性能分析3.5小結(jié)第4章實(shí)驗(yàn)4.1優(yōu)化不是照搬軍規(guī)4.2用實(shí)驗(yàn)驗(yàn)證優(yōu)化4.3用實(shí)驗(yàn)改進(jìn)優(yōu)化4.4小結(jié)第5章工具5.1DevTools5.2WebPageTest5.3小結(jié)第6章TTFB為什么這么長第7章建立連接為什么這么慢第8章Fetch之前瀏覽器在干什么第9章HTTPS協(xié)議比HTTP協(xié)議更慢嗎第3篇網(wǎng)絡(luò)協(xié)議與性能第11章壓縮和緩存第10章HTTP/2、HTTP/3和性能第3篇網(wǎng)絡(luò)協(xié)議與性能第6章TTFB為什么這么長6.1TTFB的合理值6.2如何優(yōu)化TTFB6.3小結(jié)第7章建立連接為什么這么慢7.1建立連接應(yīng)該耗時多久7.2如何優(yōu)化建立連接的耗時7.3小結(jié)第8章Fetch之前瀏覽器在干什么8.1重定向8.2瀏覽器打開耗時8.3如何優(yōu)化beforeFetch耗時8.4小結(jié)第9章HTTPS協(xié)議比HTTP協(xié)議更慢嗎9.1HTTPS協(xié)議為什么安全9.2HTTPS協(xié)議如何吊銷證書9.3HTTPS協(xié)議更慢嗎9.4小結(jié)第10章HTTP/2、HTTP/3和性能10.1HTTP/2和性能10.2為什么還需要HTTP/310.3小結(jié)第11章壓縮和緩存11.1傳輸速度和壓縮速度如何兼得11.2HTTP緩存什么時候會失效11.3小結(jié)第12章瀏覽器和性能第14章內(nèi)存為什么會影響性能第13章異步任務(wù)和性能第4篇瀏覽器與性能第16章字體對性能的影響第15章使用ServiceWorker改善性能第4篇瀏覽器與性能第12章瀏覽器和性能12.1第一次渲染時都發(fā)生了什么12.2為什么DOM操作很慢12.3小結(jié)第13章異步任務(wù)和性能13.1事件循環(huán)機(jī)制13.2宏任務(wù)和微任務(wù)13.3Promise的polyfill性能13.4requestAnimationFrame13.5小結(jié)第14章內(nèi)存為什么會影響性能14.1內(nèi)存14.2內(nèi)存泄漏14.3小結(jié)第15章使用ServiceWorker改善性能15.1ServiceWorker概述15.2使用ServiceWorker進(jìn)行緩存15.3API提前加載15.4ServiceWorker冷啟動15.5小結(jié)第16章字體對性能的影響16.1字體導(dǎo)致的布局偏移16.2如何避免字體帶來的布局偏移16.3小結(jié)第18章服務(wù)器端渲染和性能第17章構(gòu)建工具和性能第5篇前端工程與性能第17章構(gòu)建工具和性能17.1為什么需要打包17.2構(gòu)建工具可以做什么17.3小結(jié)第18章服務(wù)器端渲染和性能18.1SSR和同構(gòu)18.2SSR的性能優(yōu)化18.3小結(jié)第20章CDN和性能第19章WebView和性能第6篇跨端技術(shù)與CDN第19章WebView和性能19.1WebView和Native的區(qū)別19.2WebView的通信成本19.3ReactNative的懶加載有何不同19.4ReactNative如何減小打包體積19.5API并行請求19.6小結(jié)第20章CDN和性能20.1什么是CDN20.2如何提升緩存命中率20.3動態(tài)加速20