Javascript 平稳/快速加载静态网站部件

我正在写一个小网站，它有几个非常相似的页面。大多数情况下，只有一个div的内容不同。导航、标题等保持不变。 起初，我通过一个html文件和类似的javascript代码（由按钮单击事件触发）实现了这一点：

这项工作非常顺利，但问题是，地址栏中的url不会随着这些请求而改变。因此，用户不可能链接到某些页面。 我知道可以使用#-URL，但我希望有如下URL：

example.com/talks/foo/bar

而不是一些解决办法

为了实现这一行为，我将代码更改为许多html文件，每个文件都执行以下操作：

$.get("content/header.html", function(data) {
    $("#header").html(data);
});
$.get("content/footer.html", function(data) {
    $("#footer").html(data);
});

所以我得到了很好的URL，但现在的问题是，整个事情不是很顺利。因为页眉和页脚在正文后几毫秒出现，所以你不能很好地识别每一个新页面

我的问题是：如何同时实现这两个目标？如果你点击顶部栏中的“探索”或“博客”，所有的“静态”内容似乎都会永久停留在那里。考虑到他们的URL，我认为他们不能用ajax实现这一点

有什么我遗漏的吗

---

关于

@GGG，所以也许我应该试一试，它应该会起作用：）我有点惊讶，我所做的一切就是将前4行从复制到我网站的第二个版本，加载页面时的延迟消失了。。我已经准备好自己推送状态和解码传入的URL。这就是所有的魔力吗？看起来是这样，尽管自己尝试管理它可能是值得的，只是为了看看幕后发生了什么。您应该能够通过几行简单的代码来使用HTML5历史记录。

$.get("content/header.html", function(data) {
    $("#header").html(data);
});
$.get("content/footer.html", function(data) {
    $("#footer").html(data);
});