2020前端面試彙總

時間 2020-06-28

標籤前端面試彙總欄目快樂工作简体版

原文原文鏈接

01 前言
工做了這麼久，一直沒有本身的一個技術知識沉澱，這一次去找了不少前端面試題，再加上本身的工做經驗，進行一次彙總，強烈要求本身掌握如下內容，不只要知其然，還要知其因此然。讓本身之後在面試或者工做中作到「心中有佛，不虛場合」。css

02 目錄
下面是這篇文章的目錄結構，通常比較簡單的問題我就一筆帶過了，主要是分享一下比較有難度的知識點，答案來自網上，若是有版權問題我會刪除。還有本文只是給出一個大概的知識點，若是想要深刻學習還要靠本身去查一下哦！html

若是答案有錯誤，歡迎指正！前端

計算機基礎vue

前端基礎（HTML/CSS）node

JavaScriptreact

前端框架webpack

瀏覽器渲染ios

計算機網絡css3

手寫代碼nginx

Webpack

Node

ES6

03 計算機基礎
進程與線程的區別

進程是系統進行資源分配和調度的一個獨立單位，線程是CPU調度和分派的基本單位,它是比進程更小的能獨立運行的基本單位，一個進程至少有一個線程組成。

線程本身基本上不擁有系統資源,只擁有一點在運行中必不可少的資源(如程序計數器,一組寄存器和棧)，可是它可與同屬一個進程的其餘的線程共享進程所擁有的所有資源。

進程間通訊方式

管道通訊

消息隊列通訊

信號量通訊

共享內存通訊

套接字通訊

函數庫與系統庫

系統庫調用運行在內核模式，函數庫運行在用戶模式

系統調用是os提供的服務，處於內核態且不能直接調用，而要使用相似int 0x80的軟中斷陷入內核

庫函數中有很大部分是對系統調用的封裝

函數庫屬於過程調用，開銷小；系統庫需用戶空間和內核上下文環境切換，開銷大

用戶態能夠調用系統提供API接口調用內核來切換成內核態（中斷方式）

二叉樹

二叉樹每個節點不能多於兩個孩子。

沒有孩子的節點就是葉子節點。

一個節點有左右兩個指針，若無則指向null。深度爲h的二叉樹最多有2^h-1個結點(h>=1)，最少有h個結點。

二叉樹的遍歷三種方式，以下：

（1）前序遍歷（DLR），首先訪問根結點，而後遍歷左子樹，最後遍歷右子樹。簡記根-左-右。

（2）中序遍歷（LDR），首先遍歷左子樹，而後訪問根結點，最後遍歷右子樹。簡記左-根-右。

（3）後序遍歷（LRD），首先遍歷左子樹，而後遍歷右子樹，最後訪問根結點。簡記左-右-根

數據庫索引

索引是一種數據結構（B+樹）

不推薦使用索引

（1）表記錄太少；

（2）數據重複且分佈平均的字段（只有不多數據值的列）；

（3）常常插入、刪除、修改的表要減小索引；

使用索引

（1）主鍵，unique字段；

（2）和其餘表作鏈接的字段須要加索引；

（3）在where裏使用＞，≥，＝，＜，≤，is null和between等字段；

（4）使用不以通配符開始的like，where object like 'Math%'；

（5）order by和group by字段；

數據庫引擎

InnoDB存儲引擎

MyISAM存儲引擎

MEMORY存儲引擎

Archive存儲引擎

虛擬內存及緩衝區溢出

虛擬內存

虛擬內存是計算機系統內存管理的一種技術。

應用程序認爲它擁有連續的可用的內存，實際分隔成多個物理內存碎片，還有部分暫時存儲在外部磁盤存儲器上。

虛擬內存技術能夠經過覆蓋或者把處於不活動狀態的程序以及它們的數據所有交換到磁盤上等方式來實現。

緩衝區溢出

計算機向緩衝區填充數據時超出了緩衝區自己的容量，覆蓋合法數據

危害

堆棧溢出，能夠改變返回程序地址

程序崩潰，拒絕服務

執行非法代碼，獲取非法權限

程序運行失敗，系統宕機，重啓

排序算法

快速排序（nlogn）

選擇排序（n^2）

插入排序（n^2）

希爾排序（n^1.5）

歸併排序（nlogn）

冒泡排序（n^2）

經常使用git指令

下載一個項目和它的整個代碼歷史 git clone [url]

添加指定目錄到暫存區，包括子目錄 git add [dir]

提交暫存區到倉庫區 git commit -m [修改信息]

同步到遠程倉庫， git push

列出全部本地分支 git branch

新建一個分支，並切換到該分支 git checkout -b [branch]

路由器與交換機

路由器能夠給你的局域網自動分配IP，交換機只是用來分配網絡數據的路由器在網絡層，路由器根據IP地址尋址，路由器能夠處理TCP/IP協議，交換機不能夠交換機在中繼層，交換機根據MAC地址尋址，路由器提供防火牆的服務，交換機不能提供該功能。

04 前端基礎（HTML/CSS）
flex容器佈局

主軸屬性

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

交叉軸屬性

order

flex-grow

flex-shrink

flex-basis

flex

align-self

BFC/IFC

BFC（Block Formatting Context）叫作「塊級格式化上下文"

（1）內部的盒子會在垂直方向，一個個地放置；

（2）盒子垂直方向的距離由margin決定，屬於同一個BFC的兩個相鄰Box的上下margin會發生重疊；

（3）每一個元素的左邊，與包含的盒子的左邊相接觸，即便存在浮動也是如此；

（4）BFC的區域不會與float重疊；

（5）BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素，反之也如此；

（6）計算BFC的高度時，浮動元素也參與計算。

觸發條件

（1）float的屬性不爲none；

（2）position爲absolute或fixed；

（3）display爲inline-block，table-cell，table-caption，flex；

（4）overflow不爲visible

IFC（inline Formatting Context）叫作「行級格式化上下」

（1）內部的盒子會在水平方向，一個個地放置；

（2）IFC的高度，由裏面最高盒子的高度決定；

（3）當一行不夠放置的時候會自動切換到下一行；

CSS3的filter屬性詳解

blur

brightness

contrast

grayscale

hue-rotate

invert

opacity

saturate

sepia

CSS的繼承屬性（部分）

font-size：設置字體的尺寸

text-indent：文本縮進

text-align：文本水平對齊

text-shadow：設置文本陰影

line-height：行高

元素可見性：visibility

光標屬性：cursor

CSS盒模型

W3C 標準盒模型：

屬性width,height只包含內容content，不包含border和padding

IE 盒模型：

屬性width,height包含border和padding，指的是content+padding+border

content-box（標準盒模型）

border-box（IE盒模型）

CSS的四種定位

Static:這個是元素的默認定位方式，元素出如今正常的文檔流中，會佔用頁面空間。

Relative:相對定位方式，相對於其父級元素（不管父級元素此時爲什麼種定位方式）進行定位，準確地說是相對於其父級元素所剩餘的未被佔用的空間進行定位（在父元素由多個相對定位的子元素時能夠看出），且會佔用該元素在文檔中初始的頁面空間，即在使用top，bottom，left，right進行移動位置以後依舊不會改變其所佔用空間的位置。可使用z-index進行在z軸方向上的移動。

Absolute:絕對定位方式，脫離文檔流，不會佔用頁面空間。以最近的不是static定位的父級元素做爲參考進行定位，若是其全部的父級元素都是static定位，那麼此元素最終則是以當前窗口做爲參考進行定位。可使用top，bottom，left，right進行位置移動，亦可以使用z-index在z軸上面進行移動。當元素爲此定位時，若是該元素爲內聯元素，則會變爲塊級元素，便可以直接設置其寬和高的值；若是該元素爲塊級元素，則其寬度會由初始的100%變爲auto。注意：當元素設置爲絕對定位時，在沒有指定top，bottom，left，right的值時，他們的值並非0，這幾個值是有默認值的，默認值就是該元素設置爲絕對定位前所處的正常文檔流中的位置。

Fixed:絕對定位方式，直接以瀏覽器窗口做爲參考進行定位。其它特性同absolute定位。當父元素使用了transform的時候，會以父元素定位

CSS權重計算

第一等級：表明內聯樣式，如style=""，權值爲 1000

第二等級：表明id選擇器，如#content，權值爲100

第三等級：表明類，僞類和屬性選擇器，如.content，權值爲10

第四等級：表明標籤選擇器和僞元素選擇器，如div p，權值爲1

注意：通用選擇器（*），子選擇器（>），和相鄰同胞選擇器（+）並不在這個等級中，因此他們的權值爲0

CSS優化技巧

合理使用選擇器

減小DOM操做，減小重繪和重排

去除無效的選擇器

文件壓縮

異步加載文件

減小@import的使用

px/em/rem/vh/vw

px像素（Pixel）。相對長度單位。像素px是相對於顯示器屏幕分辨率而言的

em是相對長度單位。相對於當前父元素的字體尺寸。如未設置，則相對於瀏覽器的默認字體尺寸

rem是CSS3新增的一個相對單位。使用rem爲元素設定字體大小時，仍然是相對大小，但相對的只是HTML根元素

css3新單位vw，view width的簡寫，是指可視窗口的寬度。假如寬度是1200px的話。那10vw就是120px。

css3新單位vh，view height的簡寫，是指可視窗口的高度。假如高度是1200px的話。那10vh就是120px。

05 JavaScript
閉包以及做用域

做用域是可訪問變量的集合，能夠分爲全局做用域和局部做用域。

閉包就是將函數內部和函數外部鏈接起來的一座橋樑。

this是在函數運行時，在函數體內部自動生成的一個對象，只能在函數體內部使用。

事件循環機制

宏任務與微任務的區別

Node中的事件循環機制

JS垃圾回收與V8垃圾回收

JS：標記清楚法/引用計數法

V8：標記清除發/標記壓縮法/增量標記法/壓縮算法

原型與原型鏈

全部原型鏈的終點都是 Object 函數的 prototype 屬性。

每個構造函數都擁有一個 prototype 屬性，此屬性指向一個對象，也就是原型對象。

原型對象默認擁有一個 constructor 屬性，指向指向它的那個構造函數。

每一個對象都擁有一個隱藏的屬性 __ proto __，指向它的原型對象。

JavaScript基本類型及其判斷

boolean

string

number

null

undefined

symbol

object

function getType(obj) {
const str = Object.prototype.toString.call(obj);
const map = {
'[object Boolean]': 'boolean',
'[object Number]': 'number',
'[object String]': 'string',
'[object Function]': 'function',
'[object Array]': 'array',
'[object Date]': 'date',
'[object RegExp]': 'regExp',
'[object Undefined]': 'undefined',
'[object Null]': 'null',
'[object Object]': 'object'
};
return map[str];
}
JavaScript數組API

push() pop()

shift() unshift()

sort() reverse()

concat() slice()

splice() join()

indexOf() lastIndexOf()

forEach() map()

filter() every()

some() reduce()

reduceRight()

JavaScript設計模式

單例模式

適配器模式

代理模式

發佈-訂閱模式

策略模式

迭代器模式

操做節點API總結

查找節點

document.getElementById ：根據ID查找元素，大小寫敏感，若是有多個結果，只返回第一個.

document.getElementsByClassName ：根據類名查找元素，多個類名用空格分隔，返回一個 HTMLCollection。

document.getElementsByTagName ：根據標籤查找元素， * 表示查詢全部標籤，返回一個 HTMLCollection。

document.getElementsByName ：根據元素的name屬性查找，返回一個 NodeList。

document.querySelector ：返回單個Node，若是匹配到多個結果，只返回第一個。

document.querySelectorAll ：返回一個 NodeList。

document.forms ：獲取當前頁面全部form，返回一個HTMLCollection ；

建立節點

createElement建立元素

createTextNode建立文本節點

cloneNode 克隆一個節點

createDocumentFragment 建立文檔碎片，主要是用來存儲臨時節點，大量操做DOM時用它能夠大大提高性能

修改節點

appendChild

insertBefore

removeChild

replaceChild

06 前端框架
快速導航

Vue與React、Angular的區別？

Vue框架

1.對於MVVM的理解

2.Vue的雙向數據綁定原理是什麼

3.Vue3.0的Proxy相比於defineProperty的優點

4.請詳細說下你對vue生命週期的理解

5.開發中經常使用的指令有哪些

6.組件之間的傳值通訊方式有哪些

7.Vue-router的路由實現：hash模式和 history模式

8.vue-router有哪幾種導航守衛?

9.Vuex是什麼？怎麼用？

React框架

Vue與React、Angular的對比
Vue與React

與React相同：

都是用了Virtual DOM。

都提供了響應式和組件化的視圖組件。

將注意力集中保持在覈心庫，而將其餘功能如（路由，全局狀態管理）交給其餘庫。

與React的區別：

組件的響應式渲染

React組件的數據狀態發生變化時，它會以該組件爲根，去渲染整個組件樹；而Vue只去渲染須要渲染的組件。

HTML + CSS + JS 的寫法

React採用JSX的語法，將HTML、 CSS和JS混寫；而Vue使用的是template模板方式，徹底融合了web的經典技術。

react是總體的思路的就是函數式,因此推崇純組件，數據不可變，單向數據流。而vue是數據可變的，雙向綁定，聲明式的寫法。

Vue與Angular

與Angular相同：

Vue早起的靈感來源於Angular，因此不少語法是相似的，如v-if和ng-if。

與Angular的區別：

與Angular1比較，Vue的性能更加優越，AngularJS依賴對數據作髒檢查，因此Watcher越多越慢；Angular的watcher會觸發更一個更新，使得「髒檢查循環」可能會運行屢次。

Angular必須採用Typerscript開發，Vue剛剛纔開始支持Typerscript，Vue源碼已經用Typerscript重寫了。

Vue的體積更小，一樣使用了各自的cli打包生成的項目體積，Vue大概在30kb左右，而Angular在130kb左右。

Vue框架
1.對於MVVM的理解

MVVM 是 Model-View-ViewModel 的縮寫

Model: 表明數據模型，也能夠在Model中定義數據修改和操做的業務邏輯。咱們能夠把Model稱爲數據層，由於它僅僅關注數據自己，不關心任何行爲。

View: 用戶操做界面。當ViewModel對Model進行更新的時候，會經過數據綁定更新到View。

ViewModel：業務邏輯層，是Vue的核心。View須要什麼數據，ViewModel就要提供這個數據；View有某些操做，ViewModel就要響應這些操做。

總結：MVVM模式簡化了界面與業務的依賴，解決了數據頻繁更新。MVVM 充分利用雙向綁定原理，使得 Model 變化時，ViewModel 會自動更新，而 ViewModel 變化時，View 也會自動變化，反之亦然。

vue的雙向數據綁定原理

監聽器 Observer：用來劫持並經過Object.defineProperty監聽全部屬性（轉變成setter/getter形式），若是屬性發生變化，就通知訂閱者。

訂閱器 Dep：用來收集訂閱者，對監聽器 Observer 和訂閱者 Watcher 進行統一管理。

訂閱者 Watcher：監聽器Observer和解析器Compile之間通訊的橋樑；若是收到屬性的變化通知，就會執行相應的方法，從而更新視圖。

解析器 Compile：能夠解析每一個節點的相關指令，對模板數據和訂閱器進行初始化。

主要作的事情是:

在自身實例化時往屬性訂閱器(dep)裏面添加本身。

自身有一個update()方法。

待屬性變更dep.notice()通知時，能調用自身的update()方法，並觸發解析器(Compile)中綁定的回調。

總結：vue.js 是採用數據劫持結合發佈者-訂閱者模式的方式，經過Object.defineProperty()來劫持各個屬性的setter，getter，在數據變更時發佈消息給訂閱者，觸發相應的監聽回調。

Object.defineproperty方法的解釋：做用：會直接在一個對象上定義一個新屬性，或者修改一個對象的現有屬性，並返回此對象。。用法：Object.defineproperty(參數1，參數2，參數3) 返回值爲該對象obj 其中參數1爲要定義屬性的對象（obj），參數2爲要定義或修改的對象的屬性名，參數3爲要定義或修改的屬性描述符，屬性描述符是一個對象，主要有兩種形式：數據描述符和存取描述符。這兩種對象只能選擇一種使用，不能混合使用。二者共同的屬性：configurable和enumerable。數據描述符有value和writable; 而get和set屬於存取描述符對象的屬性。

擁有布爾值的鍵 configurable、enumerable 和 writable 的默認值都是 false。

屬性值和函數的鍵 value、get 和 set 字段的默認值爲 undefined。

Vue3.0的Proxy相比於defineProperty的優點

Object.defineProperty() 的問題主要有三個：

不能監聽數組的變化

必須遍歷對象的每一個屬性

必須深層遍歷嵌套的對象

Proxy 在 ES2015 規範中被正式加入，它有如下幾個特色：

針對對象：針對整個對象，而不是對象的某個屬性，因此也就不須要對 keys 進行遍歷。這解決了上述 Object.defineProperty() 第二個問題。

支持數組： Proxy 不須要對數組的方法進行重載，省去了衆多 hack，減小代碼量等於減小了維護成本，並且標準的就是最好的。除了上述兩點以外，Proxy 還擁有如下優點：

Proxy 的第二個參數能夠有 13 種攔截方法，這比起 Object.defineProperty() 要更加豐富

Proxy 做爲新標準受到瀏覽器廠商的重點關注和性能優化，相比之下 Object.defineProperty() 是一個已有的老方法。

Proxy 對象用於定義基本操做的自定義行爲（如屬性查找，賦值，枚舉，函數調用等）。let p = new Proxy(target, handler); target：用Proxy包裝的目標對象（能夠是任何類型的對象，包括原生數組，函數，甚至另外一個代理）。 handler：一個對象，其屬性是當執行一個操做時定義代理的行爲的函數。

Proxy.revocable()建立一個可撤銷的Proxy對象。

更多解釋請看 Proxy

請詳細說下你對vue生命週期的理解建立階段

建立new Vue()實例

初始化階段

beforeCreate （建立前）vue實例的掛載元素$el和數據對象 data都是undefined, 還未初始化。

延伸：由於在vue 初始化階段，這個時候data 中的變量尚未掛載到this 上，這個時候訪問值會是 undefined。beforeCreate 這個鉤子在平時業務開發中比較少用。像插件內部install 方法經過Vue.use 方法安裝時通常會選在beforeCreate 這個鉤子內執行， vue-router 和 vuex 就是這麼幹的。

created (建立後) 完成了data數據、method初始化, el還未初始化。

延伸：若是要在created階段中進行dom操做，就要將操做都放在 Vue.nextTick() 的回調函數中，由於created() 鉤子函數執行的時候 DOM 其實並未進行任何渲染，而此時進行 DOM 操做無異於徒勞，因此此處必定要將 DOM 操做的 js 代碼放進 Vue.nextTick() 的回調函數中。通常咱們最好不要在created裏操做dom。

渲染階段

beforeMount (載入前) vue實例的$el和data都初始化了, 相關的render函數首次被調用。實例已完成如下的配置：編譯模板，把data裏面的數據和模板生成html。注意此時尚未掛載html到頁面上，此時，頁面仍是舊的。

mounted (載入後) 在el 被新建立的 vm.$el替換，並掛載到實例上去以後調用。實例已完成如下的配置：用上面編譯好的html內容替換el屬性指向的DOM對象。完成模板中的html渲染到html頁面中。此過程當中進行ajax交互。

運行階段

beforeUpdate (更新前) 這個生命週期裏，頁面中顯示的數據仍是舊的，可是我們data的數據是最新的，頁面還沒有和最新的數據保持同步。能夠在該鉤子中進一步地更改狀態，不會觸發附加的重渲染過程。

updated（更新後）在因爲數據更改致使的虛擬DOM從新渲染和打補丁以後調用。調用時，組件DOM已經更新，因此能夠執行依賴於DOM的操做。然而在大多數狀況下，應該避免在此期間更改狀態，由於這可能會致使更新無限循環。該鉤子在服務器端渲染期間不被調用。

銷燬階段

beforeDestroy (銷燬前）在實例銷燬以前調用。實例仍然徹底可用。

destroyed (銷燬後）在實例銷燬以後調用。調用後，全部的事件監聽器會被移除，全部的子實例也會被銷燬。該鉤子在服務器端渲染期間不被調用。

其餘生命週期

activated -

deactivated -

erroeCaptured

開發中經常使用的指令有哪些

v-model :通常用在表達輸入，很輕鬆的實現表單控件和數據的雙向綁定。

v-html: 更新元素的 innerHTML。

v-show 與 v-if: 條件渲染, 注意兩者區別。使用了v-if的時候，若是值爲false，那麼頁面將不會有這個html標籤生成。則是無論值爲true仍是false，html元素都會存在，只是CSS中的display顯示或隱藏。

v-on : click: 能夠簡寫爲@click,@綁定一個事件。若是事件觸發了，就能夠指定事件的處理函數。

v-for:基於源數據屢次渲染元素或模板塊。

v-bind: 當表達式的值改變時，將其產生的連帶影響，響應式地做用於 DOM。語法：v-bind:title="msg" 簡寫：:title="msg"

6.組件之間的傳值通訊方式有哪些

常見使用場景能夠分爲三類:

父子組件通訊: props; $parent / $children; provide / inject ; ref ; $attrs / $listeners 兄弟組件通訊: eventBus ; vuex 跨級通訊: eventBus；Vuex；provide / inject 、$attrs / $listeners

我我的理解的能夠分爲兩大類：

直接通訊方式：props/$emit、$parent/$children、ref/$refs。

間接通訊方式（須要中間人）：provide/inject(爺爺傳給全部子孫)、$attrs/$listeners(隔代傳值)、eventBus、$emit + v-on + v-bind(經過父組件實現兄弟之間的通訊）、Vuex。

7.Vue-router的路由實現：hash模式和 history模式

hash模式 hash - 即地址欄URL中的 # 符號（此hash不是密碼學裏的散列運算）。好比這個URL：http：//www.abc.com/#/hello, hash的值爲#/hello, 它的特色在於：hash雖然出如今URL中，但不會被包括在HTTP請求中，對後端徹底沒有影響，所以改變hash不會從新加載頁面。哈希模式也是當下單頁面應用的標配,所謂前端路由的強大之處也就在這裏：路由分發不須要服務器來作，前端本身就能夠完成。

history模式 history - 利用了HTML5 History Interface中新增的pushState()和replaceState()方法。（須要特定瀏覽器支持）這兩個方法應用於瀏覽器的歷史記錄棧，在當前已有的back、forward、go的基礎上，它們提供了對歷史記錄進行修改的功能。Vue-Router 官網裏如此描述：「不過這種模式要玩好，還須要後臺配置支持……因此呢，你要在服務端增長一個覆蓋全部狀況的候選資源：若是 URL 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面。」

8.vue-router有哪幾種導航守衛?

全局守衛

路由獨享守衛

路由組件內的守衛

全局守衛 vue-router全局有三個守衛：router.beforeEach 全局前置守衛進入路由以前 router.beforeResolve 全局解析守衛(2.5.0+) 在beforeRouteEnter調用以後調用 router.afterEach 全局後置鉤子進入路由以後使用方法:

// main.js 入口文件
import router from './router'; // 引入路由
router.beforeEach((to, from, next) => {
next();
});
router.beforeResolve((to, from, next) => {
next();
});
router.afterEach((to, from) => {
console.log('afterEach 全局後置鉤子');
});
路由獨享守衛若是你不想全局配置守衛的話，你能夠爲某些路由單獨配置守衛：

const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// 參數用法什麼的都同樣,調用順序在全局前置守衛後面，因此不會被全局守衛覆蓋
// ...
}
}
]
})
路由組件內的守衛 beforeRouteEnter 進入路由前, 在路由獨享守衛後調用不能獲取組件實例 this，組件實例還沒被建立。beforeRouteUpdate (2.2) 路由複用同一個組件時, 在當前路由改變，可是該組件被複用時調用能夠訪問組件實例 this。beforeRouteLeave 離開當前路由時, 導航離開該組件的對應路由時調用，能夠訪問組件實例 this。

9.Vuex是什麼？怎麼用？

Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的全部組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。`

Vuex有5種屬性: 分別是 state、getter、mutation、action、module;

State Vuex 使用單一狀態樹,即每一個應用將僅僅包含一個store 實例，但單一狀態樹和模塊化並不衝突。存放的數據狀態，不能夠直接修改裏面的數據。

Getters

Vuex 容許咱們在 store 中定義「getter」（能夠認爲是 store 的計算屬性）。就像計算屬性同樣，getter 的返回值會根據它的依賴被緩存起來，且只有當它的依賴值發生了改變纔會被從新計算。

Mutations

更改 Vuex 的 store 中的狀態的惟一方法是提交 mutation。Vuex 中的 mutation 很是相似於事件函數：每一個 mutation 都有一個字符串的事件類型 (type) 和一個回調函數 (handler)。這個回調函數就是咱們實際進行狀態更改的地方，而且它會接受 state 做爲第一個參數。Mutation 必須是同步函數。

Action

actions能夠理解爲經過將mutations裏面處裏數據的方法變成可異步的處理數據的方法，簡單的說就是異步操做數據。在action裏是commit mutation，這action裏就是異步。在組件中使用 this.$store.dispatch('xxx') 分發 action，或者使用 mapActions 輔助函數將組件的 methods 映射爲 store.dispatch 調用（須要先在根節點注入 store）。

Module

Vuex 容許咱們將 store 分割成模塊（module）。每一個模塊擁有本身的 state、mutation、action、getter、甚至是嵌套子模塊——從上至下進行一樣方式的分割。相似於命名空間，用於項目中將各個模塊的狀態分開定義和操做，便於維護。

輔助函數

mapState 輔助函數當一個組件須要獲取多個狀態時候，將這些狀態都聲明爲計算屬性會有些重複和冗餘。爲了解決這個問題，咱們可使用 mapState 輔助函數幫助咱們生成計算屬性，讓你少按幾回鍵

mapGetters輔助函數僅僅是將 store 中的 getter 映射到局部計算屬性。

mapMutations 輔助函數將組件中的 methods 映射爲 store.commit 調用（須要在根節點注入 store）。

mapActions 輔助函數將組件的 methods 映射爲 store.dispatch 調用（須要先在根節點注入 store）。

其餘Vue相關的問題

虛擬DOM

用 JavaScript 對象模擬真實 DOM 樹，對真實 DOM 進行抽象 diff 算法 — 比較兩棵虛擬 DOM 樹的差別 pach 算法 — 將兩個虛擬 DOM 對象的差別應用到真正的 DOM 樹

vue模板解析

模板變成AST（解析器）

AST遍歷靜態節點（優化器）

生成渲染函數（代碼生成器）

diff算法

diff算法是比對組件中的節點異同的狀況

watch 與 computed 的區別

computed是計算屬性，依賴其它屬性值，而且 computed 的值有緩存，只有它依賴的屬性值發生改變，下一次獲取 computed 的值時纔會從新計算 computed 的值。

watch是觀察監聽的做用，相似於某些數據的監聽回調，每當監聽的數據變化時都會執行回調進行後續操做。

當咱們須要進行數值計算，而且依賴於其它數據時，應該使用 computed。當咱們須要在數據變化時執行異步或開銷較大的操做時，應該使用 watch

v-if 與 v-show 的區別

v-if 是真正的條件渲染，直到條件第一次變爲真時，纔會開始渲染 v-show是由display樣式決定，無論初始條件是什麼都會渲染。

v-if 適用於不須要頻繁切換條件的場景；v-show 則適用於須要很是頻繁切換條件的場景。

React框架
快速導航：

React

什麼是React？有哪些特色？

React 中 keys 的做用是什麼？

React 的生命週期？

調用 setState 以後發生了什麼？

爲何虛擬 dom 會提升性能?

react diff 原理

如何更新組件的狀態

其餘React相關

react-redux

解釋一下 Flux

Redux遵循的三個原則是什麼？

列出 Redux 的組件

什麼是React？有哪些特色？

定義：

React 是 Facebook 在 2011 年開發的前端 JavaScript 庫。它遵循基於組件的方法，有助於構建可重用的UI組件。

React 是一個聲明式，高效且靈活的用於構建用戶界面的 JavaScript 庫。(只關注View)。

由Facebook 2013.5開源，有很大的支持社區。

React的特色：

聲明式設計 −React採用聲明範式，能夠輕鬆描述應用。

高效 −React經過對DOM的模擬，最大限度地減小與DOM的交互。

靈活 −React能夠與已知的庫或框架很好地配合。

JSX − JSX 是 JavaScript 語法的擴展。React 開發不必定使用 JSX ，但咱們建議使用它。

組件 − 經過 React 構建組件，使得代碼更加容易獲得複用，可以很好的應用在大項目的開發中。

單向響應的數據流 − React 實現了單向響應的數據流，從而減小了重複代碼，這也是它爲何比傳統數據綁定更簡單。

React 中 keys 的做用是什麼？

Keys 是 React 用於追蹤哪些列表中元素被修改、被添加或者被移除的輔助標識。

render () {
return (

{item}

)
}
1.react利用key來識別組件，它是一種身份標識，每一個key對應一個組件，key 在其同級元素中具備惟一性，避免重複建立。2.key值是diff短髮中對比兩個虛擬DOM最重要的參考。3.React 還須要藉助 Key 值來判斷元素與本地狀態的關聯關係，所以咱們毫不可忽視轉換函數中 Key 的重要性。

React 的生命週期？

初始化階段：

getDefaultProps:獲取實例的默認屬性

getInitialState:獲取每一個實例的初始化狀態

掛載階段：

componentWillMount：組件即將被裝載、渲染到頁面上

render:組件在這裏生成虛擬的 DOM 節點

componentDidMount:組件真正在被裝載以後

更新階段：

componentWillReceiveProps:當從父類接收到 props 而且在調用另外一個渲染器以前調用。

shouldComponentUpdate:組件接受到新屬性或者新狀態的時候（能夠返回 false，接收數據後不更新，阻止 render 調用，後面的函數不會被繼續執行了）

componentWillUpdate:組件即將更新不能修改屬性和狀態

render:組件從新渲染

componentDidUpdate:組件已經更新

銷燬階段：

componentWillUnmount:組件即將銷燬。

調用 setState 以後發生了什麼？

在代碼中調用 setState 函數以後，React 會將傳入的參數對象與組件當前的狀態合併，而後觸發所謂的調和過程（Reconciliation）。

通過合併過程，React 會以相對高效的方式根據新的狀態構建 React 元素樹而且着手從新渲染整個 UI 界面。

在 React 獲得元素樹以後，React 會自動計算出新的樹與老樹的節點差別，而後根據差別對界面進行最小化重渲染。

在差別計算算法中，React 可以相對精確地知道哪些位置發生了改變以及應該如何改變，這就保證了按需更新，而不是所有從新渲染。

爲何虛擬 dom 會提升性能?

虛擬 dom 至關於在 js 和真實 dom 中間加了一個緩存，利用 dom diff 算法避免了沒有必要的 dom 操做，從而提升性能。

用 JavaScript 對象結構表示 DOM 樹的結構；而後用這個樹構建一個真正的 DOM 樹，插到文檔當中當狀態變動的時候，從新構造一棵新的對象樹。

而後用新的樹和舊的樹進行比較，記錄兩棵樹差別，把記錄的差別應用所構建的真正的 DOM 樹上，視圖就更新了。

react diff 原理

把樹形結構按照層級分解，只比較同級元素。

給列表結構的每一個單元添加惟一的 key 屬性，方便比較。

React 只會匹配相同 class 的 component（這裏面的 class 指的是組件的名字）

合併操做，調用 component 的 setState 方法的時候, React 將其標記爲 dirty.到每個事件循環結束, React 檢查全部標記 dirty 的 component 從新繪製。

選擇性子樹渲染。開發人員能夠重寫 shouldComponentUpdate 提升 diff 的性能。

如何更新組件的狀態

如何更新組件的狀態？能夠用 this.setState()更新組件的狀態。

class MyComponent extends React.Component {
constructor() {
super();
this.state = {
name: 'Maxx',
id: '101'
}
}
render()
{
setTimeout(()=>{this.setState({name:'Jaeha', id:'222'})},2000)
return (

Hello {this.state.name}

Your Id is {this.state.id}

);
}
}
ReactDOM.render(
, document.getElementById('content')
);
其餘React相關

(在構造函數中)調用 super(props) 的目的是什麼

在 super() 被調用以前，子類是不能使用 this 的，在 ES5 中，子類必須在 constructor 中調用 super()。傳遞 props 給 super() 的緣由則是便於(在子類中)能在 constructor 訪問 this.props

React 中有哪些構建組件的方式？

函數

class類

有什麼區別？

函數組件看似只是一個返回值是DOM結構的函數，其實它的背後是無狀態組件的思想。

函數組件中，你沒法使用State，也沒法使用組件的生命週期方法，這就決定了函數組件都是展現性組件，接收Props，渲染DOM，而不關注其餘邏輯。

函數組件中沒有this。

函數組件更容易理解。當你看到一個函數組件時，你就知道它的功能只是接收屬性，渲染頁面，它不執行與UI無關的邏輯處理，它只是一個純函數。而不用在乎它返回的DOM結構有多複雜。

React-Redux

解釋一下 Flux

Flux 是一種強制單向數據流的架構模式。它控制派生數據，並使用具備全部數據權限的中心 store 實現多個組件之間的通訊。整個應用中的數據更新必須只能在此處進行。Flux 爲應用提供穩定性並減小運行時的錯誤。

Redux遵循的三個原則是什麼？

單一事實來源：Redux 使用「Store」將程序的整個狀態存儲在同一個地方。所以全部組件的狀態都存儲在 Store 中，而且它們從 Store 自己接收更新。單一狀態樹能夠更容易地跟蹤隨時間的變化，並調試或檢查程序。

狀態是隻讀的：改變狀態的惟一方法是去觸發一個動做。動做是描述變化的普通 JS 對象。就像 state 是數據的最小表示同樣，該操做是對數據更改的最小表示。

使用純函數進行更改：爲了指定狀態樹如何經過操做進行轉換，你須要純函數。純函數是那些返回值僅取決於其參數值的函數。

列出 Redux 的組件

Redux 由如下組件組成：

Action – 這是一個用來描述發生了什麼事情的對象。

Reducer – 這是一個肯定狀態將如何變化的地方。Reducers 是純函數，它規定應用程序的狀態怎樣因響應 ACTION 而改變。Reducers 經過接受先前的狀態和 action 來工做，而後它返回一個新的狀態。它根據操做的類型肯定須要執行哪一種更新，而後返回新的值。若是不須要完成任務，它會返回原來的狀態。

Store – 整個程序的狀態/對象樹保存在Store中。

View – 只顯示 Store 提供的數據。

07 瀏覽器渲染
輸入網址到現實的過程

重定向

查看緩存

DNS解析，獲取IP地址

TCP鏈接創建

發送報文請求

響應報文數據

瀏覽器解析數據

渲染

補充：這裏值得注意的是，不少同窗都會忽略重定向這個過程，其實重定向是一個很重要的部分。咱們嘗試使用webpagetest工具測試一下百度的網址。

第一次是輸入 baidu.com後測試的效果

第二次是輸入https://www.baidu.com後測試的效果，可見兩次請求相差1.8s左右，這是一個很慢的過程。

防抖與節流

防抖

就是指觸發事件後在 n 秒內函數只能執行一次，若是在 n 秒內又觸發了事件，則會從新計算函數執行時間。

節流

所謂節流，就是指連續觸發事件可是在 n 秒中只執行一次函數。節流會稀釋函數的執行頻率。

瀏覽器緩存

緩存位置

Service Worker Menory Cache Disk Cache Push Cache

緩存策略

強緩存

Expires:Wed, 22 Oct 2018 08:41:00 GMT Cache-control:Cache-control: max-age=30

協商緩存

Last-Modified

If-Modified-Since

ETag

If-None-Match

BOM對象模型

screen

window

navigator

location

document

history

Location對象屬性

hash 設置或返回從#開始的URL

host 設置或返回主機名和當前URL的端口號

hostname 設置或返回當前URL的主機名

href 設置或返回完整的URL

pathname 設置或返回當前URL的路徑部分

port 設置或返回當前URL的端口號

search 設置或返回從?開始的URL(查詢部分)

跨域相關問題

JSONP

CORS

document.domain

postMessage

nginx

window.name

cookie與session

cookie保存在客戶端（瀏覽器）；session保存在服務端（redis）

Session是由應用服務器維持的一個服務器端的存儲空間，用戶在鏈接服務器時，會由服務器生成一個惟一的SessionID,用該SessionID 爲標識符來存取服務器端的Session存儲空間。

例子:

當客戶端第一次請求登陸服務器的時候，服務器隨機下發一個字符串sessionId給瀏覽器，以cookie的形式保存在客戶端。當下次登陸的時候會帶上這個cookie，從而識別你是誰。

cookie的優勢：

1.極高的擴展性和可用性。

2.經過良好的編程，控制保存在cookie中的session對象的大小。

3.經過加密和安全傳輸技術（SSL），減小cookie被破解的可能性。

4.只在cookie中存放不敏感數據，即便被盜也不會有重大損失。

5.控制cookie的生命期，使之不會永遠有效。偷盜者極可能拿到一個過時的cookie。

cookie的缺點：

1.cookie數量和長度的限制。每一個domain最多隻能有20條cookie，每一個cookie長度不能超過4KB，不然會被截掉。

2.安全性問題。若是cookie被人攔截了，那人就能夠取得全部的session信息。即便加密也與事無補，由於攔截者並不須要知道cookie的意義，他只要原樣轉發cookie就能夠達到目的了。

3.有些狀態不可能保存在客戶端。例如，爲了防止重複提交表單，咱們須要在服務器端保存一個計數器。若是咱們把這個計數器保存在客戶端，那麼它起不到任何做用。

瀏覽器存儲

特性 cookie localStorage sessionStorage indexDB
數據生命週期通常由服務器生成，能夠設置過時時間除非被清理，不然一直存在頁面關閉就清理除非被清理，不然一直存在
數據存儲大小 4K 5M 5M 無限
與服務端通訊每次都會攜帶在 header中，對於請求性能影響不參與不參與不參與
08 計算機網絡
TCP/UDP協議

TCP是一種面向來鏈接的、可靠的、基於字節流的傳輸層通訊協議。在計算機網絡的OSI模型中，它完成第四層傳輸層所指定的功能。

面向鏈接

僅支持單播傳輸

面向字節流

可靠傳輸

提供全雙工通訊

UDP是一種簡單的面向數據報、面向無鏈接、不可靠的通訊協議，位於OSI模型的傳輸層。在網絡中它與TCP協議同樣用於處理數據包，是一種無鏈接的協議。

面向無鏈接

不可靠傳輸

提供單播、多播和廣播

面向報文

TCP如何保證數據傳輸

檢驗

序列號/確認應答

超時重傳

最大消息長度

滑動窗口控制

擁塞控制

GET/POST的本質區別

GET/POST的最大區別是GET請求有冪等性，可是POST請求沒有。什麼是冪等性呢？咱們知道使用GET方法請求一樣的接口，返回來的數據是不會改變的，可是對於POST請求，實現一些增刪改查的操做的時候可能會發生重複提交的問題。

也就是說咱們若是使用GET請求作增刪改查的時候，遇到網絡很差可能會屢次操做，形成數據庫的混亂，這是一個很嚴重的問題，可是使用POST就不會有這種狀況。

http與https的區別

https握手

首先客戶端發起請求到服務端，服務端處理後發送一個公鑰給客戶端。

客戶端進行驗證公鑰，看公鑰是否有效和是否過時。

客戶端驗證經過會產生隨機值key，而後用公鑰進行加密回傳給服務端服務端用私鑰解密後得到客戶端的隨機值key。利用隨機值key加密數據後傳輸給客戶端。

客戶端利用key值進行解密數據，客戶端獲取真正的數據

CDN的優化原理

CDN的全稱是(Content Delivery Network)，即內容分發網絡。其目的是經過在現有的Internet中增長一層新的CACHE(緩存)層，將網站的內容發佈到最接近用戶的網絡」邊緣「的節點，使用戶能夠就近取得所需的內容，提升用戶訪問網站的響應速度。

CDN的工做原理就是將您源站的資源緩存到位於全球各地的CDN節點上，用戶請求資源時，就近返回節點上緩存的資源，而不須要每一個用戶的請求都回您的源站獲取，避免網絡擁塞、緩解源站壓力，保證用戶訪問資源的速度和體驗。

HTTP 2.0 的新特性

二進制分幀

多路複用

首部壓縮

流量控制

請求優先級

服務器推送

常見HTTP首部

通用首部

Cache-Control: 控制緩存的行爲

Connection：逐跳首部，鏈接的管理

Date：建立報文的日期時間

Pragma：報文指令

Trailer：報文末端的首部一覽

Transfer-Encoding：指定報文主體的傳輸編碼方式

Upgrade：升級爲其餘協議

請求首部

Accept: 用戶代理可處理的媒體類型

Accept-Charset: 優先的字符集

Accept-Encoding: 優先的內容編碼

Accept-Language: 優先的語言

Authorization: web 認證信息

From: 用戶的電子郵箱地址

Host: 請求資源所在服務器

if-Match: 比較實體標記

if-Modified-Since: 比較資源的更新時間

if-None-Match: 比較實體標記（與if-Match相反）

if-Range: 資源爲更新時發送實體Byte的範圍請求

if-Unmodified-Since: 比較資源的更新時間

Referer: 對請求中的 Url 的原始獲取方法

User-Agent: HTTP 客戶端程序的信息

響應首部

Accept-Ranges: 是否接受字節範圍請求

Age: 推算資源建立通過時間

ETag: 資源的匹配信息

Location: 令客戶端重定向至指定的URL

Proxy-Authenticate: 代理服務器對客戶端的認證信息

Rety-After: 對再次發起請求的時機要求

Server: HTTP服務器的安裝信息

Vary: 代理服務器緩存的管理信息

WWW-Authenticate: 服務器對客戶端的認證信息

Web安全

瀏覽器安全

跨站腳本攻擊(XSS)

跨站請求僞造(CSRF)

點擊劫持(ClickJacking)

掃碼登陸實現原理

二維碼與網頁服務器

當咱們打開微信的網頁版的時候，查看控制檯發現發送了一個請求登陸的請求，而後網頁服務器就隨機產生了一個uuid返回給瀏覽器，並且這個uuid是和二維碼綁定在一塊兒的。服務器會把uuid做爲key存進redis緩存服務器裏面，相似 uuid：xxxx 的形式。

二維碼與手機服務器

手機進行掃描二維碼，而後手機攜帶uuid和用戶信息向手機的服務器發送請求，手機服務器收到以後攜帶uuid去redis服務器查詢用戶，並把uuid與用戶信息綁定在一塊兒。查詢用戶成功以後返回一個Token給網頁服務器，經過解析這個Token能夠拿出用戶的信息，而後瀏覽器就成功登陸微信了。

先後端鑑權

先後之間進行數據交互，固然後端要判斷你是不是真正的操做者，只有符合條件的用戶才能夠操做。也就是說必需要有一個身份證實你是一個好人。一般會有四種方式：

HTTP Basic Authentication

session-cookie機制

Token驗證

OAuth開放受權

單點登陸的實現

實現一個認證中心，登陸並保存用戶信息

訪問A系統先定向到認證中心

訪問B系統先定向到認證中心

則A/B系統就能夠間接打通

HTTP請求方法

delete（刪除文件）

options（詢問支持方法）

trace（追蹤路徑）

connect（要求用隧道協議鏈接代理）

ajax/axios/fetch區別

ajax

不符合如今前端MVVM的浪潮

基於原生的XHR開發，XHR自己的架構不清晰

jQuery整個項目太大，單純使用ajax卻要引入整個jQuery

axios

從 node.js 建立 http 請求

支持 Promise API

客戶端支持防止CSRF

提供了一些併發請求的接口

fetch

更加底層，提供的API豐富（request, response）

脫離了XHR，是ES規範裏新的實現方式

fetch只對網絡請求報錯，對400，500都當作成功的請求，須要封裝去處理

fetch默認不會帶cookie，須要添加配置項

fetch沒有辦法原生監測請求的進度，而XHR能夠

webSocket通訊原理

客戶端會先發送一個HTTP請求，包含一個Upgrade請求頭來告訴服務端要升級爲WebSocket協議。

服務器就會返回101狀態碼並切換爲WebSocket協議創建全雙工鏈接，後續信息將會經過這個協議進行傳輸。

有幾個頭信息須要注意一下：

Sec-WebSocket-Key：客戶端隨機生成的一個base64編碼

Sec-WebSocket-Accept：服務端通過算法處理後回傳給客戶端

Connection和Upgrade字段告訴服務器，客戶端發起的是WebSocket協議請求

09 手寫代碼
因爲手寫代碼部分須要的篇幅比較多，我就簡單列舉出來須要熟悉哪一些手寫的知識點，你們能夠自行谷歌。

bind/call/apply(查看詳情）

class與原形鏈實現繼承(查看詳情）

promise的簡單版

深拷貝實現

節流與防抖函數

函數柯里化(查看詳情)

new的原理實現(查看詳情)

經常使用算法排序（快排）

常見設計模式

實現水平垂直居中

重要的是多刷題，能夠看劍指offer，leetcode！

10 Webpack
webpack參考深刻淺出webpack的書本內容，裏面介紹很是到位，你們能夠一看。

webpack做用

代碼轉換

文件優化

代碼分割

模塊合併

自動刷新

代碼校驗

自動發佈

打包原理

（1）初始化參數：從配置文件和 Shell 語句中讀取與合併參數，得出最終的參數；

（2）開始編譯：用上一步獲得的參數初始化 Compiler 對象，加載全部配置的插件，經過執行對象的 run 方法開始執行編譯；

（3）肯定入口：根據配置中的 entry 找出全部入口文件；

（4）編譯模塊：從入口文件出發，調用全部配置的 Loader 對模塊進行翻譯，再找出該模塊依賴的模塊，再遞歸本步驟直到全部入口依賴的文件都通過了本步驟的處理；

（5）完成模塊編譯：在通過第 4 步使用 Loader 翻譯完全部模塊後，獲得了每一個模塊被翻譯後的最終內容及它們之間的依賴關係；

（6）輸出資源：根據入口和模塊之間的依賴關係，組裝成一個個包含多個模塊的 Chunk，再將每一個 Chunk 轉換成一個單獨的文件加入輸出列表中，這是能夠修改輸出內容的最後機會；

（7）輸出完成：在肯定好輸出內容後，根據配置肯定輸出的路徑和文件名，將文件的內容寫入文件系統中；

loader與plugin的區別

loader，它是一個轉換器，文件內容進行翻譯，，好比將es6轉換爲es5，單純的文件轉換過程

plugin是一個擴展器，它豐富了webpack自己，針對是loader結束後。webpack打包的整個過程，它並不直接操做文件，而是基於事件機制工做，會監聽webpack打包過程當中的某些節點，而且執行相對應的任務。

HappyPack的原理

webpack中最耗時的就是loader的轉換過程，轉換的流程很長。happypack的原理就是把這部分的任務拆解成多個子進程去並行處理，減小構建時間。

經過new HappyPack()實例化，而後把任務交由實例統一調度分配。核心調度器會將一個個任務分配給空閒的子進程。處理完畢後發送給核心調度器。

如何優化webpack配置

縮小文件查找範圍

優化loader

優化resolve.modules

優化resolve.mainFields

優化resolve.alias

優化resolve.extensions

優化module.noPaese

使用DllPlugin

基礎模塊抽離，打包到動態連接庫

須要使用模塊，直接去動態連接庫查找

使用HappyPack

單線程變多進程

使用ParallelUglifyPlugin

開啓多進程壓縮代碼，並行執行

使用CDN加速

靜態資源放到CDN服務器上面

Tree Shaking

剔除無用的代碼

提取公共代碼

防止相同資源重複加載

減小網絡流量及服務器成本

使用prepack

編譯代碼時提早計算結果放到編譯後的結果中，而不是在代碼運行才求值

11 Node
Node的特色

異步IO

事件驅動

單線程

跨平臺

V8垃圾回收機制

新生代：Scavenge算法

老生代：Mark-Sweep算法、Mark-Compact算法、Incremental Marking算法

PM2進程守候

內建負載均衡（使用 Node cluster 集羣模塊）

後臺運行

0 秒停機重載，我理解大概意思是維護升級的時候不須要停機.

具備 Ubuntu 和 CentOS 的啓動腳本

中止不穩定的進程（避免無限循環）

控制檯檢測

提供 HTTP API

遠程控制和實時的接口 API ( Nodejs 模塊,容許和 PM2 進程管理器交互 )

Buffer對象

Buffer是一個像Array的對象，它的元素都是16進制的兩位數。是一個典型的JavaScript與C++結合的模塊，設計性能的相關部分採用了C++實現，而非性能部分採用了JavaScript實現。Buffer對象能夠用來操做二進制數據流。

Buffer對象的內存分配不是在V8的堆內存中的，而是由Node的C++層面實現的內存申請的

分配機制

小對象

slab 內存分配機制**。它是一種動態內存管理機制，採用的是預先申請，過後分配的方式，簡單來講它就是一塊申請好的固定大小的內存區域。有以下3種狀態：

full：徹底分配

partial：部分分配

empty：沒有被分配

大對象

若是這個對象是超過了 slab 的大小，那麼就不會佔用slab塊，直接使用C++層面分配你所須要的大小，這塊空間就會被你一直佔有

12 ES6
promise

在阮一峯老師的ES6入門標準中說到，所謂promise就是一個容器，裏面保存着某個將來纔會結束的事件（一般是是一個異步事件）。它有兩個特色：

狀態不受外界影響：擁有三種狀態（Pending、Fullfilled、Rejected）。狀態只取決於異步執行結果，其餘過程沒法改變這個狀態。

狀態改變不會再變：初始狀態爲Pending狀態，它只能夠變成Fullfill或者變成Rejected，可是一旦發生改變就不會再變。

promise可使得異步操做的寫法像同步寫法同樣優雅，代碼可讀性更高。可是缺點就是中途沒法取消promise，一旦新建就會執行，假如沒有設置回調函數，Promise內部若是出現錯誤不會反應到外部。

實例方法

then()/catch()

all()/race()

resolve()/reject()

done()/finally()

proxy

Proxy能夠理解爲，當你試圖訪問一個對象的時候必須先通過一個攔截或者代理，你才能夠進行對對象的操做。這種機制的好處就是能夠對外界的訪問進行過濾和改寫。

get(target, propKey, receiver) 攔截對象屬性讀取

set(target, propKey, value, receiver) 攔截對象的屬性設置

has(target, propKey) 攔截propkey in proxy

deleteProperty(target, propKey) 攔截delete proxy[propKey]

ownKeys(target)

getOwnPropertyDescriptor(target, propKey) 返回對象屬性的描述對象攔截

defineProperty(target, propKey, propDesc)

proventExtensions(target)

getPrototypeOf(target)

isExtensible(target)

setPrototypeOf(target, proto)

apply(target, object, args)

construct(target, args) 攔截 proxy 實例做爲構造函數調用的操做

revocable(target, handler) 方法返回一個可取消 Proxy實例

ES6的新特性

ES6新增了不少新特性，這裏不可能每個都詳細講述，面試中我遇到的有如下幾個，你把它們都講述清楚就能夠過關了。

let、var、const區別

箭頭函數

解構賦值

模板字符串

Set、Map數據結構

Promise對象

Proxy

class繼承

class Parent {
constructor(value) {
this.val = value
}
getValue() {
console.log(this.val)
}
}
class Child extends Parent {
constructor(value) {
super(value)
this.val = value
}
}
let child = new Child(1)
child.getValue() // 1
child instanceof Parent // true
13 推薦書籍