1.DNS Prefetching

DNS主机名解析有时会出现拖慢网站速度的问题。现代浏览器当遇到DNS解析时已经十分聪明——用户在跟随某个链接之前,浏览器先尝试解析域名再将其进行缓存。

DNS Prefetching特性允许开发者手动控制,告诉浏览器需要解析哪个域名。代码如下:

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

可以使用以下标签禁止:

<meta http-equiv=”x-dns-prefetch-control” content=”off”>

目前DNS Prefetch支持如下:

  • Firefox: 3.5+
  • Chrome: Supported
  • Safari 5+
  • Opera: Unknown
  • IE: 9 (called “Pre-resolution” on blogs.msdn.com)

在Google Chrome中,可以在地址栏输入about:histograms/DNS来查看关于DNS的数据。

2.Link Prefetching

Link Prefetching特性允许开发者在页面加载的时候预先加载他们希望指定的页面或元素。

Firefox:

<link rel="prefetch" href="http://www.idayer.com/chrome-webkit-text-size-adjust.html" />
<link rel="prefetch" href="http://www.idayer.com/wp-content/uploads/2014/03/2048-game.jpg" />

Chrome:

<link rel="prerender" href="http://www.idayer.com/chrome-webkit-text-size-adjust.html" />
<link rel="prerender" href="http://www.idayer.com/wp-content/uploads/2014/03/2048-game.jpg" />

目前只有Firefox和Chrome支持这个特性,

3. Download属性

凭借HTML5的Download属性,开发者可以不必到特定页面下载文件,而是直接进行下载。这一操作不必依赖服务器端代码便能够执行。代码如下:

<a href="download_pdf.php?id=15" download="myfile.pdf">Download PDF</a>

这样还有一个好处是:当用户点击链接下载时,保存的文件名是myfile.pdf。

目前此属性已经在Chrome 14+和Firefox 20+以上浏览器得到支持。

4. Regular Expressions

一旦用户输入一个有效的email或URL地址,pattern属性可以令你直接使用regular expressions而无需检查JS或服务器端代码。代码如下:

<input type="email" pattern="[^ @]*@[^ @]*" value="">

5.Datalist元素

若使用jQuery插件执行自动填充输入操作,则用户每敲击一次键盘都要访问服务器端代码以及数据库。但有了Datalist元素,开发者不必再使用jQuery插件便可完成该操作。代码如下:

<form action="form.php" method="post">
<input list="cars" name="cars" >
<datalist id="cars">
    <option value="Volvo">
    <option value="BMW">
    <option value="Bugatti">
    <option value="Cadillac">
    <option value="Chevrolet">
    <option value="Chrysler">
</datalist>
<input type="submit" />
</form>

参考资料

DNS预获取(dns-prefetch)
使用HTML5的页面资源预加载(Link prefetch)功能加速你的页面加载速度
HTML5里download属性
事半功倍:你应该知道的HTML5五大特性