使用 Ajax 预加载（=缓存）一个完整的网站——可能的问题？答案

【问题标题】：Preloading (=Caching) a full Website with Ajax – Possible Problems?使用 Ajax 预加载（=缓存）一个完整的网站——可能的问题？
【发布时间】：2012-09-20 19:37:37
【问题描述】：

我目前正在为一个页面上包含大量图像的建筑师构建一个作品集网站。导航是使用 history.js (=AJAX) 完成的。为了节省加载时间并使整个事情更加“活泼”，我编写了一个脚本，该脚本会爬取页面正文以获取指向其他页面的链接，并在后台自动获取这些链接。到目前为止，它就像一个魅力。

它基本上保留了一个包含所有链接的队列数组。一个 setTimeout() 函数通过它们工作并使用 jQuery $.ajax() 获取每个页面。生成的 HTML 存储在 Javascript 对象中。

现在，这是我的问题： 在不同的机器/浏览器/操作系统上使用它可能会出现什么问题？

我在想：

最大。 javascript 对象/可变大小（获取的 HTML 存储在 javascript 对象中）
可能的性能问题
最大。异步请求的数量？
……你能想到什么？

非常感谢，

爱好程序员

【问题讨论】：

除了我在回答中所说的：“你能想到的任何事情”都太模糊了，我建议你编辑你的问题以使其尽可能具体，或者它可能被关闭为“没有建设性”（见faq）。
有问题吗？用尽了人们可能永远不会使用的带宽？

标签： javascript jquery ajax performance caching

【解决方案1】：

虽然在客户端缓存整个网站可能是个好主意，但有很多事情可能会导致问题：

内存
网络服务器上的不必要负载
将不需要的页面加载到内存中
某些用户的互联网受到限制，因此在这些情况下加载整个网站并不明智
一旦用户离开或刷新整个“缓存”就会消失

我要做的是首先尝试优化服务器端。添加一堆从数据库到用户的缓存机制，“Expires”标头真的可以帮到你。

如果这没有帮助，我会考虑在离线缓存中缓存一些页面（哪些页面由您决定），请参阅 (HTML 5 Offline Features)

这样即使在页面重新加载时您也很安全，将内存保持在最低限度并且只加载您需要的内容。

PS：不要试图重新发明浏览器已有的东西：P

【讨论】：

谢谢。我猜可能的问题超过了优势，所以我会坚持使用服务器端缓存。离线缓存对我来说似乎有点过头了，至少对于一个简单的投资组合而言。
只需添加缓存标头即可解决您的许多问题 :)

【解决方案2】：

您应该将异步请求排队，并且一次只启动一个。

而且由于您将所有内容都存储在变量中，在某些时候您（浏览器）可能会消耗大量内存，并且整个事情会变得非常缓慢。我建议您将缓存的大小限制为一定数量的页面。

【讨论】：

感谢您的回答。我已经将异步请求一次限制为 2 个。当请求完成并且该请求的所有图像都已完全加载时，将触发下一个请求。我很好奇是否可以检测到最大内存使用量？

【解决方案3】：

您也可以尝试不存储获取的内容 - 只需获取并丢弃。浏览器仍然会将获取的页面和图像缓存在其内部存储中，因此后续加载会更快（当然，如果 ajax 库没有强制禁用缓存，即使用 POST）

【讨论】：