好程式設計師分享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 最佳化。