前言
- 什么是渐进式渲染
渐进式渲染
所谓渐进式渲染，英文全称progressive rendering，也被称之为惰性渲染，指的是为了提高用户感知的加载速度，以较快的速度来呈现页面的技术。
在以前互联网带宽较小的时期，这种技术更为普遍。如今，移动终端越来越盛行，而移动网络往往不稳定，渐进式渲染在现代前端开发中仍然有用武之地。
有一点需要注意，渐进式渲染不是指某一种技术，而是各种技术的集合。
骨架屏 Skeleton Screen
在加载网络数据时，为了提升用户体验，通常会使用一个转圈圈的loading动画，或者使用 Skeleton Screen 占位。相比与loading动画，Skeleton Screen的效果要更生动。
图片懒加载
在页面中，图片的加载速度往往比文本要慢，为了提升用户体验，通常会使用图片懒加载技术，即只有当图片进入可视区域时，才开始加载图片。
比如一个电商网站，首屏通常会有很多的数据，清晰度较高的banner或轮播。页面非首屏部分会有很多商品夹杂着大量的图片。这是时候选择懒加载以保证首屏的流畅十分重要。
图片占位符
在网页加载的时候，某些图片还在请求中或者还未请求，这个时候就先找一个临时代替的图像，放在最终图像的位置上，但是这只是临时替代的图形，当图片数据准备好以后，会重新渲染真正的图形数据。
拆分网页资源
大部分用户不会用到一个网站的所有页面，但我们通常的做法却是把所有的功能都打包进一个很大的文件里面。一个bundle.js文件的大小可能会有几M，一个打包后的style.css会含网站的一切样式，从CSS结构定义到网站在各个版本的样式：移动端、平板、桌面、打印版等等。
但用户并不是一开始就需要所有的资源，所有我们可以对资源进行拆分，首先加载那些关键的资源，其他的资源等到需要的时候再去加载它。
更多渐进式内容可以参考developer.mozilla.org/zh-CN/docs/…
总结
- 什么是渐进式渲染
所谓渐进式渲染，英文全称progressive rendering，也被称之为惰性渲染，指的是为了提高用户感知的加载速度，以较快的速度来呈现页面的技术。渐进式渲染不是指某一种技术，而是各种技术的集合。
例如：
- 骨架屏
- 图片懒加载
- 图片占位符
- 拆分网页资源
