Base 對(duì)象
Base 對(duì)象代表 HTML 的 base 元素。
base 元素適用頁(yè)面中于指定的默認(rèn)地址或者所有鏈接的目標(biāo)地址。
在 HTML 文檔中 <base> 每出現(xiàn)一次,Base 對(duì)象就會(huì)被創(chuàng)建。
Base 對(duì)象屬性
W3C: W3C 標(biāo)準(zhǔn)。
屬性 | 描述 | W3C |
---|---|---|
href | 設(shè)置或返回針對(duì)頁(yè)面中所有鏈接的基準(zhǔn) URL。 | Yes |
target | 設(shè)置或返回針對(duì)頁(yè)面中所有鏈接的默認(rèn)目標(biāo)框架。 | Yes |
標(biāo)準(zhǔn)屬性和事件
Base 對(duì)象同樣支持標(biāo)準(zhǔn)的 屬性 和 事件。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!
果你是一個(gè)前端工程師,圖片的處理你是肯定要會(huì)的,關(guān)于圖片的Base64編碼,你可能有點(diǎn)陌生,但是這是一個(gè)前端工程師應(yīng)該要掌握的知識(shí)點(diǎn),今天我們就一起來(lái)看一下吧。
Base64
Base64編碼
那么什么是Base64編碼呢?
Base64編碼是一種圖片處理格式,通過(guò)特定的算法將圖片編碼成一長(zhǎng)串字符串,在頁(yè)面上顯示的時(shí)候,可以用該字符串來(lái)代替圖片的url屬性。
我們可以來(lái)看一下實(shí)際的效果
Base64編碼效果
在上圖中,我們可以看出img的src屬性開(kāi)頭是data:image/png;base64,這種開(kāi)頭表示的就是Base64編碼后的圖片格式,鼠標(biāo)放在src屬性上,可以看出實(shí)際的圖片。
圖片采用Base64編碼后的字符串非常長(zhǎng),這里截取一部分來(lái)看下效果
Base64編碼的部分字符串
真實(shí)的全部字符串會(huì)比這長(zhǎng)的多,可能達(dá)到幾十KB
當(dāng)然,Base64編碼并不只是用在圖片處理上,還可以用在URL轉(zhuǎn)換上,比如說(shuō)我們常見(jiàn)的迅雷以thunder開(kāi)頭的專用地址,就是通過(guò)Base64加密處理過(guò)后的URL地址,如下圖所示
Base64處理后的URL
為何使用Base64編碼
存在及必然,那么我們?yōu)槭裁匆褂肂ase64編碼呢?
1.其中很重要的一點(diǎn)就是,使用Base64編碼可以減少網(wǎng)絡(luò)請(qǐng)求。
我們都知道,網(wǎng)頁(yè)上的圖片資源如果采用http形式的url的話都會(huì)額外發(fā)送一次請(qǐng)求,網(wǎng)頁(yè)發(fā)送的http請(qǐng)求次數(shù)越多,會(huì)造成頁(yè)面加載速度越慢。而采用Base64格式的編碼,將圖片轉(zhuǎn)化為字符串后,圖片文件會(huì)隨著html元素一并加載,這樣就可以減少http請(qǐng)求的次數(shù),對(duì)于網(wǎng)頁(yè)優(yōu)化是一種比較好的手段。
2.采用Base64編碼的圖片是隨著頁(yè)面一起加載的,不會(huì)造成跨域請(qǐng)求的問(wèn)題。
3.不會(huì)造成清理圖片緩存的問(wèn)題
Base64編碼劣勢(shì)
Base64編碼既有優(yōu)勢(shì)也有劣勢(shì),上述已經(jīng)說(shuō)了Base64編碼的優(yōu)勢(shì),接下來(lái)看看劣勢(shì)。
1.當(dāng)我們將一個(gè)只有幾KB的圖片轉(zhuǎn)化為Base64格式編碼,生成的字符串往往會(huì)大于幾KB,如果將其寫在一個(gè)css文件中,這樣一個(gè)css文件的大小會(huì)劇增,造成代碼可讀性差不說(shuō),還會(huì)造成請(qǐng)求傳輸?shù)臄?shù)據(jù)量遞增。
2.如果我們將Base64位的編碼的圖片存入數(shù)據(jù)庫(kù)中,會(huì)造成數(shù)據(jù)庫(kù)數(shù)據(jù)量的增大,這樣的效果還不如將圖片存至圖片服務(wù)器,而只在數(shù)據(jù)庫(kù)中存入url字段。
3.對(duì)于IE8以下的瀏覽器,不支持data url格式,IE8開(kāi)始支持data url,卻對(duì)大小作出了限制,在使用時(shí)不是很方便。
如何使用
分析了Base64編碼的優(yōu)劣,那么我們?cè)撊绾握_的使用Base64編碼呢?這里總結(jié)出使用Base64編碼的幾個(gè)地方。
對(duì)于極小或者極簡(jiǎn)單的圖片,例如只有幾像素的圖片
不用考慮跨域問(wèn)題
不想頁(yè)面的圖片緩存
總結(jié)
關(guān)于Base64編碼的圖片,有其優(yōu)勢(shì),也有劣勢(shì),需要我們自己總結(jié),
今天的內(nèi)容,了解了嗎?
例
規(guī)定頁(yè)面上所有鏈接的默認(rèn) URL 和默認(rèn)目標(biāo):
<head><base>runoob.com</a></body>
瀏覽器支持
所有主流瀏覽器都支持 <base> 標(biāo)簽。
標(biāo)簽定義及使用說(shuō)明
<base> 標(biāo)簽為頁(yè)面上的所有的相對(duì)鏈接規(guī)定默認(rèn) URL 或默認(rèn)目標(biāo)。
在一個(gè)文檔中,最多能使用一個(gè) <base> 元素。<base> 標(biāo)簽必須位于 <head> 元素內(nèi)部。
提示和注釋
提示:請(qǐng)把 <base> 標(biāo)簽排在 <head> 元素中第一個(gè)元素的位置,這樣 head 區(qū)域中其他元素就可以使用 <base> 元素中的信息了。
注釋:如果使用了 <base> 標(biāo)簽,則必須具備 href 屬性或者 target 屬性或者兩個(gè)屬性都具備。
HTML 4.01 與 HTML5之間的差異
無(wú)。
HTML 與 XHTML 之間的差異
在 HTML 中,<base> 標(biāo)簽沒(méi)有結(jié)束標(biāo)簽。
在 XHTML 中,<base> 標(biāo)簽必須被正確地關(guān)閉。
屬性
屬性 | 值 | 描述 |
---|---|---|
href | URL | 規(guī)定頁(yè)面中所有相對(duì)鏈接的基準(zhǔn) URL。 |
target | _blank_parent_self_topframename | 規(guī)定頁(yè)面中所有的超鏈接和表單在何處打開(kāi)。該屬性會(huì)被每個(gè)鏈接中的 target 屬性覆蓋。 |
全局屬性
<base> 標(biāo)簽支持 HTML 的全局屬性。
事件屬性
<base> 標(biāo)簽不支持任何的事件屬性。
相關(guān)文章
HTML DOM 參考手冊(cè): Base 對(duì)象
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。