渐进式渲染是什么？

渐进式渲染 (Progressive Rendering) 指的是一种前端性能优化策略，旨在尽快向用户展示页面内容，提升用户感知速度和体验。它通过逐步加载和渲染页面元素，避免长时间的空白屏幕或加载动画，让用户能够尽早开始与页面交互。

渐进式渲染包含多种技术和策略，主要可以分为以下几个方面：

• 优先渲染首屏内容 (Above-the-fold): 优先加载和渲染用户视口内可见的内容，让用户尽快看到主要信息，其余部分可以延迟加载。这通常涉及到优化关键渲染路径，减少阻塞渲染的资源，例如 CSS 和 JavaScript。

• 分块渲染 (Chunking): 将页面内容分割成小的块状结构，逐步加载和渲染每个块。这样即使页面整体内容较大，用户也能快速看到一部分内容，并随着加载的进行逐步完善。

• 懒加载 (Lazy Loading): 对于非首屏或不可见区域的图片、视频等资源，延迟加载，直到用户滚动到相应位置或需要显示时才加载。这可以减少初始加载时间和带宽消耗。

• 占位符 (Placeholders): 在内容加载完成之前，使用占位符填充页面布局，例如灰色的图片框或简单的文本框。这可以给用户一个视觉上的预期，避免页面看起来空荡荡的。

• 低质量图片占位符 (LQIP - Low Quality Image Placeholder): 先加载一个低质量、小尺寸的图片作为占位符，然后逐步加载高分辨率的图片，实现渐进式的图像加载体验。

• 骨架屏 (Skeleton Screen): 在页面内容加载完成之前，显示一个类似页面结构的灰色框架，模拟页面布局和内容，让用户对页面结构有一个初步的感知。

• 流式渲染 (Streaming Rendering)： 服务端逐步返回页面内容，浏览器逐步接收并渲染，而不是等待整个页面加载完成后才渲染。这对于大型页面或动态生成的页面尤为有效。

渐进式渲染的优势：

• 提升用户感知速度： 用户可以更快地看到页面内容，即使页面还没有完全加载完成。
• 改善用户体验： 避免长时间的空白屏幕或加载动画，减少用户的等待焦虑。
• 提高搜索引擎排名： 页面加载速度是搜索引擎排名的重要因素之一，渐进式渲染可以提升页面加载速度，从而提高排名。
• 减少带宽消耗： 通过懒加载和按需加载，可以减少不必要的资源下载，节省带宽。

实现渐进式渲染的技术：

• 使用 Intersection Observer API 实现懒加载
• 使用 <link rel="preload"> 预加载关键资源
• 使用 HTTP/2 多路复用
• 服务端渲染 (SSR) 和客户端渲染 (CSR) 结合
• 使用合适的图片格式和优化图片大小

总之，渐进式渲染是一种重要的前端性能优化策略，它通过多种技术和方法，逐步加载和渲染页面内容，提升用户感知速度和体验，是构建高性能 Web 应用的关键环节。