Question

我有一个看起来像这样的页面：

<!doctype html>
<head></head>
<body>
    <div>Content 1000 chars</div>
    <div>Content 1000 chars</div>
    <div>Content 1000 chars</div>
</body>
</html>

当客户端下载页面时，基本上他正在下载3100个字符。如果他再次访问该页面并且第一个div的内容发生变化，他将不得不再次重新下载整个页面（3100个字符）。

现在基本上我想知道我们能够像处理图像一样缓存HTML片段吗？

所以我觉得有什么地方可以达到这个效果：

 <!doctype html>
<head></head>
<body>
    <div src="page1.html"></div>
    <div src="page2.html"></div>
    <div src="page3.html"></div>
</body>
</html>

因此，如果我要更改page1.html的内容，浏览器将能够知道自上次访问后仅更改了page1.html，并下载了1000个字符而不是整个页面（3100）字符。基本上这种行为与图像现在发生的行为相同：

 <!doctype html>
<head></head>
<body>
    <img src="img1.gif">
    <img src="img2.gif">
    <img src="img3.gif">
</body>
</html>

通过更改img1.gif将调用浏览器仅重新下载img1.gif（假设所有其他文件尚未编辑）

要明确的是，我不是在寻找一个AJAX解决方案。我需要一个无需javascript的解决方案（与上述所有示例一样）。我也不是特别赞成框架解决方案，但如果没有其他选择/怪癖/ hacks

，我会接受这个答案。

Answer 1

您是否想过IFrame？

但是，我认为这是一个微观优化，它没有任何优势（除了服务器应用程序内部的缓存，这是一个完全其他的可以o'worms）。

（或者你在这里谈论 way 超过3000个字符。）

编辑： 是另一种解决方案，但不使用AJAX的HTML文档中的任何浏览器都不支持，只有一些服务器方案：HTTP Range requests。您可以通过附加标题告诉服务器仅返回文档的特定范围：

GET /large-document.html HTTP/1.1
Accept-Range: bytes
Range: bytes=0-500

响应将仅包含前500个字节。此技术用于恢复中止的下载，例如。

但正如我所说，这对你的场景没有帮助。首先，没有AJAX（或在下载管理器之外），没有浏览器支持此功能。而对于第二个，客户端不知道，要求哪个范围，以及将其放在已取出的文档中以替换旧部件。

如果您确实需要支持旧版浏览器，包括IE3和Netscape 2，甚至是旧版本的Lynx版本，请使用经典<frameset>，而不是<iframe>。自从马赛克的旧时代以来，基本上都支持它，然后专门为这项任务而设计。（因此，当浏览器出现时，它是您选择支持的首选工具。）

Answer 2

我能想到的唯一方法是在没有任何JavaScript的情况下实现您的目标，而是使用frames。但是，有a number of disadvantages to frames，在您的网站上使用它们之前应该注意这些。

Answer 3

Firefox和Chrome的现代版本本身就是这样做的 - 它们可以随时缓存图像和代码。实际上，重新加载的唯一方法是在浏览器级别清除缓存。

您可能还希望研究反向代理缓存，它基本上可以在站点范围内执行您正在执行的操作，以避免数据库流量。 Varnish是一个很好的选项，可以缓存页面并且可以高度自定义。

Answer 4

我不知道做这样的优化是否合理。现代浏览器接受数据压缩（现代服务器执行此操作），文本压缩效果非常好。您必须使用输出缓冲（例如，请参阅ob_start in PHP），以便服务器不会以小块的形式逐块发送页面，但它会等待一段时间以使输出准备就绪，然后压缩它并发送给客户端，客户端解压缩它。

现在非常不鼓励使用框架作为布局技术（也许iframe有时是一个很好的解决方案，但这取决于它。）

我们如何缓存HTML“片段”？

4 个答案: