如何在服务器处理请求时正确地提供加载页面

Question

我有一个Web应用程序，有时会变得有点沉重，需要一点时间来加载。

我想在服务器上加载用户访问的页面时提供加载页面。现在，因为这不是ajax或对事件的回应，我不确定如何继续这里。

我提出了一个相当丑陋的替代方案，就像这样：

1：用户访问www.myapp.com/heavypage。

2：如果请求来自myapp.com/loading，请提供myapp.com/heavypage。    否则，如果请求来自其他任何地方，请重定向到myapp.com/loading。    页面myapp.com/loading基本上是一个带有加载gif的蓝色屏幕，在加载时会触发重定向：onload="redirectToHeavyPage()"。

3：当服务器处理重定向（需要时间）时，用户就是 看到一个漂亮的加载页面。

通过这种方式，我可以在服务器上处理heavypage操作时向用户显示一些信息。

它有效，但我觉得这是完全错误的做法，即使它完全符合我的预期，主要是慢速连接（如gprs）。请注意，我无法将加载gif放在heavypage上的任何位置，因为它只会在服务器处理完所有内容后才会提供。

这样做的正确方法是什么？

Answer 1

虽然您的计划有效，但更简洁的方法如下：

1. 当浏览器请求/heavypage时，只有具有不需要任何处理或数据库查询的加载动画的HTML shell返回给客户端。最好通过在浏览器，CDN或反向代理缓存中缓存HTML来完全跳过此步骤。
2. 在HTML中，通过JavaScript异步加载昂贵的HTML。您无需等待onload事件，但可以通过内联脚本标记直接触发此事件。
3. 在响应回调中，将接收到的内部HTML呈现给目标元素，例如， body。

无论您使用的是单页应用程序框架（如React还是Angular）还是经典的服务器端呈现，此方案都可以正常运行。唯一的区别是，如果2.发送一个HTML片段或一些呈现在客户端的JSON。

如果您使用的是HTTP / 2，那么使用服务器推送可以提供另一种更有效的解决方案。当在服务器（或CDN）上接收到1.时，可以在不等待使用新推送功能的客户端请求的情况下运送计算上昂贵的数据。但是，如果往返延迟比/heavypage渲染时间慢，则只需要这样做。