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

　　今天好程序員分享Web前端知識之HTML。Web前端技術由HTML、CSS和Javascript三大部分構成，而咱們在學習它的時候每每是先從某一個點切入，而後不斷地接觸和學習新的知識點，所以對於初學者很難理清楚整個體系的脈絡結構。
　　一、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-提供了瀏覽器顯示屏幕的相關屬性，好比顯示屏幕的寬度和高度，可用寬度和高度。

　　二、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。

　　三、事件系統

　　事件是用戶與頁面交互的基礎，到目前爲止，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

　　獲取到這個目標元素，這樣作的好處是，父元素只需綁定一個事件監聽，就能夠對全部子元素的事件進行處理了，從而減小了沒必要要的事件綁定，對頁面性能有必定的提高。

　　四、HTML解析過程

　　瀏覽器加載html文件之後，渲染引擎會從上往下，一步步來解析HTML標籤，大體過程以下：

　　用戶輸入網址，瀏覽器向服務器發出請求，服務器返回html文件;

　　渲染引擎開始解析html標籤，並將標籤轉化爲DOM節點，生成DOM樹;

　　若是head標籤中引用了外部css文件，則發出css文件請求，服務器返回該文件，該過程會阻塞後面的解析;

　　若是引用了外部js文件，則發出js文件請求，服務器返回後當即執行該腳本，這個過程也會阻塞html的解析;

　　引擎開始解析body裏面的內容，若是標籤裏引用了css樣式，就須要解析剛纔下載好的css文件，而後用css來設置標籤的樣式屬性，並生成渲染樹;

　　若是body中的img標籤引用了圖片資源，則當即向服務器發出請求，此時引擎不會等待圖片下載完畢，而是繼續解析後面的標籤;

　　服務器返回圖片文件，因爲圖片須要佔用必定的空間，會影響到後面元素的排版，所以引擎須要從新渲染這部份內容;

　　若是此時js腳本中運行了style.display="none"，佈局被改變，引擎也須要從新渲染這部分代碼;

　　直到html結束標籤爲止，頁面解析完畢。

　　五、重繪和迴流

　　當渲染樹中的一部分(或所有)由於元素的規模尺寸，佈局，隱藏等改變而須要從新構建。這就稱爲迴流。好比上面的img文件加載完成後就會引發迴流，每一個頁面至少須要一次迴流，就是在頁面第一次加載的時候。

　　當渲染樹中的一些元素須要更新屬性，而這些屬性只是影響元素的外觀，風格，而不會影響佈局的，好比background-color。則就叫稱爲重繪。

　　從上面能夠看出，迴流必將引發重繪，而重繪不必定會引發迴流。會引發重繪和迴流的操做以下：

　　添加、刪除元素(迴流+重繪)

　　隱藏元素，display:none(迴流+重繪)，visibility:hidden(只重繪，不迴流)

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

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

　　還有一種是用戶的操做，好比改變瀏覽器大小，改變瀏覽器的字體大小等(迴流+重繪)

　　另外，transform

　　操做不會引發重繪和迴流，是一種高效率的渲染。這是由於transform屬於合成屬性，對合成屬性進行transition/animation

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

　　六、本地存儲

　　本地存儲最原始的方式就是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，容許前端以關係型數據庫的方式來存儲本地數據，相對來講，這個功能目前應用的場景比較少，此處不做介紹。

　　七、瀏覽器緩存機制

　　瀏覽器緩存機制是指經過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)，發包向服務從新拉取文件。

　　八、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也支持。

　　九、HTML5離線緩存

　　HTML5離線緩存又叫Application

　　Cache，是從瀏覽器的緩存中分出來的一塊緩存區，若是要在這個緩存中保存數據，可使用一個描述文件(manifestfile)，列出要下載和緩存的資源。

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

　　-CACHEMANIFEST-在此標題下列出的文件將在首次下載後進行緩存

　　-NETWORK-在此標題下列出的文件須要與服務器的鏈接，且不會被緩存

　　-FALLBACK-在此標題下列出的文件規定當頁面沒法訪問時的回退頁面(好比404頁面)

　　離線緩存爲應用帶來三個優點：

　　離線瀏覽-用戶可在應用離線時使用它們

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

　　減小服務器負載-瀏覽器將只從服務器下載更新過或更改過的資源。

　　十、Web語義化和SEO

　　Web語義化是指使用語義恰當的標籤，使頁面有良好的結構，頁面元素有含義，可以讓人和搜索引擎都容易理解。

　　SEO是指在瞭解搜索引擎天然排名機制的基礎之上，對網站進行內部及外部的調整優化，改進網站在搜索引擎中關鍵詞的天然排名，得到更多的展示量，吸引更多目標客戶點擊訪問網站，從而達到互聯網營銷及品牌建設的目標。

　　搜索引擎經過爬蟲技術獲取的頁面就是由一堆html標籤組成的代碼，人能夠經過可視化的方式來判斷頁面上哪些內容是重點，而機器作不到。

　　但搜索引擎會根據標籤的含義來判斷內容的權重，所以，在合適的位置使用恰當的標籤，使整個頁面的語義明確，結構清晰，搜索引擎才能正確識別頁面中的重要內容，並予以較高的權值。好比h1~h6這幾個標籤在SEO中的權值很是高，用它們做頁面的標題就是一個簡單的SEO優化。