加载是信息更新的反馈过程。包括人机交互的反馈，以及计算机（客户端）与服务器（后台）交互的反馈。

触发加载有两种方式：一种是用户手动触发，比如点击【朋友圈】。

另一个是系统定时任务，按照一定的频率或规则自动执行。例如，如果聊天消息的时间在1分钟内显示“刚刚”，那么定时任务可以每分钟刷新一次，时间显示模式会自动更新。

产品经理需要确定加载策略机制，以减少或分散等待时间的压力。同时优化反馈效果，缓解焦虑。

下面，我们将分别讨论移动端和Web端。

一、App加载策略机制1.整个页面同步加载

整个页面的所有内容都一次性加载给用户。网速不友好很容易“死胎”。所以加载过程中会出现白屏。

为避免空虚，常与菊花或进度条搭配使用。

2. 异步加载

可以从三个角度进行设计：

首先加载占用较少网络资源的元素模块。例如，文本和默认图标后跟图片。按重量模块加载。例如，如果模块相关，则先加载父内容，然后加载子内容。分步加载相同的模块。例如，首先加载缩略图或占位符，用户在加载较大的图像之前单击它。再比如，当加载的页面有固定框架时，​​可以先加载框架，再加载框架中的内容。这个加载的屏幕被称为“骨架屏幕”。

异步加载是一个比较成熟的指导思想。多用于页面内容较多，图文混杂的时候。

3. 预加载

预加载是在加载页面内容时预测用户的下一步行为，为下一步需要使用的页面预先加载内容。例如小程序开发，在网易新闻中，即使您从未打开过新闻，如果您与互联网断开连接小程序开发，您仍然可以查看新闻。

4. 延迟加载

延迟加载解决方案是，只有当图像滚动到窗口中并被用户看到时，它才会真正加载。目前淘宝、知乎等大流量网站已经采用了图片滚动的懒加载方案。

5. 分页加载

分页加载可以减轻单个加载的压力。适用于瀑布、长列表、产品列表等。

有些页面有明确的[Next]按钮，点击加载下一页。

有些是无形的分页，比如抖音的视频瀑布，在用户看来就是源源不断的信息流。

这就是为什么我们看新闻、浏览淘宝、浏览微博都出不去的原因。缺点是容易迷路，不方便快速索引定位某个内容。

6. 离线缓存加载

首先，在有网络的情况下提前加载数据，并在本地缓存。没有网络时，直接加载缓存的内容。

但是，考虑到手机的空间，应该设计一个合适的清除缓存的机制。

二、App加载界面反馈设计1.图标

1）加载图标样式

通常你可以选择传统的菊花动画。

如果我们更进一步，我们可以将品牌基因构建到指标的设计中。以飞猪的动态效果为例，无疑体现了产品之间的差异。

我们可以稍微考虑一下，选择用一些有趣的动画来分散用户的注意力。

2）图标放置

2. 加载替代形式

1）启动页面

启动app需要一个短暂的过程，启动页面的作用就是等到系统加载启动。

启动页面可以是广告空间、假日营销或品牌知名度。它可以是静态页面或动态图像。

另一种启动页面的方式是让它和首页一样，给人一种进入首页很快的感觉。

2）以跳跃或运动伪装加载

跳跃本身也需要一定的时间，所以也可以为加载争取时间。比如添加到购物车动画。

3. 支持加载时及时退出

用户有权选择不加载，也可以将加载的默认时间设置为不能提示用户重新加载。

三、PC端页面加载机制1.页面加载速度的影响

如果用户试图访问你的网站，那么你的网站应该在 10 秒内打开网站开发，如果超过这个时间，他将放弃任务的执行。

许多研究表明，用户最满意的是他们在 2 秒内打开页面的时间。如果页面等待超过 12 秒后还没有加载，那么超过 99% 的用户会关闭页面。

在我做的一个实验中，加载一个显示 10 个搜索结果的页面需要 0.4 秒，加载一个显示 30 个搜索结果的页面需要 0.9 秒。如果采用后一种方案，流量和收入各下降 20%。

这就是为什么在很多电商后台管理系统中，默认加载的数据个数是10个，而不是15个或30个。

2. 了解页面加载过程

当用户打开一个页面时，首先是页面的框架，将不需要加载的内容呈现出来，然后逐渐从服务器拉取数据，会出现页面的部分内容PC端空白。如果在APP端使用H5技术打开网页，一般会给出加载条。

我们可以这样理解，打开一个基于html的静态页面，然后混入调用服务器算法的元素，不断渲染加载，呈现出我们所期待的样子。

用户的等待时间主要花在下载网页元素上，即HTML、CSS、、、、图片等。

统计显示，每增加一个元素，页面加载时间就会增加 25-40 毫秒（取决于用户的带宽）。

打开页面→HTML写的静态页面→//ajax（AJAX意思是“和XML”（异步和XML）等渲染→处理提交表单的数据，向后端对应的发起ajax请求PHP api接口 → PHP in 接收到数据后，连接服务器，服务器通过PHP中的SQL语句处理数据库关键字返回给PHP，再返回给前端，前端将数据渲染在HTML通过JS处理，最终呈现给用户。

点击事件加入购物车的一般步骤是：用户点击“加入购物车”按钮→页面获取当前商品的唯一值（如商品ID：）→JS处理点击事件，并通过ajax请求将唯一值连同用户信息传送给PHP→PHP请求连接服务器→执行数据库语句→服务器返回执行结果给PHP→PHP将执行结果传送给前端。

如果数据库语句执行成功，数据库中用户的购物车表会多出一条刚刚添加的商品数据，服务器也会返回执行成功信息（以及一个非空的数据串）给PHP，而用户的界面会显示“成功加入购物车”字样。

如果执行失败网站开发，也会将失败信息（err）传递给PHP，用户界面也会显示相应的提示。

由于当前网页使用大量的JS，浏览器在打开页面时会占用大量内存。服务端的压力得到了缓解，但是压力却转移到了客户端。

3. 如何优化页面打开速度