缓存并避免重新加载 html、css 和 js 文件答案

【问题标题】：cache and avoid reloading html,css, and js files缓存并避免重新加载 html、css 和 js 文件
【发布时间】：2015-06-18 08:22:54
【问题描述】：

我在我的模板中使用了 node.js 和 ejs，并为我的所有 html 文件包含了包含所有库和样式文件的 header.html。我遇到的问题是，当我在 html 文件（例如：home.html 和 about.html）之间切换时，它会重新加载所有 html、css 和 js。

如何缓存 js 和 css 文件，避免在渲染时重新加载？

是否有一种简单方便的方法（插件）来换出正文内容，而不是每次为每个 html 文件重新加载 header.html？

HTML 文件（home.html 和 about.html）

<% include header.html %>
<body>
    <% include navbar.html %>
    <% include menu.html %>
</body>

home.html 和 about.html 的路由文件

router.get('/', function(req, res) {
    req.getConnection(function (err, conn) {
        res.render('home', {data: rows});
    });
});

我需要在后端执行很多查询，并且需要将数据返回到前端。

【问题讨论】：

【解决方案1】：

您要求做的是构建一个应用程序，该应用程序加载的数据将保持静态，而网站的某些区域会根据用户交互或其他原因动态变化。

这称为单页应用程序（SPAhttps://en.wikipedia.org/wiki/Single-page_application），其中涉及的主要技术是AJAX。有很多方法可以做到这一点，许多框架（如 AngularJS、Knockout 等）也可以帮助您做到这一点。

如果您通过服务器端代码加载新的页面状态，那么如果您希望以正确的方式实现此效果，您的架构将需要重构或最好重建。每次您的用户刷新页面时，所有数据都必须重新发送给用户，因此您必须在每次更新时重新发送整个视图（数据和 dom 节点脚本包括图像等）。在 UI 上执行。

您可能会在服务器上缓存一些内容，甚至是用户尚未访问过的客户端缓存页面...但是如果没有 ajax，您确实无法绕过这样一个事实，即每次您希望制作时都必须重新加载整个页面更新。

关于如何使用 NodeJS 构建它的演示比海洋中的鱼还多，但这里是我的 SERP 结果中最受欢迎的一个 https://scotch.io/tutorials/creating-a-single-page-todo-app-with-node-and-angular。

【讨论】：