全國熱線

400-080-3312

全國監督投訴熱線:9:00-23:00

html5的三個新特性介紹

html5還有一些新特性,在相關書籍和資料中介紹的比較少,但實際應用起來很方便,今天南京學碼思web培訓學校老師就來給大家詳細介紹一下html5的三個新特性,一起來了解一下。

不知不覺已經是2018年了,html5的特性和用處,大部分我們已經接觸過也有所了解了,但html5還有一些新特性,在相關書籍和資料中介紹的比較少,但實際應用起來很方便,今天南京學碼思web培訓學校老師就來給大家詳細介紹一下html5的三個新特性,一起來了解一下。

web1.jpg

一、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="/UploadFiles/2018-03-27/20183278415839828.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還有很多其他特性,以上三點不常見到但又很實用,所以拿出來和大家分享一下。近兩年,html5的發展和應用我們都有目共睹,如果你還想進一步學習html5方面的知識,可以直接咨詢學碼思web培訓學校在線老師,咨詢試聽課程,還能獲得免費web前端教程和學習資料,你還在等什么?


上一篇:網站前端設計需要注意哪些方面
下一篇:學習web前端必懂的九訣竅

相關推薦

免費試聽 | 學費咨詢 | 在線報名 | 申請補貼 | 軟件培訓 | 網站地圖

2016-2020 南京學碼思教育科技有限公司 .All Rights Reserved

蘇ICP備16033487號 www.itao28.com

全國熱線

400-080-3312

全國監督服務熱線:9:00-23:00

久久热,新龙腾小说,久久热小说,老司机小说,成人小说,白洁小说,爱哥哥色妹妹,,久久热视频这里只有精品,久久这里只有精品视频 <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>