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ù)類型、函數(shù)香浩、控制語句类缤、內(nèi)置對(duì)象等。

在ES5 中邻吭，變量聲明有兩種方式餐弱，分別是 ?var 和 function ，var 用于聲明普通的變量囱晴，接收任意類型膏蚓，function用于聲明函數(shù)。另外畸写，ES6 新增了 let降允、const、import 和 class 等四個(gè)命令艺糜，分別用以聲明 普通變量剧董、靜態(tài)變量、模塊 和 類 破停。

JS數(shù)據(jù)類型共有六種翅楼，分別是 String、Number真慢、Boolean毅臊、Null、Undefined 和 Object 等黑界， 另外管嬉，ES6新增了 Symbol 類型。其中朗鸠，Object 是引用類型蚯撩，其他的都是原始類型(Primitive Type)。

原始類型也稱為基本類型或簡單類型烛占，因?yàn)槠湔紦?jù)空間固定胎挎，是簡單的數(shù)據(jù)段沟启，為了便于提升變量查詢速度，將其存儲(chǔ)在棧(stack)中(按值訪問)犹菇。為了便于操作這類數(shù)據(jù)德迹，ECMAScript 提供了 3 個(gè)基本包裝類型：Boolean、Number 和 String 揭芍「旄悖基本包裝類型是一種特殊的引用類型，每當(dāng)讀取一個(gè)基本類型值的時(shí)候称杨，JS內(nèi)部就會(huì)創(chuàng)建一個(gè)對(duì)應(yīng)的包裝對(duì)象流酬，從而可以調(diào)用一些方法來操作這些數(shù)據(jù)。

引用類型由于其值的大小會(huì)改變列另，所以不能將其存放在棧中芽腾，否則會(huì)降低變量查詢速度，因此其存儲(chǔ)在堆(heap)中页衙，存儲(chǔ)在變量處的值是一個(gè)指針摊滔，指向存儲(chǔ)對(duì)象的內(nèi)存處(按址訪問)，對(duì)于引用類型的值店乐，可以為其添加屬性和方法艰躺，也可以改變和刪除其屬性和方法；但基本類型不可以添加屬性和方法眨八。關(guān)于更多介紹請(qǐng)參考：詳解 ECMAScript 數(shù)據(jù)類型

Javascript 可以通過 typeof 來判斷原始數(shù)據(jù)類型腺兴，但不能判斷引用類型，要知道引用類型的具體類型廉侧，需要通過 Object 原型上的 toString 方法來判斷页响，關(guān)于數(shù)據(jù)類型判斷可以參考：檢測(cè)數(shù)據(jù)類型的四種方案

JS中的函數(shù)存在著三種角色：普通函數(shù)、構(gòu)造函數(shù)段誊、對(duì)象方法闰蚕。同一個(gè)函數(shù)，調(diào)用方式不同连舍，函數(shù)的作用不一樣没陡，所扮演的角色也不一樣。直接調(diào)用時(shí)就是普通函數(shù)索赏，通過new創(chuàng)建對(duì)象時(shí)就是構(gòu)造函數(shù)盼玄，通過對(duì)象調(diào)用時(shí)就是方法。

JS常用的內(nèi)置對(duì)象有window潜腻、Date埃儿、Array、JSON砾赔、RegExp 等蝌箍，window是瀏覽器在執(zhí)行腳本時(shí)創(chuàng)建的一個(gè)全局對(duì)象青灼，主要描述瀏覽器窗口相關(guān)的屬性和狀態(tài)暴心，這個(gè)后面會(huì)講到妓盲，Date 和 Array 使用場(chǎng)景最多，JSON主要用于對(duì)象的序列化和反序列化专普，還有一個(gè)作用就是實(shí)現(xiàn)對(duì)象的深拷貝悯衬。RegExp 即正則表達(dá)式，是處理字符串的利器檀夹。 關(guān)于更多介紹請(qǐng)參考：數(shù)組常用操作方法總結(jié)筋粗，JavaScript 正則表達(dá)式

1、函數(shù)原型鏈

JS是一種基于對(duì)象的語言炸渡，但在ES6 之前是不支持繼承的娜亿，為了具備繼承的能力，Javascript 在函數(shù)對(duì)象上建立了原型對(duì)象prototype蚌堵，并以函數(shù)對(duì)象為主線买决，從上至下，在JS內(nèi)部構(gòu)建了一條原型鏈吼畏。原型鏈把一個(gè)個(gè)獨(dú)立的對(duì)象聯(lián)系在一起督赤，Object 則是所有對(duì)象的祖宗，?任何對(duì)象所建立的原型鏈最終都指向了Object泻蚊，并以 Object 終結(jié)躲舌。

簡單來說就是建立了變量查找機(jī)制，當(dāng)訪問一個(gè)對(duì)象的屬性時(shí)性雄，先查找對(duì)象本身是否存在没卸，如果不存在就去該對(duì)象所在的原型連上去找，直到Object對(duì)象為止秒旋，如果都沒有找到該屬性才會(huì)返回undefined办悟。因此，我們可以通過原型鏈來實(shí)現(xiàn)JS繼承滩褥。關(guān)于函數(shù)原型鏈請(qǐng)參考：認(rèn)識(shí)原型對(duì)象和原型鏈

2病蛉、函數(shù)作用域

函數(shù)作用域就是變量在聲明它們的函數(shù)體以及這個(gè)函數(shù)體嵌套的任意函數(shù)體內(nèi)都是有定義的。因此瑰煎，JS中沒有塊級(jí)作用域铺然，只有函數(shù)作用域，這種設(shè)計(jì)導(dǎo)致JS中出現(xiàn)了變量提升的問題酒甸。簡單來說就是魄健，將變量聲明提升到它所在作用域的最開始的部分，為了解決變量提升帶來的副作用插勤，ES6新增了 let 命令來聲明變量沽瘦，let 所聲明的變量只在 let 命令所在的代碼塊內(nèi)有效革骨，所以不存在變量提升問題。關(guān)于函數(shù)作用域請(qǐng)參考：函數(shù)作用域和作用域鏈

3析恋、this 指針

this 指針存在于函數(shù)中良哲，用以標(biāo)識(shí)函數(shù)運(yùn)行時(shí)所處的上下文。函數(shù)的類型不同助隧，this指向規(guī)則也不一樣：對(duì)于普通函數(shù)筑凫，this 始終指向全局對(duì)象window；對(duì)于構(gòu)造函數(shù)并村，this則指向新創(chuàng)建的對(duì)象巍实；對(duì)于方法，this指向調(diào)用該方法的對(duì)象哩牍。另外棚潦，F(xiàn)unction對(duì)象也提供了call、apply 和 bind 等方法來改變函數(shù)的 this 指向膝昆，其中丸边，call 和 apply 主動(dòng)執(zhí)行函數(shù)，bind一般在事件回調(diào)中使用外潜，而 call 和 apply 的區(qū)別只是參數(shù)的傳遞方式不同嘱吗。關(guān)于更多介紹請(qǐng)參考：深入理解 call,apply和 bind

如果往深的去理解，無論什么函數(shù)，this是否被改變， 本質(zhì)上臣咖，this 均指向觸發(fā)函數(shù)運(yùn)行時(shí)的那個(gè)對(duì)象刁赦。而在函數(shù)運(yùn)行時(shí)丸升，this 的值是不能被改變的。

4精堕、new 操作符

函數(shù)的創(chuàng)建有三種方式庄撮，即 顯式聲明坑赡、匿名定義 和 new Function() 亚铁。前面提到然爆，JS中的函數(shù)即可以是函數(shù)雌隅，也可以是方法修械，還可以是構(gòu)造函數(shù)哄芜。當(dāng)使用new來創(chuàng)建對(duì)象時(shí)失晴，該函數(shù)就是構(gòu)造函數(shù)灰伟，JS將新對(duì)象的原型鏈指向了構(gòu)造函數(shù)的原型對(duì)象，于是就在新對(duì)象和函數(shù)對(duì)象之間建立了一條原型鏈，通過新對(duì)象可以訪問到函數(shù)對(duì)象原型prototype中的方法和屬性前计。關(guān)于構(gòu)造函數(shù)和new操作符請(qǐng)參考：深入理解 new 操作符

5彩库、閉包

通俗來講眯搭，閉包是一個(gè)具有獨(dú)立作用域的靜態(tài)執(zhí)行環(huán)境繁扎。和函數(shù)作用域不同的是念链，閉包的作用域是靜態(tài)的君编，可以永久保存局部資源琴拧，而函數(shù)作用域只存在于運(yùn)行時(shí)馍盟，函數(shù)執(zhí)行結(jié)束后立即銷毀廉羔。因此，閉包可以形成一個(gè)獨(dú)立的執(zhí)行過程乳讥，關(guān)于閉包更多介紹請(qǐng)參考：讓你分分鐘理解 JavaScript 閉包

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

Javascript 是單線程語言铅乡，在瀏覽器中侨嘀，當(dāng)JS代碼被加載時(shí)，瀏覽器會(huì)為其分配一個(gè)主線程來執(zhí)行任務(wù)(函數(shù))雕崩，主線程會(huì)形成一個(gè)全局執(zhí)行環(huán)境急前，執(zhí)行環(huán)境在棧中采用后進(jìn)先出(LIFO)的順序來執(zhí)行代碼塊，以保證所有的函數(shù)能按照正確的順序被執(zhí)行攒岛。

但在瀏覽器中，有一些任務(wù)是非常耗時(shí)的吟逝，比如ajax請(qǐng)求帽蝶、定時(shí)器块攒、事件等麦锯，為了保證非耗時(shí)任務(wù)不受影響，Javascript 在執(zhí)行環(huán)境中維護(hù)了一個(gè)異步隊(duì)列(也叫工作線程)琅绅，并將這些耗時(shí)任務(wù)放入隊(duì)列中進(jìn)行等待扶欣，這些任務(wù)的執(zhí)行時(shí)機(jī)并不確定，只有當(dāng)主線程的任務(wù)執(zhí)行完成以后千扶，主線程才會(huì)去檢查異步隊(duì)列中的任務(wù)是否需要開始執(zhí)行料祠。

JS中的 setTimeout 和 setInterval 就是典型的異步操作，它們會(huì)被放入異步隊(duì)列中等待澎羞，即使 setTimeout(0) 也不會(huì)被立即執(zhí)行髓绽，需要等到當(dāng)前同步任務(wù)結(jié)束后才會(huì)被執(zhí)行。關(guān)于單線程和異步隊(duì)列請(qǐng)參考：JavaScript單線程和異步機(jī)制

7妆绞、異步通信 Ajax技術(shù)

Ajax是瀏覽器專門用來和服務(wù)器進(jìn)行交互的異步通訊技術(shù)顺呕，其核心對(duì)象是XMLHttpRequest，通過該對(duì)象可以創(chuàng)建一個(gè)Ajax請(qǐng)求括饶。Ajax請(qǐng)求是一個(gè)耗時(shí)的異步操作株茶，當(dāng)請(qǐng)求發(fā)出以后，Ajax 提供了兩個(gè)狀態(tài)位來描述請(qǐng)求在不同階段的狀態(tài)图焰，這兩個(gè)狀態(tài)位分別是readyState和status启盛，readyState 通過 5個(gè)狀態(tài)碼來描述一個(gè)請(qǐng)求的5個(gè)階段：

0 - 請(qǐng)求未發(fā)送，初始化階段

1 - 請(qǐng)求發(fā)送中技羔，服務(wù)器還未收到請(qǐng)求

2 - 請(qǐng)求發(fā)送成功僵闯，服務(wù)器已收到請(qǐng)求

3 - 服務(wù)器處理完成，開始響應(yīng)請(qǐng)求藤滥，傳輸數(shù)據(jù)

4 - 客戶端收到請(qǐng)求鳖粟，并完成了數(shù)據(jù)下載，生成了響應(yīng)對(duì)象

status 用于描述服務(wù)端對(duì)請(qǐng)求處理的情況超陆，200 表示正確響應(yīng)了請(qǐng)求牺弹，404 表示服務(wù)器找不到資源浦马，500 代表服務(wù)器內(nèi)部異常等等。

Ajax對(duì)象還可以設(shè)置一個(gè)timeout 值张漂，代表超時(shí)時(shí)間晶默，切記：timeout 只會(huì)影響 readyState，而不會(huì)影響status航攒，因?yàn)槌瑫r(shí)只會(huì)中斷數(shù)據(jù)傳輸磺陡，但不會(huì)影響服務(wù)器的處理結(jié)果。 如果 timeout 設(shè)置的不合理漠畜，就會(huì)導(dǎo)致響應(yīng)碼 status 是200币他，但 response里卻沒有數(shù)據(jù)，這種情況就是服務(wù)器正確響應(yīng)了請(qǐng)求憔狞，但數(shù)據(jù)的下載被超時(shí)中斷了蝴悉。

為了防止XSS攻擊，瀏覽器對(duì)Ajax請(qǐng)求做了限制瘾敢，不允許Ajax 跨域請(qǐng)求服務(wù)器拍冠，只允許請(qǐng)求和當(dāng)前地址同域的服務(wù)器資源。但不限制腳本和標(biāo)簽發(fā)送跨域請(qǐng)求簇抵，比如 script 和 img 標(biāo)簽庆杜，因此可以利用腳本跨域能力來實(shí)現(xiàn)跨域請(qǐng)求，即JSONP 的原理碟摆。

JSONP雖然可以解決跨域問題晃财，但只能是get請(qǐng)求，并且沒有有效的錯(cuò)誤捕獲機(jī)制典蜕，為了解決這個(gè)問題断盛，XMLHttpRequest Level2 提出了 CORS 模型，即跨域資源共享嘉裤，它不是一個(gè)新的API郑临，而是一個(gè)標(biāo)準(zhǔn)規(guī)范，當(dāng)瀏覽器發(fā)現(xiàn)該請(qǐng)求需要跨域時(shí)屑宠，就會(huì)自動(dòng)在頭信息中添加一個(gè) Origin 字段，用以說明本次請(qǐng)求來自哪個(gè)源仇让。服務(wù)器根據(jù)這個(gè)值典奉，決定是否同意這次請(qǐng)求。 關(guān)于CORS 的詳細(xì)介紹請(qǐng)參考：跨域資源共享 CORS 詳解

隨著移動(dòng)端的快速發(fā)展丧叽，Web技術(shù)的應(yīng)用場(chǎng)景正在變得越來越復(fù)雜卫玖，關(guān)注點(diǎn)分離原則在系統(tǒng)設(shè)計(jì)層面就顯得越來越重要，而XMLHttpRequest 是 Ajax 最古老的一個(gè)接口踊淳，因而不太符合現(xiàn)代化的系統(tǒng)設(shè)計(jì)理念假瞬。因此陕靠，瀏覽器提供了一個(gè)新的 Ajax 接口，即Fetch API脱茉，F(xiàn)etch API 是基于Promise 思想設(shè)計(jì)的剪芥，更符合關(guān)注點(diǎn)分離原則，關(guān)于Fetch 的更多介紹請(qǐng)參考：傳統(tǒng) Ajax 已死琴许，F(xiàn)etch 永生

8税肪、模塊化

歷史上，Javascript 規(guī)范一直沒有模塊(module)體系榜田，即無法將一個(gè)大程序拆分成互相依賴的小文件益兄，再用簡單的方法拼裝起來。在 ES6 之前箭券，為了實(shí)現(xiàn)JS模塊化編程净捅，社區(qū)制定了一些模塊加載方案，最主要有 CMD 和 AMD 兩種辩块，分別以commonjs 和 requirejs為代表蛔六。ES6 在語言標(biāo)準(zhǔn)的層面上，實(shí)現(xiàn)了模塊化編程庆捺，其設(shè)計(jì)思想是古今，盡量靜態(tài)化，使得編譯時(shí)就能確定模塊的依賴關(guān)系滔以，即編譯時(shí)加載捉腥，而CMD和AMD是在運(yùn)行時(shí)確定依賴關(guān)系，即運(yùn)行時(shí)加載你画。關(guān)于ES6模塊化請(qǐng)參考：ES6模塊化

9抵碟、Node.js

Node.js?是一個(gè)基于 Chrome V8 引擎的 JavaScript 運(yùn)行環(huán)境，它的運(yùn)行不依賴于瀏覽器作為宿主環(huán)境坏匪，而是和服務(wù)端程序一樣可以獨(dú)立的運(yùn)行拟逮，這使得JS編程第一次從客戶端被帶到了服務(wù)端，Node.js在服務(wù)端的優(yōu)勢(shì)是适滓，它采用單線程和異步I/O模型敦迄，實(shí)現(xiàn)了一個(gè)高并發(fā)、高性能的運(yùn)行時(shí)環(huán)境凭迹。相比傳統(tǒng)的多線程模型罚屋，Node.js實(shí)現(xiàn)簡單，并且可以減少資源開銷嗅绸。關(guān)于Node.js單線程模型請(qǐng)參考：淺析 Node.js 單線程模型

10脾猛、ES6

ES6 是?ECMAScript 6.0 的簡寫，即Javascript語言的下一代標(biāo)準(zhǔn)鱼鸠，已經(jīng)在2015年6月正式發(fā)布了猛拴，它的目標(biāo)是讓JS能夠方便的開發(fā)企業(yè)級(jí)大型應(yīng)用程序羹铅，因此，ES6的一些規(guī)范正在逐漸向Java愉昆、C#等后端語言標(biāo)準(zhǔn)靠近职员。ES6 規(guī)范中，比較重大的變化有以下幾個(gè)方面：

新增 let撼唾、const 命令 來聲明變量廉邑，和var 相比，let 聲明的變量不存在變量提升問題倒谷，但沒有改變JS弱類型的特點(diǎn)蛛蒙，依然可以接受任意類型變量的聲明；const 聲明的變量不允許在后續(xù)邏輯中改變渤愁，提高了JS語法的嚴(yán)謹(jǐn)性牵祟。

新增解構(gòu)賦值、rest語法抖格、箭頭函數(shù)诺苹，這些都是為了讓代碼看起來更簡潔，而包裝的語法糖雹拄。

新增模塊化收奔，這是JS走向規(guī)范比較重要的一步，讓前端更方便的實(shí)現(xiàn)工程化滓玖。

新增類和繼承的概念坪哄，配合模塊化，JS也可以實(shí)現(xiàn)高復(fù)用势篡、高擴(kuò)展的系統(tǒng)架構(gòu)翩肌。

新增模板字符串功能，高效簡潔禁悠，結(jié)束拼接字符串的時(shí)代念祭。

新增Promise對(duì)象，解決異步回調(diào)多層嵌套的問題碍侦。

二粱坤、CSS 篇

1、CSS選擇器

CSS選擇器即通過某種規(guī)則來匹配相應(yīng)的標(biāo)簽瓷产，并為其設(shè)置CSS樣式比规，常用的有類選擇器、標(biāo)簽選擇器拦英、ID選擇器、后代選擇器测秸、群組選擇器疤估、偽類選擇器(before/after)灾常、兄弟選擇器(+~)、屬性選擇器等等铃拇。

2钞瀑、CSS Reset

HTML 標(biāo)簽在不設(shè)置任何樣式的情況下，也會(huì)有一個(gè)默認(rèn)的CSS樣式慷荔，而不同內(nèi)核瀏覽器對(duì)于這個(gè)默認(rèn)值的設(shè)置則不盡相同雕什，這樣可能會(huì)導(dǎo)致同一套代碼在不同瀏覽器上的顯示效果不一致，而出現(xiàn)兼容性問題显晶。因此贷岸，在初始化時(shí)，需要對(duì)常用標(biāo)簽的樣式進(jìn)行初始化磷雇，使其默認(rèn)樣式統(tǒng)一偿警，這就是CSS Reset ，即CSS樣式重置唯笙，比如：*{margin:0,padding:0} 就是最簡單CSS Reset螟蒸， 關(guān)于CSS重置請(qǐng)參考：Neat.css

3、盒子布局

盒子模型是CSS比較重要的一個(gè)概念崩掘，也是CSS 布局的基石七嫌。 常見的盒子模型有塊級(jí)盒子(block)和行內(nèi)盒子(inline-block)，與盒子相關(guān)的幾個(gè)屬性有：margin苞慢、border诵原、padding和content 等，這些屬性的作用是設(shè)置盒子與盒子之間的關(guān)系以及盒子與內(nèi)容之間的關(guān)系枉疼。其中皮假，只有普通文檔流中塊級(jí)盒子的垂直外邊距才會(huì)發(fā)生合并，而行內(nèi)盒子骂维、浮動(dòng)盒子或絕對(duì)定位之間的外邊距不會(huì)合并惹资。另外，box-sizing 屬性的設(shè)置會(huì)影響盒子width和height的計(jì)算航闺。

4褪测、浮動(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)。除浮動(dòng)可以實(shí)現(xiàn)宮格布局菲饼，行內(nèi)盒子(inline-block)和table也可以實(shí)現(xiàn)同樣的效果肾砂。

5、定位布局

設(shè)置元素的position屬性值為 relative/absolute/fixed宏悦，就可以使該元素脫離文檔流镐确，并以某種參照坐標(biāo)進(jìn)行偏移。其中饼煞，releave 是相對(duì)定位源葫，它以自己原來的位置進(jìn)行偏移，偏移后派哲，原來的空間不會(huì)被其他元素占用臼氨；absolute 是絕對(duì)定位，它以離自己最近的定位父容器作為參照進(jìn)行偏移芭届；為了對(duì)某個(gè)元素進(jìn)行定位储矩，常用的方式就是設(shè)置父容器的poistion:relative，因?yàn)橄鄬?duì)定位元素在不設(shè)置 top 和 left 值時(shí)褂乍，不會(huì)對(duì)元素位置產(chǎn)生影響持隧；fixed 即固定定位，它則以瀏覽器窗口為參照物逃片，PC網(wǎng)頁底部懸停的banner一般都可以通過fixed定位來實(shí)現(xiàn)屡拨，但fixed屬性在移動(dòng)端有兼容性問題，因此不推薦使用褥实，可替代的方案是：絕對(duì)定位+內(nèi)部滾動(dòng)呀狼。

6、彈性布局

彈性布局即Flex布局损离，定義了flex的容器一個(gè)可伸縮容器哥艇，首先容器本身會(huì)根據(jù)容器中的元素動(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 屬性將失效隙赁。關(guān)于flexbox請(qǐng)參考：圖解CSS3 Flexbox屬性

7垦藏、CSS3 動(dòng)畫

CSS3中規(guī)范引入了兩種動(dòng)畫，分別是 transition 和 animation伞访，transition 可以讓元素的CSS屬性值的變化在一段時(shí)間內(nèi)平滑的過渡，形成動(dòng)畫效果轰驳，為了使元素的變換更加豐富多彩厚掷，CSS3還引入了transfrom 屬性，它可以通過對(duì)元素進(jìn)行 平移(translate)级解、旋轉(zhuǎn)(rotate)冒黑、放大縮小(scale)、傾斜(skew) 等操作勤哗，來實(shí)現(xiàn)2D和3D變換效果抡爹。transiton 還有一個(gè)結(jié)束事件 transitionEnd，該事件是在CSS完成過渡后觸發(fā)芒划，如果過渡在完成之前被移除冬竟，則不會(huì)觸發(fā)transitionEnd 。

animation 需要設(shè)置一個(gè)@keyframes民逼，來定義元素以哪種形式進(jìn)行變換泵殴， 然后再通過動(dòng)畫函數(shù)讓這種變換平滑的進(jìn)行，從而達(dá)到動(dòng)畫效果拼苍，動(dòng)畫可以被設(shè)置為永久循環(huán)演示笑诅。設(shè)置?animation-play-state:paused 可以暫停動(dòng)畫，設(shè)置?animation-fill-mode:forwards 可以讓動(dòng)畫完成后定格在最后一幀疮鲫。另外吆你，還可以通過JS監(jiān)聽animation的開始、結(jié)束和重復(fù)播放時(shí)的狀態(tài)俊犯，分別對(duì)應(yīng)三個(gè)事件妇多，即 animationStart、animationEnd瘫析、animationIteration 砌梆。注意，當(dāng)播放次數(shù)設(shè)置為1時(shí)贬循，不會(huì)觸發(fā) animationIteration 咸包。

和 transition相比，animation 設(shè)置動(dòng)畫效果更靈活更豐富杖虾，還有一個(gè)區(qū)別是：transition 只能通過主動(dòng)改變?cè)氐腸ss值才能觸發(fā)動(dòng)畫效果烂瘫，而animation一旦被應(yīng)用，就開始執(zhí)行動(dòng)畫。另外坟比，HTML5 還新增了一個(gè)動(dòng)畫API芦鳍，即 requestAnimationFrame，它通過JS來調(diào)用葛账，并按照屏幕的繪制頻率來改變?cè)氐腃SS屬性柠衅，從而達(dá)到動(dòng)畫效果，關(guān)于這個(gè)API的介紹請(qǐng)參考：requestAnimationFrame

8籍琳、BFC

BFC是頁面上的一個(gè)隔離的獨(dú)立容器菲宴，容器里面的子元素不會(huì)影響到外面元素。比如：內(nèi)部滾動(dòng)就是一個(gè)BFC趋急，當(dāng)一個(gè)父容器的overflow-y設(shè)置為auto時(shí)喝峦，并且子容器的長度大于父容器時(shí)，就會(huì)出現(xiàn)內(nèi)部滾動(dòng)呜达，無論內(nèi)部的元素怎么滾動(dòng)谣蠢，都不會(huì)影響父容器以外的布局，這個(gè)父容器的渲染區(qū)域就叫BFC查近。滿足下列條件之一就可觸發(fā)BFC：

根元素眉踱，即HTML元素

float的值不為none

overflow的值不為visible

display的值為inline-block、table-cell嗦嗡、table-caption

position的值為absolute或fixed

9勋锤、Sprite，Iconfont侥祭，@font-face

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

Iconfont吆录，即字體圖標(biāo)，就是將常用的圖標(biāo)轉(zhuǎn)化為字體資源存在文件中琼牧，通過在CSS中引用該字體文件恢筝，然后可以直接用控制字體的css屬性來設(shè)置圖標(biāo)的樣式，字體圖標(biāo)的好處是節(jié)省網(wǎng)絡(luò)請(qǐng)求巨坊、其大小不受屏幕分辨率的影響撬槽，并且可以任意修改圖標(biāo)的顏色。

@font-face是CSS3中的一個(gè)模塊趾撵，通過@font-face可以定義一種全新的字體侄柔，然后就可以通過css屬性font-family來使用這個(gè)字體了，即使操作系統(tǒng)沒有安裝這種字體，網(wǎng)頁上也會(huì)正常顯示出來暂题。

10移剪、CSS Hack

早期，不同內(nèi)核瀏覽器對(duì)CSS屬性的解析存在著差異薪者，導(dǎo)致顯示效果不一致纵苛，比如 margin 屬性在ie6中顯示的距離會(huì)比其他瀏覽器中顯示的距離寬2倍，也就是說margin-left:20px;在ie6中距左側(cè)元素的實(shí)際顯示距離是40px啸胧，而在非ie6的瀏覽器上顯示正常赶站。因此，如果要想讓所有瀏覽器中都顯示是20px的寬度纺念，就需要在CSS樣式中加入一些特殊的符號(hào)，讓不同的瀏覽器識(shí)別不同的符號(hào)想括，以達(dá)到應(yīng)用不同的CSS樣式的目的陷谱，這種方式就是css hack， 對(duì)于ie6中的margin應(yīng)用hack就會(huì)變成這樣：.el {margin-left:20px;_margin-left:10px}

兼容各大瀏覽器的 css hack 如下：

三瑟蜈、HTML 篇

1烟逊、BOM

BOM 是?Browser Object Model 的縮寫，即瀏覽器對(duì)象模型铺根，當(dāng)一個(gè)瀏覽器頁面初始化時(shí)宪躯，會(huì)在內(nèi)存創(chuàng)建一個(gè)全局的對(duì)象，用以描述當(dāng)前窗口的屬性和狀態(tài)位迂，這個(gè)全局對(duì)象被稱為瀏覽器對(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)組成的樹形結(jié)構(gòu)脂倦，俗稱DOM樹，document 用于描述DOM樹的狀態(tài)和屬性元莫，并提供了很多操作DOM的API赖阻。

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

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

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

navigator-?用來描述瀏覽器本身，包括瀏覽器的名稱衅檀、版本招刨、語言、系統(tǒng)平臺(tái)哀军、用戶特性字符串等信息沉眶。

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

2、DOM 系統(tǒng)

DOM 是 Document Object Model 的縮寫猿推，即 文檔對(duì)象模型片习，是所有瀏覽器公共遵守的標(biāo)準(zhǔn)，DOM 將HTML和XML文檔映射成一個(gè)由不同節(jié)點(diǎn)組成的樹型結(jié)構(gòu)蹬叭，俗稱DOM樹藕咏。其核心對(duì)象是document，用于描述DOM樹的狀態(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通過添加HTML專用的對(duì)象與函數(shù)對(duì)DOM核心進(jìn)行了擴(kuò)展绿映。

2級(jí)DOM- 鑒于1級(jí)DOM僅以映射文檔結(jié)構(gòu)為目標(biāo)，DOM 2級(jí)面向更為寬廣腐晾。通過對(duì)原有DOM的擴(kuò)展叉弦，2級(jí)DOM通過對(duì)象接口增加了對(duì)鼠標(biāo)和用戶界面事件（DHTML長期支持鼠標(biāo)與用戶界面事件）、范圍藻糖、遍歷（重復(fù)執(zhí)行DOM文檔）和層疊樣式表（CSS）的支持淹冰。同時(shí)也對(duì)DOM 1的核心進(jìn)行了擴(kuò)展，從而可支持XML命名空間巨柒。

3級(jí)DOM-?通過引入統(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 。

3翻具、事件系統(tǒng)

事件是用戶與頁面交互的基礎(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)用戶觸發(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ù)。如果沒有綁定監(jiān)聽函數(shù)蒋得，則不做任何處理级及。

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

利用事件冒泡原理可以實(shí)現(xiàn)事件委托，所謂事件委托县踢，就是在父元素上添加事件監(jiān)聽器转绷，用以監(jiān)聽和處理子元素的事件，避免重復(fù)為子元素綁定相同的事件殿雪。當(dāng)目標(biāo)元素的事件被觸發(fā)以后暇咆，這個(gè)事件就從目標(biāo)元素開始，向最外層元素傳遞丙曙，最終冒泡到父元素上爸业，父元素再通過event.target 獲取到這個(gè)目標(biāo)元素，這樣做的好處是亏镰，父元素只需綁定一個(gè)事件監(jiān)聽扯旷，就可以對(duì)所有子元素的事件進(jìn)行處理了，從而減少了不必要的事件綁定索抓，對(duì)頁面性能有一定的提升钧忽。

4、HTML解析過程

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

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

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

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

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

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

如果 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)簽為止，頁面解析完畢关炼。

5舌剂、重繪 和 回流

當(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的值弦追，或者移動(dòng)元素到另外一個(gè)父元素中岳链。(重繪+回流)

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

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

另外约急，transform 操作不會(huì)引起重繪和回流，是一種高效率的渲染苗分。這是因?yàn)閠ransform屬于合成屬性厌蔽，對(duì)合成屬性進(jìn)行transition/animation 動(dòng)畫時(shí)將會(huì)創(chuàng)建一個(gè)合成層，這使得動(dòng)畫元素在一個(gè)獨(dú)立的層中進(jìn)行渲染摔癣，當(dāng)元素的內(nèi)容沒有發(fā)生改變奴饮，就沒必要進(jìn)行重繪，瀏覽器會(huì)通過重新復(fù)合來創(chuàng)建動(dòng)畫幀择浊。

6戴卜、本地存儲(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)景比較少喷楣，此處不作介紹。

7鹤树、瀏覽器緩存機(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ù)重新拉取文件卸察。

關(guān)于更多瀏覽器緩存介紹請(qǐng)參考：H5 緩存機(jī)制淺析 移動(dòng)端 Web 加載性能優(yōu)化

8脯厨、History

用戶訪問網(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 也支持遂黍。

9、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ù)器下載更新過或更改過的資源。

10芬位、Web語義化 和 SEO

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)化潘酗。

##前端學(xué)習(xí)交流群：461593224