HTML5中rel属性的prefetch预加载功能使用_HTML5_青云站长教程网
欢迎来到站长教程网!
  • 秒到短信接口 免费试用
  • 微信支付宝接口 秒结算
  • 中文网站排名|申请加入
  • 搜索引擎全站查询
  • 查询移动网站权重数据
  • 海外主机 台湾公司直销
  • HTML5

    当前位置:主页 > 网页制作 > HTML5 >

    HTML5中rel属性的prefetch预加载功能使用

    时间:2019-07-11|栏目:HTML5|点击:
  • HTML5中rel属性的prefetch预加载功能使用

    在HTML5中,有个很有用但常被忽略的特性,就是预先加载(prefetch),它的原理是: 
    利用浏览器的空闲时间去先下载用户指定需要的内容,然后缓存起来,这样用户下次加载时,就直接从缓存中取出来,效率就快了.

    举个例子说明:比如要预先加载某个页面,可以这样: 

    XML/HTML Code复制内容到剪贴板

    <link rel="prefetch" href=""> <!-- Firefox -->    

    但如果是google的话,要用另外的一个名称,即: 

    XML/HTML Code复制内容到剪贴板

    <link rel="prerender" href=""> <!-- Chrome -->   

    即使在不支持的浏览器,用了这个特性其实是不会出错的,只不过浏览器解析不到而已, 
    所以,如果你感觉能有办法预先预测到用户期望点的页面(比如用户看最新的受欢迎的热图,他 可能看了第一页后,会继续看下一页,这个时候就可以用预先加载这个特性了).比如 

    XML/HTML Code复制内容到剪贴板

    <link rel="prefetch" href="<?php echo get_next_posts_page_link(); ?>">   

    而单独取一张图片也是可以的,比如: 

    XML/HTML Code复制内容到剪贴板

    <link rel="prefetch" href="/images/test.jpg"/>   

    有了浏览器缓存,为何还需要预加载?
    1.用户可能是第一次访问网站,此时还无缓存
    2.用户可能清空了缓存
    3.缓存可能已经过期,资源将重新加载
    4.用户访问的缓存文件可能不是最新的,需要重新加载
    5.Chrome 的预加载技术
    现在的 chrome 聪明到根据你的浏览记录,预测到你可能访问或搜索哪些网站,在你打开网站之前就加载好了一些资源了。
    举个栗子,当你在搜索框输入 "amaz" 时,它猜测到你可能要访问 amazon.com,可能就帮你加载了这个网站的一些资源。
    如果这个预测算法精准的话,就能大大地提高用户的浏览体验了。

    DNS prefetch
    我们知道,当我们访问一个网站如 时,需要将这个域名先转化为对应的 IP 地址,这是一个非常耗时的过程。
    DNS prefetch 分析这个页面需要的资源所在的域名,浏览器空闲时提前将这些域名转化为 IP 地址,真正请求资源时就避免了上述这个过程的时间。

    XML/HTML Code复制内容到剪贴板

    <meta http-equiv='x-dns-prefetch-control' content='on'>  

    <link rel='dns-prefetch' href='http://g-ecx.images-amazon.com'>  

    <link rel='dns-prefetch' href='http://z-ecx.images-amazon.com'>  

    <link rel='dns-prefetch' href='http://ecx.images-amazon.com'>  

    <link rel='dns-prefetch' href='http://completion.amazon.com'>  

    <link rel='dns-prefetch' href='http://fls-na.amazon.com'>  

    应用场景1:我们的资源存在在不同的 CDN 中,那提前声明好这些资源的域名,就可以节省请求发生时产生的域名解析的时间。
    应用场景2:如果我们知道用户接下来的操作一定会发起一起资源的请求,那就可以将这个资源进行 DNS-Prefetch,加强用户体验。

    Resource prefetch
    在 Chrome 下,我们可以用 link标签声明特定文件的预加载:

    XML/HTML Code复制内容到剪贴板

    <link rel='subresource' href='critical.js'>  

    <link rel='subresource' href='main.css'>  

    <link rel='prefetch' href='secondary.js'>  

    在 Firefox 中或用 meta 标签声明:

    XML/HTML Code复制内容到剪贴板

    上一篇:字中字效果的实现

    栏    目:HTML5

    下一篇:Dreamweaver怎么制作动态导航? dw网页添加动态导航的教程

    本文标题:HTML5中rel属性的prefetch预加载功能使用

    本文地址:http://www.jh-floor.com/wangyezhizuo/HTML5/2898.html

    广告投放 | 联系我们 | 版权申明

    重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

    如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

    联系QQ:888888 | 邮箱:888888#qq.com(#换成@)

    Copyright © 2002-2017 青云站长教程网 版权所有 琼ICP备xxxxxxxx号