离线HTML客户端与服务器端呈现

Question

我以HTML页面的形式创建交互式报告，需要可以脱机访问。哪个选项会产生更好的性能？

• 预先创建所有HTML（通过服务器端脚本）并隐藏除一个（着陆页）以外的所有“视图”。当用户点击菜单项时，隐藏当前可见视图并取消隐藏与其选择对应的视图。
• 将所有数据包含为JavaScript变量/对象。当用户从菜单中选择一些东西时，使用像Handlebars.js这样的模板引擎来创建所需的HTML。

我发现其他文章覆盖客户端与服务器端呈现，但没有特定的离线应用程序，将无法拨打电话回到服务器请求特定的数据点。就我而言，所有数据（从几百到几千条记录）必须从一开始就包含在HTML中。

Answer 1

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

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

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

还有一点 - 如果一切都在客户端上呈现，应用程序应该很容易完全无需服务器。您可以将json文件与数据以及应用程序代码和资产一起发送出去，在这种情况下，它可以在没有服务器的情况下运行（当然，如果此用例与您的情况相关，这只是一个要点）。