javascript - Chrome 预呈现功能导致交互式页面出现问题

Question

对于较新的 Google chrome 浏览器，即版本 17+(不确定其他浏览器是否也这样做)，似乎默认情况下启用了预渲染功能(参见 http://support.google.com/chrome/bin/answer.py?hl=en&answer=1385029)，这意味着页面是甚至在用户在地址栏中输入完 url 之前就已加载!

我想这对于主要包含静态内容的页面来说是一个很好的技巧，它可以欺骗用户通过有效地提早加载页面来加快页面加载速度。但是，这对于在加载时触发某些操作/逻辑的页面来说是有问题的。

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

有没有什么有效的方法来处理这个浏览器功能，除了关闭它是开发人员无法控制的？一些 JavaScript 技巧？

Answer 1

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

使用 document.webkitVisibilityState 检查它是否处于“prerender”状态。如果它是“prerender”状态，请不要连接 websocket。

希望这对您有所帮助。加油!