三个不常见的 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 浏览器支持。

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

复制代码 代码如下:

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

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

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

复制代码 代码如下:

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

注意,目前 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>

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

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

时间: 2024-10-24 21:32:52

三个不常见的 HTML5 实用新特性简介_经验交流的相关文章

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

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

开发者必须知道的HTML5十五大新特性

HTML5想必大家都很熟悉了,因为太多的媒体在讨论这一技术.然而,你能准确地说出HTML5带来了哪些新特性吗?本文总结了HTML5带来的15项你必须知道的新特性. 一起来看下: 1.新的文档类型 (New Doctype) 目前许多网页还在使用XHTML 1.0 并且要在第一行像这样声明文档类型: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xh

Oracle 10G First Release的新特性简介(下)

oracle Oracle 10G First Release的新特性简介(下) By Fenng 2003-07-10 注:近日Oracle已经正式宣布该版本的Oracle命名为10G,其中的G为Grid之意.特此更正. 高可用性的加强 1.缩短应用和数据库升级的宕机时间 通过使用standby数据库.允许在不同版本的standby和产品数据库间切换.现有的联机重定义功能能够支持一步克隆所有相关的数据库对象. 2.回闪(Flashback)任何错误 该版本的Oracle也扩展了Flashbac

Oracle 10G First Release的新特性简介(上)

oracle Oracle 10G First Release的新特性简介(上)   By Fenng 2003-6-8   Oracle(www.oracle.com)公司早已经宣称,Oracle 9i数据库只是一个过渡性的产品,真正的技术革新很可能在下一版,也就是通常说的10i(内部可能的版本号是2003,以下简称10i,估计在正式发行的时候会有一个新的名字)中体现出来.很多技术人员可能都会比较关心Oracle 10i究竟能有哪些新功能,是否能提供一些激动人心的新特性?我们在这里对Oracl

ASP.NET2.0新特性概述_实用技巧

ASP.NET技术从1.0版本升级到1.1变化不是很大.然而,从ASP.NET 1.x升级到2.0,却不是件轻而易举的事情.ASP.NET 2.0技术增加了大量方便.实用的新特性.ASP.NET 2.0主要提供控件.页面框架.服务与APIs等3个方面的技术特性.       控件 在ASP.NET 1.x时代,由于内置服务器控件数量有限.功能覆盖面窄,因此,开发人员怨声载道.为了消除这个技术软肋,ASP.NET 2.0做出了突破性改进.在ASP.NET 2.0中,新增数十个服务器控件.根据控件功

必须知道的HTML5的新特性,技巧以及技术

总结一下: 1. 新的Doctype 尽管使用<!DOCTYPE html>,即使浏览器不懂这句话也会按照标准模式去渲染 2. Figure元素 用<figure>和<figcaption>来语义化地表示带标题的图片 <figure> <img src="path/to/image" alt="About image" /> <figcaption> <p>This is an im

呼之欲出!比Spark快10倍的Hadoop3.0有哪些实用新特性?

Apache hadoop 项目组最新消息,hadoop3.x以后将会调整方案架构,将Mapreduce 基于内存+io+磁盘,共同处理数据. 其实最大改变的是hdfs,hdfs 通过最近black块计算,根据最近计算原则,本地black块,加入到内存,先计算,通过IO,共享内存计算区域,最后快速形成计算结果. Hadoop Hadoop 3.0简介 Hadoop 2.0是基于JDK 1.7开发的,而JDK 1.7在2015年4月已停止更新,这直接迫使Hadoop社区基于JDK 1.8重新发布一

HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)_经验交流

HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主要是触摸事件:touchstart.touchmove和touchend. 一开始触摸事件touchstart.touchmove和touchend是iOs版Safari浏览器为了向开发人员传达一些信息新添加的事件.因为iOs设备既没有鼠标也没有键盘,所以在为移动Safari浏览器开发交互性网页的时

.NET Framework 4.5新特性介绍_基础应用

开发者预览版.net 4.5 .NET for Metro style appsMetro风格的应用程序是利用Windows操作系统的强大功能设计的特殊表单元素.一个称之为.NET APIs for Metro style apps的.Net的一个子集用来支持Metro风格的应用程序,可以使用C#或Visual Basic来编写Metro风格的应用程序.详见:http://go.microsoft.com/fwlink/?LinkId=228491 核心新功能和改进以下这些功能和改进被添加到公共