HTML5網(wǎng)頁優(yōu)化中不可或略的一些細節(jié)。HTML5這個概念從出現(xiàn)到普及只用了短短不到兩年的時間,所以現(xiàn)在HTML5這個概念已經(jīng)非常普及了,從博客網(wǎng)站、扁平化設計,再到耳熟能詳?shù)奈⑿啪W(wǎng)站、框架類APP應用等等,我們總能看到HTML5的一些身影。所以現(xiàn)在做網(wǎng)站優(yōu)化必然要接觸到html5頁面的結構優(yōu)化和內部鏈接布置等,所以我們還是很有必要學習一些HTML5的代碼屬性。
HTML5跟HTML其實相差無幾,在優(yōu)化過程中也一樣會設計到title、meta標簽、H標簽、A標簽等的布局和設計,但是這些內容相信站長們在很多站長論壇上都已經(jīng)看到過很多教程了,所以這里就不在提及這些了,今天主要說一下HTML5中很不常用的幾個屬性,但是這些屬性卻真的能夠影響到我們網(wǎng)站的性能和對搜索引擎的友好性。
HTML5中不常用到的一些屬性
下邊這篇文章是從我愛水煮魚博客轉摘而來的,希望能夠幫助大家了解更多的關于HTML5這些特殊屬性的用法。
都已經(jīng)到了 2014 年了,再來說 HTML5 的新特性,實在是夠晚了,不過這幾個在介紹 HTML5 的書上很少見到,但又可以方便的應用在自己的網(wǎng)站上,所以特地來介紹一下。
DNS 預解析緩存
眾所周知,解析DNS 是網(wǎng)站性能優(yōu)化的比較重要的一部分,雖然加載時間不太長,但是很難壓縮起來。特別是為了并發(fā)下載資源而使用多個CDN 域名來加載資源的大型商城網(wǎng)站,更不可忽視,每加載資源之前都要先進行 CDN 域名的 DNS 解析轉換。
如果采用 DNS 預加載,支持該功能的瀏覽器就會提前對該域名進行 DNS 解析并且緩存一下,而不會在需要請求資源再進行解析。而且這個功能應用實在是太簡單:
<link rel="dns-prefetch" ><br />
<link rel="dns-prefetch" >
具體之前草草翻譯過一篇文章,有興趣可以大體略過:使用預加載提速你的網(wǎng)站
淘寶網(wǎng)就應用了這項技術,你可以打開淘寶網(wǎng),查看源代碼,最頂端就把他們的一些 CDN 服務器進行了 DNS 解析緩存。
資源預加載
資源預加載有很多辦法,例如常見的圖片預加載,有采用 CSS 的背景圖片來預加載,大部分還是用 JS。目前 HTML5 提供了專門的資源預加載方法,有兩個屬性:prefetch(預讀取)和 prerender(預渲染),分別被 Firefox 和 Chrome 瀏覽器支持。
prefetch 預讀取
預讀取就是很常見的資源預加載,當前頁面加載完成之后,就會在后面偷偷的下載你指定的資源,一般是 JS 、CSS 和 圖片 這類的,也可以下載頁面:
<link rel="prefetch" /><br />
<link rel="prefetch" /><br />
<link rel="prefetch alternate stylesheet" href="mozspecific.css" />
目前 Firefox 瀏覽器支持這個功能。
prerender 預渲染
這個更厲害了,不僅偷偷的提前下載,而且還給你渲染出來,當用戶點擊鏈接的時候,立刻給你展現(xiàn)出來。
<link rel="prerender" />
目前 Chrome 支持這個功能。
搜素引擎其實是最需要這種預讀取的功能的,因為他們非常確定用戶下一步要打開的頁面(搜索結果頁面),所以當用戶輸入搜索內容的時候,就可以提前把搜索結果頁面的資源提前加載,而且應用之后,效果十分明顯。
目前兼容性是個缺點,貌似只有 Chrome 和 Firefox 支持,而且用的 rel 屬性是不同的,如果你想同時兼容兩個瀏覽器,可以寫成下面這樣:
<link rel="prefetch prerender" />
此外,當然為了安全沒法跨域預加載資源,可能沒法用在CDN 了。
Download 屬性
HTML5 的 Download 屬性用來強制瀏覽器下載對應文件,而不是打開。Chrome 和 Firefox 等瀏覽器太過于強大,也許是為了增強用戶體驗,當用戶點擊的資源文件可以被它們識別的時候(例如 pdf 會直接在瀏覽器打開,mp3、mp4 等媒體直接用瀏覽器內置播放器播放)。但有時候,用戶其實是希望直接下載而不是在瀏覽器上看看,這時就可以加上這個屬性,屬性值會對下載的文件重命名:
<a href="downloadpdf.php" download="download.pdf" >點擊直接下載并保存成 download.pdf 文件</a>
如果你確定這個資源是用戶肯定會下載的,就可以加上這個屬性,還可以用 JS 或者手動改變想要保存的文件名。不過小編在發(fā)布文章之前也測試了一下,在谷歌、360、IE9瀏覽器下這個屬性都不能正常發(fā)揮作用。
怎么樣,閱讀完上面的文章,是不是覺得自己的知識又增進了不少呢,多多關注我們的網(wǎng)站,您會受益更多呢。也歡迎廣大新老客戶來電或來廠了解關于烏魯木齊SEO優(yōu)化,新疆SEO優(yōu)化公司歡迎您的來電與來訪。