PC快捷导航 | 免费赠品 | 联系我们 | Sitemap
友软科技联系电话:0311-82065950
营销型网站更赚钱
当前位置:友软科技 > 新闻资讯 > 优化资讯

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

发表日期:2014/3/4   内容来源:

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 解析并且缓存一下,而不会在需要请求资源再进行解析。而且这个功能应用实在是太简单:

<link rel="dns-prefetch" href="http://cdn.staticfile.org/"><br /> <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/" /><br /> <link rel="prefetch" href="http://wpjam.qiniudn.com/wpjam/logo.png" /><br /> <link rel="prefetch alternate stylesheet" href="mozspecific.css" />
目前 Firefox 浏览器支持这个功能。

prerender 预渲染

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

<link rel="prerender" href="http://blog.wpjam.com/" />
目前 Chrome 支持这个功能。

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

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

<link rel="prefetch prerender" href="http://www.urkeji.com" />
此外,当然为了安全没法跨域预加载资源,可能没法用在CDN 了。

Download 属性

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

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

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

本文链接:http://www.urkeji.com/content/1966.html (转摘请注明出处)
若无特别注明,本站内容均为原创;网站优化业务请咨询本站在线客服!

未来的SEO会趋向没有SERP的搜索结果

我们在前面有谈到,网络上的资料会越来越多,不仅个人使用者需要搜索,连企业也需要搜索。正因为资料越来越多,SEO会变成更加的重要。但是SEO的型态未必会是我们现在看到的SEO,很可能会出现没有SERP的SEO,那个时候我们从事SEO优化行业的技术人员需要的技能将不再是简单的发发外链,写点原创! 没有SERP的SEO是什么呢? 所谓SERP (Search Engine Results Pages)是说搜索结果会有一串的资料,然后会根据搜索引擎的演算法,排列出有顺序的结果出来。 那么没有SERP的SEO,就是说这些搜索结果是没有先后顺序的。 为什么搜索结果是没有先后顺序呢? 我们可以先把搜...展开阅读▽

巧妙利用链接诱饵打造高权重网站外链

“内容为王,外链为皇”一直都是seo优化不变的真理,作为一个大型网站,其实真正应该做好的就是自己的内容,只要自己的内容足够好,不会害怕缺少外链,这里就给大家简单的说一下什么叫做链接诱饵,当然方法不是就这两种,下边这两种方法就是一个简单的例子,学会举一反三,让自己的网站也成为一个别人愿意链入的平台   1、青檬音乐台   青檬音乐台官方有一个“青檬播放条”功能。关注青檬音乐台的朋友,可能会有所了解。这个功能的主要作用是,如果你有网站,可以申请一段“青檬播放条”的代码,放在自己的网站上。 你网站的访客可以通过这个&ld...展开阅读▽

cf333 搜索指数一路攀升

关键词“CF333”的搜索指数一路攀升,从前几天的3000左右上升到了今天的1万多,但是通过分析工具不难看出,这个词的查询量不是真实有效的搜索,而是有人在恶意通过工具刷新这个关键词的指数。 具体“cf333”这词的指数高低有什么用,我想站长和SEOER们肯定都会明白,无非就是333cf.com这个网站想通过这种方法来提升网站的百度权重,因为搜索这个词他们是排在第一位的,这样,如果这个词的百度指数一直上升的话,他们的百度指数也就会不断的增加。 而且从333cf.com这个网站不难看出,他们网站的分享数据也是通过挂刷工具刷出来的,都不是真是的数据...展开阅读▽