Web前端技術(shù)由html卷仑、css和javascript三大部分構(gòu)成孽尽，是一個(gè)龐大而復(fù)雜的技術(shù)體系于游，其復(fù)雜程度不低于任何一門后端語言毁葱。而我們?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)行簡單的梳理，對(duì)應(yīng)的每個(gè)知識(shí)點(diǎn)點(diǎn)到為止蚌成，不作詳細(xì)介紹前痘。目的是幫助大家審查自己的知識(shí)結(jié)構(gòu)是否完善，如有遺漏或不正確的地方担忧，希望共勉芹缔。
JAVASCRIPT 篇
0、基礎(chǔ)語法
Javascript基礎(chǔ)語法包括：變量定義瓶盛、數(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可以通過typeof來判斷基礎(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等实辑。 一般來講捺氢，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á)式精簡
1馍佑、函數(shù)原型鏈
Javascript雖然沒有繼承概念，但Javascript在函數(shù)Function對(duì)象中建立了原型對(duì)象prototype梨水，并以Function對(duì)象為主線拭荤，從上至下，在內(nèi)部構(gòu)建了一條原型鏈疫诽。
簡單來說就是建立了變量查找機(jī)制舅世，當(dāng)訪問一個(gè)對(duì)象的屬性時(shí)，先查找對(duì)象本身是否存在奇徒，如果不存在就去該對(duì)象所在的原型連上去找雏亚，直到Object對(duì)象為止，如果都沒有找到該屬性才會(huì)返回undefined摩钙。
因此我們經(jīng)常會(huì)利用函數(shù)的原型機(jī)制來實(shí)現(xiàn)JS繼承罢低。關(guān)于函數(shù)原型鏈可參考博客：JS原型對(duì)象和原型鏈
2、函數(shù)作用域
函數(shù)作用域就是變量在聲明它們的函數(shù)體以及這個(gè)函數(shù)體嵌套的任意函數(shù)體內(nèi)都是有定義的胖笛。在JS中沒有會(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等方法來改變函數(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ù)來調(diào)用扁眯，當(dāng)使用new來創(chuàng)建對(duì)象時(shí)，對(duì)應(yīng)的函數(shù)就是構(gòu)造函數(shù)翅帜，通過對(duì)象來調(diào)用時(shí)就是普通函數(shù)姻檀。
普通函數(shù)的創(chuàng)建有：顯式聲明、匿名定義涝滴、new Function() 等三種方式绣版。
當(dāng)通過new來創(chuàng)建一個(gè)新對(duì)象時(shí)，JS底層將新對(duì)象的原型鏈指向了構(gòu)造函數(shù)的原型對(duì)象歼疮，于是就在新對(duì)象和函數(shù)對(duì)象之間建立了一條原型鏈杂抽，通過新對(duì)象可以訪問到函數(shù)對(duì)象原型prototype中的方法和屬性。new的詳細(xì)介紹請(qǐng)參考博客：理解JS中的new運(yùn)算符
5韩脏、閉包
閉包其實(shí)是一個(gè)主動(dòng)執(zhí)行的代碼塊缩麸，這個(gè)代碼塊的特殊之處是可以永久保存局部變量，但又不污染全局變量赡矢，可以形成一個(gè)獨(dú)立的執(zhí)行過程杭朱，因此我們經(jīng)常用閉包來定義組件。關(guān)于閉包的介紹請(qǐng)參考：干貨分享：讓你分分鐘學(xué)會(huì)JS閉包
6济竹、單線程和異步隊(duì)列
setTimeout和setInterval是JS內(nèi)置的兩個(gè)定時(shí)器痕檬，使用很簡單，但這兩個(gè)方法背后的原理卻不簡單送浊。
我們知道梦谜，JS是單線程語言，在瀏覽器中袭景，當(dāng)JS代碼被加載時(shí)唁桩，瀏覽器會(huì)為其分配一個(gè)主線程來執(zhí)行任務(wù)(函數(shù))，主線程會(huì)形成一個(gè)全局執(zhí)行環(huán)境耸棒，執(zhí)行環(huán)境采用棧的方式將待執(zhí)行任務(wù)按順序依次來執(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ù)是否需要開始執(zhí)行。這就是為什么setTimeout(fn,0) 始終要等到最后執(zhí)行的原因。關(guān)于單線程和異步隊(duì)列問題請(qǐng)參考：setTimeout（0）
7铡溪、異步通訊 Ajax技術(shù)
Ajax是瀏覽器專門用來和服務(wù)器進(jìn)行交互的異步通訊技術(shù)漂辐，其核心對(duì)象是XMLHttpRequest,通過該對(duì)象可以創(chuàng)建一個(gè)Ajax請(qǐng)求。為了防止XSS攻擊棕硫，瀏覽器對(duì)Ajax做了限制髓涯，不允許Ajax跨域請(qǐng)求服務(wù)器,就是只能訪問當(dāng)前域名下的url。
當(dāng)然饲帅，如果確信你的站點(diǎn)不存在跨域的風(fēng)險(xiǎn)复凳，可以在服務(wù)端主動(dòng)開啟跨域請(qǐng)求瘤泪。 也可以直接通過CORS或JSONP來實(shí)現(xiàn)灶泵。
JSONP是利用腳本(script)跨域能力來模擬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頁面dom結(jié)構(gòu)膳犹，在頁面上所有的元素最終都會(huì)映射為一個(gè)dom對(duì)象恬吕。 document也提供了很多api來查找特定的dom對(duì)象，比如getElementById,querySelector等等须床。
9铐料、事件系統(tǒng) Event
事件是用戶與頁面交互的基礎(chǔ)，到目前為止豺旬，DOM事件從PC端的 鼠標(biāo)事件(mouse) 發(fā)展到移動(dòng)端的 觸摸事件(touch) 和 手勢(shì)事件(guesture)
由于DOM結(jié)構(gòu)可能會(huì)多層嵌套钠惩，因此也衍生出了兩種事件流：事件捕獲和事件冒泡，后者最常用族阅。利用事件冒泡機(jī)制可以實(shí)現(xiàn)很多功能篓跛，比如頁面點(diǎn)擊統(tǒng)計(jì)。關(guān)于兩種事件流的介紹請(qǐng)參考：事件冒泡和捕獲
除此之外坦刀，在頁面初始化愧沟、滾動(dòng)、隱藏鲤遥、返回等操作時(shí)分別內(nèi)置了onload/onDOMContentLoaded沐寺、onscroll、onvisibility和onhashchange等事件渴频，如果想要捕獲這些事件芽丹，需要通過addEventLisener/attachEvent來進(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é)
CSS 篇
css是用來對(duì)html進(jìn)行修飾的一門語言批钠。
1、選擇器
css的選擇器有很多種得封，常用的有類選擇器埋心、標(biāo)簽選擇器、ID選擇器忙上、后代選擇器拷呆、群組選擇器、偽類選擇器(before/after)疫粥、兄弟選擇器(+~)茬斧、屬性選擇器等等。
2梗逮、定位
定位一般有相對(duì)定位(relative)项秉、絕對(duì)定位(absolute)、固定定位(fixed)慷彤，relative和absolute在移動(dòng)端用的最多娄蔼，fixed 在移動(dòng)端有兼容性問題，因此不推薦使用瞬欧，在移動(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來模擬一個(gè)空元素，還可以直接設(shè)置overflow:auto/hidden唯鸭。除過浮動(dòng)可以實(shí)現(xiàn)宮格模式须蜗，行內(nèi)盒子(inline-block)和table也可以。
4、盒子模型
盒子模型是css最重要的一個(gè)概念明肮，也是css布局的基石菱农。 常見的盒子模型有塊級(jí)盒子(block)和行內(nèi)盒子(inline-block)，盒子最關(guān)鍵的幾個(gè)屬性包括margin柿估、border循未、padding和content,這幾個(gè)元素可以設(shè)置盒子和盒子之間的關(guān)系以及盒子和內(nèi)容之間的關(guān)系。還有一個(gè)問題是計(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è)神器褥芒，做頁面布局的可以方便很多了嚼松。注意，設(shè)為Flex布局以后锰扶，子元素的float献酗、clear和vertical-align屬性將失效。
6坷牛、transition(過渡) 和 transform(旋轉(zhuǎn))
應(yīng)用transform可以對(duì)元素進(jìn)行平移(translate)罕偎、旋轉(zhuǎn)(rotate)、放大縮小(scale)京闰、傾斜(skew)等處理颜及，而transition使css屬性值(包括transform)在一段時(shí)間內(nèi)平滑的過渡。使用transition和transform就可以實(shí)現(xiàn)頁面的滑動(dòng)切換效果。
7、動(dòng)畫 Animation
Animation首先需要設(shè)置一個(gè)動(dòng)畫函數(shù)腋颠，然后以這個(gè)動(dòng)畫的方式來改變?cè)氐腸ss屬性之的變化垮刹，動(dòng)畫可以被設(shè)置為永久循環(huán)演示。 和transition相比雹熬，animation設(shè)置動(dòng)畫效果更靈活更豐富巍沙，二者還有一個(gè)區(qū)別是：transition只能通過主動(dòng)改變?cè)氐腸ss值才能觸發(fā)動(dòng)畫效果韧掩，而animation一旦被應(yīng)用犯祠，就開始執(zhí)行動(dòng)畫萌丈。
8、Sprite圖
對(duì)于大型站點(diǎn)雷则，為了減少http請(qǐng)求的次數(shù)辆雾，一般會(huì)將常用的小圖標(biāo)排到一個(gè)大圖中，頁面加載時(shí)只需請(qǐng)求一次網(wǎng)絡(luò)月劈， 然后在css中通過設(shè)置background-position來控制顯示所需要的小圖標(biāo)度迂。
9、字體圖標(biāo) iconfont
所謂字體圖標(biāo)就是將常用的圖標(biāo)轉(zhuǎn)化為字體資源存在文件中猜揪，通過在CSS中引用該字體文件惭墓，然后可以直接通過控制字體的css屬性來設(shè)置圖標(biāo)的樣式。
HTML 篇
1而姐、Web語義化 和 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 還新增了很多語義化的標(biāo)簽，比如header,acticle,aside,section,footer,audio,radio 等等拴念。
Web語義化是指使用語義恰當(dāng)?shù)臉?biāo)簽钧萍，使頁面有良好的結(jié)構(gòu)，頁面元素有含義政鼠，能夠讓人和搜索引擎都容易理解风瘦。
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ǎng)站官帘，從而達(dá)到互聯(lián)網(wǎng)營銷及品牌建設(shè)的目標(biāo)瞬雹。
搜索引擎通過爬蟲技術(shù)獲取的頁面就是由一堆html標(biāo)簽組成的代碼,，人可以通過可視化的方式來判斷頁面上哪些內(nèi)容是重點(diǎn)刽虹，而機(jī)器做不到酗捌。 但搜索引擎會(huì)根據(jù)標(biāo)簽的含義來判斷內(nèi)容的權(quán)重，因此状婶，在合適的位置使用恰當(dāng)?shù)臉?biāo)簽意敛，使整個(gè)頁面的語義明確，結(jié)構(gòu)清晰膛虫，搜索引擎才能正確識(shí)別頁面中的重要內(nèi)容草姻，并予以較高的權(quán)值。比如h1~h6這幾個(gè)標(biāo)簽在SEO中的權(quán)值非常高稍刀，用它們作頁面的標(biāo)題就是一個(gè)簡單的SEO優(yōu)化撩独。
2敞曹、頁面渲染機(jī)制
頁面渲染就是瀏覽器的渲染引擎將html代碼根據(jù)CSS定義的規(guī)則顯示在瀏覽器窗口中的過程。大致工作原理如下：
用戶輸入網(wǎng)址综膀，瀏覽器向服務(wù)器發(fā)出請(qǐng)求澳迫，服務(wù)器返回html文件；
渲染引擎開始載入html代碼剧劝，并將HTML中的標(biāo)簽轉(zhuǎn)化為DOM節(jié)點(diǎn)橄登，生成DOM樹；
如果中引用了外部css文件讥此，則發(fā)出css文件請(qǐng)求拢锹，服務(wù)器返回該文件；
如果中引用了外部js文件萄喳，則發(fā)出js文件請(qǐng)求卒稳，服務(wù)器返回該文件后開始運(yùn)行；
渲染引擎繼續(xù)載入html中的部分的代碼他巨，并開始解析前面返回的css文件充坑，然后根據(jù)css選擇器計(jì)算出節(jié)點(diǎn)的樣式，創(chuàng)建渲染樹染突；
從根節(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ù)器返回圖片文件俐芯，由于圖片占用了一定面積，影響了后面段落的排版钉鸯，因此引擎需要回過頭來重新渲染這部分代碼吧史；
如果此時(shí)js腳本中運(yùn)行了style.display=”none”, 布局被改變，引擎也需要重新渲染這部分代碼唠雕；
直到為止贸营，頁面渲染完畢。
3岩睁、重繪和回流
當(dāng)渲染樹中的一部分(或全部)因?yàn)樵氐囊?guī)模尺寸钞脂，布局，隱藏等改變而需要重新構(gòu)建捕儒。這就稱為回流冰啃。比如上面的img文件加載完成后就會(huì)引起回流邓夕，每個(gè)頁面至少需要一次回流，就是在頁面第一次加載的時(shí)候阎毅。
當(dāng)渲染樹中的一些元素需要更新屬性焚刚，而這些屬性只是影響元素的外觀，風(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è)置過期時(shí)間。 但是 cookie 不適合大量數(shù)據(jù)的存儲(chǔ)赂韵，因?yàn)槊空?qǐng)求一次頁面娱节，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大小超過限制都被忽略，且永遠(yuǎn)不會(huì)被設(shè)置灯蝴。
html5提供了兩種在客戶端存儲(chǔ)數(shù)據(jù)的新方法：localStorage 和 sessionStorage, 它們都是以key/value 的形式來存儲(chǔ)數(shù)據(jù)恢口，前者是永久存儲(chǔ)，后者的存儲(chǔ)期限僅限于瀏覽器會(huì)話(session),即當(dāng)瀏覽器窗口關(guān)閉后穷躁，sessionStorage中的數(shù)據(jù)被清除耕肩。
localStorage的存儲(chǔ)空間大約5M左右(不同瀏覽器可能不同，分 HOST)问潭，這個(gè)相當(dāng)于一個(gè)5M大小的前端頁面的數(shù)據(jù)庫猿诸，相比于cookie可以節(jié)約帶寬，但localStorage在瀏覽器隱私模式下是不可讀取的狡忙，當(dāng)存儲(chǔ)數(shù)據(jù)超過了localStorage的存儲(chǔ)空間后會(huì)拋出異常梳虽。
此外，H5還提供了逆天的websql和indexedDB,允許前端以關(guān)系型數(shù)據(jù)庫的方式來存儲(chǔ)本地?cái)?shù)據(jù)灾茁，相對(duì)來說窜觉，這個(gè)功能目前應(yīng)用的場(chǎng)景比較少，此處不作介紹北专。
5禀挫、瀏覽器緩存機(jī)制
瀏覽器緩存機(jī)制是指通過 HTTP 協(xié)議頭里的 Cache-Control（或 Expires）和 Last-Modified（或 Etag）等字段來控制文件緩存的機(jī)制。
Cache-Control 用于控制文件在本地緩存有效時(shí)長拓颓。最常見的语婴，比如服務(wù)器回包：Cache-Control:max-age=600 表示文件在本地應(yīng)該緩存，且有效時(shí)長是600秒（從發(fā)出請(qǐng)求算起）驶睦。在接下來600秒內(nèi)砰左，如果有請(qǐng)求這個(gè)資源，瀏覽器不會(huì)發(fā)出 HTTP 請(qǐng)求场航，而是直接使用本地緩存的文件菜职。
Last-Modified 是標(biāo)識(shí)文件在服務(wù)器上的最新更新時(shí)間。下次請(qǐng)求時(shí)旗闽，如果文件緩存過期，瀏覽器通過 If-Modified-Since 字段帶上這個(gè)時(shí)間蜜另，發(fā)送給服務(wù)器适室，由服務(wù)器比較時(shí)間戳來判斷文件是否有修改。如果沒有修改举瑰，服務(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í)谓娃，瀏覽器通過 If-None-Match 字段把特征字串發(fā)送給服務(wù)器脚乡，由服務(wù)器和文件最新特征字串進(jìn)行匹配，來判斷文件是否有更新滨达。沒有更新回包304奶稠，有更新回包200。Etag 和 Last-Modified 可根據(jù)需求使用一個(gè)或兩個(gè)同時(shí)使用捡遍。兩個(gè)同時(shí)使用時(shí)锌订，只要滿足基中一個(gè)條件，就認(rèn)為文件沒有更新画株。
另外有兩種特殊的情況：
手動(dòng)刷新頁面（F5)辆飘，瀏覽器會(huì)直接認(rèn)為緩存已經(jīng)過期（可能緩存還沒有過期），在請(qǐng)求中加上字段：Cache-Control:max-age=0谓传，發(fā)包向服務(wù)器查詢是否有文件是否有更新蜈项。
強(qiáng)制刷新頁面（Ctrl+F5)，瀏覽器會(huì)直接忽略本地的緩存（有緩存也會(huì)認(rèn)為本地沒有緩存）续挟，在請(qǐng)求中加上字段：Cache-Control:no-cache（或 Pragma:no-cache）紧卒，發(fā)包向服務(wù)重新拉取文件。
6诗祸、History路由機(jī)制
用戶訪問網(wǎng)頁的歷史記錄通常會(huì)被保存在一個(gè)類似于棧對(duì)象中跑芳，即history對(duì)象轴总，點(diǎn)擊返回就出棧，跳下一頁就入棧博个。 它提供了一些方法來操作頁面的前進(jìn)和后退：
window.history.back() 返回到上一個(gè)頁面
window.history.forward() 進(jìn)入到下一個(gè)頁面
window.history.go([delta]) 跳轉(zhuǎn)到指定頁面
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, 瀏覽器支持度高, 本來是用來監(jiān)聽hash變化的, 但可以被利用來做客戶端前進(jìn)和后退事件的監(jiān)聽，onpopstate是專門用來監(jiān)聽瀏覽器前進(jìn)后退的, 不僅可以支持hash, 非hash的同源url也支持征堪。
7瘩缆、HTML5離線緩存
HTML5離線緩存又叫Application Cache，是從瀏覽器的緩存中分出來的一塊緩存區(qū)佃蚜，如果要在這個(gè)緩存中保存數(shù)據(jù)庸娱，可以使用一個(gè)描述文件（manifest file），列出要下載和緩存的資源谐算。
manifest 文件是簡單的文本文件熟尉，它告知瀏覽器被緩存的內(nèi)容（以及不緩存的內(nèi)容）。manifest 文件可分為三個(gè)部分：
– CACHE MANIFEST – 在此標(biāo)題下列出的文件將在首次下載后進(jìn)行緩存
– NETWORK – 在此標(biāo)題下列出的文件需要與服務(wù)器的連接洲脂，且不會(huì)被緩存
– FALLBACK – 在此標(biāo)題下列出的文件規(guī)定當(dāng)頁面無法訪問時(shí)的回退頁面（比如 404 頁面）
離線緩存為應(yīng)用帶來三個(gè)優(yōu)勢(shì)：
離線瀏覽 – 用戶可在應(yīng)用離線時(shí)使用它們
速度 – 已緩存資源加載得更快
減少服務(wù)器負(fù)載 – 瀏覽器將只從服務(wù)器下載更新過或更改過的資源斤儿。
8、Canvas和SVG
Canvas 通過Javascript 來繪制 2D 圖形恐锦。Canvas 是逐像素進(jìn)行渲染的往果。在 Canvas 中，一旦圖形被繪制完成一铅，它就不會(huì)繼續(xù)得到瀏覽器的關(guān)注陕贮。如果其位置發(fā)生變化，那么整個(gè)場(chǎng)景也需要重新繪制潘飘，包括任何或許已被圖形覆蓋的對(duì)象肮之。
SVG 是一種使用 XML 描述 2D 圖形的語言。SVG 基于 XML卜录，這意味著 SVG DOM 中的每個(gè)元素都是可用的局骤。你可以為某個(gè)元素附加 JavaScript 事件處理器。在 SVG 中暴凑，每個(gè)被繪制的圖形均被視為對(duì)象。如果 SVG 對(duì)象的屬性發(fā)生變化赘来，那么瀏覽器能夠自動(dòng)重現(xiàn)圖形现喳。
