使用 HTML5 历史记录进行完整的 AJAX 导航答案

【问题标题】：Use of HTML5 history for full AJAX navigation使用 HTML5 历史记录进行完整的 AJAX 导航
【发布时间】：2012-04-06 03:11:02
【问题描述】：

我想使用 HTML5 window.history 功能在我的网站上实现完整的 AJAX 导航。我找到了一个demo which shows an implementation of window.history，其中一些内容被传递到历史记录中，这些内容可以被回调并显示在文本区域中。我想遵循并扩展这种方法：

单击链接时使用 AJAX 更改整个页面内容。
在加载新内容之前，将页面的全部内容保存在当前 URL 的历史记录中。
加载新内容、更改 URL 并将新内容保存到历史记录。

这样，当用户按下 previous 和 next 浏览器按钮时，页面内容将相应更新，而不会触发 HTTP 请求，给用户一个非常流畅的基于 AJAX 的体验。

问：您能预见使用这种方法的潜在问题吗？（当我将整个页面保存到历史记录时，我特别考虑浏览器内存）

【问题讨论】：

标签： jquery html url browser browser-history

【解决方案1】：

我个人会告诫不要这样做，因为您正在重新发明轮子。我见过很多人尝试这样的事情，但很少有人能很好地工作。也就是说，这里有一些事情需要考虑：

是的，内存会增长，但根据站点的广度和源的复杂性，您可能会没事的。
您的站点在没有 Javascript 或 AJAX 调用的情况下仍应能正常运行。您应该始终生成最终会加载正确页面的 URL，以便用户可以正确复制和粘贴链接。（这是许多自制解决方案出现问题的地方。）
使用 Modernizr 测试历史记录支持，这样您就不会在旧版浏览器 (IE8) 中出现问题

【讨论】：

-About memory growth: 我会做一些测试来看看浏览器是如何处理这个问题的。也许存储压缩的数据会有所帮助（尽管它会将问题转移到 CPU 使用率上）。 -About non-AJAX functionality：当然。 -About Modernizr：有什么理由推荐它而不是其他库，例如jQuery？
Modernizr 更能确保您的网站在没有 AJAX 加载的情况下也能正常工作，它不是 jQuery 的替代品。您可以测试对历史 API 的支持，并在不支持它的浏览器中做一些不同的事情。回到内存：我假设您正在缓存 HTML 源代码，对于一个复杂的页面，它可能在 1KB 到 50KB（或更多）之间。这是一个非常简单的计算，可以确定它的增长速度。对于桌面浏览器来说，几 MB 就可以了，但对于移动用户来说可能会推送它。
同意移动用户的观点：我计划为他们提供一个更轻量级的网站版本，以解决这个问题。