【HTML】预加载(Link prefetch)

最新推荐文章于 2024-03-05 18:14:06 发布
最新推荐文章于 2024-03-05 18:14:06 发布
阅读量197 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39415598/article/details/93545672
版权
7275569-c916ff05e2a32c7b.jpg
0011.jpg

页面资源预加载(Link prefetch)是浏览器提供的一个技巧，目的是让浏览器在空闲时间下载或预读取一些文档资源，用户在将来将会访问这些资源。一个Web页面可以对浏览器设置一系列的预加载指示，当浏览器加载完当前页面后，它会在后台静悄悄的加载指定的文档，并把它们存储在缓存里。当用户访问到这些预加载的文档后，浏览器能快速的从缓存里提取给用户。

以下代码是放在<head>标签里面的。

HTML代码：

<!-- 预加载整个页面 -->
<link rel="prefetch" href="http://www.baidu.com/" />

<!-- 预加载图片 -->
<link rel="prefetch" href="http://desk.fd.zol-img.com.cn/t_s1920x1080c5/g5/M00/06/07/ChMkJlo50b6IBlQLAAFGULqiVhcAAjUpgN-M7wAAUZo647.jpg?downfile=1513861639609.jpg" />



HTML5页面资源预加载/预读取(Link prefetch)功能是通过Link标记实现的，将rel属性指定为“prefetch”，在href属性里指定要加载资源的地址。火狐浏览器（Firefox）里还提供了一种额外的属性支持：
HTML代码：

<link rel="prefetch alternate stylesheet" title="Designed for Mozilla" href="mozspecific.css" />
<link rel="next" href="2.html" />



适用情况：
当页面有幻灯片类似的服务时，预加载/预读取接下来的1-3页和之前的1-3页。
预加载那些整个网站通用的图片。
预加载网站上搜索结果的下一页。

在页面里加载什么样的资源，什么时候加载，这完全取决于你期望给用户带来什么样的体验。以上三条只是建议。



禁止页面资源预加载
火狐浏览器（Firefox）里有一个选项可以禁止任何的页面资源预加载(Link prefetch)功能。
user_pref("network.prefetch-next", false);



注意事项：
预加载(Link prefetch)不能跨域工作，包括跨域Cookies。
预加载(Link prefetch)有可能导致网站访问量统计不准确，因为有些预加载到浏览器的页面用户可能并未真正访问。



虽然预加载(Link prefetch)还存在一定缺陷，但适当利用这个功能，在一定程度上能提升用户体验。




希望以上笔记对大家有帮助。

我的其他笔记在微信公众号：Rabbit_svip

7275569-2c6784ee7e8bbfd9.png
image.png
德育处主任Pro
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery-jquery.preloader页面预加载插件
weixin_41395648的博客
09-05 3158
参考文档http://www.htmleaf.com/jQuery/Layout-Interface/201607263781.html * 载入js: &lt;script src="jquery/jquery-3.2.1.min.js"&gt;&lt;/script&gt;     &lt;script src="jquery/jquery.preloader.min.js"&gt;&lt...
HTML5资源预加载(Link prefetch)详细介绍（给你的网页加速）
09-28
HTML5资源预加载，也称为Link Prefetch，是一种优化网页加载速度的技术，旨在提升用户体验，尤其是在用户导航到预测中的下一个页面时。通过Link Prefetch，开发者可以指导浏览器在用户访问当前页面的同时，预先加载...
HTML5的页面资源预加载技术(Link prefetch)加速页面加载
火星的你
05-04 5171
不管是浏览器的开发者还是普通web应用的开发者，他们都在做一个共同的努力：让Web浏览有更快的速度感觉。有很多已知的技术都可以让你的网站速度变得更快：使用CSS sprites，使用图片优化工具，使用.htaccess设置页面头信息和缓存时间，JavaScript压缩，使用CDN等。我曾经介绍过本站上使用的一些速度优化技术。而在HTML5里，出现了一个新的用来优化网站速度的新功能：页面资源预加载/
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
weixin_30580943的博客
10-16 121
方法一：用CSS和JavaScript实现预加载 实现预加载图片有很多方法，包括使用CSS、JavaScript及两者的各种组合。这些技术可根据不同设计场景设计出相应的解决方案，十分高效。 单纯使用CSS，可容易、高效地预加载图片，代码如下： 1 2 3 #preload-01 { background: url(http://domain.t...
HTML5 预加载
weixin_34194379的博客
08-13 339
原文地址： HTML5 Link Prefetching 原文日期： 2010年07月07日 翻译日期： 2013年08月13日 浏览器厂商和开发者之间共同努力的一个方向就是让网站更快。现在已有很多广为人知的加速解决方案：CSS sprites(CSS精灵,拼图)以及图像优化,分布式配置文件(.htaccess),JS/文本文件压缩，CDN加速等。 我在另一篇博文中介绍了 如何...
HTML5 API详解（7）:link prefetch提升加载速度，优化体验
qq_24520459的博客
03-27 1189
链接预取：浏览器会自动在后台把你需要加载的页面下载下来，当用户要点击进入该页面的时候，浏览器会从缓存把这个页面取出来，页面的加载速度就会加快。标签属性：rel=‘next...
详解HTML5中rel属性的prefetch预加载功能使用
09-28
总的来说，HTML5的`rel`属性的`prefetch`、`prerender`以及`dns-prefetch`等预加载技术，都是为了优化网页性能，通过智能预测和提前处理，减少网络延迟，提升用户浏览体验。开发者应根据实际需求和浏览器兼容性来...
HTML5 预加载让页面得以快速呈现
09-28
预加载的实现主要依赖于HTML5的`<link>`标签，配合`rel="prefetch"`属性。例如： ```html <link rel="prefetch" href="page2.html" /> <link rel="prefetch" href="sprite.png" /> ``` 在这个例子中，`page2....
HTML link标签中preload，prefetch，dns-prefetch，preconnect，prerender
chaoguo1234的专栏
06-12 1184
Preload 在我们的浏览器加载资源的时候，对于每一个资源都有其自身的默认优先级，倘若我们能修改每一个资源的默认优先级，那我们几乎可以按照我们的预期加载想要加载的资源。 以谷歌浏览器为例，我们打开控制台，并切换到Network选项，点击刷新页面，在网络下面的title一行点击鼠标右键，勾选Priority即可看到加载资源的优先级，我们可以看到样式的级别比脚本的优先级高，毕竟页面的一加载进来...
html5 link prefetch,dns预获取（dns-prefetch）link rel=＂dns-prefetch＂优化载入速度
weixin_39801165的博客
06-19 544
dns预获取(dns-prefetch)link rel="dns-prefetch"，DNS Prefetch也就是DNS预获取。设置DNS预获取(dns-prefetch)有两个作用：1、减少DNS的请求次数，2、进行DNS预先获取。当网页打开时，浏览器会在加载网页时对网页中的域名进行解析缓存，这样在你单击当前网页中的连接时就无需进行DNS的解析，减少用户等待时间，提高用户体验。来看一张京东h...
html 页面预加载,HTML5前端性能优化
weixin_28785681的博客
06-03 908
8种机械键盘轴体对比本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？当提到前端性能优化时，我们首先会联想到文件的合并、压缩，文件缓存和开启服务器端的 gzip压缩等，这使得页面加载更快。现在，有很多已知的技术都可以让你的网站速度变得更快：使用CSS sprites，使用图片优化工具，使用.htaccess设置页面头信息和缓存时间，JavaScript压缩，使用CDN等。而在HTML5里，...
html5页面资源预加载（Link prefetch）
weixin_30409849的博客
07-24 461
预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中，这对图片画廊及图片占据很大比例的网站来说十分有利，它保证了图片快速、无缝地发布，也可帮助用户在浏览网站内容时获得更好的用户体验。示例代码：function loadImage(url, callback) { var img = new Image(); //创建一个Image对象，实现图片的预下载 img.sr...
html 预加载的作用,以HTML格式预加载图像
weixin_29386469的博客
06-07 115
3 个答案:答案 0 :(得分：3)尝试使用$.Deferred()，.queue()var images = ["http://lorempixel.com/1200/800/cats/", "http://lorempixel.com/1200/800/nature/", "http://lorempixel.com/1200/800/animals/", "http://lorempixel...
HTML：用对 preload、prefetch提升网页加载速度
最新发布
彼方_的博客
03-05 840
在网页加载和数据获取方面，“preload” 和 “prefetch” 都是用来优化性能和用户体验的技术手段，但它们有一些区别。
html如何制作加载效果,制作html5 svg页面预加载效果
weixin_30673943的博客
06-03 633
本教程将给大家展示一种简单的页面预加载效果。我们将使用到CSS animations, SVG和JavaScript。对于一个网站来说，页面加载时的等待效果是非常重要的，创建一种动画效果来过渡页面加载将会使用户得到更好的体验。这个效果的灵感来自于Fontface Ninja。本教程里我们将制作类似的页面加载效果。页面中的Logo和圆形进度条将使用svg制作。我们还要使用到javascript来控制...
HTML5 预览预加载文件，图片
youyou521999的博客
12-22 1003
html5 图片上传预览             #preview {             width: 300px;             height: 300px;             overflow: hidden;         }             #preview img {                 width: 100%;  
前端女娲补天 HTML（二）什么是懒加载，什么是预加载
LiXenon的博客
05-28 426
什么是懒加载 懒加载可以将页面上的图片src设置为空，真实路径放在data-original属性中，在图片进入可视区域后再将src设置为data-original的值。 具体实现 在DOM中获取所有懒加载图片元素。 window添加onscroll监听，遍历通知所有待加载图片，如果图片在视口内（图片离视口上边界距离image.getBoundingClientRect().top，TODO：判断元素在视口内文章链接 ）则将data-original中的路径赋给src。 懒加载的优点 提升用户体验，加快首屏渲
load预加载简单实现
独孤九剑
10-21 3766
很久没写博客了 昨天在写页面的时候 突然想起一个页面预加载的东西 试试，刚好有朋友经常接触微信活动页面  就聊了一下思路。 页面资源加载就是三个 图片 CSS JS 现在最方便的就是判断图片加载完毕来计算进度（JS也可以计算CSS 和JS 文件是否加载完毕了，考虑loading页面等待时间不能太长，所以忽略了CSS和JS，只判断load页面的下一个页面所需要的图片加载完毕来计算进度） img
vue2如何实现页面预加载
04-27
3. 在Vue组件中使用路由的`<router-link>`标签来触发预加载，例如： ``` <router-link :to="{ path: '/foo', prefetch: true }">Foo</router-link> ``` 其中，`prefetch: true`表示开启预加载。 通过以上步骤，就...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值