什么是渐进式渲染

渐进式渲染是用于提高网页性能（尤其是提高用户感知的加载速度），以尽快呈现页面的技术。

在以前互联网带宽较小的时期，这种技术更为普遍。如今，移动终端的盛行，而移动网络往往不稳定，渐进式渲染在现代前端开发中仍然有用武之地。

一些举例：

补充

补充：渐进式渲染（Progressive Rendering）是一组"先把可见部分尽快画出来，再慢慢补齐其它资源"的优化策略的统称，并不是某一项具体 API。

常见实现方式

  1. 图片懒加载：使用 loading="lazy" 或 IntersectionObserver，只在图片进入视口附近时才请求

    <img src="hero.jpg" loading="lazy" alt="...">

  2. 骨架屏 / 占位内容：先用低成本的占位块（灰底方块、文本骨架）撑起页面结构，再异步加载真实数据

  3. 优先加载关键 CSS，延迟加载非关键 CSS：

    <link rel="stylesheet" href="critical.css">
<link rel="preload" href="non-critical.css" as="style" onload="this.rel='stylesheet'">

  4. 代码分割 / 路由懒加载：Webpack、Vue Router、React.lazy 等把非首屏 JS 拆成 chunk，按需加载

  5. SSR / 流式渲染：服务端先把可用的 HTML 流式吐出，浏览器边收边渲染，交互再交给客户端 hydrate

  6. 图片渐进式 JPEG / srcset：让浏览器先收到模糊版本，再随带宽替换为清晰版本

与"懒加载"的区别

懒加载只是渐进式渲染中"延迟加载非关键资源"的一种手段；渐进式渲染更强调"先让用户看到东西"，包含骨架屏、流式 SSR、占位渲染等多种思路。

来源整理自：我的有道云笔记