您現在的位置是:電腦技術吧?>? 組裝維修 ??>??新特性,Css3新特性??>??正文詳情

新特性,Css3新特性

上官采波2019-11-14 01:21:07 人圍觀
簡介es5新特性已經是2014年了。現在談論HTML5的新功能已經太遲了。然而,在介紹HTML5的書中很少看到這些,但是它們可以很容易地應用到自己的網站上。因此,特別介紹了DNHtml5新特性

都已經到了 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 還有很多其他特性,但是看了很長時間書和各種資料,很少見到上面三個又比較實用的屬性,拿出來分享一下。

版權聲明:本文由 上官采波 整理編輯。

原標題:Es6有哪些新特性,Es6新特性

轉載注明出處:http://www.dn9ww09s.icu/assemble/12003.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • win7電腦無法安裝軟件,很多軟件電腦無法安裝

    win7電腦無法安裝軟件,很多軟件電腦無法安裝 相關圖片電腦無法安裝應用程序最近,我看到一個用戶在貼吧上發帖。安裝計算機后,無法安裝某些軟件。我太無聊了,問我是否可以在上次安裝后關閉所有程序。我在等著用電腦。我的一些朋...

  • session的存儲方式,session幾種存儲方式

    session的存儲方式,session幾種存儲方式 相關圖片session存儲數據因此,session storage不是持久的本地存儲,而是會話級存儲。local storage用于持久本地存儲。除非數據被主動刪除,否則數據永遠不會過期I.session的值存儲在哪里...

  • 電腦沒聲音了怎么解決,電腦不出聲音怎么解決

    電腦沒聲音了怎么解決,電腦不出聲音怎么解決 相關圖片電腦的聲音怎么打開電腦里沒有聲音怎么了?這個問題一定會困擾許多朋友。因為電腦里沒有聲音,很多網友認為有必要重新安裝電腦系統來解決這個問題。事實上,這是費時費力的。...

  • 筆記本電腦怎樣設置桌面圖標,怎么修改我的電腦圖標

    筆記本電腦怎樣設置桌面圖標,怎么修改我的電腦圖標 相關圖片怎么更改電腦程序圖標更改桌面圖標可以使您的桌面更加個性化。您可以將其更改為計算機上的原始圖標。你只需要改變它。您還可以在Internet上搜索一些圖標,下載您喜愛的圖片,然后...

  • html5獲取地理位置,html5顯示地理位置

    html5獲取地理位置,html5顯示地理位置 相關圖片html5精確位置代碼如下:/**以下是HTML5代碼。獲取地理位置*/function Get location(){//檢查瀏覽器是否支持地理位置if(navigator)。html5地理位置偏差...

  • 不重裝系統怎么分區,重裝系統分區教程

    不重裝系統怎么分區,重裝系統分區教程 相關圖片重裝系統硬盤分區相信很多朋友都遇到過重新安裝系統沒有分區的問題,那么在系統找不到分區的情況下,如何解決這個問題呢?小編還遇到了系統在重裝系統中找不到分區的問題,目...

  • 網頁有哪幾部分組成,什么是網頁

    網頁有哪幾部分組成,什么是網頁 相關圖片網頁的基本內容和構成網頁中的信息主要是文本。在網頁中,可以按字體、大小、顏色、底紋、邊框等設置文本屬性。此處所指的文本是文本的文本,而不是圖片中的文本。在網頁制作...

  • 好的筆記本電腦推薦,筆記本電腦哪個好用

    好的筆記本電腦推薦,筆記本電腦哪個好用 相關圖片筆記本電腦推薦對于小白來說,難點在于不知道什么樣的預算能滿足需求,什么樣的性能參數能滿足需求,什么樣的電腦才是性價比高的?哪個品牌比較好,應該購買哪個渠道?要解決...

  • ssd是固態硬盤嗎,m.2固態硬盤比ssd快嗎

    ssd是固態硬盤嗎,m.2固態硬盤比ssd快嗎 相關圖片英睿達ssd固態硬盤相信很多朋友慢慢了解并開始使用SSD,它的速度和節能功能勢必會取代傳統的機械硬盤,那么如何安裝和使用SSD呢?有些用戶不知道如何使用SSD。這是一個詳細介紹S...

  • 即和即的區別,那和哪的區別

    即和即的區別,那和哪的區別 相關圖片二和倆的區別HTML5是HTML標準的下一個版本。雖然HTML5并沒有完全顛覆html4,但它們之間還是有一些區別的。請參閱http://dev.w3.org/html5/必須和必需的區別...

熱評文章

  • 0x0000007e藍屏代碼,0x000000be藍屏代碼

    0x0000007e藍屏代碼,0x000000be藍屏代碼 相關圖片電腦藍屏代碼0x0000001e在我們日常使用的電腦中,我們有時會遇到藍屏的情況,但藍屏產生的原因是多方面的。不同的原因導致不同的藍屏解決方案。藍屏代碼是顯示原因的,所以藍屏出...

  • html5提示框,html搜索框功能實現

    html5提示框,html搜索框功能實現 相關圖片html搜索框讓我們先看看它們的不同顯示,這里是Firefox的截圖:這里是chrome的截圖:您可以猜到您編寫的代碼肯定是不兼容的。不過,你會發現這很簡單。即使您是一個前端html怎么做搜...

  • 新固態硬盤裝系統教程,固態硬盤重裝系統教程

    新固態硬盤裝系統教程,固態硬盤重裝系統教程 相關圖片換固態硬盤要重裝系統嗎有用戶問小編,重裝系統固態硬盤的方法有哪些?實際上,有一個關于固態硬盤安裝的系統的圖片和文本教程非常簡單。win7重新安裝系統的固態硬盤有哪些圖片...

  • 電腦安全模式怎么解除,電腦安全模式怎么退出

    電腦安全模式怎么解除,電腦安全模式怎么退出 相關圖片電腦安全模式進不去如果計算機硬件驅動程序或網絡有問題,則必須轉到安全模式才能進行修復、刪除和其他操作。進入安全模式后,許多人知道如何操作。如何退出?恐怕我不太了解...

  • 什么是優化,優化應用對手機有沒有影響

    什么是優化,優化應用對手機有沒有影響 相關圖片對人員優化首先,我們應該對HTML5有一個大致的了解。HTML5是第五代W3C的核心語言,通常被稱為HTML代碼。這是HTML4.01的一個新變化,或者是為了彌補以前版本大數據能優化嗎...

  • wifi為什么連上不能用,wifi

    wifi為什么連上不能用,wifi 相關圖片wifi已連接不可上網有時,家里的WiFi顯示電腦已經成功連接并獲得了IP地址,但無法上網。計算機已重新啟動,網絡已重新連接,但Internet不可用。為什么WiFi不能連接到互聯網wifi連接上不...

  • 質量檢測的三個重要特性,檢測系統的特性

    質量檢測的三個重要特性,檢測系統的特性 相關圖片產品化學特性檢測服務HTML5和CSS3已經逐漸成為web前端開發的必備技能。在開發過程中檢查不同瀏覽器對HTML5和CSS3的支持是一件非常麻煩的事情。例如,我們需要檢查瀏覽器是檢測系統的...

  • 復制文件或文件夾出錯,文件無法復制粘貼

    復制文件或文件夾出錯,文件無法復制粘貼 相關圖片文件夾復制粘貼沒反應計算機無法復制、粘貼或剪切文件的問題,是計算機用戶經常遇到的問題,即復制后,粘貼時間為空。也就是說,此時,任何復制操作都將被忽略,因為它很忙。...

  • 筆記本麥克風怎么開啟,筆記本自帶麥克風沒聲音

    筆記本麥克風怎么開啟,筆記本自帶麥克風沒聲音 相關圖片2016筆記本電腦排行榜我們知道,大多數筆記本電腦都內置攝像頭和麥克風等,但最近有網友向筆者求助,稱新買的電腦在QQ視頻中可以聽到對方的話,但朋友聽不到他說的話,怎么了?...

  • tab選項卡,tab選項卡代碼

    tab選項卡,tab選項卡代碼 相關圖片tabcontrol選項卡切換!DOCTYPE htmlhtml lang=enheadmeta charset=UTF-8titlepure css3 tab/titlestyle typtabcontrol選項卡...

關注微信

变脸官网查询