当前位置:  编程技术>WEB前端

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

    来源: 互联网  发布时间:2014-10-07

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

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

代码如下:

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


HTML5 还有很多其他特性,但是看了很长时间书和各种资料,很少见到上面三个又比较实用的属性,拿出来分享一下。


    
 
 
 
本站(WWW.169IT.COM)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.169IT.COM)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • 学不好编程的三个原因
  • 我想取出所有的数据记录,然后一行三个一行三个的显示出来。。。一行够三个了就换行,怎么换到第二行?
  • Spring AOP中Pointcut,dvice 和 Advisor三个概念介绍
  • LINUX中装了三个网卡,三个网卡都是同个IP段,如何让他们不能互相访问?
  • 我在下载debian的时候发现有三个iso文件,有一个包含了businesscard这个单词,请问这三个iso文件个有什么用处啊?
  • 用信号量机制解决实际的三个进程同步问题
  • 虚拟机里linux系统下输入l,k,m三个字母不能正常显示,求解答
  • cut命令输出前三个字段
  • ??三个表的联合比对??
  • 三个网卡的网关配置问题? 非常急!!!
  • 【在线等待】JDK的三个版本有什么特点和差别?
  • shell如何取一个字符串中最右边的三个字符?
  • 三个vimrc文件有什么区别?
  • linux中的三个问题!!!
  • 三个容易bash脚本,高分求解
  • ls --color[=when] 参数为never always auto,这三个参数分别什么意思。
  • sa_sigaction 如何用第三个参数
  • 关于write函数的第三个参数的传递
  • ubuntu11.10 顶部面板的左端没有应用程序,位置和系统 这三个菜单。怎么启动终端
  • solaris8 x86哪三个iso文件是需要刻的啊??
  • 我怎么用vm把三个linux组成一个局域网?


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2017,169IT.COM,E-mail:www_169it_com#163.com(请将#改为@)

    浙ICP备11055608号