javascript - 从服务器端代码加载 knockout js 模型的最佳实践

Question

我继承了一个使用 knockout js 和 asp.net 的网站。该站点在加载所有内容后运行良好，但初始加载还有很多不足之处。通过代码挖掘，大约有 20 个模型，每个模型都调用一个 ajax 方法在页面加载时从服务器获取数据。有相当多的数据正在从数据库中查询，这导致了服务器发送 js 时的性能问题，然后客户端通过 20 多种方法发送和接收大量数据。

我想在将查询发送到客户端之前在服务器端处理所有查询，然后从该数据加载 js 模型。我正在考虑将此数据作为 JSON 发布到页面上隐藏的 div 中，并从那里加载模型而不是 ajax 调用。

我的问题是，这是最佳做法吗？有没有更好的方法来优化这个场景？

Answer 1

如果在页面响应中内联 20 个查询的数据，那么页面响应时间会大大延长。这将导致浏览器不得不从上一页或无聊的空白页面开始等待。

但是，如果您保持解决方案不变，那么用户最初访问页面的速度会快得多，并且数据会在准备就绪时弹出。

虽然内联数据可能会缩短总加载时间，但从用户 Angular 来看，感知性能会变差。这是一篇关于这个主题的好帖子:http://www.lukew.com/ff/entry.asp?1797

另一个好处是您没有最弱链接问题，因为页面响应时间将是最慢的查询。这在查询超时条件下会非常严重。

如果一个查询失败，也要注意问题，那么您仍然必须内联成功的查询，并处理失败的查询。

我认为从浏览器进行查询要好得多。

如果您希望更高效地执行 20 个查询，可以考虑一些技巧。考虑使用 SignalR 之类的东西在单个连接中发送所有查询，并让结果也在单个连接中流回。我以前使用过这种技术并取得了巨大成功，它还使我能够在返回来自慢速后端服务的最新结果之前流回缓存结果(来自服务器端缓存)。