Web感知性能（Perceived Performance）是指用户对网页加载速度和响应速度的主观感受，而不仅仅是页面实际加载或执行的技术性能。换句话说，感知性能关注的是用户在使用网站时的体验，而不完全是后端的性能指标。
Web感知性能的核心概念
- 视觉稳定性：页面加载时的布局应该是稳定的，避免在用户互动过程中出现布局跳动。例如，图片加载后突然“推挤”了其他内容，这种现象会给用户带来不好的感受。
- 页面反馈：当用户进行某些操作时，页面应该迅速给予反馈，比如点击按钮后马上有视觉效果，加载进度条、旋转图标等可以让用户知道正在进行操作。
- 交互延迟：用户与网站的互动应尽量减少延迟，特别是点击按钮、输入框或链接时，任何延迟都会影响感知性能。如果一个按钮点击后需要几秒钟才有响应，用户会感到不耐烦。
- 内容展示顺序：在加载时，首先展示最重要或最吸引用户注意的内容，而将不太重要的内容延后加载。比如，先显示页面的文本内容，图片、视频等资源可以延迟加载，或使用懒加载技术（Lazy Loading）来提高感知性能。
提升Web感知性能的策略
-
懒加载（Lazy Loading） ：只有当用户滚动到页面的某个区域时，相关的资源才开始加载。
<img src="image.jpg" loading="lazy" alt="图片描述"> -
优先加载关键内容（Critical Rendering Path） ：在页面加载时，优先加载并呈现最重要的内容，如文字和结构化的HTML内容，然后再加载图片、视频和其他资源。将关键的CSS、JS文件放在页面上部，避免资源阻塞。
-
异步加载和延迟加载（Async & Defer） ：将JavaScript文件通过
async或defer属性异步加载，可以避免JS文件阻塞页面渲染。async会立即执行脚本，defer则会等到HTML解析完成后再执行。<script src="script.js" async></script> -
页面预加载（Preloading） ：可以提前加载那些即将被用户访问的资源，如页面中某些图片或JS文件，减少后续操作的加载时间。使用
<link rel="preload">来指定预加载资源。<link rel="preload" href="critical-image.jpg" as="image"> -
优化图片加载：图片通常是页面加载速度的瓶颈。使用压缩格式、适当的分辨率、WebP格式、SVG图片等可以减少图片加载的时间。使用
srcset实现响应式图片，确保不同设备获取合适尺寸的图片。<img src="image.jpg" srcset="image-500w.jpg 500w, image-1000w.jpg 1000w" alt="响应式图片"> -
减少JavaScript执行时间：过多的JavaScript代码会导致页面交互延迟。使用JavaScript压缩和代码分割（Code Splitting）来减少脚本文件的体积，并且只加载当前页面所需的代码。
-
使用CDN和缓存：使用内容分发网络（CDN）来加速静态资源的加载，将资源缓存到用户的浏览器中，从而减少资源的重复加载。
-
进度指示器和加载动画：当页面加载较慢时，通过进度条、加载动画或内容占位符来让用户知道页面正在加载，这样用户的等待感会减轻，进而提高感知性能。例如，使用骨架屏（Skeleton Screen）代替白屏等待。
-
避免强制重排（Reflow）和重绘（Repaint） ：重排和重绘会导致页面的视觉表现改变，过多的DOM操作会降低页面的性能。通过批量修改DOM，避免单个操作导致多次重排和重绘，可以提高页面渲染性能。
