? html5的三个新特性介绍 - 葡京投注/澳门_线上注册

025-86901720

全国监督投诉热线:9:00-23:00

html5的三个新特性介绍

html5还有一些新特性,在相关书籍和资料中介绍的比较少,但实际应用起来很方便,今天南京学码思web培训学校老师就来给大家详细介绍一下html5的三个新特性,一起来了解一下。

本文地址:http://www.1krs.com/course/web/4020.html
文章摘要:html5的三个新特性介绍,,。

不知不觉已经是2018年了,html5的特性和用处,大部分我们已经接触过也有所了解了,但html5还有一些新特性,在相关书籍和资料中介绍的比较少,但实际应用起来很方便,今天南京学码思葡京投注老师就来给大家详细介绍一下html5的三个新特性,一起来了解一下。

一、DNS 预解析缓存


众所周知,解析 DNS 是网站性能优化的比较重要的一部分,虽然加载时间不太长,但是很难压缩起来。特别是为了并发下载资源而使用多个 CDN 域名来加载资源的大型网站,更不可忽视,每加载资源之前都要先进行 CDN 域名的 DNS 解析转换。


如果采用 DNS 预加载,支持该功能的浏览器就会提前对该域名进行 DNS 解析并且缓存一下,而不会在需要请求资源再进行解析。而且这个功能应用实在是太简单:


<link rel="dns-prefetch" href="http://www.1krs.com//">


<link rel="dns-prefetch" href="//www.google-analytics.com">


淘宝网就应用了这项技术,你可以打开淘宝网,查看源代码,非常顶端就把他们的一些 CDN 服务器进行了 DNS 解析缓存。


二、资源预加载


资源预加载有很多办法,例如常见的图片预加载,有采用 CSS 的背景图片来预加载,大部分还是用 JS。目前 HTML5 提供了专门的资源预加载方法,有两个属性:prefetch(预读取)和 prerender(预渲染),分别被 Firefox 和 Chrome 浏览器支持。


1).PREFETCH 预读取


预读取就是很常见的资源预加载,当前页面加载完成之后,就会在后面偷偷的下载你指定的资源,一般是 JS 、CSS 和 图片 这类的,也可以下载页面:


<link rel="prefetch" href="http://www.1krs.com//" />


<link rel="prefetch" href="/UploadFiles/2018-03-27/20183278415839828.png" />


<link rel="prefetch alternate stylesheet" href="mozspecific.css" />


注意,目前 Firefox 浏览器支持这个功能。


2).PRERENDER 预渲染


这个更厉害了,不仅偷偷的提前下载,而且还给你渲染出来,当用户点击链接的时候,立刻给你展现出来。


<link rel="prerender" href="http://www.1krs.com//" />


注意,目前 Chrome 支持这个功能。


搜素引擎其实是非常需要这种预读取的功能的,因为他们非常确定用户下一步要打开的页面(搜索结果页面),所以当用户输入搜索内容的时候,就可以提前把搜索结果页面的资源提前加载,而且应用之后,效果十分明显。


目前兼容性是个缺点,貌似只有 Chrome 和 Firefox 支持,而且用的 rel 属性是不同的,如果你想同时兼容两个浏览器,可以写成下面这样:


<link rel="prefetch prerender" href="http://www.1krs.com/" />


此外,当然为了安全没法跨域预加载资源,可能没法用在 CDN 了。


三、Download 属性


HTML5 的 Download 属性用来强制浏览器下载对应文件,而不是打开。Chrome 和 Firefox 等浏览器太过于强大,也许是为了增强用户体验,当用户点击的资源文件可以被它们识别的时候(例如 pdf 会直接在浏览器打开,mp3、mp4 等媒体直接用浏览器内置播放器播放)。但有时候,用户其实是希望直接下载而不是在浏览器上看看,这时就可以加上这个属性,属性值会对下载的文件重命名:


<a href="downloadpdf.php" download="download.pdf">点击直接下载并保存成 download.pdf 文件</a>


如果你确定这个资源是用户肯定会下载的,就可以加上这个属性,还可以用 JS 或者手动改变想要保存的文件名。


当然,除了上述三点特性,html5还有很多其他特性,以上三点不常见到但又很实用,所以拿出来和大家分享一下。近两年,html5的发展和应用我们都有目共睹,如果你还想进一步学习html5方面的知识,可以直接咨询学码思web培训学校在线老师,咨询试听课程,还能获得免费web前端教程和学习资料,你还在等什么?


上一篇:网站前端设计需要注意哪些方面
下一篇:学习web前端必懂的九诀窍

相关推荐

免费试听 | 学费咨询 | 在线报名 | 申请补贴 | 软件培训 | 网站地图

2016-2020 南京葡京投注科技有限公司 .All Rights Reserved

苏ICP备16033487号 www.1krs.com

400-080-3312

全国监督服务热线:9:00-23:00