PRR（部分/渐进式渲染）
名词 · Web 性能
一种 Web 渲染技术，页面的关键元素优先发送和显示，而次要组件逐步加载——减少感知加载时间并改善 Core Web Vitals。
Next.js 和 React 等现代框架采用的性能架构，通过 Suspense 和 Streaming SSR 等机制将 HTML 流式传输到浏览器，避免等待整个页面的单体加载。
将重量级组件（图表、大数据列表、第三方小部件）的渲染与主要内容的渲染解耦的优化策略，确保在所有设备上即时显示核心信息。
PRR（Partial / Progressive Rendering，部分/渐进式渲染）是一种 Web 渲染技术，优先发送和显示页面的关键元素，然后逐步加载其余内容。浏览器不必等待服务器生成完整页面，而是接收连续的 HTML 流，每个部分就绪后立即显示。我们的团队结合 React Suspense 和 Next.js 的 Streaming SSR 使用这种方法，实现近乎即时的感知加载时间。
渐进式渲染通过消除等待白屏大幅改善用户体验：用户立即看到主要内容，而次要元素在后台加载。这种快速感知降低了跳出率并提高了用户参与度。我们的团队为正在渲染的区域实现优雅的加载指示器（骨架屏），将等待转化为流畅专业的体验，增强用户信任感。
PRR 对 Core Web Vitals 有直接的正面影响，特别是 Largest Contentful Paint（LCP）和 First Input Delay（FID）。通过优先发送关键内容，LCP 达成时间大幅提前，因为浏览器不必等待重量级组件。主线程更快释放，改善了 FID 和 Interaction to Next Paint（INP）。我们的团队使用 PRR 作为主要技术手段，在所有页面上实现绿色的 Core Web Vitals 评分。
传统水合等待所有 HTML 在服务端渲染完成，然后客户端 JavaScript 通过单次操作接管整个页面的控制权。而部分渲染允许选择性和渐进式地对组件进行水合：每个部分在其 JavaScript 加载完成后独立变为可交互状态。我们的团队利用这种粒度控制，使关键交互元素（导航、CTA）立即可用，无需等待低优先级部分的水合完成。
在带宽有限的移动端连接上，渐进式渲染至关重要，因为它允许用户在不等待页面完全下载的情况下就开始消费内容。HTML 流在可用时立即发送字节，浏览器逐步显示接收到的内容。我们的团队针对移动端用户优化这种方法，优先处理关键文本内容，延迟加载图片和重量级组件，确保普遍的可访问性。
PRR 将重量级组件（复杂图表、图片轮播、第三方小部件）隔离在 Suspense 边界中，不影响主要内容的渲染。服务器为这些组件发送占位符，并继续流式传输页面的其余部分。当重量级组件就绪时，它会被动态注入而不阻塞界面。我们的团队使用这种架构集成丰富功能，同时从不影响用户感知的加载速度。
渐进式渲染基于 HTTP 流式传输，这是所有现代浏览器（Chrome、Firefox、Safari、Edge）原生支持的功能。HTML 通过 Transfer-Encoding chunked 分块发送，这是 HTTP/1.1 协议的标准能力。对于较旧的浏览器，渲染以传统方式进行，不会出现功能降级。我们的团队确保这种优化技术以渐进增强方式实现，为每个浏览器提供最佳体验。
部分渲染对技术 SEO 有正面影响，因为关键内容——标题、段落、元数据——在 HTML 流中被优先发送，这正是搜索引擎爬虫所期望的。Googlebot 接收主要内容时无需等待次要组件，从而加速索引并提升页面质量评价。我们的团队精心组织流式传输结构，确保 SEO 关键信息始终在发送给浏览器的第一个数据块中。
实施 PRR 需要支持 Streaming SSR 的框架（如搭配 React Suspense 的 Next.js）、能够处理 chunked 响应的 Node.js 服务器，以及配置为不缓冲流式响应的 CDN。架构需要识别优先渲染的关键组件，并将次要部分封装在 Suspense 边界中。我们的团队提供从服务器配置到组件优化的交钥匙基础设施部署，最大化渐进式渲染的效益。