 |
VOOZH | about |
|
VOOZH | about |
每當打開 Github/Twitter 這些網站的源碼時，總會發現 <head> 標籤里有一坨東西，類似這樣：
這究竟是啥？
好吧，讓我們把這些放到後面慢慢講，首先看一下 MDN 對於 <head> 標籤的定義：
Theprovides general information (metadata) about the document, including its title and links to its scripts and style sheets.這段話只是籠統的描述了其含義：<head> 標籤包含了當前文檔的元數據。所謂元數據就是描述數據的數據，比如文檔的標題、使用的字符集、關鍵字等信息，這些信息並不會真正被瀏覽器所渲染。
雖然 head 中的內容並不會渲染，但是卻起著至關重要的作用，從 head 這個命名就足以看出它對於整個文檔的意義。隨便列舉幾個 <head> 標籤的作用：
下面我們來看看 <head> 標籤中這些內容究竟是幹什麼的，對我們的有哪些幫助。
head 中的標籤讓我們按標籤類型依次進行介紹。
<title>文檔標題，而通常我們會添加比標題更多的東西。
我們可以在原本的標題後面加一句網站的 Slogan，比如 Nike 官網的標題是
Nike. Just Do It. Nike.com除此之外還可以在後面加上更詳細的標識。比如當訪問nike.com/c/boys時，它的標題就變成了Nike Boys Shoes, Clothing & Gear.
Nike.com。這樣做的好處是當用戶查看瀏覽器歷史或者記錄標籤頁時使用的就是這個<title>，更詳細的信息可以幫助用戶更準確地進行定位。還有一些場合我們可以用 <title> 提示用戶接收到了新的消息，如<base>
用來為文檔中所有相對路徑的 URL 設置一個基礎 URL，以及為沒有明確指定 target 的跳轉連結設置一個默認的 target。並且理所當然的，一個文檔中只能有一個 <base> 標籤，除此之外沒太多可展開講的。
<link>外部資源連結，除了最常用的加載外部 CSS 文件以外也有其它的用途，但還是讓我們從最基礎的進行介紹。
加載外部 CSS以下是一個最基礎的 CSS 資源連結：
<linkhref="styles.css"rel="stylesheet"type="text/css"/>text/css
除這三個以外、 CSS 資源連結還支持更多的屬性。
（1）media：添加一個媒體查詢，使該 CSS 文件作用於特定的設備上。如：
<linkhref="styles-a.css"rel="stylesheet"media="print"/><linkhref="styles-b.css"rel="stylesheet"media="screen and (min-width: 600px)"/>（2）integrity：添加一個 base64 編碼加密的資源 hash，用於校驗請求回來的資源內容是未經改過的，這項技術被稱為 Subresource Integrity(SRI)，這可以防止 CDN 提供者以及網絡中間人對資源進行篡改。如：
<linkhref="style.css"rel="stylesheet"integrity="sha512-fIK6jWQTUE9Q/xOs3LiWuLsJUbfgm...SLB0uptvoYm1RyOUqYQ=="/>crossorigin、title等屬性，由於使用頻率沒那麼高，這裏不再進行贅述。設定 icon
除了引入 CSS 資源之外，<link> 還被用於設定網頁的 icon，如：
<linkrel="icon"href="favicon.ico"/>有時我們還會見到這種：
<linkrel="shortcut icon"href="favicon.ico"/>但其實在 icon 前面添加 shoutcut 並不屬於規範，也沒有什麼用，完全可以去掉。
我們也可以為 icon 添加mediasizes等屬性，用來支持不同的設備。預瀏覽預瀏覽指的是通過一些技術告訴瀏覽器未來將會加載某些資源，可以讓瀏覽器提前做好準備，以便在用戶發起請求的時候可以更快的獲取到。這些技術包括dns-prefetch、preconnect、prefetch，以及preload。
（1）dns-prefetch：讓瀏覽器對某個域名預先進行 DNS 解析，如：
<linkrel="dns-prefetch"href="https://my-cdn.com"/>（2）preconnect：除了預先解析 DNS 之外，還會進行 TCP 握手以及 TLS 通訊（當指定的協議頭是 HTTPS ），如：
<linkrel="preconnect"href="https://my-cdn.com"/>（3）prefetch：預先加載某個資源。這項技術比前兩個更激進，因為它會使瀏覽器真正的去下載某個資源並緩存起來。這項技術是不穩定的，當瀏覽器一直處於忙碌的狀態有可能會忽略 prefetch，如：
<linkrel="prefetch"href="image.png"/>（4）preload：和 prefetch 類似，但是它一定會被請求，而不像 prefetch 一樣有可能會被忽略。
這些技術中有些已經被瀏覽器所支持，關於兼容性問題請看 MDN 的數據。
整合重複網址rel="canonical"屬性可以幫助整合重複網址。通過為多個相似的子頁面配置一個權威頁（通常是網站主頁），可以讓搜尋引擎更有效地整合信息。比如有許多我們不希望搜尋引擎導過去的頁面（維護頁、404頁等），可以將它們都設置一個權威頁：
<linkrel="canonical"href="https://my-site.com/">下面是 Github 的原始碼：
<linkrel="search"type="application/opensearchdescription+xml"href="/opensearch.xml"title="GitHub">具體實現可參考 add-opensearch-to-your-site-in-five-minutes
多語言支持rel="alternate"hreflang屬性可以幫助搜尋引擎為用戶提供適合其語言的網址。比如 Airbnb 在其網頁頭部添加了 64 種支持的語言：
當用戶在搜索 Airbnb 時就會為其展現獲取到其對應的語言站點連結。
Web App Manifestrel="manifest"用於加載一個 JSON 文件，裡面包含了 Web 應用的信息（圖標、背景色、入口地址等）。它其實屬於 PWA 技術的一部分。以下是 Github 頭部的源碼：
<linkrel="manifest"href="/manifest.json"crossorigin="use-credentials"/>{"name":"GitHub","icons":[{"sizes":"114x114","src":"https://assets-cdn.github.com/apple-touch-icon-114x114.png"},{"sizes":"120x120","src":"https://assets-cdn.github.com/apple-touch-icon-120x120.png"},...]}文檔的CSS。與通過 link 來加載 CSS 文件最大的區別在於 <style> 標籤中的樣式不容易多個頁面之間復用，並且無法利用客戶端的緩存，但是它的動態性很好。Twitter 使用 <style> 標籤來為用戶頁面注入主題樣式，如：
為了反映出一些特性的應用情況，我參考了以下網站：Google、Twitter、Airbnb、Github、Amazon、淘寶網、百度、知乎、豆瓣、網易雲音樂，看看他們的 <head> 中都有什麼內容。
<title>
不說了，所有人都在用。
<base>
目前發現只有淘寶網在用它來指定默認 target。
<basetarget="_blank"><link>
用法很多，下面分類說一下。
（1）CSS：大家基本都是正常使用，只有 Github 使用了integrity、crossorigin等屬性（Github 基本屬於最激進型，使用了很多最新的以及實驗中的特性）。(3)-(6)基本沒有國內的站點在使用，這裏面有部分是因為不需要對 Google 進行 SEO 優化（疑問：百度對 canonical 和 alternate 是否支持？）。
<style>
<style>貼在那，因此也並不知道每一段樣式都是幹嘛的。script和，以及和template