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

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

提前创建所有HTML（通过服务器端脚本）并隐藏所有＆＃34;视图＆＃34;除了一个（着陆页）。当用户单击菜单项时，隐藏当前可见的视图并取消隐藏与其选择对应的视图。
将所有数据包含为JavaScript变量/对象。当用户从菜单中选择某些内容时，请使用像Handlebars.js这样的模板引擎来创建所需的HTML。

我发现其他帖子涉及客户端与服务器端呈现，但没有特定于离线应用程序，这些应用程序无法回调服务器以请求特定数据点。就我而言，所有数据（从几百到几千条记录）必须从一开始就包含在HTML中。

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

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

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

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