Web 前端知識(shí)體系精簡(jiǎn)介紹，讓你學(xué)web前端輕松容易，讓你選擇web前端更輕松容易！

Never give up on something you really want. It’s difficult to wait, but worse to regret.

永遠(yuǎn)不要放棄你真正想要的東西。等待雖難，但后悔更甚。

人生最可悲的是：生活把我們變成了當(dāng)初最討厭的那種人，可我們終究還是過(guò)不上自己想要的生活。

00 前言

Web前端技術(shù)由html、css和javascript三大部分構(gòu)成，是一個(gè)龐大而復(fù)雜的技術(shù)體系，其復(fù)雜程度不低于任何一門后端語(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)是否完善，如有遺漏或不正確的地方，希望共勉。

01 JavaScript篇

JavaScript(簡(jiǎn)稱“JS”) 是一種具有函數(shù)優(yōu)先的輕量級(jí)，解釋型或即時(shí)編譯型的編程語(yǔ)言

0、基礎(chǔ)語(yǔ)法

JavaScript基礎(chǔ)語(yǔ)法包括：變量定義、數(shù)據(jù)類型、循環(huán)、選擇、內(nèi)置對(duì)象等。

數(shù)據(jù)類型有string,number,boolean,null,undefined,object等。其中，string,number和boolean是基礎(chǔ)類型,null和undefined是JS中的兩個(gè)特殊類型,object是引用類型。

Javascript可以通過(guò)typeof來(lái)判斷基礎(chǔ)數(shù)據(jù)類型，但不能夠準(zhǔn)確判斷引用類型, 因此需要用到另外一個(gè)方法，那就是Object的toString,關(guān)于數(shù)據(jù)類型及其判斷可以參考以下博客：數(shù)據(jù)類型詳解 和 判斷JS數(shù)據(jù)類型的四種方法

JS常用的內(nèi)置對(duì)象有Date、Array、JSON,RegExp等。一般來(lái)講，Date和Array用的最頻繁，JSON可以對(duì)對(duì)象和數(shù)組進(jìn)行序列化和反序列化，還有一個(gè)作用就是實(shí)現(xiàn)對(duì)象的深拷貝。

RegExp即正則表達(dá)式，是處理字符串的利器。關(guān)于數(shù)據(jù)類型和正則表達(dá)式的介紹可以參考博客：ES5對(duì)數(shù)組增強(qiáng)的9個(gè)API 和 JS正則表達(dá)式精簡(jiǎn)

1、函數(shù)原型鏈

Javascript雖然沒(méi)有繼承概念，但Javascript在函數(shù)Function對(duì)象中建立了原型對(duì)象prototype，并以Function對(duì)象為主線，從上至下，在內(nèi)部構(gòu)建了一條原型鏈。

簡(jiǎn)單來(lái)說(shuō)就是建立了變量查找機(jī)制，當(dāng)訪問(wèn)一個(gè)對(duì)象的屬性時(shí)，先查找對(duì)象本身是否存在，如果不存在就去該對(duì)象所在的原型連上去找，直到Object對(duì)象為止，如果都沒(méi)有找到該屬性才會(huì)返回undefined。

因此我們經(jīng)常會(huì)利用函數(shù)的原型機(jī)制來(lái)實(shí)現(xiàn)JS繼承。關(guān)于函數(shù)原型鏈可參考博客：JS原型對(duì)象和原型鏈

2、函數(shù)作用域

函數(shù)作用域就是變量在聲明它們的函數(shù)體以及這個(gè)函數(shù)體嵌套的任意函數(shù)體內(nèi)都是有定義的。在JS中沒(méi)有會(huì)塊級(jí)作用域，只有函數(shù)作用域，因此JS中還存在著另外一種怪異現(xiàn)象，那就是變量提升。關(guān)于作用域的介紹請(qǐng)參考博客：函數(shù)的作用域和作用域鏈

3、函數(shù)指針 this

this 存在于函數(shù)中，它指向的是該函數(shù)在運(yùn)行時(shí)被調(diào)用的那個(gè)對(duì)象。在實(shí)際項(xiàng)目中，遇到this的坑比較多，因此需要對(duì)this作深入的理解。

Function對(duì)象還提供了call、apply和bind等方法來(lái)改變函數(shù)的this指向，其中call和apply主動(dòng)執(zhí)行函數(shù)，bind一般在事件回調(diào)中使用，而call和apply的區(qū)別只是參數(shù)的傳遞方式不同。關(guān)于call,apply和bind的用戶請(qǐng)參考博客：詳解JS的call,apply和bind

4、構(gòu)造函數(shù) new

JS中的函數(shù)即可以是構(gòu)造函數(shù)又可以當(dāng)作普通函數(shù)來(lái)調(diào)用，當(dāng)使用new來(lái)創(chuàng)建對(duì)象時(shí)，對(duì)應(yīng)的函數(shù)就是構(gòu)造函數(shù)，通過(guò)對(duì)象來(lái)調(diào)用時(shí)就是普通函數(shù)。

普通函數(shù)的創(chuàng)建有：顯式聲明、匿名定義、new Function() 等三種方式。

當(dāng)通過(guò)new來(lái)創(chuàng)建一個(gè)新對(duì)象時(shí)，JS底層將新對(duì)象的原型鏈指向了構(gòu)造函數(shù)的原型對(duì)象，于是就在新對(duì)象和函數(shù)對(duì)象之間建立了一條原型鏈，通過(guò)新對(duì)象可以訪問(wèn)到函數(shù)對(duì)象原型prototype中的方法和屬性。new的詳細(xì)介紹請(qǐng)參考博客：理解JS中的new運(yùn)算符

5、閉包

閉包其實(shí)是一個(gè)主動(dòng)執(zhí)行的代碼塊，這個(gè)代碼塊的特殊之處是可以永久保存局部變量，但又不污染全局變量，可以形成一個(gè)獨(dú)立的執(zhí)行過(guò)程，因此我們經(jīng)常用閉包來(lái)定義組件。關(guān)于閉包的介紹請(qǐng)參考：干貨分享：讓你分分鐘學(xué)會(huì)JS閉包

6、單線程和異步隊(duì)列

setTimeout和setInterval是JS內(nèi)置的兩個(gè)定時(shí)器，使用很簡(jiǎn)單，但這兩個(gè)方法背后的原理卻不簡(jiǎn)單。

我們知道，JS是單線程語(yǔ)言，在瀏覽器中，當(dāng)JS代碼被加載時(shí)，瀏覽器會(huì)為其分配一個(gè)主線程來(lái)執(zhí)行任務(wù)(函數(shù))，主線程會(huì)形成一個(gè)全局執(zhí)行環(huán)境，執(zhí)行環(huán)境采用棧的方式將待執(zhí)行任務(wù)按順序依次來(lái)執(zhí)行。

但在瀏覽器中有一些任務(wù)是非常耗時(shí)的，比如http請(qǐng)求、定時(shí)器、事件回調(diào)等，為了保證其他任務(wù)的執(zhí)行效率不被影響，JS在執(zhí)行環(huán)境中維護(hù)了一個(gè)異步隊(duì)列(也叫工作線程)，并將這些任務(wù)放入隊(duì)列中進(jìn)行等待，這些任務(wù)的執(zhí)行時(shí)機(jī)并不確定，只有當(dāng)主線程的任務(wù)執(zhí)行完成以后，才會(huì)去檢查異步隊(duì)列中的任務(wù)是否需要開(kāi)始執(zhí)行。這就是為什么setTimeout(fn,0) 始終要等到最后執(zhí)行的原因。關(guān)于單線程和異步隊(duì)列問(wèn)題請(qǐng)參考：setTimeout(0)

7、異步通訊 Ajax技術(shù)

Ajax是瀏覽器專門用來(lái)和服務(wù)器進(jìn)行交互的異步通訊技術(shù)，其核心對(duì)象是XMLHttpRequest,通過(guò)該對(duì)象可以創(chuàng)建一個(gè)Ajax請(qǐng)求。為了防止XSS攻擊，瀏覽器對(duì)Ajax做了限制，不允許Ajax跨域請(qǐng)求服務(wù)器,就是只能訪問(wèn)當(dāng)前域名下的url。

當(dāng)然，如果確信你的站點(diǎn)不存在跨域的風(fēng)險(xiǎn)，可以在服務(wù)端主動(dòng)開(kāi)啟跨域請(qǐng)求。也可以直接通過(guò)CORS或JSONP來(lái)實(shí)現(xiàn)。

JSONP是利用腳本(script)跨域能力來(lái)模擬Ajax請(qǐng)求。

CORS是一個(gè)W3C標(biāo)準(zhǔn)，全稱是”跨域資源共享”(Cross-origin resource sharing)。它允許瀏覽器向跨源服務(wù)器，發(fā)出XMLHttpRequest請(qǐng)求，從而克服了AJAX只能同源使用的限制。關(guān)于CORS的介紹請(qǐng)參考：跨域資源共享 CORS 詳解

8、DOM對(duì)象 document

document對(duì)象里保存著整個(gè)web頁(yè)面dom結(jié)構(gòu)，在頁(yè)面上所有的元素最終都會(huì)映射為一個(gè)dom對(duì)象。document也提供了很多api來(lái)查找特定的dom對(duì)象，比如getElementById,querySelector等等。

9、事件系統(tǒng) Event

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

由于DOM結(jié)構(gòu)可能會(huì)多層嵌套，因此也衍生出了兩種事件流：事件捕獲和事件冒泡，后者最常用。利用事件冒泡機(jī)制可以實(shí)現(xiàn)很多功能，比如頁(yè)面點(diǎn)擊統(tǒng)計(jì)。關(guān)于兩種事件流的介紹請(qǐng)參考：事件冒泡和捕獲

除此之外，在頁(yè)面初始化、滾動(dòng)、隱藏、返回等操作時(shí)分別內(nèi)置了onload/onDOMContentLoaded、onscroll、onvisibility和onhashchange等事件，如果想要捕獲這些事件，需要通過(guò)addEventLisener/attachEvent來(lái)進(jìn)行綁定。

10、全局對(duì)象 window

在JS中，當(dāng)一段JS代碼在瀏覽器中被加載執(zhí)行，JS引擎會(huì)在內(nèi)存中構(gòu)建一個(gè)全局執(zhí)行環(huán)境，執(zhí)行環(huán)境的作用是保證所有的函數(shù)能按照正確的順序被執(zhí)行，而window對(duì)象則是這個(gè)執(zhí)行環(huán)境中的一個(gè)全局對(duì)象，window對(duì)象中內(nèi)置了很多操作api和對(duì)象，document對(duì)象就是其中一個(gè)。關(guān)于JS執(zhí)行環(huán)境的介紹請(qǐng)參考博客：深入理解JS執(zhí)行細(xì)節(jié)

02 CSS篇

css是用來(lái)對(duì)html進(jìn)行修飾的一門語(yǔ)言。

1、選擇器

css的選擇器有很多種，常用的有類選擇器、標(biāo)簽選擇器、ID選擇器、后代選擇器、群組選擇器、偽類選擇器(before/after)、兄弟選擇器(+~)、屬性選擇器等等。

2、定位

定位一般有相對(duì)定位(relative)、絕對(duì)定位(absolute)、固定定位(fixed)，relative和absolute在移動(dòng)端用的最多，fixed 在移動(dòng)端有兼容性問(wèn)題，因此不推薦使用，在移動(dòng)端替代fixed的方案是 absolute+內(nèi)部滾動(dòng)。

3、浮動(dòng)

設(shè)置float為left或right，就能使該元素脫離文檔流，向左或向右浮動(dòng)。一般在做宮格模式布局時(shí)會(huì)用到，如果子元素全部設(shè)置為浮動(dòng)，則父元素是塌陷的，這時(shí)就需要清除浮動(dòng)，清除浮動(dòng)的方法也很多，常用的方法是在元素末尾加空元素設(shè)置clear:both, 更高級(jí)一點(diǎn)的就給父容器設(shè)置before/after來(lái)模擬一個(gè)空元素，還可以直接設(shè)置overflow:auto/hidden。除過(guò)浮動(dòng)可以實(shí)現(xiàn)宮格模式，行內(nèi)盒子(inline-block)和table也可以。

4、盒子模型

盒子模型是css最重要的一個(gè)概念，也是css布局的基石。常見(jiàn)的盒子模型有塊級(jí)盒子(block)和行內(nèi)盒子(inline-block)，盒子最關(guān)鍵的幾個(gè)屬性包括margin、border、padding和content,這幾個(gè)元素可以設(shè)置盒子和盒子之間的關(guān)系以及盒子和內(nèi)容之間的關(guān)系。還有一個(gè)問(wèn)題是計(jì)算盒子的大小，需要注意的是，box-sizing屬性的設(shè)置會(huì)影響盒子的width和height。只有普通文檔流中塊框的垂直外邊距才會(huì)發(fā)生外邊距合并。行內(nèi)框、浮動(dòng)框或絕對(duì)定位之間的外邊距不會(huì)合并。

5、Flex布局

Flex布局的容器是一個(gè)伸縮容器，首先容器本身會(huì)更具容器中的元素動(dòng)態(tài)設(shè)置自身大小；然后當(dāng)Flex容器被應(yīng)用一個(gè)大小時(shí)(width和height)，將會(huì)自動(dòng)調(diào)整容器中的元素適應(yīng)新大小。Flex容器也可以設(shè)置伸縮比例和固定寬度，還可以設(shè)置容器中元素的排列方向(橫向和縱向)和是否支持元素的自動(dòng)換行。有了這個(gè)神器，做頁(yè)面布局的可以方便很多了。注意，設(shè)為Flex布局以后，子元素的float、clear和vertical-align屬性將失效。

6、transition(過(guò)渡) 和 transform(旋轉(zhuǎn))

應(yīng)用transform可以對(duì)元素進(jìn)行平移(translate)、旋轉(zhuǎn)(rotate)、放大縮小(scale)、傾斜(skew)等處理，而transition使css屬性值(包括transform)在一段時(shí)間內(nèi)平滑的過(guò)渡。使用transition和transform就可以實(shí)現(xiàn)頁(yè)面的滑動(dòng)切換效果。

7、動(dòng)畫(huà) Animation

Animation首先需要設(shè)置一個(gè)動(dòng)畫(huà)函數(shù)，然后以這個(gè)動(dòng)畫(huà)的方式來(lái)改變?cè)氐腸ss屬性之的變化，動(dòng)畫(huà)可以被設(shè)置為永久循環(huán)演示。和transition相比，animation設(shè)置動(dòng)畫(huà)效果更靈活更豐富，二者還有一個(gè)區(qū)別是：transition只能通過(guò)主動(dòng)改變?cè)氐腸ss值才能觸發(fā)動(dòng)畫(huà)效果，而animation一旦被應(yīng)用，就開(kāi)始執(zhí)行動(dòng)畫(huà)。

8、Sprite圖

對(duì)于大型站點(diǎn)，為了減少http請(qǐng)求的次數(shù)，一般會(huì)將常用的小圖標(biāo)排到一個(gè)大圖中，頁(yè)面加載時(shí)只需請(qǐng)求一次網(wǎng)絡(luò)， 然后在css中通過(guò)設(shè)置background-position來(lái)控制顯示所需要的小圖標(biāo)。

9、字體圖標(biāo) iconfont

所謂字體圖標(biāo)就是將常用的圖標(biāo)轉(zhuǎn)化為字體資源存在文件中，通過(guò)在CSS中引用該字體文件，然后可以直接通過(guò)控制字體的css屬性來(lái)設(shè)置圖標(biāo)的樣式。

03 HTML 篇

HTML的全稱為超文本標(biāo)記語(yǔ)言，是一種標(biāo)記語(yǔ)言

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

html 常規(guī)標(biāo)簽有html,head,body,div,span,table,ul,ol,dl,p,b,h1~h6,strong,form,input,img,em,i 等等，另外html5 還新增了很多語(yǔ)義化的標(biāo)簽，比如header,acticle,aside,section,footer,audio,radio 等等。

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)客戶點(diǎn)擊訪問(wèn)網(wǎng)站，從而達(dá)到互聯(lián)網(wǎng)營(yíng)銷及品牌建設(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)化。

2、頁(yè)面渲染機(jī)制

頁(yè)面渲染就是瀏覽器的渲染引擎將html代碼根據(jù)CSS定義的規(guī)則顯示在瀏覽器窗口中的過(guò)程。大致工作原理如下：

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

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

如果中引用了外部css文件，則發(fā)出css文件請(qǐng)求，服務(wù)器返回該文件；

如果中引用了外部js文件，則發(fā)出js文件請(qǐng)求，服務(wù)器返回該文件后開(kāi)始運(yùn)行；

渲染引擎繼續(xù)載入html中的部分的代碼，并開(kāi)始解析前面返回的css文件，然后根據(jù)css選擇器計(jì)算出節(jié)點(diǎn)的樣式，創(chuàng)建渲染樹(shù)；

從根節(jié)點(diǎn)遞歸調(diào)用，計(jì)算每一個(gè)元素的大小、位置等，給每個(gè)節(jié)點(diǎn)所應(yīng)該出現(xiàn)在屏幕上的精確坐標(biāo)；

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

服務(wù)器返回圖片文件，由于圖片占用了一定面積，影響了后面段落的排版，因此引擎需要回過(guò)頭來(lái)重新渲染這部分代碼；

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

直到為止，頁(yè)面渲染完畢。

3、重繪和回流

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

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

從上面可以看出，回流必將引起重繪，而重繪不一定會(huì)引起回流。

會(huì)引起重繪和回流的操作

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

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

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

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

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

4、本地存儲(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提供了兩種在客戶端存儲(chǔ)數(shù)據(jù)的新方法：localStorage 和 sessionStorage, 它們都是以key/value 的形式來(lái)存儲(chǔ)數(shù)據(jù)，前者是永久存儲(chǔ)，后者的存儲(chǔ)期限僅限于瀏覽器會(huì)話(session),即當(dāng)瀏覽器窗口關(guān)閉后，sessionStorage中的數(shù)據(jù)被清除。

localStorage的存儲(chǔ)空間大約5M左右(不同瀏覽器可能不同，分 HOST)，這個(gè)相當(dāng)于一個(gè)5M大小的前端頁(yè)面的數(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)景比較少，此處不作介紹。

5、瀏覽器緩存機(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ù)查詢是否有更新。

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ù)器查詢文件是否有更新時(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í)，只要滿足基中一個(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ù)器查詢是否有文件是否有更新。

強(qiáng)制刷新頁(yè)面(Ctrl+F5)，瀏覽器會(huì)直接忽略本地的緩存(有緩存也會(huì)認(rèn)為本地沒(méi)有緩存)，在請(qǐng)求中加上字段：Cache-Control:no-cache(或 Pragma:no-cache)，發(fā)包向服務(wù)重新拉取文件。

6、History路由機(jī)制

用戶訪問(wèn)網(wǎng)頁(yè)的歷史記錄通常會(huì)被保存在一個(gè)類似于棧對(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事件, 與其類似的還有一個(gè)事件: onhashchange 。

onhashchange是老API, 瀏覽器支持度高, 本來(lái)是用來(lái)監(jiān)聽(tīng)hash變化的, 但可以被利用來(lái)做客戶端前進(jìn)和后退事件的監(jiān)聽(tīng)，onpopstate是專門用來(lái)監(jiān)聽(tīng)瀏覽器前進(jìn)后退的, 不僅可以支持hash, 非hash的同源url也支持。

7、HTML5離線緩存

HTML5離線緩存又叫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ú)法訪問(wèn)時(shí)的回退頁(yè)面(比如 404 頁(yè)面)

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

離線瀏覽 – 用戶可在應(yīng)用離線時(shí)使用它們

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

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

8、Canvas和SVG

Canvas 通過(guò)Javascript 來(lái)繪制 2D 圖形。Canvas 是逐像素進(jìn)行渲染的。在 Canvas 中，一旦圖形被繪制完成，它就不會(huì)繼續(xù)得到瀏覽器的關(guān)注。如果其位置發(fā)生變化，那么整個(gè)場(chǎng)景也需要重新繪制，包括任何或許已被圖形覆蓋的對(duì)象。

SVG 是一種使用 XML 描述 2D 圖形的語(yǔ)言。SVG 基于 XML，這意味著 SVG DOM 中的每個(gè)元素都是可用的。你可以為某個(gè)元素附加 JavaScript 事件處理器。在 SVG 中，每個(gè)被繪制的圖形均被視為對(duì)象。如果 SVG 對(duì)象的屬性發(fā)生變化，那么瀏覽器能夠自動(dòng)重現(xiàn)圖形。

Canvas和SVG相比，canvas更依賴于分辨率，不支持事件處理器，文本渲染能力弱，比較適合密集型游戲，其中的許多對(duì)象會(huì)被頻繁繪制，而svg則比較適用于類似谷歌地圖帶有大型渲染區(qū)域的應(yīng)用程序。

零基礎(chǔ)小白

應(yīng)屆畢業(yè)生

在職轉(zhuǎn)行

在職進(jìn)階文章出自：http://www.cnitedu.cn/qianduan/share/202116200.html

總結(jié)

以上是生活随笔為你收集整理的点击部分刷新html ajax,一文全解web前端精简知识点的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。