使用JavaScript预取网页有什么缺点吗？

Question

我目前正在尝试使用下面的代码（需要jQuery）来预取页面，以提高我们网站的感知性能。

只有0.5％的访问者使用拨号连接，我排除了查询字符串（旧时好时光），外部链接（http）和pdf文件（我们的大文件采用此格式）。在生产环境中，预取可能会带来哪些其他负面影响，我还没有考虑到？

<script type="text/javascript">
$(document).ready(function() {
$("a").each(
function(){
    $(this).bind ("mouseover", function() {
        var href=$(this).attr('href');
        if (
            (href.indexOf('?') == -1)&&
            (href.indexOf('http:') ==-1)&&
            ($(this).hasClass('nopreload') == false)&&
            (href.indexOf('.pdf') == -1)
        ) {
            $.ajax({ url:href, cache:true, dataType:"text" });
        }
    });
    $(this).bind ("mousedown", function(btn) {
        if (btn.which==1) {
            var href=$(this).attr('href');
            if ($(this).hasClass('nopreload') == false) {
                window.location.href = href;
                return false;
            }
        }
    });
});
});
</script>

对于某些链接，当鼠标悬停在其上时，它将预加载页面，并在鼠标按下后导航（而不是在按钮释放后）。

- svandragt

---

以上代码可以绕过链接中的任何内联JavaScript，例如弹出窗口。您可以为这些链接添加一个类而不进行预加载。 - svandragt

Answer 1

在编码不良的网站上（这种网站有很多），点击链接可能会产生影响。例如，在许多网站上，删除按钮实际上是一个链接，当单击时，会删除记录。您必须确保您的网站没有标准的香草链接，当发送GET请求时，会产生有害的副作用。

您还必须确保用户无法包含类似的链接。我还可以想象到外部投票服务的链接，例如通过添加可点击的链接在某个论坛中轻松地进行投票，更新投票并重定向到REFERER。

相对无害的是，网站可能会做一些聪明的技巧来跟踪活动，从而跟踪每个预取页面。这可能会影响您网站的统计数据或日志记录，并潜在地给您提供扭曲的用户活动视图。

话虽如此，我喜欢这个想法！ :-)

- skrebbel

---

哦，等等，投票的事情不适用，因为你排除了外部网站。嗯，总的来说还是一个有效的例子，我想。。 - skrebbel

添加了“nopreload”类的检查，以便具有副作用的链接可以正常工作。 - svandragt

Answer 2

右键单击也会触发鼠标按下事件 - 因此您可能需要检查事件数据。

我想对于20-30kb的HTML源代码，速度提升相当低。 您的函数不预加载任何图像、CSS或JS文件，而仅预加载纯HTML代码。

- jantimon

---

谢谢，我已经更改为：$(this).bind("mousedown", function(btn){ if (btn.which==1) { - svandragt

Answer 3

你有考虑过在HTML 5中定义的Prefetching吗？我不确定当前有多少浏览器支持它，但是在我看来值得去了解一下。我以为火狐支持, 但是我没能让它工作起来，但是Chrome似乎可以实现。

通常情况下你可以在head中设置：

<link rel="prefetch" href="abc.html">

一个快速的测试，在Chrome中动态地“onmouseover”也可以工作：

<a onmouseover="var l=document.createElement('link'); l.rel='prefetch'; l.href=this.href; document.getElementsByTagName('head')[0].appendChild(l);" href="abc.html">abc</a>

- RoToRa

---

很好的想法，那么数据计划敏感设备的浏览器可以决定不实现预取，而我的js解决方案则无法做到。 - svandragt

Answer 4

这里有一个不利之处： 当我将事件跟踪像素写入页面时，Chrome会尝试预取它们，导致出现重复的印象。

- mark

Answer 5

在我看来，这没什么意义。如果您已经在整个站点使用javascript和CSS，则额外缓存的唯一内容是图像，而这可以在逐页基础上使用javascript完成。对我来说，您的服务器会不必要地承担过多的工作。

当您悬停链接时，它会加载并缓存页面，是正确的。但是当您导航到该页面时，浏览器将再次请求该页面，服务器仍然需要构建并发送它，这使得缓存过程毫无意义。

- Alex