• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > Html5 什么是prefetch/prerender?介绍Html5 中prefetch/prerender

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

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含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/’);

有什么问题,欢迎留言提问

【相关推荐】

1. 免费h5在线视频教程

2. HTML5 完整版手册

3. php.cn原创html5视频教程

以上就是Html5 什么是prefetch/prerender?介绍Html5 中prefetch/prerender的详细内容,更多请关注微课江湖其它相关文章!

您可能想查找下面的文章:

  • HTML5的本地存储
  • Define charset for HTML5 Doctype
  • HTML5 canvas如何绘制动态径向渐变
  • 如何使用HTML5 Canvas绘制动态线性渐变
  • HTML5 canvas如何实现马赛克的淡入淡出效果(代码)
  • HTML5 canvas中如何绘制图像
  • 如何使用HTML5 canvas实现图像的马赛克
  • html5 canvas实现简单的双缓冲
  • HTML5 Canvas 图形组合是如何实现的?附代码
  • HTML5 figure标签是什么意思?HTML5 figure标签的使用方法详解

相关文章

  • 2018-12-03涂鸦板简单实现 Html5编写属于自己的画画板
  • 2018-12-03知名网站的移动前端自适应解决方案和比较
  • 2017-08-06使用html5 canvas创建太空游戏的示例
  • 2018-12-03HTML4和HTML5之间的10个主要不同
  • 2017-08-06HTML5中如何显示视频呢 HTML5视频播放demo
  • 2017-08-06基于HTML5 Canvas 实现弹出框效果
  • 2018-12-03HTML5 Canvas图像模糊如何解决
  • 2018-12-03HTML5 canvas基本绘图之文字渲染
  • 2018-12-03想学习 HTML5 ,应该怎么入门? 有什么好点的书推荐的吗?
  • 2018-12-03H5中在拖动的元素或选择的文本进入到有效的放置目标时触发的事件ondragenter

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 详解HTML5中的拖放事件(Drag 和 drop)
    • HTML5实现APP和原生方式有多大差距,多少坑?
    • H5制作简单登录界面
    • HTML5表单的属性有哪些?
    • 有关触屏版页面的制作方法
    • HTML5 Canvas实现火焰效果像火球发射一样的示例代码
    • 简单html5代码获取地理位置_html5教程技巧
    • HTML5计时器小例子
    • HBuilder 编辑器有什么故事?
    • HTML5 Canvas入门学习教程_html5教程技巧

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有