使用 Javascript 进行片段缓存答案

【问题标题】：Fragment Caching Using Javascript使用 Javascript 进行片段缓存
【发布时间】：2010-12-22 21:07:49
【问题描述】：

有人可以指出一些示例代码，说明如何在使用 javascript 加载页面的动态部分时最好地进行缓存？

我的典型示例涉及一个页面，除了页面顶部的用户登录状态和用户名之外，没有任何变化。通过 jQuery 和 ajax 请求更改此文本很容易，但由于我在 $(document).ready() 上执行此操作，如果您快速查看，您可以在 ajax 请求触发之前看到页面加载类似于“单击此处登录”并更新页面的该部分。

编辑澄清：

如果我缓存整个页面，会发生以下情况。

用户 A 请求页面
页面没有缓存，所以应用程序会生成右上角带有“Hi User A”的html
用户 B 请求页面
页面已缓存，因此应用程序按原样为我们提供服务——包括“Hi User A”位

理想情况下，在第 2 步，页面将在没有“Hi User A”位的情况下被缓存，因此当有人请求该页面时，我会发出一个简单的 ajax 请求来获取问候语，然后将其推入 dom。

我假设 javascript 是要走的路，但我认为必须有比等待$(document).ready() 更好的方法，这样页面才能更自然地呈现。

如果它很重要（尽管我认为它不应该，因为适用于静态 html 的解决方案也适用于我正在做的事情），我正在使用 rails 2.3.x 和 jQuery。

【问题讨论】：

在服务器上而不是在 Javascript 中进行这种操作会好得多。
当然会，但这意味着我要为每个请求重新生成整个页面。我正在尝试避免。 :)
@jerhinesmith 不，我会缓存页面的片段。或者只为注销的用户缓存整个页面。
我想过走那条路。当真的只有一行发生变化时，缓存片段感觉很奇怪。我会跳过箍来缓存那个小 div 周围的所有片段。只为已注销的用户缓存是一个有趣的想法。
如果您希望在整个 DOM 准备好之前触发，可以在所述元素下方放置一个 <script>functionThatUpdates()</script>。

标签： javascript caching fragment-caching

【解决方案1】：

我最初会在服务器的主页上加载用户状态，使用与生成 AJAX 响应相同的东西。然后当用户更改状态时，使用 AJAX 客户端进行更新。

这样，初始页面具有正确的状态，但在用户执行操作时仍然可以更改。

假设getStatus() 方法为用户所处的任何状态生成正确的HTML。在页面上，我将有一个包含此信息的<div>。服务器端，调用getStatus()（以PHP为例）：

<div id="status"><?php =getStatus() ?></div>

然后让您的 AJAX 请求返回 getStatus() 并更新 <div id="status"> 内容。

【讨论】：

这就是我现在正在做的事情。问题是在文档准备好之前状态不会改变——这意味着如果渲染需要半秒钟，你可以在 javascript 更新它之前短暂地看到缓存的状态。这有意义吗？
那不是你在做什么。 getStatus() 应该在显示页面上的任何内容之前调用服务器端。浏览器只会将其解释为普通 HTML，而不是 javascript 必须接触的任何内容。
不，如果您只是提供一个 html 页面，则不会调用 getStatus()。只有在您提供动态页面（通过 php/rails/etc）时才会调用它......除非我没有正确理解您。
是的......但它仍然是服务器端。如果您请求index.php，它不会为用户状态第一次额外调用status.php。 getStatus() 在 index.php 内部，然后当状态通过登录或其他方式更改时，AJAX 调用它并通过status.php 更改。

【解决方案2】：

啊哈！有一个 railscast 完全符合我的要求！

Rails-y 的优点可以在这里找到：http://railscasts.com/episodes/169-dynamic-page-caching

【讨论】：