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

标签: 开源程序 HTML5 | 发表时间:2014-03-02 16:16 | 作者:于江水
出处:http://blog.wpjam.com

都已经到了 2014 年了,再来说 HTML5 的新特性,实在是够晚了,不过这几个在介绍 HTML5 的书上很少见到,但又可以方便的应用在自己的网站上,所以特地来介绍一下。

DNS 预解析缓存

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

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

  
<link rel="dns-prefetch" href="http://cdn.staticfile.org/">
<link rel="dns-prefetch" href="//www.google-analytics.com">

具体之前草草翻译过一篇文章,有兴趣可以大体略过: 使用预加载提速你的网站

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

资源预加载

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

prefetch 预读取

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

  
<link rel="prefetch" href="http://blog.wpjam.com/" />
<link rel="prefetch" href="http://wpjam.qiniudn.com/wpjam/logo.png" />
<link rel="prefetch alternate stylesheet" href="mozspecific.css" />

目前 Firefox 浏览器支持这个功能,详情请看: Link prefetching FAQ

prerender 预渲染

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

  
<link rel="prerender" href="http://blog.wpjam.com/" />

目前 Chrome 支持这个功能,详情请看: Web Developer’s Guide to Prerendering in Chrome

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

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

  
<link rel="prefetch prerender" href="http://blog.wpjam.com" />

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

Download 属性

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

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

你可以点击下面两个链接试下看: 没有加 download 属性的常规 pdf URL | 加 download 属性的常规 pdf URL(保存成 Ecma-262.pdf)

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

资料扩展

HTML5 还有很多其他特性,但是看了很长时间书和各种资料,很少见到上面三个又比较实用的属性,拿出来分享一下。关于本文提到的几点,有兴趣深入的可以看一下:

>>>继续阅读 三个 HTML5 不常见但非常实用的特性简介的全文 …

© 我爱水煮鱼 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

相关 [html5 常见 简介] 推荐:

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

- - 我爱水煮鱼
都已经到了 2014 年了,再来说 HTML5 的新特性,实在是够晚了,不过这几个在介绍 HTML5 的书上很少见到,但又可以方便的应用在自己的网站上,所以特地来介绍一下. 众所周知,解析 DNS 是网站性能优化的比较重要的一部分,虽然加载时间不太长,但是很难压缩起来. 特别是为了并发下载资源而使用多个 CDN 域名来加载资源的大型网站,更不可忽视,每加载资源之前都要先进行 CDN 域名的 DNS 解析转换.

HTML5 web通信(跨文档通信/通道通信)简介

- - 张鑫旭-鑫空间-鑫生活
本文地址: http://www.zhangxinxu.com/wordpress/?p=2229. web通信(洋名:web messaging)是一种文档中独立的浏览上下文间的DOM不会被恶意的跨域脚本暴露数据分享方式. 得得得,术语啊什么的,比看到凤姐还头疼. web通信是一种数据分享方式(有屁话之嫌);.

HTML5移动应用开发的生态环境简介

- - 外刊IT评论
我本人是HTML5的大粉丝,因为它可以给我带来满足我创造力的开发速度. 但自从移动平台崛起以来,这项技术所涉及的开发就开始变得复杂起来. 在桌面平台看来,一切都非常清楚. 网站开发就是一场不断持续的进化,即便如此还是有人对其了如指掌. 开发者们被各种开发HTML5移动应用的方法搞得晕头转向,所以我希望这个指南可以帮助他们.

[译文]避免常见的六种HTML5错误用法

- Vingel - UED TEAM,用户体验设计,web前端开发
避免常见的六种HTML5错误用法. 原文链接请点击此处,作者为Richard Clark.. 本文为原创翻译,同时对原文做了一些简化处理. 本文遵循署名-非商业性使用协议. 一、不要使用section作为div的替代品. 人们在标签使用中最常见到的错误之一就是随意将HTML5的
等价于
——具体地说,就是直接用作替代品(用于样式).

避免常见的六种HTML5错误用法

- Amo - HTML5研究小组
原文链接请点击此处,作者为Richard Clark.. 本文为原创翻译,同时对原文做了一些简化处理. 本文遵循署名-非商业性使用协议. 一、不要使用section作为div的替代品. 人们在标签使用中最常见到的错误之一就是随意将HTML5的
等价于
——具体地说,就是直接用作替代品(用于样式).

关于HTML5技术常见的几个误解

- - 脚本爱好者
最近2周,公司的测试PM带领我们使用HTML5 Canvas为公司的大屏幕制作一个展示公司历史和发展的apps. 主要技术是HTML5 Canvas和Javascript. 可能大家觉得Canvas标签就几个api,完成不了什么工作. 其实如果你对Javascript掌握的比较好,是可以用Javascript加上Canvas制作出像Flash动画的效果.

[译文]避免常见的六种HTML5错误用法

- Meteoric_cry - UED TEAM,用户体验设计,web前端开发
避免常见的六种HTML5错误用法. 原文链接请点击此处,作者为Richard Clark.. 本文为原创翻译,同时对原文做了一些简化处理. 本文遵循署名-非商业性使用协议. 一、不要使用section作为div的替代品. 人们在标签使用中最常见到的错误之一就是随意将HTML5的
等价于
——具体地说,就是直接用作替代品(用于样式).

HTML5 logo 发布

- Greyby - 酷壳 - CoolShell.cn
2011年1月19日,W3C发布了HTML5的log,打开W3C的页面,下在的图片印入眼前. 我的第一感觉,就像是看到了小时候看的八一电影制片产的电影. 这分明是号召全世界的无产Web程序员们团结起来,不畏艰难,不怕牺牲,一定要把HTML5的革命事业进行到底. 所以,请各位Web程序员不但在你们的HTML5的网页上加上下面的徽章(关于各个徽章的含义,请参看这里).

html5 canvas入门

- - Marshal's Blog
可以把canvas看做div,不过,它的长和宽不能通过css来定义,要使用标签属性:. 或者javascript对象属性设置:. 使用canvas,只有一种操作方式,使用javascript. 获得canvas对象的上下文对象,该对象是操作canvas的主要对象:. 使用canvas画最简单的线, 点击运行示例,结果看起来是这样:.

HTML5新特性

- - CSDN博客推荐文章
 通过fillStyle和strokeStyle 属性可以轻松的设置矩形的填充和线条. 颜色值使用方法和CSS 一样:十六进制数、rgb()、rgba() 和 hsla. 通过 fillRect可以绘制带填充的矩形. 使用 strokeRect 可以绘制只有边框没有填充的矩形. 如果想清除部分 canvas可以使用clearRect.