使用 JavaScript 预取网页有什么缺点吗？
我目前正在尝试使用下面的代码（要求 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>
对于某些链接，将鼠标悬停在其上时将预加载页面，并且在鼠标按下时将导航（而不是在按钮之后）被释放）。
I'm currently experimenting with prefetching pages to increase perceived performance of our website, using the code below (req. jQuery).
Only 0.5% of our visitors use dial-up, I'm excluding querystrings (good old times), externals links (http) and pdfs (our large files are in this format). On a production site, what other possible negative scenario's apply when prefetching that I haven't considered?
<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>
For certain links, when hovered over it will preload the page and on mousedown will navigate (rather then after the button is released).
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
右键单击也会触发鼠标按下事件 - 因此您可能需要检查事件数据。
我猜想 20-30kb 的 html 源代码的速度增益相当低。
您的函数不会预加载任何图像、css 或 js 文件，而只会预加载纯 html 代码。
A right click will trigger a mouse down event too - so you might want to check the events data.
I guess that the speed gain for html source of 20-30kb is rather low.
Your function does not preload any image, css or js files but only the pure html code.
在编码错误的网站（有很多）上，单击链接可能会产生影响。例如，在许多网站上，删除按钮实际上是一个链接，单击该链接即可删除一条记录。您必须绝对确保您的网站具有零标准普通链接，当向这些链接发送 GET 请求时，会产生有害的副作用。
您还必须确保用户不可能包含类似的链接。我还可以对外部投票服务的链接进行成像，例如，通过添加可点击的链接，可以轻松地允许人们在某个论坛中进行投票，从而更新投票并重定向到 REFERER。
危害较小的是，站点可能会采取一些聪明的技巧来跟踪活动，从而跟踪每个预取的页面。这可能会影响您网站的统计数据或日志记录，并可能使您对用户活动的看法发生扭曲。
也就是说，我喜欢这个主意！ :-)
On badly coded sites (which there are MANY), clicking a link might have an effect. For example, on many sites a delete button is in fact a link which when clicked, deletes a record. You have to be absolutely sure your site has zero standard vanilla links that when sent a GET request to, have harmful side effects.
You also have to be sure that it isn't possible for users to include similar links. I could also imaging links to external polling services, which e.g. easily allow one to make a poll in some forum by adding clickable links, which update the poll and redirect to REFERER.
Less harmfully, sites may do smart tricks to keep track of activity, thus keeping track of each prefetched page. This may impact your site's statistics or logging, and potentially give you a distorted view of your users' activity.
That said, I like the idea! :-)
在我看来，没有太多意义。如果您在整个站点范围内使用 javascript 和 CSS，那么您唯一需要缓存的额外内容就是图像，并且这可以在逐页的基础上使用 javascript 来完成。在我看来，您给服务器带来了太多不必要的工作。
当您将鼠标悬停在链接上时，它将加载并缓存页面，这是正确的。但是，当您导航到该页面时，浏览器将再次请求该页面，并且服务器仍然必须构建它并发送它，这使得缓存过程毫无意义。
In my opinion, there isn't much point. If you use javascript and CSS sitewide anyway, the only thing extra you're going to be caching is images, and this can be done using javascript on a page-per-page basis. It seems to me that you're giving your server far too much work to do needlessly.
When you mouseover a link it will load and cache the page, correct. But when you navigate to that page the browser will once again request the page and the server will still have to build it and send it, which makes the caching process pointless.
您是否考虑过 HTML 5 中定义的预取？我不太确定目前有多少浏览器支持它，但恕我直言，值得一试。我以为 FF 支持它，但我无法让它工作，但 Chrome 似乎确实支持做吧。
通常你可以在 head 中设置：
在 Chrome 中动态执行“onmouseover”的快速测试也有效：
Have you considered Prefetching as defined in HTML 5? I'm not quite sure how many browsers support it currently, but it's worth checking out IMHO. I thought FF supported it, but I couldn't get it to work, but Chrome does seem to do it.
Normally you can set in the head:
A quick test to do it dynamically "onmouseover" in Chrome also works:
这是一个缺点：
当我将事件跟踪像素写入页面时，Chrome 会尝试预取它们，这会导致两次展示。
Here's a downside:
Chrome is trying to prefetch my event tracking pixels, as I write them to the page, and it results in double impressions.