前端性能優(yōu)化圖片優(yōu)化

前端性能優(yōu)化-圖片優(yōu)化從0到1（1小時(shí)）前端圖片優(yōu)化（1）骨架屏（SkeletonScreens）與占位圖使用img標(biāo)簽的sizes屬性圖片懶加載(LazyLoading)

預(yù)加載關(guān)鍵圖片<linkrel="preload"as="image">利用瀏覽器緩存策略(nginx協(xié)商緩存-Cache-Control）前端圖片優(yōu)化（2）使用FetchAPI加載Blob圖片使用IntersectionObserverAPI使用CachesAPI響應(yīng)式圖片處理（使用picture元素配合source元素）進(jìn)行圖片壓縮和優(yōu)化-如WebPjpegpng圖片格式HEIC圖片解碼（wasmWebWorker）canvas優(yōu)化-直接使用rgba繪制

webgl優(yōu)化(GPU加速)骨架屏介紹為了緩解用戶等待加載過程中的焦慮，"骨架屏"（SkeletonScreens）和"占位圖"（PlaceholderImages）等技術(shù)被廣泛采用。骨架屏是在內(nèi)容加載期間顯示的一種空狀態(tài)預(yù)覽，通常用灰色塊、線條等簡單元素模擬即將加載的內(nèi)容布局。這種方式的主要目的是減少用戶的等待焦慮，通過提供即將加載的內(nèi)容的大致布局，讓用戶感覺到頁面正在快速加載中。效果圖-element-plusSkeleton組件骨架屏實(shí)現(xiàn)方法靜態(tài)HTML/CSS：最簡單的骨架屏可以直接通過靜態(tài)的HTML結(jié)構(gòu)和CSS樣式來實(shí)現(xiàn)，設(shè)計(jì)成與目標(biāo)加載內(nèi)容大致相似的布局。動(dòng)態(tài)生成：對(duì)于更復(fù)雜或需要根據(jù)數(shù)據(jù)動(dòng)態(tài)變化的布局，可以使用JavaScript動(dòng)態(tài)生成骨架屏。例如，根據(jù)數(shù)據(jù)模型預(yù)估內(nèi)容結(jié)構(gòu)，用相應(yīng)的占位符元素填充。組件庫/工具：一些現(xiàn)代前端框架和組件庫提供了內(nèi)置的骨架屏組件或插件，如AntDesign的Skeleton組件，Vue的vue-loading-skeleton等，可以簡化開發(fā)過程。element-plus占位圖（PlaceholderImages）SVG占位符是一種輕量級(jí)的圖片占位方案，特別適用于圖形簡單的圖片。與傳統(tǒng)的圖片占位符（如單色塊）相比，SVG占位符可以提供更豐富的視覺效果，同時(shí)保持極小的文件大小。前端圖片優(yōu)化-使用img標(biāo)簽的sizes屬性在響應(yīng)式網(wǎng)頁設(shè)計(jì)中，使用<img>標(biāo)簽的sizes屬性是一種優(yōu)化圖片加載、提升頁面性能的關(guān)鍵技術(shù)。它允許開發(fā)者為不同的屏幕尺寸指定最合適的圖片資源，確保用戶在任何設(shè)備上都能獲得最佳的視覺體驗(yàn)，同時(shí)避免不必要的數(shù)據(jù)傳輸。sizes屬性用于指定圖片在不同布局條件下的顯示寬度，與srcset屬性配合使用。srcset屬性定義了一組圖片資源及其各自的寬度描述符（例如，500w表示圖片寬度為500像素）。瀏覽器會(huì)根據(jù)sizes屬性給出的條件，選擇最合適的圖片資源加載。imgsizes使用方法定義srcset：在img標(biāo)簽中使用srcset屬性，列出不同分辨率的圖片資源及其對(duì)應(yīng)的寬度描述符。設(shè)置sizes：通過sizes屬性指定不同視口寬度下圖片應(yīng)占的最大寬度。可以使用媒體條件（如min-width或max-width）來定義這些規(guī)則。指定默認(rèn)src：為了向后兼容不支持srcset和sizes屬性的瀏覽器，還需要使用src屬性指定一個(gè)默認(rèn)的圖片資源。imgsizes

示例代碼假設(shè)有一個(gè)網(wǎng)站布局，在屏幕寬度小于600px時(shí)，圖片應(yīng)占滿整個(gè)屏幕寬度；在屏幕寬度介于600px到900px之間時(shí)，圖片應(yīng)占屏幕寬度的一半；在屏幕寬度超過900px時(shí)，圖片寬度固定為450px。相應(yīng)的img標(biāo)簽代碼如下:imgsizes

工作原理當(dāng)瀏覽器解析到img標(biāo)簽時(shí)，它會(huì)查看設(shè)備的屏幕寬度，并與sizes屬性中定義的條件進(jìn)行匹配。根據(jù)匹配結(jié)果，瀏覽器會(huì)從srcset中選擇一個(gè)最接近所需寬度的圖片資源加載。如果有多個(gè)候選，瀏覽器會(huì)選擇最接近且稍微大一點(diǎn)的圖片，以避免加載過小而影響圖片質(zhì)量的資源。如果瀏覽器不支持srcset和sizes，則會(huì)回退到src屬性指定的圖片資源。結(jié)合使用srcset和sizes屬性，可以顯著提高響應(yīng)式網(wǎng)站的性能和用戶體驗(yàn)，是現(xiàn)代前端開發(fā)中不可或缺的技術(shù)之一。imgsizes

優(yōu)勢性能優(yōu)化：通過加載與顯示尺寸最匹配的圖片，減少不必要的數(shù)據(jù)傳輸，加快頁面加載速度。用戶體驗(yàn)：確保在各種設(shè)備和屏幕尺寸上都能獲得最佳的視覺效果。靈活性：通過媒體查詢和寬度描述符，提供了一種非常靈活的圖片資源管理方式，允許精細(xì)控制圖片在不同條件下的選擇邏輯。圖片懶加載(LazyLoading)懶加載是一種只在用戶滾動(dòng)到頁面的特定部分時(shí)才加載圖片的技術(shù)。這種方式可以顯著減少初次頁面加載時(shí)的網(wǎng)絡(luò)請(qǐng)求數(shù)量，加快首屏加載速度。最簡單的實(shí)現(xiàn)方式是使用HTML的loading="lazy"屬性。對(duì)于不支持loading="lazy"的瀏覽器，可以使用JavaScript（例如，監(jiān)聽滾動(dòng)事件）手動(dòng)實(shí)現(xiàn)懶加載。預(yù)加載關(guān)鍵圖片<linkrel="preload"as="image">如果頁面上有視覺上非常重要的圖片（如banner圖），可以使用<linkrel="preload"as="image">在HTML頭部預(yù)加載這些圖片。這樣可以確保當(dāng)用戶訪問頁面時(shí)，關(guān)鍵內(nèi)容能夠盡快顯示。利用瀏覽器緩存策略通過合理配置HTTP緩存頭（如Cache-Control），可以使瀏覽器緩存已加載的圖片，避免在用戶再次訪問時(shí)重新下載，從而提高頁面加載速度。使用FetchAPI加載Blob圖片通過FetchAPI獲取圖片的Blob，并利用URL.createObjectURL創(chuàng)建一個(gè)可訪問的URL地址，可以實(shí)現(xiàn)先加載一個(gè)小尺寸的圖片作為預(yù)覽，待頁面其他內(nèi)容加載完成后再替換為高分辨率的圖片。首先使用FetchAPI請(qǐng)求低分辨率圖片的Blob。使用URL.createObjectURL創(chuàng)建臨時(shí)URL，并將其設(shè)置為圖片的src。頁面其他內(nèi)容加載完成后，重復(fù)上述過程加載高分辨率圖片并替換之。當(dāng)不再需要這些URL對(duì)象時(shí)，每個(gè)對(duì)象必須通過調(diào)用URL.revokeObjectURL()方法來釋放。使用IntersectionObserverAPIIntersectionObserverAPI可以幫助我們?cè)趫D片即將進(jìn)入視口時(shí)才開始加載，減少初次加載的數(shù)據(jù)量，加速頁面顯示。創(chuàng)建一個(gè)IntersectionObserver實(shí)例，定義當(dāng)目標(biāo)元素與視口交叉時(shí)的回調(diào)函數(shù)。在回調(diào)函數(shù)中，使用FetchAPI加載圖片，并通過Blob或直接替換src屬性顯示圖片。將圖片元素作為觀察目標(biāo)添加到觀察者中。使用window.CachesAPICachesAPI允許開發(fā)者將網(wǎng)絡(luò)請(qǐng)求及其響應(yīng)對(duì)象存儲(chǔ)起來，用于未來的請(qǐng)求。通過預(yù)緩存關(guān)鍵資源，可以實(shí)現(xiàn)即使在離線狀態(tài)下也能快速加載頁面。響應(yīng)式圖片處理（使用picture配合source元素）除了使用srcset和sizes屬性外，還可以使用picture元素配合source元素定義不同情境下應(yīng)加載的圖片資源。這種方法提供了更靈活的圖片響應(yīng)式處理能力，允許基于設(shè)備特性（如屏幕寬度、分辨率、網(wǎng)絡(luò)條件）選擇最合適的圖片。進(jìn)行圖片壓縮和優(yōu)化-如WebP圖片格式在上傳圖片之前，可以使用工具（如Sharp、ImageOptim、TinyPNG等）手動(dòng)或自動(dòng)進(jìn)行圖片壓縮。這種方法可以在不影響視覺質(zhì)量的前提下減少圖片文件的大小，從而減少加載時(shí)間。HEIC圖片解碼（wasmWebWorker）HEIC是一種高效的圖片格式，尤其適用于iOS設(shè)備。雖然它提供了比JPEG更好的壓縮效果，但瀏覽器的支持度不高。通過JavaScript庫如heic2any可以實(shí)現(xiàn)HEIC格式到WebP或JPEG的轉(zhuǎn)換，使其能夠在網(wǎng)頁中使用。WebAssembly使用libheif庫解碼heic圖片canvas優(yōu)化-直接使用rgba繪制對(duì)性能和速度要求很高的情況下可以考慮此種方式wasm+canvasredgreenbluea截圖--img->解碼->顯示webgl優(yōu)化WebGL（WebGraphicsLibrary）是一種在任何兼容的網(wǎng)頁瀏覽器中使用GP