新闻资讯  快讯  焦点  财经  政策  社会
互 联 网   电商  金融  数据  计算  技巧
生活百科  科技  职场  健康  法律  汽车
手机百科  知识  软件  修理  测评  微信
软件技术  应用  系统  图像  视频  经验
硬件技术  知识  技术  测评  选购  维修
网络技术  硬件  软件  设置  安全  技术
程序开发  语言  移动  数据  开源  百科
安全防护  资讯  黑客  木马  病毒  移动
站长技术  搜索  SEO  推广  媒体  移动
财经百科  股票  知识  理财  财务  金融
教育考试  育儿  小学  高考  考研  留学
您当前的位置:首页 > IT百科 > 程序开发 > 语言 > html5

HTML5中的预加载功能

时间:2019-08-13 12:00:13  来源:  作者:

在网站WEB前端设计中,如果想加快网页的加载速度,减少网站访客的等待时间,经常要对HTML页面文件,css文件,JS文件,图片文件等静态文件进行压缩,也有的会使用CDN一类的加速服务。而今天我们说一说,html5中的一项预加载功能。

HTML5中的预加载功能

 

HTML5的预加载的方法

预加载是浏览器的一种机制,其在浏览器加载完当前页面时,并利用空闲下来的时间,在后台静默加载用户在将来可能要访问的文档或文件。以便用户在访问其页面时,提高页面的载入速度。

HTML5页面资源预加载/预读取的功能是通过 Link 标记实现的,将 rel 属性指定为“prefetch”,在 href 属性里指定要加载资源的地址。

示例代码:

预加载一张图片

<link rel="prefetch" href="big.jpeg">

预加载一个页面

<link rel="prefetch" href="http://www.feiniaomy.com/post/1.html">

预加载一个CSS文件

<link rel='prefetch' href='style.css'>

HTML5的预加载的使用环境

在什么页面,什么环境下使用HTML5的预加载功能,这主要取决于网站的页面访问质量。不过下面总结了三点,大家可以参考一下

1、在网站的首页,对一些重要的页面或点击率高的页面进行预加载

2、对整个网站通用,或是使用频率较高的静态文件进行预加载

3、网站的搜索页面,对结果的下一页面进行预加载

HTML5的预加载注意事项

1、服务器配置低或网站的访客量少的网站,不建议使用HTML5预加载

2、对一些访问量高的页面或资源使用预加载功能,对于访问量低的页面或资源尽量不要使用

3、HTML5的预加载功能,会对网站的第三方统计数据造成污染,导致统计数据不准确

4、网站的访问跳出率(第三方统计工具查看)超过90%以上,不建议使用预加载功能



Tags:HTML5   点击:()  评论:()
声明:本站部分内容来自互联网,内容观点仅代表作者本人,如有任何版权侵犯请与我们联系,我们将立即删除。
▌相关评论
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
▌相关推荐
在网站WEB前端设计中,如果想加快网页的加载速度,减少网站访客的等待时间,经常要对HTML页面文件,CSS文件,JS文件,图片文件等静态文件进行压缩,也有的会使用CDN一类的加速服务。而今...【详细内容】
2019-08-13   HTML5  点击:(0)  评论:(0)  加入收藏
性能之前端篇循环优化在多重嵌套循环的程序上,如果能分出出多个独立循环也比嵌套在一个循环体内来的更有益。优化循环的3种方式:减少每次迭代的开销、减少迭代的次数或者重新...【详细内容】
2019-08-09   HTML5  点击:(5)  评论:(0)  加入收藏
Html5是前端开发的基本技术之一,目前如果只掌握Html5开发能够从事的开发内容是非常有限的,但是对于初学者来说,完全可以从Html5开始学起。Html5是前端开发的基础,不论是从事Web...【详细内容】
2019-08-08   HTML5  点击:(2)  评论:(0)  加入收藏
前两天发布了一篇关于利用html5在手机端进行拨号和发送短信的教程,今天再说一下利用html5在手机端调用摄像头以及录音的教程 HTML5 调用手机摄像头在html5中可以利用type类型...【详细内容】
2019-08-08   HTML5  点击:(2)  评论:(0)  加入收藏
优秀的HTML5前端开发人员,懂得如何合理安排自己的时间,让自己的学习和工作的效率都非常高,有的时候合理运用一些开发软件,也能够帮助自己节省出大量的时间和精力,那么HTML5前端开...【详细内容】
2019-08-02   HTML5  点击:(11)  评论:(0)  加入收藏
自从2010年正式推出HTML5之后,它就以惊人的速度在发展着,而且,现在我们看到的网站,大多数也是用HTML5写出来的,它的受欢迎的程度也是越来越高,说HTML5是Web前端的主流技术之一,也并...【详细内容】
2019-07-24   HTML5  点击:(4)  评论:(0)  加入收藏
FileAPI介绍HTML5 为我们提供了 File API 相关规范。主要涉及 File 接口 和 FileReader 对象 。本文整理了兼容性检测、文件选择、属性读取、文件读取、进度监控、大文件分...【详细内容】
2019-07-23   HTML5  点击:(3)  评论:(0)  加入收藏
在移动端中我们经常碰到横屏竖屏的问题,那么我们应该如何去判断或者针对横屏、竖屏来写不同的代码呢。 CSS如何判断横屏竖屏竖屏引用<link rel="stylesheet" media="all and...【详细内容】
2019-07-04   HTML5  点击:(7)  评论:(0)  加入收藏
在移动端中我们经常碰到横屏竖屏的问题,那么我们应该如何去判断或者针对横屏、竖屏来写不同的代码呢。 CSS如何判断横屏竖屏竖屏引用<link rel="stylesheet" media="all and...【详细内容】
2019-07-04   HTML5  点击:(16)  评论:(0)  加入收藏
HTML和HTML5之间的区别有:HTML的文档类型声明太长而且复杂,而HTML5的文档声明相对来说更为简便,有利于程序员快速阅读和开发。相对于HTML,HTML5中新增和修改了一些元素。下面本...【详细内容】
2019-07-01   HTML5  点击:(19)  评论:(0)  加入收藏
在HTML5之前的时代,如果需要在客户端本地保存数据,只能存储在Cookie中,但是Cookie使用过多会影响请求速度,所以并不适合存储大量数据。而在HTML5面世后,自带了本地存储和本地数据...【详细内容】
2019-06-06   HTML5  点击:(26)  评论:(0)  加入收藏
现在的手机已经离不开我们的生活,我们每个人的手机中都有这样或者那样很多的APP,其中移动Web端APP可谓是占据了霸主的地位,人们也已经知道了HTML5开发语言有很大的优势,本篇文章...【详细内容】
2019-05-09   HTML5  点击:(30)  评论:(0)  加入收藏
bootstrap1、简介:Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。2、基本结构:Bootstrap 提供了一个带有网格系...【详细内容】
2019-05-09   HTML5  点击:(63)  评论:(0)  加入收藏
凭借着跨平台,实时更新,无需安装,易于分发等众多优点,HTML5受到越来越多企业的青睐。而凭借着入门相对简单的优势,很多人编程初学者都选择学习HTML5。但对于初学者来说,学习HTML5...【详细内容】
2019-05-09   HTML5  点击:(37)  评论:(0)  加入收藏
准备做一个网页版聊天界面,表情啊、图片啊、上传文件啊都应该要有,视频就算了,语音还是要的。本文记录的是在网页上用GitHub上的Recorder进行在线录音和上传到服务器,前几天升了...【详细内容】
2019-05-09   HTML5  点击:(96)  评论:(0)  加入收藏
由于智能手机的普及以及越来越流行,html5也开始走向高潮,html5基本上算是一种代码的规范,是专门用来写网页框架结构的,同时它也是较新的规范,有着自己独有的标签和语法,让图片画面...【详细内容】
2019-04-29   HTML5  点击:(19)  评论:(0)  加入收藏
推荐资讯
相关文章
栏目更新
栏目热门