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

【问题标题】：Are there any downsides to prefetching webpages using javascript?使用 javascript 预取网页有什么缺点吗？
【发布时间】：2023-03-08 13:24:01
【问题描述】：

我目前正在尝试使用以下代码（req. 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>

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

【问题讨论】：

上面的代码绕过了链接上的任何内联javascript，即。弹出窗口。您可以为这些链接添加一个类而不是预加载。

标签： javascript jquery prefetch

【解决方案1】：

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

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

【讨论】：

谢谢，我改成：$(this).bind ("mousedown", function(btn){ if (btn.which==1) {

【解决方案2】：

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

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

危害较小的网站可能会采取聪明的技巧来跟踪活动，从而跟踪每个预取的页面。这可能会影响您网站的统计信息或日志记录，并可能使您对用户活动的看法受到扭曲。

也就是说，我喜欢这个主意！ :-)

【讨论】：

哦，等等，投票的事情不适用，因为您排除了外部网站。 Ahwell，我猜总体上仍然是一个有效的例子..
添加了对“nopreload”类的检查，以便具有副作用的链接正常工作。

【解决方案3】：

在我看来，没有什么意义。如果您仍然在站点范围内使用 javascript 和 CSS，那么您唯一需要缓存的就是图像，这可以在每页的基础上使用 javascript 来完成。在我看来，你给你的服务器太多不必要的工作了。

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

【讨论】：

【解决方案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>

【讨论】：

好主意，然后数据计划敏感设备的浏览器可能决定不实现预取，而我的 js 解决方案不能。

【解决方案5】：

这里有个缺点：当我将它们写入页面时，Chrome 正在尝试预取我的事件跟踪像素，这会导致双倍展示。

【讨论】：