好程式員分享Web前端知識之HTML

　　今天好程式員分享Web前端知識之HTML。Web前端技術由HTML、CSS和Javascript三大部分構成，而我們在學習它的時候往往是先從某一個點切入，然後不斷地接觸和學習新的知識點，是以對于初學者很難理清楚整個體系的脈絡結構。

1、BOM

BOM是BrowserObjectModel

　　的縮寫，即浏覽器對象模型，當一個浏覽器頁面初始化時，會在記憶體建立一個全局的對象，用以描述目前視窗的屬性和狀态，這個全局對象被稱為浏覽器對象模型，即BOM。BOM的核心對象就是window，window

　　對象也是BOM的頂級對象，其中包含了浏覽器的6個核心子產品：

document-

　　即文檔對象，渲染引擎在解析HTML代碼時，會為每一個元素生成對應的DOM對象，由于元素之間有層級關系，是以整個HTML代碼解析完以後，會生成一個由不同節點組成的樹形結構，俗稱DOM樹，document

　　用于描述DOM樹的狀态和屬性，并提供了很多操作DOM的API。

frames-HTML子架構，即在浏覽器裡嵌入另一個視窗，父架構和子架構擁有獨立的作用域和上下文。

history-以棧(FIFO)的形式儲存着頁面被通路的曆史記錄，頁面前進即入棧，頁面傳回即出棧。

location-提供了目前視窗中加載的文檔相關資訊以及一些導航功能。

navigator-用來描述浏覽器本身，包括浏覽器的名稱、版本、語言、系統平台、使用者特性字元串等資訊。

screen-提供了浏覽器顯示螢幕的相關屬性，比如顯示螢幕的寬度和高度，可用寬度和高度。

2、DOM系統

DOM是DocumentObjectModel的縮寫，即文檔對象模型，是所有浏覽器公共遵守的标準，DOM

　　将HTML和XML文檔映射成一個由不同節點組成的樹型結構，俗稱DOM樹。其核心對象是document，用于描述DOM樹的狀态和屬性，并提供對應的DOM操作API。随着曆史的發展，DOM

　　被劃分為1級、2級、3級，共3個級别：

1級DOM-在1998年10月份成為W3C的提議，由DOM核心與DOM

HTML兩個子產品組成。DOM核心能映射以XML為基礎的文檔結構，允許擷取和操作文檔的任意部分。DOM

HTML通過添加HTML專用的對象與函數對DOM核心進行了擴充。

2級DOM-鑒于1級DOM僅以映射文檔結構為目标，DOM

2級面向更為寬廣。通過對原有DOM的擴充，2級DOM通過對象接口增加了對滑鼠和使用者界面事件(DHTML長期支援滑鼠與使用者界面事件)、範圍、周遊(重複執行DOM文檔)和層疊樣式表(CSS)的支援。同時也對DOM

1的核心進行了擴充，進而可支援XML命名空間。

3級DOM-

　　通過引入統一方式載入和儲存文檔和文檔驗證方法對DOM進行進一步擴充，DOM3包含一個名為“DOM載入與儲存”的新子產品，DOM核心擴充後可支援XML1.0的所有内容，包括XML

Infoset、XPath、和XMLBase。

　　浏覽器對不同級别DOM的支援情況如下所示：

　　從圖中可以看出，移動端常用的Webkit核心浏覽器目前隻支援DOM2，而不支援DOM3。

3、事件系統

　　事件是使用者與頁面互動的基礎，到目前為止，DOM事件從PC端的滑鼠事件(mouse)發展到了移動端的觸摸事件(touch)和

　　手勢事件(guesture)，touch事件描述了手指在螢幕操作的每一個細節，guesture則是描述多手指操作時更為複雜的情況，總結如下：

　　第一根手指放下，觸發touchstart，除此之外什麼都不會發生

　　手指滑動時，觸發touchmove

　　第二根手指放下，觸發gesturestart

　　觸發第二根手指的touchstart

　　立即觸發gesturechange

　　任意手指移動，持續觸發gesturechange

　　第二根手指彈起時，觸發gestureend，以後将不會再觸發gesturechange

　　觸發第二根手指的touchend

　　觸發touchstart(多根手指在螢幕上，提起一根，會重新整理一次全局touch)____

　　彈起第一根手指，觸發touchend

　　更多關于手勢事件的介紹請參考：

gesture事件處理複雜手勢

DOM2.0模型将事件處理流程分為三個階段，即事件捕獲階段、事件處理階段、事件冒泡階段，如圖所示：

　　事件捕獲：當使用者觸發點選事件後，頂層對象document就會發出一個事件流，從最外層的DOM節點向目标元素節點傳遞，最終到達目标元素。

　　事件處理：當到達目标元素之後，執行目标元素綁定的處理函數。如果沒有綁定監聽函數，則不做任何處理。

　　事件冒泡：事件流從目标元素開始，向最外層DOM節點傳遞，途中如果有節點綁定了事件處理函數，這些函數就會被執行。

　　利用事件冒泡原理可以實作事件委托

　　，所謂事件委托，就是在父元素上添加事件監聽器，用以監聽和處理子元素的事件，避免重複為子元素綁定相同的事件。當目标元素的事件被觸發以後，這個事件就從目标元素開始，向最外層元素傳遞，最終冒泡到父元素上，父元素再通過event.target

　　擷取到這個目标元素，這樣做的好處是，父元素隻需綁定一個事件監聽，就可以對所有子元素的事件進行處理了，進而減少了不必要的事件綁定，對頁面性能有一定的提升。

4、HTML解析過程

　　浏覽器加載html檔案以後，渲染引擎會從上往下，一步步來解析HTML标簽，大緻過程如下：

　　使用者輸入網址，浏覽器向伺服器送出請求，伺服器傳回html檔案;

　　渲染引擎開始解析html标簽，并将标簽轉化為DOM節點，生成DOM樹;

　　如果head标簽中引用了外部css檔案，則發出css檔案請求，伺服器傳回該檔案，該過程會阻塞後面的解析;

　　如果引用了外部js檔案，則發出js檔案請求，伺服器傳回後立即執行該腳本，這個過程也會阻塞html的解析;

　　引擎開始解析body裡面的内容，如果标簽裡引用了css樣式，就需要解析剛才下載下傳好的css檔案，然後用css來設定标簽的樣式屬性，并生成渲染樹;

　　如果body中的img标簽引用了圖檔資源，則立即向伺服器送出請求，此時引擎不會等待圖檔下載下傳完畢，而是繼續解析後面的标簽;

　　伺服器傳回圖檔檔案，由于圖檔需要占用一定的空間，會影響到後面元素的排版，是以引擎需要重新渲染這部分内容;

　　如果此時js腳本中運作了style.display="none"，布局被改變，引擎也需要重新渲染這部分代碼;

　　直到html結束标簽為止，頁面解析完畢。

5、重繪和回流

　　當渲染樹中的一部分(或全部)因為元素的規模尺寸，布局，隐藏等改變而需要重新建構。這就稱為回流。比如上面的img檔案加載完成後就會引起回流，每個頁面至少需要一次回流，就是在頁面第一次加載的時候。

　　當渲染樹中的一些元素需要更新屬性，而這些屬性隻是影響元素的外觀，風格，而不會影響布局的，比如background-color。則就叫稱為重繪。

　　從上面可以看出，回流必将引起重繪，而重繪不一定會引起回流。會引起重繪和回流的操作如下：

　　添加、删除元素(回流+重繪)

　　隐藏元素，display:none(回流+重繪)，visibility:hidden(隻重繪，不回流)

　　移動元素，比如改變top,left的值，或者移動元素到另外一個父元素中。(重繪+回流)

　　對style的操作(對不同的屬性操作，影響不一樣)

　　還有一種是使用者的操作，比如改變浏覽器大小，改變浏覽器的字型大小等(回流+重繪)

　　另外，transform

　　操作不會引起重繪和回流，是一種高效率的渲染。這是因為transform屬于合成屬性，對合成屬性進行transition/animation

　　動畫時将會建立一個合成層，這使得動畫元素在一個獨立的層中進行渲染，當元素的内容沒有發生改變，就沒必要進行重繪，浏覽器會通過重新複合來建立動畫幀。

6、本地存儲

　　本地存儲最原始的方式就是cookie,cookie是存放在本地浏覽器的一段文本，資料以鍵值對的形式儲存，可以設定過期時間。但是cookie

　　不适合大量資料的存儲，因為每請求一次頁面，cookie都會發送給伺服器，這使得cookie

　　速度很慢而且效率也不高。是以cookie的大小被限制為4k左右(不同浏覽器可能不同,分HOST)，如下所示：

Firefox和Safari允許cookie多達4097個位元組，包括名(name)、值(value)和等号。

Opera允許cookie多達4096個位元組，包括：名(name)、值(value)和等号。

InternetExplorer允許cookie多達4095個位元組，包括：名(name)、值(value)和等号。

　　在所有浏覽器中，任何cookie大小超過限制都被忽略，且永遠不會被設定。

html5提供了兩種在用戶端存儲資料的新方法：localStorage和sessionStorage,它們都是以key/value

　　的形式來存儲資料，前者是永久存儲，後者的存儲期限僅限于浏覽器會話(session)，即當浏覽器視窗關閉後，sessionStorage中的資料被清除。

localStorage的存儲空間大約5M左右(不同浏覽器可能不同，分

HOST)，這個相當于一個5M大小的前端資料庫，相比于cookie，可以節約帶寬，但localStorage在浏覽器隐私模式下是不可讀取的，當存儲資料超過了localStorage

　　的存儲空間後會抛出異常。

　　此外，H5還提供了逆天的Websql和

indexedDB，允許前端以關系型資料庫的方式來存儲本地資料，相對來說，這個功能目前應用的場景比較少，此處不作介紹。

7、浏覽器緩存機制

　　浏覽器緩存機制是指通過HTTP協定頭裡的Cache-Control(或Expires)和Last-Modified(或Etag)

　　等字段來控制檔案緩存的機制。

Cache-Control用于控制檔案在本地緩存有效時長。最常見的，比如伺服器回包：Cache-Control:max-age=600

　　表示檔案在本地應該緩存，且有效時長是600秒(從送出請求算起)。在接下來600秒内，如果有請求這個資源，浏覽器不會發出HTTP

　　請求，而是直接使用本地緩存的檔案。

Last-Modified是辨別檔案在伺服器上的最新更新時間。下次請求時，如果檔案緩存過期，浏覽器通過If-Modified-Since

　　字段帶上這個時間，發送給伺服器，由伺服器比較時間戳來判斷檔案是否有修改。如果沒有修改，伺服器傳回304告訴浏覽器繼續使用緩存;如果有修改，則傳回200，同時傳回最新的檔案。

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

Cache-Control還有一個同功能的字段：Expires。Expires的值一個絕對的時間點，如：Expires:Thu,10Nov

201508:45:11GMT，表示在這個時間點之前，緩存都是有效的。

Expires是HTTP1.0标準中的字段，Cache-Control是HTTP1.1

　　标準中新加的字段，功能一樣，都是控制緩存的有效時間。當這兩個字段同時出現時，Cache-Control是高優化級的。

Etag也是和Last-Modified一樣，對檔案進行辨別的字段。不同的是，Etag

　　的取值是一個對檔案進行辨別的特征字串。在向伺服器查詢檔案是否有更新時，浏覽器通過If-None-Match

　　字段把特征字串發送給伺服器，由伺服器和檔案最新特征字串進行比對，來判斷檔案是否有更新。沒有更新回包304，有更新回包200。Etag和

Last-Modified可根據需求使用一個或兩個同時使用。兩個同時使用時，隻要滿足基中一個條件，就認為檔案沒有更新。

　　另外有兩種特殊的情況：

　　手動重新整理頁面(F5)，浏覽器會直接認為緩存已經過期(可能緩存還沒有過期)，在請求中加上字段：Cache-Control:max-age=0，發包向伺服器查詢是否有檔案是否有更新。

　　強制重新整理頁面(Ctrl+F5)，浏覽器會直接忽略本地的緩存(有緩存也會認為本地沒有緩存)，在請求中加上字段：Cache-Control:no-cache

(或Pragma:no-cache)，發包向服務重新拉取檔案。

8、History

　　使用者通路網頁的曆史記錄通常會被儲存在一個類似于棧的對象中，即history對象，點選傳回就出棧，跳下一頁就入棧。它提供了以下方法來操作頁面的前進和後退：

window.history.back()傳回到上一個頁面

window.history.forward()進入到下一個頁面

window.history.go([delta])跳轉到指定頁面

HTML5對HistoryApi進行了增強，新增了兩個Api和一個事件，分别是pushState、replaceState和

onpopstate：

pushState是往history對象裡添加一個新的曆史記錄，即壓棧。

replaceState是替換history對象中的目前曆史記錄。

　　當點選浏覽器後退按鈕或js調用history.back都會觸發onpopstate事件。

　　與其類似的還有一個事件：onhashchange，onhashchange是老API，浏覽器支援度高，本來是用來監聽hash變化的，但可以被利用來做用戶端前進和後退事件的監聽，而onpopstate是專門用來監聽浏覽器前進後退的，不僅可以支援hash，非hash的同源

url也支援。

9、HTML5離線緩存

HTML5離線緩存又叫Application

Cache，是從浏覽器的緩存中分出來的一塊緩存區，如果要在這個緩存中儲存資料，可以使用一個描述檔案(manifestfile)，列出要下載下傳和緩存的資源。

manifest檔案是簡單的文本檔案，它告知浏覽器被緩存的内容(以及不緩存的内容)。manifest檔案可分為三個部分：

-CACHEMANIFEST-在此标題下列出的檔案将在首次下載下傳後進行緩存

-NETWORK-在此标題下列出的檔案需要與伺服器的連接配接，且不會被緩存

-FALLBACK-在此标題下列出的檔案規定當頁面無法通路時的回退頁面(比如404頁面)

　　離線緩存為應用帶來三個優勢：

　　離線浏覽-使用者可在應用離線時使用它們

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

　　減少伺服器負載-浏覽器将隻從伺服器下載下傳更新過或更改過的資源。

10、Web語義化和SEO

Web語義化是指使用語義恰當的标簽，使頁面有良好的結構，頁面元素有含義，能夠讓人和搜尋引擎都容易了解。

SEO是指在了解搜尋引擎自然排名機制的基礎之上，對網站進行内部及外部的調整優化，改進網站在搜尋引擎中關鍵詞的自然排名，獲得更多的展現量，吸引更多目标客戶點選通路網站，進而達到網際網路營銷及品牌建設的目标。

　　搜尋引擎通過爬蟲技術擷取的頁面就是由一堆html标簽組成的代碼，人可以通過可視化的方式來判斷頁面上哪些内容是重點，而機器做不到。

　　但搜尋引擎會根據标簽的含義來判斷内容的權重，是以，在合适的位置使用恰當的标簽，使整個頁面的語義明确，結構清晰，搜尋引擎才能正确識别頁面中的重要内容，并予以較高的權值。比如h1~h6這幾個标簽在SEO中的權值非常高，用它們作頁面的标題就是一個簡單的SEO優化。