前端性能优化图片优化.pptx

前端性能优化-图片优化从0到1（1小时）

前端图片优化（1）骨架屏（SkeletonScreens）与占位图使用img标签的sizes属性图片懒加载(LazyLoading)预加载关键图片linkrel=preloadas=image利用浏览器缓存策略(nginx协商缓存-Cache-Control）

前端图片优化（2）使用FetchAPI加载Blob图片使用IntersectionObserverAPI使用CachesAPI响应式图片处理（使用picture元素配合source元素）进行图片压缩和优化-如WebPjpegpng图片格式HEIC图片解码（wasmWebWorker）canvas优化-直接使用rgba绘制webgl优化(GPU加速)

骨架屏介绍为了缓解用户等待加载过程中的焦虑，骨架屏（SkeletonScreens）和占位图（PlaceholderImages）等技术被广泛采用。骨架屏是在内容加载期间显示的一种空状态预览，通常用灰色块、线条等简单元素模拟即将加载的内容布局。这种方式的主要目的是减少用户的等待焦虑，通过提供即将加载的内容的大致布局，让用户感觉到页面正在快速加载中。

效果图-element-plusSkeleton组件

骨架屏实现方法静态HTML/CSS：最简单的骨架屏可以直接通过静态的HTML结构和CSS样式来实现，设计成与目标加载内容大致相似的布局。动态生成：对于更复杂或需要根据数据动态变化的布局，可以使用JavaScript动态生成骨架屏。例如，根据数据模型预估内容结构，用相应的占位符元素填充。组件库/工具：一些现代前端框架和组件库提供了内置的骨架屏组件或插件，如AntDesign的Skeleton组件，Vue的vue-loading-skeleton等，可以简化开发过程。element-plus

占位图（PlaceholderImages）SVG占位符是一种轻量级的图片占位方案，特别适用于图形简单的图片。与传统的图片占位符（如单色块）相比，SVG占位符可以提供更丰富的视觉效果，同时保持极小的文件大小。

前端图片优化-使用img标签的sizes属性在响应式网页设计中，使用img标签的sizes属性是一种优化图片加载、提升页面性能的关键技术。它允许开发者为不同的屏幕尺寸指定最合适的图片资源，确保用户在任何设备上都能获得最佳的视觉体验，同时避免不必要的数据传输。sizes属性用于指定图片在不同布局条件下的显示宽度，与srcset属性配合使用。srcset属性定义了一组图片资源及其各自的宽度描述符（例如，500w表示图片宽度为500像素）。浏览器会根据sizes属性给出的条件，选择最合适的图片资源加载。

imgsizes使用方法定义srcset：在img标签中使用srcset属性，列出不同分辨率的图片资源及其对应的宽度描述符。设置sizes：通过sizes属性指定不同视口宽度下图片应占的最大宽度。可以使用媒体条件（如min-width或max-width）来定义这些规则。指定默认src：为了向后兼容不支持srcset和sizes属性的浏览器，还需要使用src属性指定一个默认的图片资源。

imgsizes示例代码假设有一个网站布局，在屏幕宽度小于600px时，图片应占满整个屏幕宽度；在屏幕宽度介于600px到900px之间时，图片应占屏幕宽度的一半；在屏幕宽度超过900px时，图片宽度固定为450px。相应的img标签代码如下:

imgsizes工作原理当浏览器解析到img标签时，它会查看设备的屏幕宽度，并与sizes属性中定义的条件进行匹配。根据匹配结果，浏览器会从srcset中选择一个最接近所需宽度的图片资源加载。如果有多个候选，浏览器会选择最接近且稍微大一点的图片，以避免加载过小而影响图片质量的资源。如果浏览器不支持srcset和sizes，则会回退到src属性指定的图片资源。结合使用srcset和sizes属性，可以显著提高响应式网站的性能和用户体验，是现代前端开发中不可或缺的技术之一。

imgsizes优势性能优化：通过加载与显示尺寸最匹配的图片，减少不必要的数据传输，加快页面加载速度。用户体验：确保在各种设备和屏幕尺寸上都能获得最佳的视觉效果。灵活性：通过媒体查询和宽度描述符，提供了一种非常灵活的图片资源管理方式，允许精细控制图片在不同条件下的选择逻辑。

图片懒加载(LazyLoading)懒加载是一种只在用户滚动到页面的特定部分时才加载图片的技术。这种方式可以显著减少初次页面加载时的网络请求数量，加快首屏加载速度。最简单的实现方式是使用HTML的loadi