HTML5网页优化中不可或略的一些细节_广告服务_传媒、广电

HTML5网页优化中不可或略的一些细节。HTML5这个概念从出现到普及只用了短短不到两年的时间，所以现在HTML5这个概念已经非常普及了，从博客网站、扁平化设计，再到耳熟能详的微信网站、框架类APP应用等等，我们总能看到HTML5的一些身影。所以现在做网站优化必然要接触到html5页面的结构优化和内部链接布置等，所以我们还是很有必要学习一些HTML5的代码属性。

HTML5跟HTML其实相差无几，在优化过程中也一样会设计到title、meta标签、H标签、A标签等的布局和设计，但是这些内容相信站长们在很多站长论坛上都已经看到过很多教程了，所以这里就不在提及这些了，今天主要说一下HTML5中很不常用的几个属性，但是这些属性却真的能够影响到我们网站的性能和对搜索引擎的友好性。

HTML5中不常用到的一些属性

下边这篇文章是从我爱水煮鱼博客转摘而来的，希望能够帮助大家了解更多的关于HTML5这些特殊属性的用法。

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

DNS 预解析缓存

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

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

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

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

资源预加载

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

prefetch 预读取

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

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

prerender 预渲染

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

目前 Chrome 支持这个功能。

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

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

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

Download 属性

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

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

如果你确定这个资源是用户肯定会下载的，就可以加上这个属性，还可以用 JS 或者手动改变想要保存的文件名。不过小编在发布文章之前也测试了一下，在谷歌、360、IE9浏览器下这个属性都不能正常发挥作用。

怎么样，阅读完上面的文章，是不是觉得自己的知识又增进了不少呢，多多关注我们的网站，您会受益更多呢。也欢迎广大新老客户来电或来厂了解关于乌鲁木齐SEO优化，新疆SEO优化公司欢迎您的来电与来访。

乌鲁木齐重汇网络科技乌鲁木齐重汇网络科技专业提供乌鲁木齐网站建设,新疆SEO优化等服务

联系资料

乌鲁木齐重汇网络科技

最新信息

HTML5网页优化中不可或略的一些细节