三个不常见的 HTML5 实用新特性简介

核心提示华清远见成都中心 高端IT就业培训专家 2017年了,再来说 HTML5 的新特性,实在是够晚了,不过这几个在介绍 HTML5 的书上很少见到,但又可以方便的应用在自己的网站上,所以特地来介绍一下。 一、DNS 预解析缓存 众所

华清远见成都中心 高端IT就业培训专家 2017年了,再来说 HTML5 的新特性,实在是够晚了,不过这几个在介绍 HTML5 的书上很少见到,但又可以方便的应用在自己的网站上,所以特地来介绍一下。 DNS 预解析缓存 众所周知,解析 DNS 是网站性能优化的比较重要的一部分,虽然加载时间不太长,但是很难压缩起来。

特别是为了并发下载资源而使用多个 CDN 域名来加载资源的大型网站,更不可忽视,每加载资源之前都要先进行 CDN 域名的 DNS 解析转换。

如果采用 DNS 预加载,支持该功能的浏览器就会提前对该域名进行 DNS 解析并且缓存一下,而不会在需要请求资源再进行解析。而且这个功能应用实在是太简单:淘宝网就应用了这项技术,你可以打开淘宝网,查看源代码,最顶端就把他们的一些 CDN 服务器进行了 DNS 解析缓存。 资源预加载 资源预加载有很多办法,例如常见的图片预加载,有采用 CSS 的背景图片来预加载,大部分还是用 JS。

目前 HTML5 提供了专门的资源预加载方法,有两个属性:prefetch和 prerender,分别被 Firefox 和 Chrome 浏览器支持。

1).PREFETCH 预读取预读取就是很常见的资源预加载,当前页面加载完成之后,就会在后面偷偷的下载你指定的资源,一般是 JS 、CSS 和 图片 这类的,也可以下载页面:注意,目前 Firefox 浏览器支持这个功能。2).PRERENDER 预渲染这个更厉害了,不仅偷偷的提前下载,而且还给你渲染出来,当用户点击链接的时候,立刻给你展现出来。注意,目前 Chrome 支持这个功能。

搜素引擎其实是最需要这种预读取的功能的,因为他们非常确定用户下一步要打开的页面,所以当用户输入搜索内容的时候,就可以提前把搜索结果页面的资源提前加载,而且应用之后,效果十分明显。目前兼容性是个缺点,貌似只有 Chrome 和 Firefox 支持,而且用的 rel 属性是不同的,如果你想同时兼容两个浏览器,可以写成下面这样:此外,当然为了安全没法跨域预加载资源,可能没法用在 CDN 了。

Download 属性 HTML5 的 Download 属性用来强制浏览器下载对应文件,而不是打开。

Chrome 和 Firefox 等浏览器太过于强大,也许是为了增强用户体验,当用户点击的资源文件可以被它们识别的时候。但有时候,用户其实是希望直接下载而不是在浏览器上看看,这时就可以加上这个属性,属性值会对下载的文件重命名:点击直接下载并保存成 download.pdf 文件如果你确定这个资源是用户肯定会下载的,就可以加上这个属性,还可以用 JS 或者手动改变想要保存的文件名。HTML5 还有很多其他特性,但是看了很长时间书和各种资料,很少见到上面三个又比较实用的属性,拿出来分享一下。

 
友情链接
鄂ICP备19019357号-22