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

发布时间:2025-09-19 点击:9
都已经到了 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 浏览器支持。
1).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 浏览器支持这个功能。
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 还有很多其他特性,但是看了很长时间书和各种资料,很少见到上面三个又比较实用的属性,拿出来分享一下。


【目标访客搜索习惯】深度解析竞价中的访客搜索行为
前端工程师在网站建设过程有哪些主导作用?
中文域名开启企业保护战,捍卫大数据时代信息安全
制作网站资料提供参考范例
追踪边缘计算的发展和进化
网站制作最常见的一些问题
浅析怎样做好网络优化?
网站内容什么样的更新频率有利于seo优化?