正文
<
img className
=
"img-item"
src
={
file
.
src
}>
})
}
)
就在笔者满心欢喜的认为这个需求基本搞定了，该去楼下加鸡腿的时候。无情的现实狠狠的抽了我一巴掌。随着网页的刷新，一张纯白的画面展示在了我的面前，然后只见图片
一点一点的从上面加载出来。
我不禁陷入了沉思，是CPU跑不动道了还是内存飘了？在一想，我这电脑都这个表现，真要上线了，这客户能忍受吗？不对，就这表现，没上线前产品小姐姐就的把我ko了...
方案一 懒加载
这种场景下想必大家第一反应也是懒加载。简单介绍一下图片懒加载。常见的图片懒加载方案是指页面加载时只渲染屏幕可见区域及周围的图片。当页面滚动时再加载需要显示的图片。
出于提高效（tou）率（lan）的目的，笔者在网上找了个比较好用的懒加载库然后引入项目。然而，情况并不乐观。因为该需求场景下每一张图片的宽高都是
50*50
，那么在PC端常见的
1080p
的设备上首屏需要显示的图片达到了
400+张
。
即便我们忽视这个问题，当用户滚动网页速度很快时图片加载的体验也是不ok的。所以懒加载并不是万能的。
方案二 预加载
首先我们要知道，在硬件性能不变且CPU调度不能更积极的前提下。理论上我们无法减少图片渲染的时间。所以我们只能想办法调整图片渲染的方式来提高用户的体验。所以我们采用预加载的方式。
const
