整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
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)系。
