文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Html5中prefetch和prerender有什么用

2024-04-02 19:55

关注

这篇文章主要介绍Html5中prefetch和prerender有什么用,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

prerender / prefetch

其实是为了提升网页加载速度而但是一直通过预加载来实现,提升用户感受的方式,例如用户在首页停留2s, 而这2s里面我们就已经加载了一个用户可能要打开的页面,那么用户打开的速度会非常快. 给用户的感受也是极好的

HTML5 Prerender / Prefetch名词解释

prefetch usage:

It should be used for fetching and caching resources for later user navigation as per the official HTML5 spec (i.e. prefetching a css file to be used in a page which highly likely to be used by the user in his upcoming navigation). Supported in Chrome, Firefox & IE.

简单说就是缓存下一个网页的资源,是HTML5的新特性, 支持的浏览器有Chrome(13以后),  Firefox, IE 11

prerender usage:

It should be used for prerendering a complete page that the user will highly likely navigate to it in his upcoming navigation (i.e. like prerendering the next article where it is highly likely that the user will click on “next article” button). Supported only in Chrome & IE.

Prerender是Google的一个发明,正在提升用户减少用户在加载时的等待, 通过最相近匹配原则来加载例如“下一页”的文章., 例如最佳推荐,当用户访问A页面的时候, 用户最可能访问的下一个页面上B 那么就预加载B页面, 以达到提升加载速度的效果, 支持的浏览器有Chrome , IE11

使用方法

is actually part of the HTML 5 spec.
appears to be Google doing their own thing.

第一中方法是 将以上链接添加到xxx

第二种方法是 使用JS代码注入方式;

var myHead = document.getElementsByTagName(‘head’)[0];
var myLink = document.createElement(‘link’);
myLink.setAttribute(‘rel’, ‘prerender’);
myLink.setAttribute(‘href’, ‘http://apple.com/ipad’);
myHead.appendChild(myLink);

或者使用Jquery方法:

$(“head”).append(‘www.guoli.biz/’);

以上是“Html5中prefetch和prerender有什么用”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注编程网行业资讯频道!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     807人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     351人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     314人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     433人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     221人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯