页面加载功能设计总结

这种处理方式也给我们带来了启发。例如，微信中用户点击浮窗，文章页面是扩展开来的。那么我们可以脑洞一下，用户双指捏合的手势是否可以关闭文章页？

顺序

用户触发了某个交互动作进入一个新页面，然后页面和后台开始进行数据传输，数据传输完成后在页面渲染。这是用户进入一个新页面所经历的几个重要阶段，如下图所示，这里我将其分成了4个阶段。接下来我们从阶段1开始梳理页面加载过程的每一个步骤，力图发掘可以优化的点。

1）执行操作

从用户的角度来看，当他执行完操作1，后面的步骤就跟他没有关系了。那么在页面渲染完成前，我们应该给用户展示一个什么样的页面呢？

上面看到的几款产品，他们的处理方式简单粗暴——白屏。这对用户来说，不是一个友好的体验。如果你的页面布局样式相对固定，可以考虑先给用户展示页面框架，然后再展示具体的内容，这种加载机制就是占位符，又可以称之为"骨架屏"。

与彻底的白屏相比，先给用户展示页面框架，用户在页面数据没有加载完成的情况下也可以了解页面的大致结构。此外用户一进入这个页面，发现这个页面不是空荡荡的，它已经有东西了，会觉得页面已经加载出来，从而产生一种"零等待"的错觉，体验更加流畅。

2）先文字，后图片

一个页面的内容量是很大的，如果我们获取完所有的信息才在客户端渲染，所耗费的时间是很长的。因此为了缩短用户的等待时间，我们可以考虑先展示一些网络资源较小的内容。例如，先加载文字，再加载图片。

我们都知道5G时代即将到来，信息传输的速度大大加快。是不是意味着我们不需要考虑加载顺序了呢？当然不是！