Question

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

只有0.5％的访问者使用拨号，我不包括查询字符串（旧时间），外部链接（http）和pdfs（我们的大文件采用此格式）。 在生产网站上，预取未考虑的其他可能的负面情况是什么？

<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>

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

Answer 1

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

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

不那么有害的是，网站可能会采用智能技巧来跟踪活动，从而跟踪每个预取的页面。这可能会影响您网站的统计信息或日志记录，并可能会让您误读用户的活动。

那就是说，我喜欢这个主意！： - ）

Answer 2

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

我猜html源20-30kb的速度增益相当低。您的函数不会预加载任何图像，css或js文件，只会预加载纯HTML代码。

Answer 3

在我看来，没有多大意义。如果你无论如何都在全网站使用javascript和CSS，那么你唯一需要缓存的就是图片，这可以在每页的基础上使用javascript来完成。在我看来，你给你的服务器做了太多不必要的工作。

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

Answer 4

您是否考虑过HTML 5中定义的预取？我不太确定目前有多少浏览器支持它，但值得查看恕我直言。我想FF supported it，但我无法让它发挥作用，但Chrome确实似乎做到了。

通常你可以设置在头部：

<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>

Answer 5

这是一个缺点： Chrome正在尝试预取我的事件跟踪像素，因为我将其写入页面时会产生双重展示次数。

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

5 个答案: