使用Ajax预加载(=缓存)整个网站-可能存在的问题？

Question

我目前正在为一名建筑师建立一个作品集网站，该网站在其页面上有大量图片。 导航使用history.js（= AJAX）完成。为了节省加载时间并使整个过程更加“流畅”，我编写了一个脚本，它会遍历页面主体以查找指向其他页面的链接，并在后台自动获取这些链接。到目前为止，它运行得非常好。

它基本上保留了一个队列数组，其中包含所有链接。一个setTimeout()-函数逐个处理它们，并使用jQuery $.ajax()获取每个页面。结果HTML存储在Javascript对象中。

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

我考虑以下内容：

最大的JavaScript对象/变量大小（获取的HTML存储在JavaScript对象中） 可能的性能问题 异步请求的最大数量？ ......您能想到的任何内容？

提前感谢您， 一位业余程序员

- user1613835

---

除了我在回答中提到的内容：“你能想到的任何东西”有点太模糊了，我建议你编辑你的问题，尽可能地具体化，否则它可能会被关闭为“不具有建设性”（请参见faq）。 - bfavaretto

问题？使用了可能永远不会用到的带宽？ - epascarello

Answer 1

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

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

我会首先尝试优化服务器端。从数据库到用户添加一堆缓存机制，“过期”头可以真正帮助您。

如果这样做没有帮助，那么我会考虑在离线缓存中缓存一些页面（哪些页面由您决定），请参见（HTML 5离线功能）

这样即使在页面重新加载时也是安全的，将内存保持到最小，并且只加载所需内容。

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

- Shedokan

---

谢谢。我想可能存在的问题比优点更重要，所以我会坚持使用服务器端缓存。离线缓存对我来说似乎有些过头了，至少对于一个简单的作品集来说是这样。 - user1613835

只需要添加缓存头就可以解决你的很多问题 :) - Shedokan

Answer 2

你应该将异步请求排队，每次只启动一个。

而且，由于你把所有东西都存储在变量中，浏览器可能会消耗太多内存，在某些时候整个过程会变得非常缓慢。我建议你将缓存的大小限制为一定数量的页面。

- bfavaretto

---

谢谢你的回答。我已经将异步请求限制为每次只能进行2个。当一个请求完成并且该请求的所有图像都完全加载时，下一个请求就会触发。 我想知道是否有可能检测到最大内存使用量？ - user1613835

Answer 3

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

- irezvin