javascript - 离线 HTML 的客户端与服务器端渲染

Question

我正在创建一个需要离线访问的 HTML 页面形式的交互式报告。以下哪个选项会产生更好的性能？

• 提前创建所有 HTML(通过服务器端脚本)并隐藏除一个(着陆页)之外的所有“ View ”。当用户点击菜单项时，隐藏当前可见的 View 并取消隐藏与其选择相对应的 View 。
• 将所有数据作为 JavaScript 变量/对象包含在内。当用户从菜单中选择内容时，使用 Handlebars.js 等模板引擎创建所需的 HTML。

我发现其他帖子涵盖了客户端与服务器端呈现，但没有专门针对无法回调服务器以请求特定数据点的离线应用程序。在我的例子中，所有数据(从几百到几千条记录)都必须从一开始就包含在 HTML 中。

Answer 1

出于一个简单的原因，我会将数据和模板发送到客户端并在客户端上呈现 HTML - 它可能会工作得更快(当然这取决于您的实际数据)。

首先，如果您在服务器上预呈现 HTML，要传输的数据量通常会大得多。模板和原始数据会小得多，因此应用程序加载速度会更快。

其次，用户可能不需要所有呈现的页面。如果只使用了一部分页面，则浪费了服务器上渲染所有页面的资源。

还有一点 - 如果所有内容都在客户端呈现，则应该很容易使应用程序完全无服务器。您可以将包含数据的 json 文件与应用程序代码和 Assets 一起发送，在这种情况下，它可以在没有服务器的情况下工作(当然，如果此用例与您的情况相关，这只是一个要点)。