前端開發(fā)是一個非常特殊的行業(yè)，它的歷史實際上不是很長，但是知識之繁雜，技術(shù)迭代速度之快是其他技術(shù)所不能比擬的。

微觀篇

Web前端技術(shù)由 html、css 和 javascript 三大部分構(gòu)成，是一個龐大而復(fù)雜的技術(shù)體系，其復(fù)雜程度不低于任何一門后端語言。

一、JAVASCRIPT 篇

0、基礎(chǔ)語法

Javascript 基礎(chǔ)語法包括：變量聲明、數(shù)據(jù)類型、函數(shù)、控制語句、內(nèi)置對象等。

在ES5 中，變量聲明有兩種方式，分別是  var 和 function ，var 用于聲明普通的變量，接收任意類型，function用于聲明函數(shù)。另外，ES6 新增了 let、const、import 和 class 等四個命令，分別用以聲明 普通變量、靜態(tài)變量、模塊 和 類 。

JS數(shù)據(jù)類型共有六種，分別是 String、Number、Boolean、Null、Undefined 和 Object 等， 另外，ES6 新增了 Symbol 類型。其中，Object 是引用類型，其他的都是原始類型(Primitive Type)。

原始類型也稱為基本類型或簡單類型，因為其占據(jù)空間固定，是簡單的數(shù)據(jù)段，為了便于提升變量查詢速度，將其存儲在棧（stack）中（按值訪問）。為了便于操作這類數(shù)據(jù)，ECMAScript 提供了 3 個基本包裝類型：Boolean、Number 和 String ?；景b類型是一種特殊的引用類型，每當(dāng)讀取一個基本類型值的時候，JS內(nèi)部就會創(chuàng)建一個對應(yīng)的包裝對象，從而可以調(diào)用一些方法來操作這些數(shù)據(jù)。

引用類型由于其值的大小會改變，所以不能將其存放在棧中，否則會降低變量查詢速度，因此其存儲在堆(heap)中，存儲在變量處的值是一個指針，指向存儲對象的內(nèi)存處(按址訪問)，對于引用類型的值，可以為其添加屬性和方法，也可以改變和刪除其屬性和方法；但基本類型不可以添加屬性和方法。關(guān)于更多介紹請參考：詳解《細(xì)說 JavaScript 七種數(shù)據(jù)類型》

JavaScript 可以通過 typeof 來判斷原始數(shù)據(jù)類型，但不能判斷引用類型，要知道引用類型的具體類型，需要通過 Object 原型上的 toString 方法來判斷，關(guān)于數(shù)據(jù)類型判斷可以參考：《判斷JS數(shù)據(jù)類型的4種方法》

在 JavaScript 中，函數(shù)有三種角色，即普通函數(shù)、構(gòu)造函數(shù) 和 對象方法。同一個函數(shù)，調(diào)用方式不同，函數(shù)的作用不一樣，所扮演的角色也不一樣。直接調(diào)用時就是普通函數(shù)，通過new創(chuàng)建對象時就是構(gòu)造函數(shù)，通過對象調(diào)用時就是方法。

JavaScript 常用的內(nèi)置對象有 Date、Array、JSON、RegExp 等等，Date 和 Array 使用場景最多，JSON主要用于對象的序列化和反序列化，還有一個作用就是實現(xiàn)對象的深拷貝。RegExp 即正則表達(dá)式，是處理字符串的利器。關(guān)于更多介紹請參考：《數(shù)組常用操作方法總結(jié)》 ， 《正則表達(dá)式基礎(chǔ)知識》

1、函數(shù)原型鏈

JS是一種基于對象的語言，但在 ES6 之前是不支持繼承的，為了具備繼承的能力，JavaScript 在函數(shù)對象上建立了原型對象 prototype，并以函數(shù)對象為主線，從上至下，在JS內(nèi)部構(gòu)建了一條原型鏈。原型鏈把一個個獨立的對象聯(lián)系在一起，Object 則是所有對象的祖宗， 任何對象所建立的原型鏈最終都指向了 Object，并以 Object 終結(jié)。

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

2、函數(shù)作用域

函數(shù)作用域就是變量在聲明它們的函數(shù)體以及這個函數(shù)體嵌套的任意函數(shù)體內(nèi)都是有定義的。通俗來講就是，在一個函數(shù)里，有些變量可以訪問，有些不可以訪問。那些能訪問的變量所形成的范圍，就是這個函數(shù)的作用域。

在 JavaScript 中，沒有塊級作用域，只有函數(shù)作用域，也就是說 if、while、for 語句不會形成獨立的作用域。但有一個特殊情況，即 with 語句和 catch 語句會形成臨時作用域，語句執(zhí)行結(jié)束后，該作用域就會被釋放。關(guān)于函數(shù)作用域請參考：《函數(shù)作用域和作用域鏈》

3、this 指針

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

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

4、new 操作符

函數(shù)的創(chuàng)建有三種方式，即 顯式聲明、匿名定義 和 new Function() 。前面提到，JS 中的函數(shù)即可以是函數(shù)，也可以是方法，還可以是構(gòu)造函數(shù)。

當(dāng)使用 new 來創(chuàng)建對象時，該函數(shù)就是構(gòu)造函數(shù)，JS 將新對象的原型鏈指向了構(gòu)造函數(shù)的原型對象，于是就在新對象和函數(shù)對象之間建立了一條原型鏈，通過新對象可以訪問到函數(shù)對象原型 prototype 中的方法和屬性。關(guān)于構(gòu)造函數(shù)和 new 操作符請參考： 《深入理解 new 操作符》

5、閉包

閉包不是一個孤立的概念，需要從函數(shù)作用域的角度來理解。

每個函數(shù)都有自己的作用域，如果在一個函數(shù)里定義了另一個函數(shù)，那么對應(yīng)的就有兩個作用域，這兩個作用域就會形成一個鏈條，俗稱作用域鏈。本質(zhì)上講，作用域鏈?zhǔn)且粋€自上而下的鏈表， 鏈表的最頂端是內(nèi)部函數(shù)作用域，鏈表的最底端是全局作用域。內(nèi)部函數(shù)有權(quán)訪問整個作用域鏈上的變量。正常情況下，每當(dāng)一個函數(shù)執(zhí)行完畢，對應(yīng)的作用域就會從該鏈表上移除，然后銷毀。

但如果函數(shù) A 把函數(shù) B 作為返回值返回時，情況又不一樣。

首先，函數(shù) A 返回的是函數(shù) B 的引用，也就是說，B 可能會在其他地方被調(diào)用。上面提到，函數(shù) B 的定義是位于函數(shù) A 內(nèi)部，因此 A 和 B 會形成一條作用域鏈，函數(shù) B 有可能會讀取 A 中的變量 。為了保證函數(shù) B 能夠在其他地方正確執(zhí)行，函數(shù) B 所在的這條作用域鏈就不能被破壞。所以，即使函數(shù) A 執(zhí)行返回后，A 的作用域也不能釋放，需要一直保存在內(nèi)存中，以確保函數(shù) B 能夠正常讀取里面的變量。函數(shù) B 具有永久訪問 A 作用域的特權(quán)，確切說，函數(shù) B 就是閉包 。

總而言之，閉包就是一個有權(quán)訪問另一個函數(shù)作用域的函數(shù)。

6、單線程與事件循環(huán)

JavaScript 是單線程語言。在瀏覽器中，當(dāng)JS代碼被加載時，瀏覽器會為其分配一個主線程來執(zhí)行任務(wù)，主線程會在棧中創(chuàng)建一個全局執(zhí)行環(huán)境 （全局作用域）。每當(dāng)有一個函數(shù)進(jìn)入執(zhí)行流時，就會形成一個對應(yīng)的執(zhí)行環(huán)境（函數(shù)作用域），并將該執(zhí)行環(huán)境壓入棧中。每當(dāng)一個函數(shù)執(zhí)行完畢以后，對應(yīng)的執(zhí)行環(huán)境就會從棧中彈出，然后被銷毀。這就是執(zhí)行環(huán)境棧，執(zhí)行環(huán)境棧的作用就是保證所有的函數(shù)能按照正確的順序被執(zhí)行。

但在瀏覽器中，有一些任務(wù)是非常耗時的，比如 ajax請求、定時器、事件等。為了保證主線程上的任務(wù)不被阻塞，JavaScript 內(nèi)部維護(hù)了一個任務(wù)隊列， 當(dāng)這些耗時任務(wù)結(jié)束時（Ajax 請求返回、定時器超時、事件被觸發(fā)），就將對應(yīng)的回調(diào)函數(shù)插入隊列中進(jìn)行等待。這些任務(wù)的執(zhí)行時機(jī)并不確定，只有當(dāng)所有同步任務(wù)執(zhí)行完畢后，執(zhí)行環(huán)境棧被清空（棧底的全局執(zhí)行環(huán)境會一直存在，直到進(jìn)程退出）以后，然后再從任務(wù)隊列中依次讀取回調(diào)函數(shù)，并將其壓入執(zhí)行環(huán)境棧中。于是，主線程開始執(zhí)行新的同步任務(wù)，執(zhí)行完畢后再從棧中彈出，棧被清空。

主線程從任務(wù)隊列中讀取任務(wù)是不斷循環(huán)的，每當(dāng)棧被清空后，主線程就會從任務(wù)隊列中讀取新的任務(wù)并執(zhí)行，如果沒有新的任務(wù)，就會一直等待，直到有新的任務(wù)。JavaScript 的這種執(zhí)行機(jī)制就叫做任務(wù)循環(huán)。因為每個任務(wù)都由一個事件所觸發(fā)，所以也叫 “事件循環(huán)”。

7、Ajax 和 跨域技術(shù)    

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

    a.請求未發(fā)送，初始化階段

    b.請求發(fā)送中，服務(wù)器還未收到請求

    c.請求發(fā)送成功，服務(wù)器已收到請求

    d.服務(wù)器處理完成，開始響應(yīng)請求，傳輸數(shù)據(jù)

    e.客戶端收到請求，并完成了數(shù)據(jù)下載，生成了響應(yīng)對象

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

Ajax 對象還可以設(shè)置一個 timeout 值，代表超時時間。切記：timeout 只會影響 readyState，而不會影響 status，因為超時只會中斷數(shù)據(jù)傳輸，但不會影響服務(wù)器的處理結(jié)果。如果 timeout 設(shè)置的不合理，就會導(dǎo)致響應(yīng)碼 status 是 200，但 response里卻沒有數(shù)據(jù)，這種情況就是服務(wù)器正確響應(yīng)了請求，但數(shù)據(jù)的下載被超時中斷了。

為了保證用戶信息的安全，瀏覽器引入了同源策略，對腳本請求做了限制，不允許 Ajax 跨域請求服務(wù)器 ，只允許請求和當(dāng)前地址同域的服務(wù)器資源。但不限制 HTML 標(biāo)簽發(fā)送跨域請求，比如 script、img、a 標(biāo)簽等，因此可以利用標(biāo)簽跨域能力來實現(xiàn)跨域請求，這就是 JSONP 能夠跨域的原理。

JSONP 雖然可以解決跨域問題，但只能發(fā)送 GET 請求，并且沒有有效的錯誤捕獲機(jī)制 。為了解決這個問題，W3C 在 XMLHttpRequest Level2 中提出了 CORS 規(guī)范，即 “跨域資源共享”。它不是一個新的 API，而是一個標(biāo)準(zhǔn)規(guī)范 。當(dāng)瀏覽器發(fā)現(xiàn)該請求需要跨域時，就會自動在頭信息中添加一個 Origin 字段，用以說明本次請求來自哪個源。服務(wù)器根據(jù)這個值，決定是否同意這次請求。關(guān)于 CORS 的詳細(xì)介紹請參考：《跨域資源共享 CORS 詳解 》

隨著移動端的快速發(fā)展，Web 技術(shù)的應(yīng)用場景正在變得越來越復(fù)雜，“關(guān)注點分離” 原則在系統(tǒng)設(shè)計層面就顯得越來越重要，而 XMLHttpRequest 是 Ajax 最古老的一個接口，因而不太符合現(xiàn)代化的系統(tǒng)設(shè)計理念。因此，瀏覽器提供了一個新的 Ajax 接口，即 Fetch，F(xiàn)etch 是基于 ES6 的 Promise 思想設(shè)計的，更符合關(guān)注點分離原則。關(guān)于 Fetch 的更多介紹請參考：《傳統(tǒng) Ajax 已死，F(xiàn)etch 永生》

8、模塊化

歷史上，JavaScript 規(guī)范一直沒有模塊（Module）體系，即無法將一個大程序拆分成互相依賴的小文件，再用簡單的方法拼裝起來。在 ES6 之前，為了實現(xiàn) JS 模塊化編程，社區(qū)制定了一些模塊加載方案，最主要有 CMD 和 AMD 兩種，分別以 commonjs 和 requirejs 為代表。ES6 在語言標(biāo)準(zhǔn)的層面上，實現(xiàn)了模塊化編程，其設(shè)計思想是，盡量靜態(tài)化，使得編譯時就能確定模塊的依賴關(guān)系，即編譯時加載，而 CMD 和 AMD 是在運(yùn)行時確定依賴關(guān)系，即運(yùn)行時加載。關(guān)于 ES6 模塊化請參考：http://www.tjdsmy.cn/#docs/module

9、Node.js

Node.js 是一個基于 Chrome V8 引擎的 JavaScript 運(yùn)行環(huán)境，它的運(yùn)行不依賴于瀏覽器作為宿主環(huán)境，而是和服務(wù)端程序一樣可以獨立的運(yùn)行，這使得 JavaScript 編程第一次從客戶端被帶到了服務(wù)端，Node.js 在服務(wù)端的優(yōu)勢是，它采用單線程和異步 I/O 模型，實現(xiàn)了一個高并發(fā)、高性能的運(yùn)行時環(huán)境。相比傳統(tǒng)的多線程模型，Node.js 實現(xiàn)簡單，并且可以減少資源開銷。關(guān)于 Node.js單線程模型請參考：《Node.js 事件循環(huán)機(jī)制》

10、ES6

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

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

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

新增模塊化機(jī)制，這是 JavaScript 走向規(guī)范比較重要的一步，讓前端更方便的實現(xiàn)工程化。

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

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

新增 Promise 機(jī)制，解決異步回調(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è)置任何樣式的情況下，也會有一個默認(rèn)的 CSS 樣式，而不同內(nèi)核瀏覽器對于這個默認(rèn)值的設(shè)置則不盡相同，這樣可能會導(dǎo)致同一套代碼在不同瀏覽器上的顯示效果不一致，而出現(xiàn)兼容性問題。因此，在初始化時，需要對常用標(biāo)簽的樣式進(jìn)行初始化，使其默認(rèn)樣式統(tǒng)一，這就是 CSS Reset ，即 CSS 樣式重置，比如：

就是最簡單 CSS Reset。關(guān)于 CSS 重置請參考：http://www.tjdsmy.cn/cube/doc/neat

3、盒子布局

盒子模型是CSS比較重要的一個概念，也是CSS 布局的基石。常見的盒子模型有塊級盒子(block)和行內(nèi)盒子(inline-block)，與盒子相關(guān)的幾個屬性有：margin、border、padding和content 等，這些屬性的作用是設(shè)置盒子與盒子之間的關(guān)系以及盒子與內(nèi)容之間的關(guān)系，而 box-sizing 屬性會影響盒子大小的計算方式。

需要注意的是：

只有普通文檔流中塊級盒子的垂直外邊距才會發(fā)生合并，而具有 BFC 特性盒子的外邊距不會合并。

4、浮動布局

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

5、定位布局

設(shè)置元素的 position 屬性值為 relative/absolute/fixed，就可以使該元素脫離文檔流，并以某種參照坐標(biāo)進(jìn)行偏移。其中，releave 是相對定位，它以自己原來的位置進(jìn)行偏移，偏移后，原來的空間不會被其他元素占用；absolute 是絕對定位，它以離自己最近的定位父容器作為參照進(jìn)行偏移；為了對某個元素進(jìn)行定位，常用的方式就是設(shè)置父容器的 poistion:relative，因為相對定位元素在不設(shè)置 top 和 left 值時，不會對元素位置產(chǎn)生影響；fixed 即固定定位，它則以瀏覽器窗口為參照物，PC網(wǎng)頁底部懸停的banner一般都可以通過fixed定位來實現(xiàn)，但fixed屬性在移動端有兼容性問題，因此不推薦使用，可替代的方案是：絕對定位+內(nèi)部滾動。

6、彈性布局

彈性布局即 Flex 布局，定義了 flex 的容器一個可伸縮容器，首先容器本身會根據(jù)容器中的元素動態(tài)設(shè)置自身大小；然后當(dāng)Flex容器被應(yīng)用一個大小時（width和height），將會自動調(diào)整容器中的元素適應(yīng)新大小。Flex容器也可以設(shè)置伸縮比例和固定寬度，還可以設(shè)置容器中元素的排列方向（橫向和縱向）和是否支持元素的自動換行。有了這個神器，做頁面布局的可以方便很多了。注意，設(shè)為Flex 布局以后，子元素的 float、clear、inline-block 和 vertical-align 屬性將失效。關(guān)于 flexbox 請參考：http://www.tjdsmy.cn/css3/a-visual-guide-to-css3-flexbox-properties.html

7、CSS3 動畫

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

animation 需要設(shè)置一個 @keyframes，來定義元素以哪種形式進(jìn)行變換， 然后再通過動畫函數(shù)讓這種變換平滑的進(jìn)行，從而達(dá)到動畫效果，動畫可以被設(shè)置為永久循環(huán)演示。設(shè)置 animation-play-state:paused 可以暫停動畫，設(shè)置 animation-fill-mode:forwards 可以讓動畫完成后定格在最后一幀。

另外，還可以通過JS 監(jiān)聽 animation 的“開始”、“結(jié)束” 和 “重復(fù)播放” 狀態(tài)，分別對應(yīng)三個事件，即 animationStart、animationEnd、animationIteration 。需要注意的是：

當(dāng)播放次數(shù)設(shè)置為1時，不會觸發(fā) animationIteration 。

和 transition相比，animation 設(shè)置動畫效果更靈活更豐富，二者還有一個區(qū)別是：transition 只能通過主動改變元素的 css 值才能觸發(fā)動畫效果，而 animation 一旦被應(yīng)用，就開始執(zhí)行動畫。

另外，HTML5 還新增了一個動畫API，即 requestAnimationFrame，它通過JS來調(diào)用，并按照屏幕的繪制頻率來改變元素的CSS屬性，從而達(dá)到動畫效果，關(guān)于這個API的介紹請參考：《requestAnimationFrame 知多少？》

8、BFC

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

根元素，即 HTML 元素

float 的值不為 none

overflow 的值不為 visible

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

position 的值為 absolute 或 fixed

9、Sprite，Iconfont，font-face

對于大型站點，為了減少 http 請求的次數(shù)，一般會將常用的小圖標(biāo)排到一個大圖中，頁面加載時只需請求一次網(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ò)請求、其大小不受屏幕分辨率的影響，并且可以任意修改圖標(biāo)的顏色。

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

10、CSS HACK

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

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

三、HTML 篇

1、BOM 

BOM 是 Browser Object Model 的縮寫，即瀏覽器對象模型，當(dāng)一個瀏覽器頁面初始化時，會在內(nèi)存創(chuàng)建一個全局的對象，用以描述當(dāng)前窗口的屬性和狀態(tài)，這個全局對象被稱為瀏覽器對象模型，即BOM。BOM的核心對象就是 window，window 對象也是BOM的頂級對象，其包含了瀏覽器的六個核心模塊：

document - 即文檔對象，渲染引擎在解析HTML代碼時，會為每一個元素生成對應(yīng)的DOM對象，由于元素之間有層級關(guān)系，因此整個HTML代碼解析完以后，會生成一個由不同節(jié)點組成的樹形結(jié)構(gòu)，俗稱DOM樹，document 用于描述DOM樹的狀態(tài)和屬性，并提供了很多操作DOM的API。

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

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

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

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

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

2、DOM 系統(tǒng)

DOM 是 Document Object Model 的縮寫，即 文檔對象模型，是所有瀏覽器公共遵守的標(biāo)準(zhǔn)，DOM 將HTML和XML文檔映射成一個由不同節(jié)點組成的樹型結(jié)構(gòu)，俗稱DOM樹。其核心對象是document，用于描述DOM樹的狀態(tài)和屬性，并提供對應(yīng)的DOM操作API。隨著歷史的發(fā)展，DOM 被劃分為1級、2級、3級，共3個級別：

1級DOM - 在1998年10月份成為W3C的提議，由 DOM 核心與 DOM HTML 兩個模塊組成。DOM核心能映射以XML為基礎(chǔ)的文檔結(jié)構(gòu)，允許獲取和操作文檔的任意部分。DOM HTML通過添加HTML專用的對象與函數(shù)對DOM核心進(jìn)行了擴(kuò)展。

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

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

瀏覽器對不同級別DOM的支持情況如下所示：

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

3、事件系統(tǒng)

事件是用戶與頁面交互的基礎(chǔ)，到目前為止，DOM事件從PC端的 鼠標(biāo)事件(mouse) 發(fā)展到了 移動端的 觸摸事件(touch) 和 手勢事件(guesture)，touch事件描述了手指在屏幕操作的每一個細(xì)節(jié)，guesture 則是描述多手指操作時更為復(fù)雜的情況，總結(jié)如下：

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

手指滑動時，觸發(fā)touchmove

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

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

立即觸發(fā) gesturechange 

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

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

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

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

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

更多關(guān)于手勢事件的介紹請參考：http://www.tjdsmy.cn/s/blog_601b97ee0101azty.html

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

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

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

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

利用事件冒泡原理可以實現(xiàn) “事件委托”。

所謂事件委托，就是在父元素上添加事件監(jiān)聽器，用以監(jiān)聽和處理子元素的事件，避免重復(fù)為子元素綁定相同的事件。當(dāng)目標(biāo)元素的事件被觸發(fā)以后，這個事件就從目標(biāo)元素開始，向最外層元素傳遞，最終冒泡到父元素上，父元素再通過 event.target 獲取到這個目標(biāo)元素，這樣做的好處是，父元素只需綁定一個事件監(jiān)聽，就可以對所有子元素的事件進(jìn)行處理了，從而減少了不必要的事件綁定，對頁面性能有一定的提升。

4、HTML 渲染流程

渲染引擎一開始會從網(wǎng)絡(luò)層獲取請求文檔的內(nèi)容，內(nèi)容的大小一般限制在 8000 個塊以內(nèi)。

然后進(jìn)行如下所示的基本流程： 

HTML Parser 解析 HTML 文檔，并將各標(biāo)記逐個轉(zhuǎn)化為 DOM 節(jié)點，生成 “DOM樹”。

CSS Parser 解析外部 CSS 文件以及樣式元素中的樣式數(shù)據(jù)，生成 “CSSOM樹”。

“DOM樹” 和 “CSSOM樹” 通過 “附著” 將創(chuàng)建另一個樹結(jié)構(gòu)：“渲染樹”。

渲染樹包含多個帶有視覺屬性（如顏色和尺寸）的矩形，這些矩形的排列順序就是它們將在屏幕上顯示的順序。

渲染樹構(gòu)建完畢之后，進(jìn)入“布局” 處理階段，也就是為每個節(jié)點分配一個應(yīng)出現(xiàn)在屏幕上的確切坐標(biāo)。

下一個階段是 “繪制”，渲染引擎會遍歷渲染樹，由用戶界面后端層將每個節(jié)點繪制出來。

需要注意的是：

這是一個漸進(jìn)的過程。為達(dá)到更好的用戶體驗，呈現(xiàn)引擎會力求盡快將內(nèi)容顯示在屏幕上。它不必等到整個 HTML 文檔解析完畢之后，就會開始構(gòu)建呈現(xiàn)樹和設(shè)置布局。在不斷接收和處理來自網(wǎng)絡(luò)的其余內(nèi)容的同時，呈現(xiàn)引擎會將部分內(nèi)容解析并顯示出來。

5、重繪與回流

當(dāng)渲染樹中的一部分(或全部)因為元素的規(guī)模尺寸、布局、隱藏等改變而需要重新構(gòu)建，就稱為 “回流”。

當(dāng)渲染樹中的一些元素需要更新屬性，而這些屬性只是影響元素的外觀，風(fēng)格，而不會影響布局，就稱為 “重繪”。

回流必將引起重繪，而重繪不一定會引起回流。

引起重繪和回流的操作如下：

添加、刪除元素（回流+重繪）

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

移動元素，比如改變 top、left 的值，或者移動元素到另外一個父元素中。（重繪+回流）

對 style 的操作（對不同的屬性操作，影響不一樣）

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

注意問題：

transform 操作不會引起重繪和回流，是一種高效率的渲染。這是因為transform屬于合成屬性，對合成屬性進(jìn)行transition/animation 動畫時將會創(chuàng)建一個合成層，這使得動畫元素在一個獨立的層中進(jìn)行渲染，當(dāng)元素的內(nèi)容沒有發(fā)生改變，就沒必要進(jìn)行重繪，瀏覽器會通過重新復(fù)合來創(chuàng)建動畫幀。

6、本地存儲

本地存儲最原始的方式就是 cookie,cookie 是存放在本地瀏覽器的一段文本，數(shù)據(jù)以鍵值對的形式保存，可以設(shè)置過期時間。但是 cookie 不適合大量數(shù)據(jù)的存儲，因為每請求一次頁面，cookie 都會發(fā)送給服務(wù)器，這使得 cookie 速度很慢而且效率也不高。因此cookie的大小被限制為4k左右(不同瀏覽器可能不同,分HOST)，如下所示：

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

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

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

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

html5 提供了兩種在客戶端存儲數(shù)據(jù)的新方法：localStorage 和 sessionStorage, 它們都是以 key/value 的形式來存儲數(shù)據(jù)，前者是永久存儲，后者的存儲期限僅限于瀏覽器會話(session)，即當(dāng)瀏覽器窗口關(guān)閉后，sessionStorage中的數(shù)據(jù)被清除。

localStorage 的存儲空間大約5M左右(不同瀏覽器可能不同，分 HOST)，這個相當(dāng)于一個5M大小的前端數(shù)據(jù)庫，相比于cookie，可以節(jié)約帶寬，但localStorage在瀏覽器隱私模式下是不可讀取的，當(dāng)存儲數(shù)據(jù)超過了localStorage 的存儲空間后會拋出異常。

此外，H5還提供了 websql 和 indexedDB，允許前端以關(guān)系型數(shù)據(jù)庫的方式來存儲本地數(shù)據(jù)，相對來說，這個功能目前應(yīng)用的場景比較少，此處不作介紹。

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

瀏覽器緩存機(jī)制是指通過 HTTP 協(xié)議頭里的 Cache-Control (或 Expires) 和 Last-Modified (或 Etag) 等字段來控制文件緩存的機(jī)制。

Cache-Control 用于控制文件在本地緩存有效時長。最常見的，比如服務(wù)器回包：Cache-Control:max-age=600 表示文件在本地應(yīng)該緩存，且有效時長是600秒 (從發(fā)出請求算起)。在接下來600秒內(nèi)，如果有請求這個資源，瀏覽器不會發(fā)出 HTTP 請求，而是直接使用本地緩存的文件。

Last-Modified 是標(biāo)識文件在服務(wù)器上的最新更新時間。下次請求時，如果文件緩存過期，瀏覽器通過 If-Modified-Since 字段帶上這個時間，發(fā)送給服務(wù)器，由服務(wù)器比較時間戳來判斷文件是否有修改。如果沒有修改，服務(wù)器返回304告訴瀏覽器繼續(xù)使用緩存；如果有修改，則返回200，同時返回最新的文件。

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

Cache-Control 還有一個同功能的字段：Expires。Expires 的值一個絕對的時間點，如：Expires: Thu, 10 Nov 2015 08:45:11 GMT，表示在這個時間點之前，緩存都是有效的。

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

Etag 也是和 Last-Modified 一樣，對文件進(jìn)行標(biāo)識的字段。不同的是，Etag 的取值是一個對文件進(jìn)行標(biāo)識的特征字串。在向服務(wù)器查詢文件是否有更新時，瀏覽器通過 If-None-Match 字段把特征字串發(fā)送給服務(wù)器，由服務(wù)器和文件最新特征字串進(jìn)行匹配，來判斷文件是否有更新。沒有更新回包304，有更新回包200。Etag 和 Last-Modified 可根據(jù)需求使用一個或兩個同時使用。兩個同時使用時，只要滿足基中一個條件，就認(rèn)為文件沒有更新。

瀏覽緩存的基本框架如下圖所示：

8、History

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

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

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

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

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

pushState 是往 history 對象里添加一個新的歷史記錄。

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

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

onpopstate 和 onhashchange 的區(qū)別：

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

9、HTML5 離線緩存

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

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

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

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

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

離線緩存為應(yīng)用帶來三個優(yōu)勢：

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

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

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

10、Web語義化與SEO

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

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

搜索引擎通過爬蟲技術(shù)獲取的頁面就是由一堆 html 標(biāo)簽組成的代碼，人可以通過可視化的方式來判斷頁面上哪些內(nèi)容是重點，而機(jī)器做不到。但搜索引擎會根據(jù)標(biāo)簽的含義來判斷內(nèi)容的權(quán)重，因此，在合適的位置使用恰當(dāng)?shù)臉?biāo)簽，使整個頁面的語義明確，結(jié)構(gòu)清晰，搜索引擎才能正確識別頁面中的重要內(nèi)容，并予以較高的權(quán)值。比如h1~h6這幾個標(biāo)簽在SEO中的權(quán)值非常高，用它們作頁面的標(biāo)題就是一個簡單的SEO優(yōu)化。

宏觀篇

一、JavaScript基礎(chǔ)

變量和類型

1. JavaScript規(guī)定了幾種語言類型

2. JavaScript對象的底層數(shù)據(jù)結(jié)構(gòu)是什么

3. Symbol類型在實際開發(fā)中的應(yīng)用、可手動實現(xiàn)一個簡單的 Symbol

4. JavaScript中的變量在內(nèi)存中的具體存儲形式

5.基本類型對應(yīng)的內(nèi)置對象，以及他們之間的裝箱拆箱操作

6.理解值類型和引用類型

7. null和 undefined的區(qū)別

8.至少可以說出三種判斷 JavaScript數(shù)據(jù)類型的方式，以及他們的優(yōu)缺點，如何準(zhǔn)確的判斷數(shù)組類型

9.可能發(fā)生隱式類型轉(zhuǎn)換的場景以及轉(zhuǎn)換原則，應(yīng)如何避免或巧妙應(yīng)用

10.出現(xiàn)小數(shù)精度丟失的原因， JavaScript可以存儲的最大數(shù)字、最大安全數(shù)字， JavaScript處理大數(shù)字的方法、避免精度丟失的方法

原型和原型鏈

1.理解原型設(shè)計模式以及 JavaScript中的原型規(guī)則

2. instanceof的底層實現(xiàn)原理，手動實現(xiàn)一個 instanceof

4.實現(xiàn)繼承的幾種方式以及他們的優(yōu)缺點

5.至少說出一種開源項目(如 Node)中應(yīng)用原型繼承的案例

6.可以描述 new一個對象的詳細(xì)過程，手動實現(xiàn)一個 new操作符

7.理解 es6class構(gòu)造以及繼承的底層實現(xiàn)原理

作用域和閉包

1.理解詞法作用域和動態(tài)作用域

2.理解 JavaScript的作用域和作用域鏈

3.理解 JavaScript的執(zhí)行上下文棧，可以應(yīng)用堆棧信息快速定位問題

4. this的原理以及幾種不同使用場景的取值

5.閉包的實現(xiàn)原理和作用，可以列舉幾個開發(fā)中閉包的實際應(yīng)用

6.理解堆棧溢出和內(nèi)存泄漏的原理，如何防止

7.如何處理循環(huán)的異步操作

8.理解模塊化解決的實際問題，可列舉幾個模塊化方案并理解其中原理

執(zhí)行機(jī)制

1.為何 try里面放 return， finally還會執(zhí)行，理解其內(nèi)部機(jī)制

2. JavaScript如何實現(xiàn)異步編程，可以詳細(xì)描述 EventLoop機(jī)制

3.宏任務(wù)和微任務(wù)分別有哪些

4.可以快速分析一個復(fù)雜的異步嵌套邏輯，并掌握分析方法

5.使用 Promise實現(xiàn)串行

6. Node與瀏覽器 EventLoop的差異

7.如何在保證頁面運(yùn)行流暢的情況下處理海量數(shù)據(jù)

語法和API

1.理解 ECMAScript和 JavaScript的關(guān)系

2.熟練運(yùn)用 es5、 es6提供的語法規(guī)范，

3.熟練掌握 JavaScript提供的全局對象（例如 Date、 Math）、全局函數(shù)（例如 decodeURI、 isNaN）、全局屬性（例如 Infinity、 undefined）

4.熟練應(yīng)用 map、 reduce、 filter 等高階函數(shù)解決問題

5. setInterval需要注意的點，使用 settimeout實現(xiàn) setInterval

6. JavaScript提供的正則表達(dá)式 API、可以使用正則表達(dá)式（郵箱校驗、 URL解析、去重等）解決常見問題

7. JavaScript異常處理的方式，統(tǒng)一的異常處理方案

二、HTML和CSS

HTML

1.從規(guī)范的角度理解 HTML，從分類和語義的角度使用標(biāo)簽

2.常用頁面標(biāo)簽的默認(rèn)樣式、自帶屬性、不同瀏覽器的差異、處理瀏覽器兼容問題的方式

3.元信息類標(biāo)簽( head、 title、 meta)的使用目的和配置方法

4. HTML5離線緩存原理

5.可以使用 CanvasAPI、 SVG等繪制高性能的動畫

CSS

1. CSS盒模型，在不同瀏覽器的差異

2. CSS所有選擇器及其優(yōu)先級、使用場景，哪些可以繼承，如何運(yùn)用 at規(guī)則

3. CSS偽類和偽元素有哪些，它們的區(qū)別和實際應(yīng)用

4. HTML文檔流的排版規(guī)則， CSS幾種定位的規(guī)則、定位參照物、對文檔流的影響，如何選擇最好的定位方式，雪碧圖實現(xiàn)原理

5.水平垂直居中的方案、可以實現(xiàn) 6種以上并對比它們的優(yōu)缺點

6. BFC實現(xiàn)原理，可以解決的問題，如何創(chuàng)建 BFC7.可使用 CSS函數(shù)復(fù)用代碼，實現(xiàn)特殊效果

8. PostCSS、 Sass、 Less的異同，以及使用配置，至少掌握一種

9. CSS模塊化方案、如何配置按需加載、如何防止 CSS阻塞渲染

10.熟練使用 CSS實現(xiàn)常見動畫，如漸變、移動、旋轉(zhuǎn)、縮放等等

11. CSS瀏覽器兼容性寫法，了解不同 API在不同瀏覽器下的兼容性情況

12.掌握一套完整的響應(yīng)式布局方案

手寫

1.手寫圖片瀑布流效果

2.使用 CSS繪制幾何圖形（圓形、三角形、扇形、菱形等）

3.使用純 CSS實現(xiàn)曲線運(yùn)動（貝塞爾曲線）

4.實現(xiàn)常用布局（三欄、圣杯、雙飛翼、吸頂），可是說出多種方式并理解其優(yōu)缺點

三、計算機(jī)基礎(chǔ)

關(guān)于編譯原理，不需要理解非常深入，但是最基本的原理和概念一定要懂，這對于學(xué)習(xí)一門編程語言非常重要

編譯原理

1.理解代碼到底是什么，計算機(jī)如何將代碼轉(zhuǎn)換為可以運(yùn)行的目標(biāo)程序

2.正則表達(dá)式的匹配原理和性能優(yōu)化

3.如何將 JavaScript代碼解析成抽象語法樹( AST)

4. base64的編碼原理

5.幾種進(jìn)制的相互轉(zhuǎn)換計算方法，在 JavaScript中如何表示和轉(zhuǎn)換

網(wǎng)絡(luò)協(xié)議

1.理解什么是協(xié)議，了解 TCP/IP網(wǎng)絡(luò)協(xié)議族的構(gòu)成，每層協(xié)議在應(yīng)用程序中發(fā)揮的作用

2.三次握手和四次揮手詳細(xì)原理，為什么要使用這種機(jī)制

3.有哪些協(xié)議是可靠， TCP有哪些手段保證可靠交付

4. DNS的作用、 DNS解析的詳細(xì)過程， DNS優(yōu)化原理

5. CDN的作用和原理

6. HTTP請求報文和響應(yīng)報文的具體組成，能理解常見請求頭的含義，有幾種請求方式，區(qū)別是什么

7. HTTP所有狀態(tài)碼的具體含義，看到異常狀態(tài)碼能快速定位問題

8. HTTP1.1、 HTTP2.0帶來的改變

9. HTTPS的加密原理，如何開啟 HTTPS，如何劫持 HTTPS請求

10.理解 WebSocket協(xié)議的底層原理、與 HTTP的區(qū)別

設(shè)計模式

1.熟練使用前端常用的設(shè)計模式編寫代碼，如單例模式、裝飾器模式、代理模式等

2.發(fā)布訂閱模式和觀察者模式的異同以及實際應(yīng)用

3.可以說出幾種設(shè)計模式在開發(fā)中的實際應(yīng)用，理解框架源碼中對設(shè)計模式的應(yīng)用

四、數(shù)據(jù)結(jié)構(gòu)和算法

據(jù)我了解的大部分前端對這部分知識有些欠缺，甚至抵觸，但是，如果突破更高的天花板，這部分知識是必不可少的，而且我親身經(jīng)歷——非常有用！

JavaScript編碼能力

1.多種方式實現(xiàn)數(shù)組去重、扁平化、對比優(yōu)缺點

2.多種方式實現(xiàn)深拷貝、對比優(yōu)缺點

3.手寫函數(shù)柯里化工具函數(shù)、并理解其應(yīng)用場景和優(yōu)勢

4.手寫防抖和節(jié)流工具函數(shù)、并理解其內(nèi)部原理和應(yīng)用場景

5.實現(xiàn)一個 sleep函數(shù)

手動實現(xiàn)前端輪子

1.手動實現(xiàn) call、apply、bind

2.手動實現(xiàn)符合 Promise/A+規(guī)范的 Promise、手動實現(xiàn) asyncawait

3.手寫一個 EventEmitter實現(xiàn)事件發(fā)布、訂閱

4.可以說出兩種實現(xiàn)雙向綁定的方案、可以手動實現(xiàn)

5.手寫 JSON.stringify、 JSON.parse

6.手寫一個模版引擎，并能解釋其中原理

7.手寫 懶加載、 下拉刷新、 上拉加載、 預(yù)加載等效果

數(shù)據(jù)結(jié)構(gòu)

1.理解常見數(shù)據(jù)結(jié)構(gòu)的特點，以及他們在不同場景下使用的優(yōu)缺點

2.理解 數(shù)組、 字符串的存儲原理，并熟練應(yīng)用他們解決問題

3.理解 二叉樹、 棧、 隊列、 哈希表的基本結(jié)構(gòu)和特點，并可以應(yīng)用它解決問題

4.了解 圖、 堆的基本結(jié)構(gòu)和使用場景

算法

1.可計算一個算法的時間復(fù)雜度和空間復(fù)雜度，可估計業(yè)務(wù)邏輯代碼的耗時和內(nèi)存消耗

2.至少理解五種排序算法的實現(xiàn)原理、應(yīng)用場景、優(yōu)缺點，可快速說出時間、空間復(fù)雜度

3.了解遞歸和循環(huán)的優(yōu)缺點、應(yīng)用場景、并可在開發(fā)中熟練應(yīng)用

4.可應(yīng)用 回溯算法、 貪心算法、 分治算法、 動態(tài)規(guī)劃等解決復(fù)雜問題

5.前端處理海量數(shù)據(jù)的算法方案

五、運(yùn)行環(huán)境

我們需要理清語言和環(huán)境的關(guān)系：

ECMAScript描述了 JavaScript語言的語法和基本對象規(guī)范

瀏覽器作為 JavaScript的一種運(yùn)行環(huán)境，為它提供了：文檔對象模型（ DOM），描述處理網(wǎng)頁內(nèi)容的方法和接口、瀏覽器對象模型（ BOM），描述與瀏覽器進(jìn)行交互的方法和接口

Node也是 JavaScript的一種運(yùn)行環(huán)境，為它提供了操作 I/O、網(wǎng)絡(luò)等 API

瀏覽器API

1.瀏覽器提供的符合 W3C標(biāo)準(zhǔn)的 DOM操作 API、瀏覽器差異、兼容性

2.瀏覽器提供的瀏覽器對象模型 ( BOM)提供的所有全局 API、瀏覽器差異、兼容性

3.大量 DOM操作、海量數(shù)據(jù)的性能優(yōu)化(合并操作、 Diff、 requestAnimationFrame等)

4.瀏覽器海量數(shù)據(jù)存儲、操作性能優(yōu)化

5. DOM事件流的具體實現(xiàn)機(jī)制、不同瀏覽器的差異、事件代理

6.前端發(fā)起網(wǎng)絡(luò)請求的幾種方式及其底層實現(xiàn)、可以手寫原生 ajax、 fetch、可以熟練使用第三方庫

7.瀏覽器的同源策略，如何避免同源策略，幾種方式的異同點以及如何選型

8.瀏覽器提供的幾種存儲機(jī)制、優(yōu)缺點、開發(fā)中正確的選擇

9.瀏覽器跨標(biāo)簽通信

瀏覽器原理

1.各瀏覽器使用的 JavaScript引擎以及它們的異同點、如何在代碼中進(jìn)行區(qū)分

2.請求數(shù)據(jù)到請求結(jié)束與服務(wù)器進(jìn)行了幾次交互

3.可詳細(xì)描述瀏覽器從輸入 URL到頁面展現(xiàn)的詳細(xì)過程

4.瀏覽器解析 HTML代碼的原理，以及構(gòu)建 DOM樹的流程

5.瀏覽器如何解析 CSS規(guī)則，并將其應(yīng)用到 DOM樹上

6.瀏覽器如何將解析好的帶有樣式的 DOM樹進(jìn)行繪制

7.瀏覽器的運(yùn)行機(jī)制，如何配置資源異步同步加載

8.瀏覽器回流與重繪的底層原理，引發(fā)原因，如何有效避免

9.瀏覽器的垃圾回收機(jī)制，如何避免內(nèi)存泄漏

10.瀏覽器采用的緩存方案，如何選擇和控制合適的緩存方案

Node

1.理解 Node在應(yīng)用程序中的作用，可以使用 Node搭建前端運(yùn)行環(huán)境、使用 Node操作文件、操作數(shù)據(jù)庫等等

2.掌握一種 Node開發(fā)框架，如 Express， Express和 Koa的區(qū)別

3.熟練使用 Node提供的 API如 Path、 Http、 ChildProcess等并理解其實現(xiàn)原理

4. Node的底層運(yùn)行原理、和瀏覽器的異同

5. Node事件驅(qū)動、非阻塞機(jī)制的實現(xiàn)原理

六、框架和類庫

輪子層出不窮，從原理上理解才是正道

TypeScript

1.理解 泛型、 接口等面向?qū)ο蟮南嚓P(guān)概念， TypeScript對面向?qū)ο罄砟畹膶崿F(xiàn)

2.理解使用 TypeScript的好處，掌握 TypeScript基礎(chǔ)語法

3. TypeScript的規(guī)則檢測原理

4.可以在 React、 Vue等框架中使用 TypeScript進(jìn)行開發(fā)

React

1. React和 vue選型和優(yōu)缺點、核心架構(gòu)的區(qū)別

2. React中 setState的執(zhí)行機(jī)制，如何有效的管理狀態(tài)

3. React的事件底層實現(xiàn)機(jī)制

4. React的虛擬 DOM和 Diff算法的內(nèi)部實現(xiàn)

5. React的 Fiber工作原理，解決了什么問題

6. ReactRouter和 VueRouter的底層實現(xiàn)原理、動態(tài)加載實現(xiàn)原理

7.可熟練應(yīng)用 ReactAPI、生命周期等，可應(yīng)用 HOC、 render props、 Hooks等高階用法解決問題

8.基于 React的特性和原理，可以手動實現(xiàn)一個簡單的 React

Vue

1.熟練使用 Vue的 API、生命周期、鉤子函數(shù)

2. MVVM框架設(shè)計理念

3. Vue雙向綁定實現(xiàn)原理、 Diff算法的內(nèi)部實現(xiàn)

4. Vue的事件機(jī)制

5.從 template轉(zhuǎn)換成真實 DOM的實現(xiàn)機(jī)制

多端開發(fā)

1.單頁面應(yīng)用（ SPA）的原理和優(yōu)缺點，掌握一種快速開發(fā) SPA的方案

2.理解 Viewport、 em、 rem的原理和用法，分辨率、 px、 ppi、 dpi、 dp的區(qū)別和實際應(yīng)用

3.移動端頁面適配解決方案、不同機(jī)型適配方案

4.掌握一種 JavaScript移動客戶端開發(fā)技術(shù)，如 ReactNative：可以搭建 ReactNative開發(fā)環(huán)境，熟練進(jìn)行開發(fā)，可理解 ReactNative的運(yùn)作原理，不同端適配

5.掌握一種 JavaScript PC客戶端開發(fā)技術(shù)，如 Electron：可搭建 Electron開發(fā)環(huán)境，熟練進(jìn)行開發(fā)，可理解 Electron的運(yùn)作原理

6.掌握一種小程序開發(fā)框架或原生小程序開發(fā)

7.理解多端框架的內(nèi)部實現(xiàn)原理，至少了解一個多端框架的使用

數(shù)據(jù)流管理

1.掌握 React和 Vue傳統(tǒng)的跨組件通信方案，對比采用數(shù)據(jù)流管理框架的異同

2.熟練使用 Redux管理數(shù)據(jù)流，并理解其實現(xiàn)原理，中間件實現(xiàn)原理

3.熟練使用 Mobx管理數(shù)據(jù)流，并理解其實現(xiàn)原理，相比 Redux有什么優(yōu)勢

4.熟練使用 Vuex管理數(shù)據(jù)流，并理解其實現(xiàn)原理

5.以上數(shù)據(jù)流方案的異同和優(yōu)缺點，不情況下的技術(shù)選型

實用庫

1.至少掌握一種 UI組件框架，如 antd design，理解其設(shè)計理念、底層實現(xiàn)

2.掌握一種圖表繪制框架，如 Echart，理解其設(shè)計理念、底層實現(xiàn)，可以自己實現(xiàn)圖表

3.掌握一種 GIS開發(fā)框架，如百度地圖 API

4.掌握一種可視化開發(fā)框架，如 Three.js、 D3

5.工具函數(shù)庫，如 lodash、 underscore、 moment等，理解使用的工具類或工具函數(shù)的具體實現(xiàn)原理

開發(fā)和調(diào)試

1.熟練使用各瀏覽器提供的調(diào)試工具

2.熟練使用一種代理工具實現(xiàn)請求代理、抓包，如 charls

3.可以使用 Android、 IOS模擬器進(jìn)行調(diào)試，并掌握一種真機(jī)調(diào)試方案

4.了解 Vue、 React等框架調(diào)試工具的使用

七、前端工程

前端工程化：以工程化方法和工具提高開發(fā)生產(chǎn)效率、降低維護(hù)難度

項目構(gòu)建

1.理解 npm、 yarn依賴包管理的原理，兩者的區(qū)別

2.可以使用 npm運(yùn)行自定義腳本

3.理解 Babel、 ESLint、 webpack等工具在項目中承擔(dān)的作用

4. ESLint規(guī)則檢測原理，常用的 ESLint配置

5. Babel的核心原理，可以自己編寫一個 Babel插件

6.可以配置一種前端代碼兼容方案，如 Polyfill

7. Webpack的編譯原理、構(gòu)建流程、熱更新原理， chunk、 bundle和 module的區(qū)別和應(yīng)用

8.可熟練配置已有的 loaders和 plugins解決問題，可以自己編寫 loaders和 plugins

nginx

1.正向代理與反向代理的特點和實例

2.可手動搭建一個簡單的 nginx服務(wù)器、

3.熟練應(yīng)用常用的 nginx內(nèi)置變量，掌握常用的匹配規(guī)則寫法

4.可以用 nginx實現(xiàn)請求過濾、配置 gzip、負(fù)載均衡等，并能解釋其內(nèi)部原理

開發(fā)提速

1.熟練掌握一種接口管理、接口 mock工具的使用，如 yapi

2.掌握一種高效的日志埋點方案，可快速使用日志查詢工具定位線上問題

3.理解 TDD與 BDD模式，至少會使用一種前端單元測試框架

版本控制

1.理解 Git的核心原理、工作流程、和 SVN的區(qū)別

2.熟練使用常規(guī)的 Git命令、 git rebase、 git stash等進(jìn)階命令

3.可以快速解決 線上分支回滾、 線上分支錯誤合并等復(fù)雜問題

持續(xù)集成

1.理解 CI/CD技術(shù)的意義，至少熟練掌握一種 CI/CD工具的使用，如 Jenkins

2.可以獨自完成架構(gòu)設(shè)計、技術(shù)選型、環(huán)境搭建、全流程開發(fā)、部署上線等一套完整的開發(fā)流程（包括 Web應(yīng)用、移動客戶端應(yīng)用、 PC客戶端應(yīng)用、小程序、 H5等等）

八、項目和業(yè)務(wù)

后端技能

1.了解后端的開發(fā)方式，在應(yīng)用程序中的作用，至少會使用一種后端語言

2.掌握數(shù)據(jù)最終在數(shù)據(jù)庫中是如何落地存儲的，能看懂表結(jié)構(gòu)設(shè)計、表之間的關(guān)聯(lián)，至少會使用一種數(shù)據(jù)庫

性能優(yōu)化

1.了解前端性能衡量指標(biāo)、性能監(jiān)控要點，掌握一種前端性能監(jiān)控方案

2.了解常見的 Web、 App性能優(yōu)化方案

3. SEO排名規(guī)則、 SEO優(yōu)化方案、前后端分離的 SEO

4. SSR實現(xiàn)方案、優(yōu)缺點、及其性能優(yōu)化

5. Webpack的性能優(yōu)化方案

6. Canvas性能優(yōu)化方案

7. React、 Vue等框架使用性能優(yōu)化方案

前端安全

1. XSS攻擊的原理、分類、具體案例，前端如何防御

2. CSRF攻擊的原理、具體案例，前端如何防御

3. HTTP劫持、頁面劫持的原理、防御措施

業(yè)務(wù)相關(guān)

1.能理解所開發(fā)項目的整體業(yè)務(wù)形態(tài)、業(yè)務(wù)目標(biāo)、業(yè)務(wù)架構(gòu)，可以快速定位線上業(yè)務(wù)問題

2.能理解所開發(fā)項目整體的技術(shù)架構(gòu)、能快讀的根據(jù)新需求進(jìn)行開發(fā)規(guī)劃、能快速根據(jù)業(yè)務(wù)報警、線上日志等定位并解決線上技術(shù)問題

3.可以將自己的想法或新技術(shù)在業(yè)務(wù)中落地實踐，盡量在團(tuán)隊中擁有一定的不可替代性

九、小結(jié)

希望你閱讀本篇文章后可以達(dá)到以下幾點：

從知識清單中找到自己的知識盲點與欠缺

具有知識體系化的思想，開始建立自己的知識體系

閱讀文章時將知識歸類到知識體系中，并不斷完善自己的知識體系