浏览器调试 - 如何让浏览器重新加载来自服务器的响应而不重新请求它？答案

【问题标题】：Browser Debugging - How can I get the browser to reload the response from the server without re-requesting it?浏览器调试 - 如何让浏览器重新加载来自服务器的响应而不重新请求它？
【发布时间】：2011-07-25 18:28:33
【问题描述】：

在开发过程中，我们的 rails 应用运行缓慢。在使用 javascript 时，由于响应时间较慢，在浏览器中预览会很痛苦。有没有办法让浏览器简单地重新处理请求，并且仍然加载新资产，而不重新请求页面本身？

理想的解决方案是 chrome 或 firefox。

谢谢。

【问题讨论】：

不清楚是什么问题。是网络问题吗？您可以使用假数据并单独测试 JavaScript 吗？你可以使用本地存储吗？您是否尝试通过 ajax 加载这些“新鲜资产”而不重新加载整个页面？
我正在尝试重新处理客户端上的最后一页请求。应该访问服务器的唯一请求是 css、javascript 和图像调用。这纯粹是一种使用 css 和 javascript 的方式，而不必在每次刷新时重新请求 html。
您是说要动态重新加载 js 和 css，然后让浏览器重新渲染页面而不从服务器重新加载 html（新 dom）？
是的。这正是我正在寻找的。span>

标签： firefox dom browser google-chrome refresh

【解决方案1】：

通常你可以做的是利用缓存。只要服务器提供正确的Last-Modified、ETag、Expires 和Cache-Control 标头，浏览器就不应重新请求该 URL，除非您在浏览器中按 F5。 p>

例如，您可以在IFRAME 或老式FRAME 中加载您的应用程序，并添加一些JavaScript 代码，这些代码可以快速离开页面，然后返回到相同的URL。这会强制浏览器从缓存中重新加载 URL 并重新解释它。

当然，您应该确保在您进行更改（例如在 URL 查询字符串中添加版本号或类似的东西）后，该 URL 是从服务器重新加载。

不幸的是，浏览器缓存并不总是可以准确预测。

希望这会有所帮助。

【讨论】：

不是我想要的。认为可能有一种 api 级别的方式来触发页面内容的重新处理，而无需访问服务器以获取 html 或其他任何内容 - 这不是缓存问题。
“触发页面内容的重新处理，而不需要访问服务器的 html”——这正是缓存的用途。为什么缓存不能解决问题？
您可以尝试在 onLoad 事件中保存 document.innerHTML 并恢复该属性以让浏览器重新处理页面。不确定这是否能解决您的问题。无论如何，AFAIK 没有本地 API 调用让浏览器重新处理页面（毕竟这没有多大意义）。

【解决方案2】：

我在这里考虑几种可能的解决方案：

也许最简单的方法是将整个页面保存到一个 html 文件（文件/另存为在浏览器中），并将生成的 HTML 页面放在服务器上的相同上下文中。使用此解决方案，您可以使用相同的域策略。您可能需要至少一次预取数据或为您的用户建立一个活动会话，但仅此而已。显然，如果繁重的工作是处理 ajax 请求，这将不起作用。

第二种解决方案是使用 Web 服务器（如 apache）作为应用程序服务器的代理。您使用不同的域或上下文来确保您不会缓存正常的应用程序，而只会缓存在为 UI/设计测试保留的域中。然后可以微调将缓存或不缓存的内容（ajax 请求、html、css ...）。当您想强制刷新时，您只需清空缓存即可。使用代理允许您不修改默认应用程序行为

【讨论】：

【解决方案3】：

好的，如何获取 DOM 元素（可能通过使用 jquery contents() 函数）并将其保存到浏览器本地存储中。然后使用类似这样的东西重新加载 js 和 css（来自Can't append <script> element，我在 Facebook js 动态加载上看到了类似的语法）

var script = document.createElement( 'script' );
script.type = 'text/javascript';
script.src = url;
$("#someElement").append( script );

一旦重新加载 js 和 css，然后用浏览器本地存储中的值替换 DOM 元素。

没有尝试过，但该策略似乎可行。

【讨论】：

【解决方案4】：

听起来你需要ajax。当您在浏览器中请求页面时，通常会加载整个页面 - 它会中断您的用户进程并且需要时间。如果使用 ajax，只有部分页面会重新加载：

browser       ajax      server
  |            |         |
  |--js event->|         |
  |            |--HTTP-->|
  |            |<--data--|
  |<--handler--|         |

您的 ruby 代码只需返回新数据的一部分 - 有时甚至只是“OK”或“error”，例如登录。同时，由于 ajax 是真正的 javascript，您的用户不会看到中断：在他们仍在阅读或继续填写表单时引入了新数据。

【讨论】：

不是我想要的，我当然使用 ajax。我要做的只是让浏览器重新处理它收到的整个响应并重新加载样式表和 javascript。

【解决方案5】：

我刚刚在互联网上闲逛了一下，发现了一个名为 CSS Refresh 的 firefox 插件，看起来它可以在不加载页面的情况下刷新你的 css，但我还没有尝试过，所以不确定它是否有效.

对于您的 javascript，您可以触发通常在加载等时触发的事件/函数 - 手动使用 javascript 控制台（例如 firebug command line）。

我确信有更好的方法，但至少看起来是可能的。

【讨论】：

【解决方案6】：

用于 FF 或 Chrome 的 Web Developer 工具栏和用于 Chrome 的 Pendule 都能够从源代码重新加载 CSS 和 JS，而无需重新加载 HTML。

【讨论】：

【解决方案7】：

您可以使用Fiddler。它是一个 HTTP 代理，在您的机器上本地运行，并为您提供通过它的所有流量的简单日志（有点像 Firebug 中的 net 选项卡所做的）。它具有自动响应与给定模式匹配的 URL 的选项。所以，你可以：

向 rails 应用发出初始请求，等待它完成。
将响应保存到本地 HTML 文件
为该 URL 设置一个自动响应程序，改为使用本地文件进行响应。

所以，现在浏览器认为它正在与服务器进行往返，但 fiddler 正在拦截请求并返回相同的静态内容。

【讨论】：