渐进式渲染

概念

渐进式渲染（Progressive Rendering），也称为惰性渲染，是一种提高用户感知加载速度的技术集合。其目标是尽快呈现页面内容，尤其在网络不稳定的移动终端上尤为重要。

技术示例

• 骨架屏: 在加载数据时，使用 Skeleton Screen 占位，比传统的 loading 动画更生动。

• 图片懒加载: 先加载首屏图片，其他图片在需要时再加载，常用于电商网站以保证首屏流畅。

• 图片占位符: 在图片加载完成前，使用临时图像占位，待图片数据准备好后替换为真实图像。

• 拆分网页资源: 将网站资源拆分，优先加载关键资源，其他资源按需加载，避免一次性加载所有内容。

参考资料

更多关于渐进式渲染的内容，请参阅 MDN Progressive Web Apps Loading。