教程集 www.jiaochengji.com
教程集 >  前端编程  >  HTML5教程  >  正文 Html5 什么是prefetch/prerender?介绍Html5 中prefetch/prerender

Html5 什么是prefetch/prerender?介绍Html5 中prefetch/prerender

发布时间:2020-07-20   编辑:jiaochengji.com
教程集为您提供Html5 什么是prefetch/prerender?介绍Html5 中prefetch/prerender等资源,欢迎您收藏本站,我们将为您提供最新的Html5 什么是prefetch/prerender?介绍Html5 中prefetch/prerender资源
文章标题写,为Affiliate而生 其实是夸张写法,

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?介绍Html5 中prefetch/prerender的详细内容,更多请关注教程集其它相关文章!

-->
  • 本文原创发布教程集,转载请注明出处,感谢您的尊重!
  • 您可能感兴趣的文章:
    Html5 什么是prefetch/prerender?介绍Html5 中prefetch/prerender
    HTML5中如何使用rel属性的预加载功能?
    html5中页面可见性的判断(附代码)
    html5是什么意思
    html5是什么?html5有什么用?
    学html5需要什么基础?
    想学好html5看什么书好
    如何使用html5的Page Visibility API来实现获取焦点js事件
    html5是什么?html5的介绍以及优缺点总结
    使用html5可以干什么?Html5的优势和劣势(总结)

    [关闭]
    ~ ~