天天看點

好程式員分享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優化。

繼續閱讀