Web前端HTML知識體系

1、Web語義化和 SEO

html 常規(guī)標(biāo)簽有html,head,body,div,span,table,ul,ol,dl,p,b,h1~h6,strong,form,input,img,em,i 等等，另外html5 還新增了很多語義化的標(biāo)簽，比如header,acticle,aside,section,footer,audio,radio 等等。

Web語義化是指使用語義恰當(dāng)?shù)臉?biāo)簽，使頁面有良好的結(jié)構(gòu)，頁面元素有含義，能夠讓人和搜索引擎都容易理解。

SEO是指在了解搜索引擎自然排名機(jī)制的基礎(chǔ)之上，對網(wǎng)站進(jìn)行內(nèi)部及外部的調(diào)整優(yōu)化，改進(jìn)網(wǎng)站在搜索引擎中關(guān)鍵詞的自然排名，獲得更多的展現(xiàn)量，吸引更多目標(biāo)客戶點(diǎn)擊訪問網(wǎng)站，從而達(dá)到互聯(lián)網(wǎng)營銷及品牌建設(shè)的目標(biāo)。

搜索引擎通過爬蟲技術(shù)獲取的頁面就是由一堆html標(biāo)簽組成的代碼，人可以通過可視化的方式來判斷頁面上哪些內(nèi)容是重點(diǎn)，而機(jī)器做不到。但搜索引擎會根據(jù)標(biāo)簽的含義來判斷內(nèi)容的權(quán)重，因此，在合適的位置使用恰當(dāng)?shù)臉?biāo)簽，使整個頁面的語義明確，結(jié)構(gòu)清晰，搜索引擎才能正確識別頁面中的重要內(nèi)容，并予以較高的權(quán)值。比如h1~h6這幾個標(biāo)簽在SEO中的權(quán)值非常高，用它們作頁面的標(biāo)題就是一個簡單的SEO優(yōu)化。

2、本地存儲

本地存儲最原始的方式就是 cookie,cookie 是存放在本地瀏覽器的一段文本，數(shù)據(jù)以鍵值對的形式保存，可以設(shè)置過期時間。 但是 cookie 不適合大量數(shù)據(jù)的存儲，因?yàn)槊看握埱笠淮雾撁?，cookie 都會發(fā)送給服務(wù)器，這使得 cookie 速度很慢而且效率也不高。因此cookie的大小被限制為4k左右(不同瀏覽器可能不同,分HOST)，如下所示：

Firefox和Safari允許cookie多達(dá)4097個字節(jié)，包括名（name）、值（value）和等號。

Opera允許cookie多達(dá)4096個字節(jié)，包括：名（name）、值（value）和等號。

Internet Explorer允許cookie多達(dá)4095個字節(jié)，包括：名（name）、值（value）和等號。

在所有瀏覽器中，任何cookie大小超過限制都被忽略，且永遠(yuǎn)不會被設(shè)置。

html5提供了兩種在客戶端存儲數(shù)據(jù)的新方法：localStorage 和 sessionStorage, 它們都是以key/value 的形式來存儲數(shù)據(jù)，前者是永久存儲，后者的存儲期限僅限于瀏覽器會話(session),即當(dāng)瀏覽器窗口關(guān)閉后，sessionStorage中的數(shù)據(jù)被清除。

localStorage的存儲空間大約5M左右(不同瀏覽器可能不同，分 HOST)，這個相當(dāng)于一個5M大小的前端頁面的數(shù)據(jù)庫，相比于cookie可以節(jié)約帶寬，但localStorage在瀏覽器隱私模式下是不可讀取的，當(dāng)存儲數(shù)據(jù)超過了localStorage的存儲空間后會拋出異常。

此外，H5還提供了逆天的websql和indexedDB,允許前端以關(guān)系型數(shù)據(jù)庫的方式來存儲本地數(shù)據(jù)，相對來說，這個功能目前應(yīng)用的場景比較少，此處不作介紹。

3、瀏覽器緩存機(jī)制

瀏覽器緩存機(jī)制是指通過 HTTP 協(xié)議頭里的 Cache-Control（或 Expires）和 Last-Modified（或 Etag）等字段來控制文件緩存的機(jī)制。

Cache-Control 用于控制文件在本地緩存有效時長。最常見的，比如服務(wù)器回包：Cache-Control:max-age=600 表示文件在本地應(yīng)該緩存，且有效時長是600秒（從發(fā)出請求算起）。在接下來600秒內(nèi)，如果有請求這個資源，瀏覽器不會發(fā)出 HTTP 請求，而是直接使用本地緩存的文件。

Last-Modified 是標(biāo)識文件在服務(wù)器上的新更新時間。下次請求時，如果文件緩存過期，瀏覽器通過 If-Modified-Since 字段帶上這個時間，發(fā)送給服務(wù)器，由服務(wù)器比較時間戳來判斷文件是否有修改。如果沒有修改，服務(wù)器返回304告訴瀏覽器繼續(xù)使用緩存；如果有修改，則返回200，同時返回新的文件。

Cache-Control 通常與 Last-Modified 一起使用。一個用于控制緩存有效時間，一個在緩存失效后，向服務(wù)查詢是否有更新。

Cache-Control 還有一個同功能的字段：Expires。Expires 的值一個絕 對的時間點(diǎn)，如：Expires: Thu, 10 Nov 2015 08:45:11 GMT，表示在這個時間點(diǎn)之前，緩存都是有效的。Expires 是 HTTP1.0 標(biāo)準(zhǔn)中的字段，Cache-Control 是 HTTP1.1 標(biāo)準(zhǔn)中新加的字段，功能一樣，都是控制緩存的有效時間。當(dāng)這兩個字段同時出現(xiàn)時，Cache-Control 是高優(yōu)化級的。

Etag 也是和 Last-Modified 一樣，對文件進(jìn)行標(biāo)識的字段。不同的是，Etag 的取值是一個對文件進(jìn)行標(biāo)識的特征字串。在向服務(wù)器查詢文件是否有更新時，瀏覽器通過 If-None-Match 字段把特征字串發(fā)送給服務(wù)器，由服務(wù)器和文件新特征字串進(jìn)行匹配，來判斷文件是否有更新。沒有更新回包304，有更新回包200。Etag 和 Last-Modified 可根據(jù)需求使用一個或兩個同時使用。兩個同時使用時，只要滿足基中一個條件，就認(rèn)為文件沒有更新。

另外有兩種特殊的情況：

手動刷新頁面（F5)，瀏覽器會直接認(rèn)為緩存已經(jīng)過期（可能緩存還沒有過期），在請求中加上字段：Cache-Control:max-age=0，發(fā)包向服務(wù)器查詢是否有文件是否有更新。

強(qiáng)制刷新頁面（Ctrl+F5)，瀏覽器會直接忽略本地的緩存（有緩存也會認(rèn)為本地沒有緩存），在請求中加上字段：Cache-Control:no-cache（或 Pragma:no-cache），發(fā)包向服務(wù)重新拉取文件。

4、HTML5離線緩存

HTML5離線緩存又叫Application Cache，是從瀏覽器的緩存中分出來的一塊緩存區(qū)，如果要在這個緩存中保存數(shù)據(jù)，可以使用一個描述文件（manifest file），列出要下載和緩存的資源。

manifest 文件是簡單的文本文件，它告知瀏覽器被緩存的內(nèi)容（以及不緩存的內(nèi)容）。manifest 文件可分為三個部分：

- CACHE MANIFEST - 在此標(biāo)題下列出的文件將在首 次下載后進(jìn)行緩存

- NETWORK - 在此標(biāo)題下列出的文件需要與服務(wù)器的連接，且不會被緩存

- FALLBACK - 在此標(biāo)題下列出的文件規(guī)定當(dāng)頁面無法訪問時的回退頁面（比如 404 頁面）

離線緩存為應(yīng)用帶來三個優(yōu)勢：

離線瀏覽 - 用戶可在應(yīng)用離線時使用它們

速度 - 已緩存資源加載得更快

減少服務(wù)器負(fù)載 - 瀏覽器將只從服務(wù)器下載更新過或更改過的資源。

5、Canvas和SVG

Canvas 通過Javascript 來繪制 2D 圖形。Canvas 是逐像素進(jìn)行渲染的。在 Canvas 中，一旦圖形被繪制完成，它就不會繼續(xù)得到瀏覽器的關(guān)注。如果其位置發(fā)生變化，那么整個場景SVG 是一種使用 XML 描述 2D 圖形的語言。SVG 基于 XML，這意味著 SVG DOM 中的每個元素都是可用的。你可以為某個元素附加 JavaScript 事件處理器。在 SVG 中，每個被繪制的圖形均被視為對象。如果 SVG 對象的屬性發(fā)生變化，那么瀏覽器能夠自動重現(xiàn)圖形。

Canvas和SVG相比，canvas更依賴于分辨率，不支持事件處理器，文本渲染能力弱，比較適合密集型游戲，其中的許多對象會被頻繁繪制，而svg則比較適用于類似谷歌地圖帶有大型渲染區(qū)域的應(yīng)用程序。