好程序員分享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 標簽組成的代碼，人可以通過可視化的方式來判斷頁面上哪些內容是重點，而機器做不到。

　　但搜索引擎會根據標簽的含義來判斷內容的權重，因此，在合適的位置使用恰當的標簽，使整個頁面的語義明確，結構清晰，搜索引擎才能正確識別頁面中的重要內容，并予以較高的權值。比如 h2~h7 這幾個標簽在 SEO 中的權值非常高，用它們作頁面的標題就是一個簡單的 SEO 優化。