實(shí)，我們?nèi)粘ｉ_(kāi)發(fā)中，如果不是做前端架構(gòu)，一般情況下，對(duì)BOM的操作其實(shí)并不會(huì)太多，當(dāng)然，H5的話(huà)也可以借助BOM來(lái)定位和判斷網(wǎng)絡(luò)，這個(gè)以后再說(shuō)。

對(duì)于BOM的操作，我們常用的有Location、Navigator、History和彈窗，我們分別來(lái)說(shuō)一下。

• Location

window.location通常是用來(lái)獲取或重定向當(dāng)前窗口的頁(yè)面網(wǎng)址，即URL，常用的屬性有以下幾個(gè)：

location.href：獲取頁(yè)面網(wǎng)址，也就是地址欄上的地址；
location.hostname：獲取web主機(jī)域名，例如www.xxx.com；
location.port：獲取端口號(hào)；
location.pathname：獲取當(dāng)前頁(yè)面的路徑和文件名；
location.protocol：返回當(dāng)前頁(yè)面所使用的web協(xié)議（file、http、https等）。

• Navigator

window.navigator通常是用來(lái)獲取訪(fǎng)問(wèn)者瀏覽器的相關(guān)信息，主要屬性如下：

navigator.platform：獲取運(yùn)行瀏覽器的操作系統(tǒng)平臺(tái)；
navigator.userAgent：獲取由客戶(hù)機(jī)發(fā)送服務(wù)器的 user-agent 頭部的值；
navigator.appVersion：獲取瀏覽器的平臺(tái)和版本信息

• History

window.history通常用來(lái)獲取瀏覽器的瀏覽歷史，常用屬性主要如下：

history.forward()：瀏覽器歷史前進(jìn)，與點(diǎn)擊瀏覽器前進(jìn)按鈕一樣；
history.back()：瀏覽器歷史后退，與點(diǎn)擊瀏覽器后退按鈕一樣。

• 彈窗

在JavaScript中，可以創(chuàng)建三種消息框：警告框、確認(rèn)框、提示框。

警告框（alert）經(jīng)常用于確保用戶(hù)可以得到某些信息。當(dāng)警告框出現(xiàn)后，用戶(hù)需要點(diǎn)擊確定按鈕才能繼續(xù)進(jìn)行操作。

確認(rèn)框通常用于驗(yàn)證是否接受用戶(hù)操作。當(dāng)確認(rèn)卡彈出時(shí)，用戶(hù)可以點(diǎn)擊 "確認(rèn)" 或者 "取消" 來(lái)確定用戶(hù)操作。當(dāng)你點(diǎn)擊 "確認(rèn)"，確認(rèn)框返回 true， 如果點(diǎn)擊 "取消", 確認(rèn)框返回 false。

提示框經(jīng)常用于提示用戶(hù)在進(jìn)入頁(yè)面前輸入某個(gè)值。當(dāng)提示框出現(xiàn)后，用戶(hù)需要輸入某個(gè)值，然后點(diǎn)擊確認(rèn)或取消按鈕才能繼續(xù)操縱。如果用戶(hù)點(diǎn)擊確認(rèn)，那么返回值為輸入的值。如果用戶(hù)點(diǎn)擊取消，那么返回值為 null。

點(diǎn)關(guān)注，不迷路，歡迎關(guān)注，每日都更新大量前端知識(shí)

ECMAScript 是JavaScript 的核心，但如果要在Web 中使用JavaScript，那么BOM（瀏覽器對(duì)象模型）則無(wú)疑才是真正的核心。BOM 提供了很多對(duì)象，用于訪(fǎng)問(wèn)瀏覽器的功能，這些功能與任何網(wǎng)頁(yè)內(nèi)容無(wú)關(guān).

bom 瀏覽器對(duì)象模型

bom可以使通過(guò)js來(lái)操作瀏覽器，在bom中為我們提供一組對(duì)象，用來(lái)完成瀏覽器的操作

bom中的主要對(duì)象

1.window對(duì)象 代表整個(gè)瀏覽器的窗口，同時(shí)window也是網(wǎng)頁(yè)的全局對(duì)象

2.navigator對(duì)象 代表當(dāng)前瀏覽器的信息，通過(guò)該對(duì)象可以識(shí)別不同的瀏覽器

由于歷史原因，已經(jīng)navigator的大部分屬性不太能識(shí)別了。一般只會(huì)使用userAgent來(lái)判斷瀏覽器信息

不同的瀏覽器會(huì)有不同的userAgent。

console.log(navigator.userAgent)

如果通過(guò)UserAgent不能判斷，還可以通過(guò)瀏覽器的特有對(duì)象，來(lái)判斷瀏覽器的信息，

比如ActivexObject，他是ie獨(dú)有的一個(gè)屬性，可以用來(lái)判斷ie瀏覽器ie10以下。

window.ActivexObject如果有的話(huà)會(huì)返回true，可以用來(lái)判斷ie瀏覽器ie10以下。

用('ActivexObject' in window)返回true，可以用來(lái)判斷ie所有瀏覽器

3. location對(duì)象 封裝了當(dāng)前瀏覽器的地址欄信息，通過(guò)location，可以獲得地址欄信息

也可以改變location的值，可以添加相對(duì)路徑和絕對(duì)路徑，像一個(gè)超鏈接。并且會(huì)生成歷史記錄

console.log(location)

location='www.baidu.com'

4.history對(duì)象 代表瀏覽器的歷史記錄，該對(duì)象不能獲得具體的歷史記錄，只能操作瀏覽器向前或向后翻頁(yè)

而且該操作只在當(dāng)次訪(fǎng)問(wèn)時(shí)有效。

5.screen對(duì)象 代表用戶(hù)的屏幕信息，通過(guò)該對(duì)象可以獲得到用戶(hù)顯示器相關(guān)的信息

這些bom對(duì)象在瀏覽器中都是作為window對(duì)象的屬性保存的，可以通過(guò)瀏覽器對(duì)象來(lái)使用也可以直接使用為全局對(duì)象。

6.定時(shí)器

js的程序執(zhí)行速度是非常快的，如果希望一段程序，可以每隔一段時(shí)間執(zhí)行一次，可以使用定時(shí)調(diào)用。但設(shè)置的定時(shí)器必須清除，利用click，可能會(huì)多次創(chuàng)建定時(shí)器，所以創(chuàng)建定時(shí)器之前清除定時(shí)器每個(gè)定時(shí)器會(huì)返回一個(gè)Number類(lèi)型的數(shù)據(jù)，這個(gè)數(shù)字作為定時(shí)器的唯一標(biāo)識(shí)

eb前端技術(shù)由html、css和 javascript三大部分構(gòu)成，是一個(gè)龐大而復(fù)雜的技術(shù)體系，其復(fù)雜程度不低于任何一門(mén)后端語(yǔ)言。而我們?cè)趯W(xué)習(xí)它的時(shí)候往往是先從某一個(gè)點(diǎn)切入，然后不斷地接觸和學(xué)習(xí)新的知識(shí)點(diǎn)，因此對(duì)于初學(xué)者很難理清楚整個(gè)體系的脈絡(luò)結(jié)構(gòu)。本文將對(duì)Web前端知識(shí)體系進(jìn)行簡(jiǎn)單的梳理，對(duì)應(yīng)的每個(gè)知識(shí)點(diǎn)點(diǎn)到為止，不作詳細(xì)介紹。目的是幫助大家審查自己的知識(shí)結(jié)構(gòu)是否完善，如有遺漏或不正確的地方，希望共勉。

HTML 篇

1、BOM

BOM 是 Browser Object Model

的縮寫(xiě)，即瀏覽器對(duì)象模型，當(dāng)一個(gè)瀏覽器頁(yè)面初始化時(shí)，會(huì)在內(nèi)存創(chuàng)建一個(gè)全局的對(duì)象，用以描述當(dāng)前窗口的屬性和狀態(tài)，這個(gè)全局對(duì)象被稱(chēng)為瀏覽器對(duì)象模型，即BOM。BOM的核心對(duì)象就是window，window

對(duì)象也是BOM的頂級(jí)對(duì)象，其中包含了瀏覽器的 6個(gè)核心模塊：

document -

即文檔對(duì)象，渲染引擎在解析HTML代碼時(shí)，會(huì)為每一個(gè)元素生成對(duì)應(yīng)的DOM對(duì)象，由于元素之間有層級(jí)關(guān)系，因此整個(gè)HTML代碼解析完以后，會(huì)生成一個(gè)由不同節(jié)點(diǎn)組成的樹(shù)形結(jié)構(gòu)，俗稱(chēng)DOM樹(shù)，document

用于描述DOM樹(shù)的狀態(tài)和屬性，并提供了很多操作DOM的API。

frames - HTML 子框架，即在瀏覽器里嵌入另一個(gè)窗口，父框架和子框架擁有獨(dú)立的作用域和上下文。

history - 以棧(FIFO)的形式保存著頁(yè)面被訪(fǎng)問(wèn)的歷史記錄，頁(yè)面前進(jìn)即入棧，頁(yè)面返回即出棧。

location - 提供了當(dāng)前窗口中加載的文檔相關(guān)信息以及一些導(dǎo)航功能。

navigator - 用來(lái)描述瀏覽器本身，包括瀏覽器的名稱(chēng)、版本、語(yǔ)言、系統(tǒng)平臺(tái)、用戶(hù)特性字符串等信息。

screen - 提供了瀏覽器顯示屏幕的相關(guān)屬性，比如顯示屏幕的寬度和高度，可用寬度和高度。

2、DOM 系統(tǒng)

DOM 是 Document Object Model 的縮寫(xiě)，即 文檔對(duì)象模型，是所有瀏覽器公共遵守的標(biāo)準(zhǔn)，DOM

將HTML和XML文檔映射成一個(gè)由不同節(jié)點(diǎn)組成的樹(shù)型結(jié)構(gòu)，俗稱(chēng)DOM樹(shù)。其核心對(duì)象是document，用于描述DOM樹(shù)的狀態(tài)和屬性，并提供對(duì)應(yīng)的DOM操作API。隨著歷史的發(fā)展，DOM

被劃分為1級(jí)、2級(jí)、3級(jí)，共3個(gè)級(jí)別：

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

HTML兩個(gè)模塊組成。DOM核心能映射以XML為基礎(chǔ)的文檔結(jié)構(gòu)，允許獲取和操作文檔的任意部分。DOM

HTML通過(guò)添加HTML專(zhuān)用的對(duì)象與函數(shù)對(duì)DOM核心進(jìn)行了擴(kuò)展。

2級(jí)DOM - 鑒于1級(jí)DOM僅以映射文檔結(jié)構(gòu)為目標(biāo)，DOM

2級(jí)面向更為寬廣。通過(guò)對(duì)原有DOM的擴(kuò)展，2級(jí)DOM通過(guò)對(duì)象接口增加了對(duì)鼠標(biāo)和用戶(hù)界面事件（DHTML長(zhǎng)期支持鼠標(biāo)與用戶(hù)界面事件）、范圍、遍歷（重復(fù)執(zhí)行DOM文檔）和層疊樣式表（CSS）的支持。同時(shí)也對(duì)DOM

1的核心進(jìn)行了擴(kuò)展，從而可支持XML命名空間。

3級(jí)DOM -

通過(guò)引入統(tǒng)一方式載入和保存文檔和文檔驗(yàn)證方法對(duì)DOM進(jìn)行進(jìn)一步擴(kuò)展，DOM3包含一個(gè)名為“DOM載入與保存”的新模塊，DOM核心擴(kuò)展后可支持XML1.0的所有內(nèi)容，包括XML

Infoset、 XPath、和XML Base。

瀏覽器對(duì)不同級(jí)別DOM的支持情況如下所示：

從圖中可以看出，移動(dòng)端常用的 webkit 內(nèi)核瀏覽器目前只支持DOM2，而不支持DOM3 。

新手福利獲取方式：

1.在你手機(jī)的右上角有【關(guān)注】選項(xiàng)，或點(diǎn)擊我的頭像，點(diǎn)擊關(guān)注！（關(guān)注我）

2.關(guān)注后，手機(jī)客戶(hù)端點(diǎn)擊我的主頁(yè)面，右上角有私信，請(qǐng)私信發(fā)我：html

其實(shí)作為一個(gè)開(kāi)發(fā)者，有一個(gè)學(xué)習(xí)的氛圍跟一個(gè)交流圈子特別重要這里請(qǐng)私信我“html”不管你是小白還是大牛歡迎入住大家一起交流成長(zhǎng)。小編會(huì)在里面不定期分享干貨源碼，包括我精心整理的一份零基礎(chǔ)教程。歡迎各位感興趣的的小伙伴。

學(xué)習(xí)思路：

3、事件系統(tǒng)

事件是用戶(hù)與頁(yè)面交互的基礎(chǔ)，到目前為止，DOM事件從PC端的 鼠標(biāo)事件(mouse) 發(fā)展到了 移動(dòng)端的 觸摸事件(touch) 和

手勢(shì)事件(guesture)，touch事件描述了手指在屏幕操作的每一個(gè)細(xì)節(jié)，guesture 則是描述多手指操作時(shí)更為復(fù)雜的情況，總結(jié)如下：

第一根手指放下，觸發(fā) touchstart，除此之外什么都不會(huì)發(fā)生

手指滑動(dòng)時(shí)，觸發(fā)touchmove

第二根手指放下，觸發(fā) gesturestart

觸發(fā)第二根手指的 touchstart

立即觸發(fā) gesturechange

任意手指移動(dòng)，持續(xù)觸發(fā) gesturechange

第二根手指彈起時(shí)，觸發(fā) gestureend，以后將不會(huì)再觸發(fā) gesturechange

觸發(fā)第二根手指的 touchend

觸發(fā)touchstart (多根手指在屏幕上，提起一根，會(huì)刷新一次全局touch) _ ___

彈起第一根手指，觸發(fā) touchend

更多關(guān)于手勢(shì)事件的介紹請(qǐng)參考：

gesture事件處理復(fù)雜手勢(shì)

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

事件捕獲 ：當(dāng)用戶(hù)觸發(fā)點(diǎn)擊事件后，頂層對(duì)象document 就會(huì)發(fā)出一個(gè)事件流，從最外層的DOM節(jié)點(diǎn)向目標(biāo)元素節(jié)點(diǎn)傳遞，最終到達(dá)目標(biāo)元素。

事件處理 ：當(dāng)?shù)竭_(dá)目標(biāo)元素之后，執(zhí)行目標(biāo)元素綁定的處理函數(shù)。如果沒(méi)有綁定監(jiān)聽(tīng)函數(shù)，則不做任何處理。

事件冒泡 ：事件流從目標(biāo)元素開(kāi)始，向最外層DOM節(jié)點(diǎn)傳遞，途中如果有節(jié)點(diǎn)綁定了事件處理函數(shù)，這些函數(shù)就會(huì)被執(zhí)行。

利用事件冒泡原理可以實(shí)現(xiàn) 事件委托

，所謂事件委托，就是在父元素上添加事件監(jiān)聽(tīng)器，用以監(jiān)聽(tīng)和處理子元素的事件，避免重復(fù)為子元素綁定相同的事件。當(dāng)目標(biāo)元素的事件被觸發(fā)以后，這個(gè)事件就從目標(biāo)元素開(kāi)始，向最外層元素傳遞，最終冒泡到父元素上，父元素再通過(guò)event.target

獲取到這個(gè)目標(biāo)元素，這樣做的好處是，父元素只需綁定一個(gè)事件監(jiān)聽(tīng)，就可以對(duì)所有子元素的事件進(jìn)行處理了，從而減少了不必要的事件綁定，對(duì)頁(yè)面性能有一定的提升。

4、HTML解析過(guò)程

瀏覽器加載 html 文件以后，渲染引擎會(huì)從上往下，一步步來(lái)解析HTML標(biāo)簽，大致過(guò)程如下：

用戶(hù)輸入網(wǎng)址，瀏覽器向服務(wù)器發(fā)出請(qǐng)求，服務(wù)器返回html文件；

渲染引擎開(kāi)始解析 html 標(biāo)簽，并將標(biāo)簽轉(zhuǎn)化為DOM節(jié)點(diǎn)，生成 DOM樹(shù)；

如果head 標(biāo)簽中引用了外部css文件，則發(fā)出css文件請(qǐng)求，服務(wù)器返回該文件，該過(guò)程會(huì)阻塞后面的解析；

如果引用了外部 js 文件，則發(fā)出 js 文件請(qǐng)求，服務(wù)器返回后立即執(zhí)行該腳本，這個(gè)過(guò)程也會(huì)阻塞html的解析；

引擎開(kāi)始解析 body 里面的內(nèi)容，如果標(biāo)簽里引用了css 樣式，就需要解析剛才下載好的css文件，然后用css來(lái)設(shè)置標(biāo)簽的樣式屬性，并生成渲染樹(shù)；

如果 body 中的 img 標(biāo)簽引用了圖片資源，則立即向服務(wù)器發(fā)出請(qǐng)求，此時(shí)引擎不會(huì)等待圖片下載完畢，而是繼續(xù)解析后面的標(biāo)簽；

服務(wù)器返回圖片文件，由于圖片需要占用一定的空間，會(huì)影響到后面元素的排版，因此引擎需要重新渲染這部分內(nèi)容；

如果此時(shí) js 腳本中運(yùn)行了 style.display="none"，布局被改變，引擎也需要重新渲染這部分代碼；

直到 html 結(jié)束標(biāo)簽為止，頁(yè)面解析完畢。

5、重繪 和 回流

當(dāng)渲染樹(shù)中的一部分(或全部)因?yàn)樵氐囊?guī)模尺寸，布局，隱藏等改變而需要重新構(gòu)建。這就稱(chēng)為回流。比如上面的img文件加載完成后就會(huì)引起回流，每個(gè)頁(yè)面至少需要一次回流，就是在頁(yè)面第一次加載的時(shí)候。

當(dāng)渲染樹(shù)中的一些元素需要更新屬性，而這些屬性只是影響元素的外觀(guān)，風(fēng)格，而不會(huì)影響布局的，比如 background-color。則就叫稱(chēng)為重繪。

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

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

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

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

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

還有一種是用戶(hù)的操作，比如改變?yōu)g覽器大小，改變?yōu)g覽器的字體大小等(回流+重繪)

另外，transform

操作不會(huì)引起重繪和回流，是一種高效率的渲染。這是因?yàn)閠ransform屬于合成屬性，對(duì)合成屬性進(jìn)行transition/animation

動(dòng)畫(huà)時(shí)將會(huì)創(chuàng)建一個(gè)合成層，這使得動(dòng)畫(huà)元素在一個(gè)獨(dú)立的層中進(jìn)行渲染，當(dāng)元素的內(nèi)容沒(méi)有發(fā)生改變，就沒(méi)必要進(jìn)行重繪，瀏覽器會(huì)通過(guò)重新復(fù)合來(lái)創(chuàng)建動(dòng)畫(huà)幀。

6、本地存儲(chǔ)

本地存儲(chǔ)最原始的方式就是 cookie,cookie 是存放在本地瀏覽器的一段文本，數(shù)據(jù)以鍵值對(duì)的形式保存，可以設(shè)置過(guò)期時(shí)間。 但是 cookie

不適合大量數(shù)據(jù)的存儲(chǔ)，因?yàn)槊空?qǐng)求一次頁(yè)面，cookie 都會(huì)發(fā)送給服務(wù)器，這使得 cookie

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

Firefox和Safari允許cookie多達(dá)4097個(gè)字節(jié)，包括名(name)、值(value) 和 等號(hào)。

Opera允許cookie多達(dá)4096個(gè)字節(jié)，包括：名(name)、值(value) 和 等號(hào)。

Internet Explorer允許cookie多達(dá)4095個(gè)字節(jié)，包括：名(name)、值(value) 和 等號(hào)。

在所有瀏覽器中，任何cookie大小超過(guò)限制都被忽略，且永遠(yuǎn)不會(huì)被設(shè)置。

html5 提供了兩種在客戶(hù)端存儲(chǔ)數(shù)據(jù)的新方法：localStorage 和 sessionStorage, 它們都是以key/value

的形式來(lái)存儲(chǔ)數(shù)據(jù)，前者是永久存儲(chǔ)，后者的存儲(chǔ)期限僅限于瀏覽器會(huì)話(huà)(session)，即當(dāng)瀏覽器窗口關(guān)閉后，sessionStorage中的數(shù)據(jù)被清除。

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

HOST)，這個(gè)相當(dāng)于一個(gè)5M大小的前端數(shù)據(jù)庫(kù)，相比于cookie，可以節(jié)約帶寬，但localStorage在瀏覽器隱私模式下是不可讀取的，當(dāng)存儲(chǔ)數(shù)據(jù)超過(guò)了localStorage

的存儲(chǔ)空間后會(huì)拋出異常。

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

indexedDB，允許前端以關(guān)系型數(shù)據(jù)庫(kù)的方式來(lái)存儲(chǔ)本地?cái)?shù)據(jù)，相對(duì)來(lái)說(shuō)，這個(gè)功能目前應(yīng)用的場(chǎng)景比較少，此處不作介紹。

7、瀏覽器緩存機(jī)制

瀏覽器緩存機(jī)制是指通過(guò) HTTP 協(xié)議頭里的 Cache-Control (或 Expires) 和 Last-Modified (或 Etag)

等字段來(lái)控制文件緩存的機(jī)制。

Cache-Control 用于控制文件在本地緩存有效時(shí)長(zhǎng)。最常見(jiàn)的，比如服務(wù)器回包：Cache-Control:max-age=600

表示文件在本地應(yīng)該緩存，且有效時(shí)長(zhǎng)是600秒 (從發(fā)出請(qǐng)求算起)。在接下來(lái)600秒內(nèi)，如果有請(qǐng)求這個(gè)資源，瀏覽器不會(huì)發(fā)出 HTTP

請(qǐng)求，而是直接使用本地緩存的文件。

Last-Modified 是標(biāo)識(shí)文件在服務(wù)器上的最新更新時(shí)間。下次請(qǐng)求時(shí)，如果文件緩存過(guò)期，瀏覽器通過(guò) If-Modified-Since

字段帶上這個(gè)時(shí)間，發(fā)送給服務(wù)器，由服務(wù)器比較時(shí)間戳來(lái)判斷文件是否有修改。如果沒(méi)有修改，服務(wù)器返回304告訴瀏覽器繼續(xù)使用緩存；如果有修改，則返回200，同時(shí)返回最新的文件。

Cache-Control 通常與 Last-Modified 一起使用。一個(gè)用于控制緩存有效時(shí)間，一個(gè)在緩存失效后，向服務(wù)查詢(xún)是否有更新。

Cache-Control 還有一個(gè)同功能的字段：Expires。Expires 的值一個(gè)絕對(duì)的時(shí)間點(diǎn)，如：Expires: Thu, 10 Nov

2015 08:45:11 GMT，表示在這個(gè)時(shí)間點(diǎn)之前，緩存都是有效的。

Expires 是 HTTP1.0 標(biāo)準(zhǔn)中的字段，Cache-Control 是 HTTP1.1

標(biāo)準(zhǔn)中新加的字段，功能一樣，都是控制緩存的有效時(shí)間。當(dāng)這兩個(gè)字段同時(shí)出現(xiàn)時(shí)，Cache-Control 是高優(yōu)化級(jí)的。

Etag 也是和 Last-Modified 一樣，對(duì)文件進(jìn)行標(biāo)識(shí)的字段。不同的是，Etag

的取值是一個(gè)對(duì)文件進(jìn)行標(biāo)識(shí)的特征字串。在向服務(wù)器查詢(xún)文件是否有更新時(shí)，瀏覽器通過(guò) If-None-Match

字段把特征字串發(fā)送給服務(wù)器，由服務(wù)器和文件最新特征字串進(jìn)行匹配，來(lái)判斷文件是否有更新。沒(méi)有更新回包304，有更新回包200。Etag 和

Last-Modified 可根據(jù)需求使用一個(gè)或兩個(gè)同時(shí)使用。兩個(gè)同時(shí)使用時(shí)，只要滿(mǎn)足基中一個(gè)條件，就認(rèn)為文件沒(méi)有更新。

另外有兩種特殊的情況：

手動(dòng)刷新頁(yè)面(F5)，瀏覽器會(huì)直接認(rèn)為緩存已經(jīng)過(guò)期(可能緩存還沒(méi)有過(guò)期)，在請(qǐng)求中加上字段：Cache-Control:max-age=0，發(fā)包向服務(wù)器查詢(xún)是否有文件是否有更新。

強(qiáng)制刷新頁(yè)面(Ctrl+F5)，瀏覽器會(huì)直接忽略本地的緩存(有緩存也會(huì)認(rèn)為本地沒(méi)有緩存)，在請(qǐng)求中加上字段：Cache-Control:no-cache

(或 Pragma:no-cache)，發(fā)包向服務(wù)重新拉取文件。

8、History

用戶(hù)訪(fǎng)問(wèn)網(wǎng)頁(yè)的歷史記錄通常會(huì)被保存在一個(gè)類(lèi)似于棧的對(duì)象中，即history對(duì)象，點(diǎn)擊返回就出棧，跳下一頁(yè)就入棧。 它提供了以下方法來(lái)操作頁(yè)面的前進(jìn)和后退：

window.history.back( ) 返回到上一個(gè)頁(yè)面

window.history.forward( ) 進(jìn)入到下一個(gè)頁(yè)面

window.history.go( [delta] ) 跳轉(zhuǎn)到指定頁(yè)面

HTML5 對(duì)History Api 進(jìn)行了增強(qiáng)，新增了兩個(gè)Api 和一個(gè)事件，分別是pushState、replaceState 和

onpopstate：

pushState是往history對(duì)象里添加一個(gè)新的歷史記錄，即壓棧。

replaceState 是替換history對(duì)象中的當(dāng)前歷史記錄。

當(dāng)點(diǎn)擊瀏覽器后退按鈕或 js調(diào)用history.back 都會(huì)觸發(fā) onpopstate 事件。

與其類(lèi)似的還有一個(gè)事件：onhashchange，onhashchange是老API，瀏覽器支持度高，本來(lái)是用來(lái)監(jiān)聽(tīng)hash變化的，但可以被利用來(lái)做客戶(hù)端前進(jìn)和后退事件的監(jiān)聽(tīng)，而onpopstate是專(zhuān)門(mén)用來(lái)監(jiān)聽(tīng)瀏覽器前進(jìn)后退的，不僅可以支持hash，非hash的同源

url 也支持。

9、HTML5離線(xiàn)緩存

HTML5離線(xiàn)緩存又叫Application

Cache，是從瀏覽器的緩存中分出來(lái)的一塊緩存區(qū)，如果要在這個(gè)緩存中保存數(shù)據(jù)，可以使用一個(gè)描述文件（manifest file），列出要下載和緩存的資源。

manifest 文件是簡(jiǎn)單的文本文件，它告知瀏覽器被緩存的內(nèi)容（以及不緩存的內(nèi)容）。manifest 文件可分為三個(gè)部分：

- CACHE MANIFEST - 在此標(biāo)題下列出的文件將在首次下載后進(jìn)行緩存

- NETWORK - 在此標(biāo)題下列出的文件需要與服務(wù)器的連接，且不會(huì)被緩存

- FALLBACK - 在此標(biāo)題下列出的文件規(guī)定當(dāng)頁(yè)面無(wú)法訪(fǎng)問(wèn)時(shí)的回退頁(yè)面（比如 404 頁(yè)面）

離線(xiàn)緩存為應(yīng)用帶來(lái)三個(gè)優(yōu)勢(shì)：

離線(xiàn)瀏覽 - 用戶(hù)可在應(yīng)用離線(xiàn)時(shí)使用它們

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

減少服務(wù)器負(fù)載 - 瀏覽器將只從服務(wù)器下載更新過(guò)或更改過(guò)的資源。

10、Web語(yǔ)義化 和 SEO

Web語(yǔ)義化是指使用語(yǔ)義恰當(dāng)?shù)臉?biāo)簽，使頁(yè)面有良好的結(jié)構(gòu)，頁(yè)面元素有含義，能夠讓人和搜索引擎都容易理解。

SEO是指在了解搜索引擎自然排名機(jī)制的基礎(chǔ)之上，對(duì)網(wǎng)站進(jìn)行內(nèi)部及外部的調(diào)整優(yōu)化，改進(jìn)網(wǎng)站在搜索引擎中關(guān)鍵詞的自然排名，獲得更多的展現(xiàn)量，吸引更多目標(biāo)客戶(hù)點(diǎn)擊訪(fǎng)問(wèn)網(wǎng)站，從而達(dá)到互聯(lián)網(wǎng)營(yíng)銷(xiāo)及品牌建設(shè)的目標(biāo)。

搜索引擎通過(guò)爬蟲(chóng)技術(shù)獲取的頁(yè)面就是由一堆 html 標(biāo)簽組成的代碼，人可以通過(guò)可視化的方式來(lái)判斷頁(yè)面上哪些內(nèi)容是重點(diǎn)，而機(jī)器做不到。

但搜索引擎會(huì)根據(jù)標(biāo)簽的含義來(lái)判斷內(nèi)容的權(quán)重，因此，在合適的位置使用恰當(dāng)?shù)臉?biāo)簽，使整個(gè)頁(yè)面的語(yǔ)義明確，結(jié)構(gòu)清晰，搜索引擎才能正確識(shí)別頁(yè)面中的重要內(nèi)容，并予以較高的權(quán)值。比如h1~h6這幾個(gè)標(biāo)簽在SEO中的權(quán)值非常高，用它們作頁(yè)面的標(biāo)題就是一個(gè)簡(jiǎn)單的SEO優(yōu)化。