Chrome预渲染功能对交互页面造成问题

Question

针对更新的Google Chrome浏览器，即版本17+（不确定其他浏览器是否也这样），默认启用了预渲染功能（参见http://support.google.com/chrome/bin/answer.py?hl=en&answer=1385029），这意味着页面在用户完成在地址栏中输入URL之前就被加载了！我猜这对于大多数静态内容的页面来说是个好技巧，通过有效地提前加载页面来欺骗用户使页面更快地加载。然而，对于触发某些操作/逻辑的页面来说，这是有问题的。

例如，考虑一个建立websocket连接并在页面加载时发送消息的页面。当用户输入此页面的URL时，连接可能已经建立并且消息已被发送，但是当用户在地址栏中实际按下“回车”键时，websocket连接会丢失并重新建立，消息将被重新发送，这可能是因为websocket将实际页面加载视为刷新。现在，如果您有一些响应断开连接或接收某些消息的逻辑，这可能会导致服务器端出现混乱的行为。另一个例子可能是重定向，在这种情况下，页面实际上会加载两次，可能会发生双重重定向。

除了关闭浏览器功能（这是开发人员无法控制的事情）之外，是否有任何有效的方法来处理它？一些JavaScript技巧吗？

- skyork

---

你能验证这是真的吗？在我看来，这似乎是谷歌的人会处理的事情。 - bellpeace

@bellpeace，至少根据我的经验，我刚刚通过同时观察服务器日志和浏览器在我开始输入URL时发现了这一点... - skyork

我很确定你会在日志中看到一些东西，因为资源请求正在发生。然而，我不确定JavaScript的执行情况。如果我在内联脚本中有 alert("Hello!")，那么当我正在输入时（在按回车键之前），它会弹出一个警示框吗？ - bellpeace

@bellpeace，不仅仅是我在日志中看到的请求，而且实际的WebSocket连接已经建立并且消息已经发送。所有这些都发生在我按下“Enter”和浏览器呈现实际页面之前。这对于JavaScript执行来说怎么样？顺便说一句，我正在使用最新的Chrome。 - skyork

@bellpeace - 可以确认这是真的。我们也遇到了同样的问题（也是WS）。在我看来，这是Chrome设计不良的特性。 - UpTheCreek

Answer 1

See https://developers.google.com/chrome/whitepapers/pagevisibility

使用 document.webkitVisibilityState 检查它是否处于“预渲染”状态。 如果处于“预渲染”状态，请勿连接 WebSocket。

希望这可以帮到你。 加油！

- Nites

---

document.webkitVisibilityState == 'prerender' 可用于检测此类情况，但在这些情况下仅仅不连接并不简单，例如当用户正在输入时也会发生此类情况。如果连接失败，则应用程序将无法正常工作。 - UpTheCreek

救命稻草！..谢谢你 - KingOfHypocrites

Answer 2

顺便说一下，我遇到了这个问题，并使用可见性状态跳过套接字连接，但是在51.0.2704.103版本中，我的页面突然在第一次加载时只呈现白色。原来他们修复了这个问题，以便预渲染将您的Web套接字连接保留到呈现的页面上，但它不会重新运行您的代码；因此，如果您保留该代码，则最终可能没有Web套接字或出现奇怪的错误，或者是一个白色的页面。有点混乱，但现在我已经将预渲染检查撤回，并且似乎又可以正常工作了。

- Chris Wininger