CSS

Flex彈性布局

容器的屬性：
flex-direction: 決定主軸的方向 row行左從左到右邮府、row-reverse行右從右到左俺猿、column列從上到下魏颓、column-reverse行從下到上
flex-wrap: 如何換行 normal單行排列、wrap多行自上而下鼻听、wrap-reverse多行自下而上
flex-flow: 是flex-direction和flex-wrap的簡(jiǎn)寫形式
justify-content: 定義了項(xiàng)目在主軸上的對(duì)齊方式 flex-start從起點(diǎn)線開始排序财著、flex-end從終點(diǎn)線開始排序、center居中布局撑碴、space-between項(xiàng)目均勻分布第一項(xiàng)在起點(diǎn)線最后一項(xiàng)在終點(diǎn)線撑教、space-around項(xiàng)目均勻分布每個(gè)項(xiàng)目?jī)蓚?cè)有相同的留白，項(xiàng)目之間的距離為留白之和醉拓、space-evenly項(xiàng)目均勻分布項(xiàng)目距離和項(xiàng)目與邊框距離相等
align-items: 定義項(xiàng)目在交叉軸上如何對(duì)齊 flex-start交叉軸起點(diǎn)對(duì)齊伟姐、flex-end交叉軸終點(diǎn)對(duì)齊、center交叉軸中間對(duì)齊亿卤、baseline交叉軸第一行文字基線對(duì)齊
align-content: 定義了多根軸線的對(duì)齊方向及額外空間分配(類似justify-content) flex-start從起點(diǎn)線開始排序愤兵、flex-end從終點(diǎn)線開始排序、center居中排序排吴、space-between項(xiàng)目均勻分布第一項(xiàng)在起點(diǎn)線最后一項(xiàng)在終點(diǎn)線秆乳、space-around項(xiàng)目均勻分布、每個(gè)項(xiàng)目上下有相同留白項(xiàng)目距離為留白之和

項(xiàng)目屬性：
order: 定義項(xiàng)目的排列順序。數(shù)值越小屹堰，排列越靠前 默認(rèn)值0 可以為負(fù)值
flex-grow: 定義項(xiàng)目的放大比例 默認(rèn)值0 負(fù)值無效
flex-shrink: 定義項(xiàng)目的縮小比例 默認(rèn)值 0表示不縮小 負(fù)值無效
flex-basis: 定義了在分配多余空間之前肛冶，項(xiàng)目占據(jù)的主軸空間
flex: flex-grow, flex-shrink和flex-basis的簡(jiǎn)寫
align-self: 允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式，可覆蓋align-items屬性

介紹css3中position:sticky
粘性定位可以被認(rèn)為是相對(duì)定位和固定定位的混合扯键。
該元素定位不對(duì)后續(xù)元素造成影響睦袖，當(dāng)元素被粘性定位時(shí)，后續(xù)元素的位置仍按照該元素未定位時(shí)的位置來確定

CSS3新特性有哪些
邊框：border-radius荣刑、box-shadow馅笙、border-image
背景：background-image、background-size嘶摊、background-origin延蟹、background-clip
漸變：linear-gradient(線性漸變)评矩、radial-gradient(徑向漸變)
文本效果：text-shadow叶堆、text-overflow(如何顯示溢出內(nèi)容)、word-wrap(換行)斥杜、word-break(指定換行規(guī)則)
字體：@font-face
2D轉(zhuǎn)換(transform)：translate(位移)虱颗、rotate(旋轉(zhuǎn))、scale(縮放)蔗喂、skew(翻轉(zhuǎn))忘渔、matrix(將所有2d轉(zhuǎn)換方法組合在一起)
3D轉(zhuǎn)換：translate、rotate缰儿、scale多一個(gè)Z軸或者3d
過渡(transition)：元素從一種樣式逐漸變成另一種的效果畦粮。transition是簡(jiǎn)寫的四種屬性，屬性名稱(transition-property) 過渡花費(fèi)時(shí)間(transition-duration) 過渡效果(transition-timing-function) 過渡延遲執(zhí)行時(shí)間(transition-delay)
transition-timing-function: linear(勻速) ease(慢-快-慢) ease-in(慢-快) ease-out(快-慢) ease-in-out(慢-快-慢)
動(dòng)畫：@keyframes animation(簡(jiǎn)寫屬性乖阵、用于設(shè)置六個(gè)動(dòng)畫屬性)
animation: animation-name(動(dòng)畫名稱)宣赔、animation-duration(動(dòng)畫時(shí)間)、animation-timing-function(動(dòng)畫的速度曲線)瞪浸、animation-delay(動(dòng)畫延遲執(zhí)行時(shí)間)儒将、animation-iteration-count(動(dòng)畫播放的次數(shù))、animation-direction(是否輪流反向播放動(dòng)畫)

JS

每個(gè)實(shí)例對(duì)象都有一個(gè)私有屬性(proto)指向它構(gòu)造函數(shù)的原型對(duì)象(prototype)对蒲。該原型對(duì)象也有一個(gè)自己的原型對(duì)象(proto)钩蚊，層層往上直到一個(gè)對(duì)象的原型對(duì)象為Null。

遵循ECMAScript標(biāo)準(zhǔn)蹈矮，someObject.[[Prototype]]符號(hào)用于執(zhí)行someObject的原型砰逻。從ES6開始，[[Prototype]]可以通過Object.getPrototypeOf()和Object.setPrototypeOf()訪問器訪問泛鸟。這個(gè)等同于JavaScript的非標(biāo)準(zhǔn)但許多瀏覽器實(shí)現(xiàn)的屬性proto
但它不應(yīng)該與構(gòu)造函數(shù)func的prototype屬性相混淆蝠咆。被構(gòu)造函數(shù)創(chuàng)建的實(shí)例對(duì)象的[[prototype]]指向func的prototype屬性。Object.prototype屬性表示Object的原型對(duì)象

原型鏈的定義：每個(gè)對(duì)象擁有一個(gè)原型對(duì)象谈况，對(duì)象以其原型為模板勺美，從原型繼承屬性和方法递胧。原型對(duì)象也擁有原型，并從中繼承方法和屬性赡茸，一層一層缎脾，以此類推，這種關(guān)系常被稱為原型鏈占卧。

proto和prototype:對(duì)象的原型proto與構(gòu)造函數(shù)的prototype屬性之間的區(qū)別遗菠，前者是每個(gè)實(shí)例上都有的屬性，后者是構(gòu)造函數(shù)的屬性华蜒。也就是說辙纬，Object.getPrototypeOf(new Foobar())和Foobar.prototype指向著同一個(gè)對(duì)象。

prototype:每個(gè)函數(shù)都有一個(gè)特殊的屬性叫做prototype

什么是原型和原型鏈叭喜？
每個(gè)對(duì)象都有一個(gè)私有屬性（proto）指向它構(gòu)造函數(shù)的原型對(duì)象（prototype）贺拣。
對(duì)象從原型繼承屬性和方法。原型對(duì)象也有自己的原型對(duì)象捂蕴，層層往上直到一個(gè)對(duì)象的原型對(duì)象為null譬涡，這種關(guān)系被稱為原型鏈。注：proto是javascript非標(biāo)準(zhǔn)但瀏覽器實(shí)現(xiàn)的屬性

繼承方法有哪些啥辨？
1.對(duì)象冒充
繼承ClassA的方法涡匀，最后刪除對(duì)ClassA的引用
function ClassA () {}
function ClassB () {
this.newMethod = ClassA;
this.newMethod(args);
delete this.newMethod;
}

2.call()方法
使用call()方法指定this的指向，實(shí)現(xiàn)繼承溉知。
function ClassB (color, name) {
ClassA.call(this, color);
this.name = args;
this.sayName = function () {
return this.name;
}
}

3.apply()方法
與call()方法繼承一樣陨瘩。區(qū)別是call和apply的區(qū)別，參數(shù)傳遞不一樣

4.原型鏈
function ClassA() {}
ClassA.prototype.color = 'blue';
ClassA.prototype.getColor = function () {
return this.color;
}
function ClassB () {};
ClassB.prototype = new ClassA();
使用原型鏈繼承级乍，將需要父類實(shí)例賦值給子類原型對(duì)象舌劳，可繼承所有的屬性和方法。
缺點(diǎn)是：原型鏈上的屬性和方法修改卡者，子類也會(huì)被影響蒿囤，沒有傳遞參數(shù)。

5.組合繼承
使用構(gòu)造函數(shù)定義屬性崇决，用原型定義方法材诽；用對(duì)象冒充繼承構(gòu)造函數(shù)的屬性，用原型鏈繼承prototype對(duì)象的方法
function ClassA (color) {
this.color = color;
}
ClassA.prototype.getColor = function () {
return this.color;
}
function ClassB (color, name) {
ClassA.call(this, color);
this.name = name;
}
ClassB.prototype = new ClassA();
ClassB.prototype.sayName = function () {
return this.name;
}
缺點(diǎn)：父類的構(gòu)造函數(shù)被調(diào)用兩次恒傻。
a.設(shè)置子類原型對(duì)象脸侥，調(diào)用一次；ClassB.prototype = new ClassA();
b.實(shí)例化對(duì)象時(shí)調(diào)用一次盈厘；ClassA.call(this, color);

6.寄生式繼承
在不需要實(shí)例化父類構(gòu)造函數(shù)時(shí)睁枕，也能繼承父類原型對(duì)象上的方法；
function InheritPrototype (child, father) {
var prototype = Object.create(father.prototype); // 淺拷貝父類的原型對(duì)象
prototype.constructor = child; // 指向原型對(duì)象的構(gòu)造器為子類
child.prototype = prototype; // 將原型對(duì)象賦值給子類的原型對(duì)象
}

new的作用？
1.創(chuàng)建一個(gè)空的對(duì)象外遇；
2.設(shè)置該對(duì)象的構(gòu)造函數(shù)到另一個(gè)對(duì)象注簿；
3.將新創(chuàng)建的對(duì)象作為this的上下文；
4.如果該函數(shù)沒有返回對(duì)象跳仿，則返回this;

事件循環(huán)機(jī)制是什么诡渴？
1.運(yùn)行時(shí)概念：
函數(shù)調(diào)用形成一個(gè)棧幀，放到棧中菲语，根據(jù)后進(jìn)先出原則直到棧清空妄辩；
對(duì)象被分配到一個(gè)堆中，即用以標(biāo)識(shí)一大塊非結(jié)構(gòu)化的內(nèi)存區(qū)域山上；
一個(gè)javascript運(yùn)行時(shí)包含了一個(gè)待處理的消息隊(duì)列眼耀。每一個(gè)消息都關(guān)聯(lián)這一個(gè)用以處理這個(gè)消息的函數(shù)。

2.JAVASCRIPT事件循環(huán)的運(yùn)行機(jī)制：
1.所有同步任務(wù)都在主線程上執(zhí)行佩憾，形成一個(gè)執(zhí)行棧哮伟；
2.主線程之外，還存在一個(gè)任務(wù)隊(duì)列鸯屿。只要異步任務(wù)有了運(yùn)行結(jié)果澈吨，就在任務(wù)隊(duì)列之中放置一個(gè)事件把敢；
3.一旦執(zhí)行棧中的所有同步任務(wù)執(zhí)行完畢寄摆，系統(tǒng)就會(huì)讀取任務(wù)隊(duì)列，那些對(duì)應(yīng)的異步任務(wù)于是結(jié)束等待狀態(tài)修赞，進(jìn)入執(zhí)行站開始執(zhí)行婶恼；
4.主線程不斷重復(fù)上面的第三步；
JS只有一個(gè)主線程柏副，主線程執(zhí)行完執(zhí)行棧的任務(wù)后去檢查異步的任務(wù)隊(duì)列勾邦，如果異步事件觸發(fā)，則將其加到主線程的執(zhí)行棧割择，主線程不斷重復(fù)這個(gè)過程眷篇；

vue和react的哪里不同？
1.React嚴(yán)格上只針對(duì)MVC的view層荔泳，Vue則是MVVM模式
2.virtual DOM不一樣蕉饼。vue會(huì)跟蹤每一個(gè)組件的依賴關(guān)系，不需要重新渲染整個(gè)組件樹
而對(duì)React而言玛歌，每當(dāng)應(yīng)用的狀態(tài)被改變時(shí)昧港，全部組件都會(huì)重新渲染，如要避免不必要的子組件重新渲染需要用shouldComponentUpdate.
3.組件寫法不一樣支子。React推薦使用JSX创肥。Vue推薦用webpack + vue-loader的單文件組件格式歉嗓，即html,css,js寫在同一個(gè)文件衙四。
4.數(shù)據(jù)綁定：vue實(shí)現(xiàn)了數(shù)據(jù)的雙向綁定，react數(shù)據(jù)流動(dòng)是單向的
5.state對(duì)象在react應(yīng)用中不可變，需要使用setState方法更新狀態(tài)柜某；
vue在state對(duì)象不是必須的，數(shù)據(jù)由data屬性在vue對(duì)象中管理

常見Http請(qǐng)求頭

1. Accept 可接受的響應(yīng)內(nèi)容類型 Accept: text/plain
2. Accept-Charset 可接受的字符集 Accept-Charset: utf-8
3. Accept-Encoding 可接受的響應(yīng)內(nèi)容的編碼方式 Accept-Encoding: gzip, deflate
4. Accept-Language 可接受的響應(yīng)內(nèi)容語言列表 Accept-Language: en-US
5. Accept-Datetime 可接受的按照時(shí)間來表示的響應(yīng)內(nèi)容版本 Accept-Datetime: xxx
6. Authorization 用于表示HTTP協(xié)議中需要認(rèn)證資源的認(rèn)證信息 Authorization: Basic OSdjJGRpbjpvcGVuIANlc2SdDE==
7. Cache-Control 用來指定當(dāng)前的請(qǐng)求/回復(fù)中的澳厢，是否使用緩存機(jī)制 Cache-Control: no-cache
8. Connection 客戶端想要優(yōu)先使用的連接類型 Connection: keep-alive
9. Cookie 由之前服務(wù)器通過Set-Cookie設(shè)置的一個(gè)HTTP協(xié)議Cookie
10. Content-Length 以8進(jìn)制表示的請(qǐng)求體的長(zhǎng)度 Content-Length: 348
11. Content-MD5 請(qǐng)求體的內(nèi)容二進(jìn)制MD5散列值鸦采，以Base64編碼的結(jié)果
12. Content-Type 請(qǐng)求體的MIME類型 Content-Type: application/x-www-form-urlencoded
13. Date 發(fā)送該消息的日期和時(shí)間
14. Expect 表示客戶端要求服務(wù)器做出特定的行為
15. From 發(fā)起次請(qǐng)求的用戶的郵件地址
16. Host 表示服務(wù)器的域名以及服務(wù)器所監(jiān)聽的端口號(hào)
17. Origin 發(fā)起一個(gè)針對(duì)跨域資源共享的請(qǐng)求
18. User-Agent 瀏覽器的身份標(biāo)識(shí)字符串

防抖和節(jié)流？
防抖：函數(shù)在頻繁需要觸發(fā)情況時(shí)稽坤，只有等足夠空閑的時(shí)間才去執(zhí)行一次丈甸。
節(jié)流：預(yù)定一個(gè)函數(shù)只有在大于等于執(zhí)行周期的時(shí)候才去執(zhí)行

介紹觀察者模式
意圖：定義對(duì)象間一種一對(duì)多的依賴關(guān)系，當(dāng)一個(gè)對(duì)象狀態(tài)發(fā)生改變時(shí)尿褪，所有依賴它的對(duì)象都會(huì)得到通知并被自動(dòng)更新
主要解決：一個(gè)對(duì)象狀態(tài)改變給其他對(duì)象通知的問題睦擂，而且要考慮到易用和低耦合，保證高度的協(xié)作

介紹中介者模式
意圖：用一個(gè)中介對(duì)象來封裝一系列的對(duì)象交互杖玲，中介者使各對(duì)象不需要顯式的相互引用顿仇，從而使其耦合松散，而且可以獨(dú)立的改變它們之間的交互摆马。
主要解決：對(duì)象與對(duì)象之間存在大量的關(guān)聯(lián)關(guān)系臼闻，這樣勢(shì)必會(huì)導(dǎo)致系統(tǒng)的結(jié)構(gòu)變得很復(fù)雜，同時(shí)若一個(gè)對(duì)象發(fā)生改變囤采，我們也需要跟蹤與之相關(guān)聯(lián)的對(duì)象述呐，同時(shí)做出相應(yīng)的處理。

觀察者和訂閱-發(fā)布的區(qū)別蕉毯，各自用在哪里
觀察者由具體目標(biāo)調(diào)用乓搬，訂閱-發(fā)布是統(tǒng)一由調(diào)度中心調(diào)用。
觀察者模式的訂閱者與發(fā)布者存在依賴關(guān)系代虾，而訂閱-發(fā)布模式不會(huì)进肯。

介紹http2.0新特性

1. 在應(yīng)用層(HTTP)和傳輸層(TCP)之間增加一個(gè)二進(jìn)制分幀層
   二進(jìn)制分幀：在二進(jìn)制分幀層上，HTTP2.0會(huì)將所有傳輸信息分割為更小的消息和幀棉磨，并對(duì)它們采用二進(jìn)制格式的編碼將其封裝
2. 首部壓縮：所有首部鍵必須全部小寫
3. 流量控制
4. 多路復(fù)用
5. 請(qǐng)求優(yōu)先級(jí)
6. 服務(wù)器推送

通過什么做到并發(fā)請(qǐng)求
Promise處理并發(fā)請(qǐng)求

瀏覽器事件流向
DOM事件傳播包括三個(gè)階段：

1. 捕獲
2. 事件目標(biāo)處理函數(shù)
3. 冒泡

介紹事件代理以及優(yōu)缺點(diǎn)
事件委托原理：事件冒泡機(jī)制
優(yōu)點(diǎn)：

1. 大量節(jié)省內(nèi)存占用江掩，減少事件注冊(cè)
2. 可以實(shí)現(xiàn)當(dāng)新增子對(duì)象時(shí)，無需再對(duì)其進(jìn)行事件綁定
   缺點(diǎn)：
   上訴1中的需求才會(huì)使用乘瓤，使用場(chǎng)景少环形。如果把所有事件都用事件委托，可能會(huì)出現(xiàn)事件誤判

tcp3次握手
第一次握手：建立連接時(shí)馅扣，客戶端發(fā)送syn包到服務(wù)器斟赚，并進(jìn)去SYN_SENT狀態(tài)，等待服務(wù)器確認(rèn)差油；(SYN: 同步序列編號(hào))
第二次握手：服務(wù)器收到syn包拗军，必須確認(rèn)客戶端的syn任洞，同時(shí)自己也發(fā)送一個(gè)syn包，此時(shí)服務(wù)器進(jìn)入SYN_RECV狀態(tài)发侵；
第三次握手：客戶端收到服務(wù)器的SYN+ACK包交掏，向服務(wù)器發(fā)送確認(rèn)包ACK，此包發(fā)送完畢刃鳄，客戶端和服務(wù)器進(jìn)入established狀態(tài)盅弛，完成三次握手

bind、call叔锐、apply的區(qū)別
相似之處：

1. 都是用來改變函數(shù)的this指向
2. 第一個(gè)參數(shù)都是this指向的對(duì)象
3. 都可以利用后續(xù)參數(shù)傳參
   區(qū)別：
   call和apply都是對(duì)函數(shù)的直接調(diào)用
   call后續(xù)參數(shù)是單獨(dú)一個(gè)一個(gè)傳
   apply第二個(gè)參數(shù)是一個(gè)數(shù)組
   bind方法返回的仍然是一個(gè)函數(shù)

閉包的定義和作用
閉包是有權(quán)訪問另一個(gè)函數(shù)作用域中變量的函數(shù)挪鹏。
特性：

1. 函數(shù)外部的代碼無法訪問函數(shù)體內(nèi)部的變量，而函數(shù)體內(nèi)部的代碼可以訪問函數(shù)外部的變量
2. 即使函數(shù)已經(jīng)執(zhí)行完畢愉烙，在執(zhí)行期間創(chuàng)建的變量也不會(huì)銷毀讨盒，因此每運(yùn)行一次函數(shù)就會(huì)在內(nèi)存中留下一組變量。

介紹下跨域
跨域是指協(xié)議步责、域名返顺、端口不一致，出于安全考慮蔓肯，跨域的資源之間無法交互遂鹊。

跨域解決方案

1. 通過jsonp跨域
2. document.domain + iframe跨域
3. location.hash + iframe
4. window.name + iframe 跨域
5. postMessage跨域
6. 跨域資源共享(CORS)
7. nginx代理跨域
8. nodeJs中間件代理跨域
9. WebSocket協(xié)議跨域: 是HTML5一種新協(xié)議，實(shí)現(xiàn)了瀏覽器和服務(wù)器全雙工通信蔗包，同時(shí)允許跨域通信

ES6

ES6的新特性有哪些秉扑？

1. let和const
2. 字符串模板
3. 變量的解耦賦值
4. 箭頭函數(shù)
5. Array.from Array.of
6. Set數(shù)據(jù)結(jié)構(gòu)(類似數(shù)組，但是成員的值都是唯一的气忠，沒有重復(fù)的值)
7. Proxy 作用是對(duì)目標(biāo)對(duì)象提供攔截行為
8. Promise對(duì)象
9. async 函數(shù)
10. module語法

箭頭函數(shù)的注意點(diǎn)：

1. 函數(shù)體內(nèi)的this對(duì)象邻储，就是定義時(shí)所在的對(duì)象，而不是使用時(shí)所在的對(duì)象旧噪。
2. 不可以當(dāng)做構(gòu)造函數(shù)，也就是說脓匿，不可以使用new命令淘钟，否則會(huì)拋出一個(gè)錯(cuò)誤。
3. 不可以使用arguments對(duì)象陪毡，該對(duì)象在函數(shù)體內(nèi)不存在米母。如果要用，可以用rest參數(shù)代替毡琉。
4. 不可以使用yield命令铁瞒，因?yàn)榧^函數(shù)不能作為Generator函數(shù)

ES6模塊和CommonJS模塊的差異：

• CommonJS模塊輸出的是一個(gè)值的拷貝，ES6模塊輸出的是值的引用
  CommonJS模塊輸出一個(gè)值桅滋，模塊內(nèi)部的變化不會(huì)影響該值慧耍，除非寫一個(gè)函數(shù)才能獲取內(nèi)部改動(dòng)后的值身辨。
  ES6輸出的值，如果原始值改變芍碧，那輸出的值也會(huì)跟著變煌珊。
• CommonJS模塊是運(yùn)行時(shí)加載，ES6模塊是編譯時(shí)輸出接口
  CommonJS記載的是一個(gè)對(duì)象泌豆，該對(duì)象只有在腳本運(yùn)行完才會(huì)生成定庵。
  ES6模塊不是對(duì)象，它的對(duì)外接口只是一種靜態(tài)定義踪危，在代碼靜態(tài)解析階段就會(huì)生成蔬浙。

promise、async有什么區(qū)別?

1. Async是基于Promise實(shí)現(xiàn)的贞远，它不能用于普通的回調(diào)函數(shù)
2. Async使得異步代碼看起來像同步代碼
3. Async函數(shù)會(huì)返回一個(gè)Promise對(duì)象
4. Async讓 try/catch可以同時(shí)處理同步和異步錯(cuò)誤
5. Async函數(shù)讓代碼更簡(jiǎn)潔敛滋，更符合語義

Webpack

Webpack3和Webpack4有什么區(qū)別？
1.webpack4新增mode選項(xiàng)兴革。根據(jù)配置類型將其設(shè)置為生產(chǎn)或開發(fā)绎晃。
2.棄用部分插件，包括壓縮js的UglifyJsPlugin杂曲，DefinePlugin創(chuàng)建一個(gè)在編譯是可以配置的全局常量的插件庶艾；
壓縮插件改用Optimization選項(xiàng)，DefinePlugin內(nèi)置到new Webpack里面

webpack4常用Loading有哪些擎勘？
babel-loader：允許使用babel和webpack轉(zhuǎn)譯js文件
css-loader
postcss-loader
sass-loader
style-loader
less-loader
url-loader
file-loader

webpack4常用的plugin有哪些咱揍？
webpack.Defineplugin：允許創(chuàng)建一個(gè)在編譯時(shí)可以配置的全局常量
webpack.HotModuleReplacementPlugin：熱替換模塊
webpack.optimize.LimitChunkCountPlugin：可以通過合并的方式，處理你的chunk棚饵，以減少請(qǐng)求數(shù)
UglifyjsWebpackPlugin：壓縮JS代碼
htmlWebpackPlugin
CleanWebpackPlugin

webpack配置優(yōu)化
優(yōu)化Loader配置： 1. 優(yōu)化正則匹配 2.通過cacheDirectory開啟緩存 3. 通過include煤裙、exclude來減少被處理的文件
優(yōu)化resolve.modules配置
優(yōu)化resolve.alias配置，通過別名來將原導(dǎo)入路徑映射成一個(gè)新的導(dǎo)入路徑
優(yōu)化resolve.extensions配置噪漾，常用的后綴放在前面硼砰，而且后綴列表要盡可能的小
減少冗余代碼 babel-plugin-transform-runtime
使用HappyPack多進(jìn)程解析和處理文件
開啟模塊熱替換
提取公共代碼 chunk(相同資源被重復(fù)加載，首屏加載緩慢的問題)
按需加載代碼
優(yōu)化SourceMap
mode模式

React

React組件生命周期的階段是什么欣硼？
React組件的生命周期有三個(gè)不同的階段：

1. 初始渲染階段：這是組件即將開始其生命之旅并進(jìn)入DOM的階段
2. 更新階段：一旦組件被添加到DOM题翰，它只有在prop或狀態(tài)發(fā)生改變時(shí)才能更新或重新渲染。
3. 卸載階段：這是組件生命周期的最后階段诈胜，組件被銷毀并從DOM中刪除豹障。

React組件的生命周期方法

1. componentWillMount() 在渲染之前執(zhí)行，在客戶端和服務(wù)端都會(huì)執(zhí)行
2. componentDidMount() 僅在第一次渲染后在客戶端執(zhí)行
3. componentWillReceiveProps() 當(dāng)從父類接收到props并且在調(diào)用另一個(gè)渲染器之前調(diào)用
4. shouldComponentUpdate() 根據(jù)特定條件返回true或false焦匈。如果你希望更新組件血公，請(qǐng)返回true否則返回false。默認(rèn)情況下缓熟，它返回false
5. componentWillUpdate() 在DOM中進(jìn)行渲染之前調(diào)用
6. componentDidUpdate() 在渲染發(fā)生后立即調(diào)用
7. componentWillUnmount() 從DOM卸載組件后調(diào)用累魔，用于清理內(nèi)存空間

React組件通信
父?jìng)髯樱菏褂胮rops對(duì)象摔笤，包含需要傳遞給子組件的參數(shù)，props是不可修改的薛夜。傳遞方法：定義方法名傳遞一個(gè)函數(shù)進(jìn)去
子傳父：由于子組件不能修改props籍茧，需要修改props的值時(shí)，需要使用父組件傳遞的函數(shù)梯澜，調(diào)用傳遞的函數(shù)實(shí)際是父組件調(diào)用自己的函數(shù)寞冯，并修改自身的值，達(dá)到修改props的效果
兄弟：利用redux實(shí)現(xiàn)

React無狀態(tài)函數(shù)
無狀態(tài)函數(shù)是使用函數(shù)構(gòu)建的無狀態(tài)組件晚伙，無狀態(tài)組件傳入props和context兩個(gè)參數(shù)吮龄，它沒有state，除了render()咆疗，沒有其他生命周期方法漓帚。

Context描述：
無需為每層組件手動(dòng)添加props，就能在組件樹間進(jìn)行數(shù)據(jù)傳遞的方法午磁。
創(chuàng)建一個(gè)Context對(duì)象
React.createContext(defaultValue);

說一說Forwarding Refs有什么用尝抖？
是父組件用來獲取子組件的dom元素
const refs = React.createRef();
將refs傳遞給子組件，使用refs.current可以獲取子組件的dom元素

render() {
<div>
<Child ref={ref}>
</div>
}
refs.current獲取的就是Child這個(gè)組件迅皇，是一個(gè)對(duì)象{context: {}, props: {}, refs: {}, state: null, updater: {} ...}

如果使用React.forwardRef((props, ref) => (
<div><input ref={ref} /></div>
))
refs.current獲取的就是子組件里的Input的DOM元素

簡(jiǎn)述一下virtual DOM如何工作昧辽？

1. 當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，會(huì)引起組件重新渲染登颓，整個(gè)UI都會(huì)以virtual DOM的形式重新渲染
2. 然后收集差異也就是diff新的virtual dom和老的virtual dom的差異
3. 最后把差異隊(duì)列里的差異搅荞，比如增加節(jié)點(diǎn)、刪除節(jié)點(diǎn)框咙、移動(dòng)節(jié)點(diǎn)更新到真實(shí)的DOM上

什么是受控組件和非受控組件咕痛？
受控組件是表單元素的值是通過React組件的state來控制的，并且使用onChange方法通過setState()更新state屬性
非受控組件是表單數(shù)據(jù)將交由DOM節(jié)點(diǎn)來處理喇嘱，使用ref從DOM節(jié)點(diǎn)中獲取表單數(shù)據(jù)

什么是狀態(tài)提升茉贡？
有時(shí)候幾個(gè)組件需要共用狀態(tài)數(shù)據(jù)的情況下，我們將共享的狀態(tài)提升至他們最近的父組件當(dāng)中進(jìn)行處理婉称。

Portals是什么块仆？
portals提供了一種將子節(jié)點(diǎn)渲染到存在于父組件之外的DOM節(jié)點(diǎn)的方法。
ReactDOM.createPortal(child, container);
第一個(gè)參數(shù)child的任何可渲染的React子元素王暗，例如一個(gè)元素、字符串或fragment
第二個(gè)參數(shù)container是一個(gè)DOM元素
一個(gè)從portal內(nèi)部觸發(fā)的事件會(huì)一直冒泡至包含React樹的祖先庄敛，即使這些元素并不是DOM樹中的祖先俗壹。

如何在React中使用innerHTML?
增加dangerouslySetInnerHTML屬性，并且傳去對(duì)象的屬性名叫_html
如：<div dangerouslySetInnerHTML={{_html: '<span>innerHTML</span>'}}></div>

什么是Redux藻烤？
Redux是當(dāng)今最熱門的前端開發(fā)庫之一绷雏。它是JavaScript程序的可預(yù)測(cè)狀態(tài)容器头滔，用于整個(gè)應(yīng)用的狀態(tài)管理。使用Redux開發(fā)的應(yīng)用易于測(cè)試涎显，可以在不同環(huán)境中運(yùn)行坤检，并顯示一致的行為。

Redux遵循的三個(gè)原則是什么期吓？

1. 單一事實(shí)來源：整個(gè)應(yīng)用的狀態(tài)存儲(chǔ)在單個(gè)store中的對(duì)象/狀態(tài)樹里早歇。單一狀態(tài)樹可以更容易地跟蹤隨時(shí)間的變化，并調(diào)試或檢查應(yīng)用程序讨勤。
2. 狀態(tài)是只讀的：改變狀態(tài)的唯一方法是去觸發(fā)一個(gè)動(dòng)作箭跳。動(dòng)作是描述變化的普通JS對(duì)象。就像state是數(shù)據(jù)的最小表示一樣潭千，該操作是對(duì)數(shù)據(jù)更改的最小表示谱姓。
3. 使用純函數(shù)進(jìn)行更改：為了指定狀態(tài)樹如何通過操作進(jìn)行轉(zhuǎn)換，你需要純函數(shù)刨晴。純函數(shù)是那些返回值僅取決于參數(shù)值的函數(shù)屉来。

Redux的組件：

1. Action：這是一個(gè)用來藐視發(fā)生了什么事情的對(duì)象
2. Reducer：這是一個(gè)去欸的那個(gè)狀態(tài)如何變化的地方
3. Store：整個(gè)程序的狀態(tài)/對(duì)象樹保存在Store中
4. View：只顯示Store提供的數(shù)據(jù)

如何在Redux中定義Action?
React中的Action必須具有type屬性，該屬性指示正在執(zhí)行的ACTION的類型狈癞。必須將它們定義為字符串常量茄靠，并且還可以向其添加更多的屬性。

解釋Reducer的作用
Reducers是純函數(shù)亿驾，它他規(guī)定應(yīng)用程序的狀態(tài)怎樣因響應(yīng)ACTION而改變嘹黔。Reducers通過接受先前的狀態(tài)和action來工作，然后它返回一個(gè)新的狀態(tài)莫瞬。他根據(jù)操作的類型確定需要執(zhí)行哪種更新儡蔓，然后返回新的值。如果不需要完成任務(wù)疼邀，它會(huì)返回原來的狀態(tài)喂江。

Redux的Action
Action本質(zhì)上是JavaScript普通對(duì)象。我們約定旁振，action內(nèi)必須使用一個(gè)字符串類型的type字段來表示將要執(zhí)行的動(dòng)作获询。多數(shù)情況下，type會(huì)被定義成字符串常量拐袜。當(dāng)應(yīng)用規(guī)模越來越大時(shí)吉嚣，建議使用單獨(dú)的模塊或文件存放action;
{
type: 'ADD_TODO',
text: 'Build my first Redux app;
}
Action創(chuàng)建函數(shù)時(shí)生成action的方法
function addTodo(text) {
return {
type: 'ADD_TODO',
text
}
}
Redux中只需把a(bǔ)ction創(chuàng)建函數(shù)的結(jié)果傳給dispatch()方法即可發(fā)起一次dispatch過程
dispatch(addTodo(text));

Redux的Reducer
Reducer指定了應(yīng)用狀態(tài)的變化如何響應(yīng)actions并發(fā)送到store的，記住actions只是描述了有事情發(fā)生了這一事實(shí)蹬铺，并沒有描述應(yīng)用如何更新state尝哆。保持reducer純凈非常重要。永遠(yuǎn)不要在reducer里做修改傳入?yún)?shù)甜攀、執(zhí)行有副作用的操作秋泄、調(diào)用非純函數(shù)
拆分reducer琐馆，每個(gè)reducer只負(fù)責(zé)管理全局state中它負(fù)責(zé)的一部分。每個(gè)reducer的state參數(shù)都不一樣恒序，分別對(duì)應(yīng)它管理的那部分state數(shù)據(jù)瘦麸。redux提供了combineReducers()工具來管理拆分后的reducer，保持其獨(dú)立性并用于專門處理不同的數(shù)據(jù)域歧胁。combineReducers()所作的只是生成一個(gè)函數(shù)滋饲，這個(gè)函數(shù)會(huì)調(diào)用你的一系列reducer，每個(gè)reducer根據(jù)它們的key來篩選出state中的一部分?jǐn)?shù)據(jù)并處理与帆，然后這個(gè)生成的函數(shù)再將所有的reducer的結(jié)果合并成一個(gè)大的對(duì)象了赌。combineReducers接收一個(gè)對(duì)象，可以把所有頂級(jí)的reducer放到一個(gè)獨(dú)立的文件中玄糟，通過export暴露出每個(gè)reducer函數(shù)勿她，然后import * as reducers得到一個(gè)他們名字作為key的object。

Redux的Store
Store是將action和reducers聯(lián)系到一起的對(duì)象阵翎。職責(zé)：

• 維持應(yīng)用的state;
• 提供getState()方法獲取state;
• 提供dispatch(action)方法更新state;
• 通過subscribe(listener)注冊(cè)監(jiān)聽器;
• 通過subscribe(listener)返回的函數(shù)注銷監(jiān)聽器;
  Redux應(yīng)用只有一個(gè)單一的store逢并，當(dāng)需要拆分?jǐn)?shù)據(jù)處理邏輯時(shí)，應(yīng)該使用reducer組合而不是創(chuàng)建多個(gè)store
  import { createStore } from 'redux'
  import reducers from './reducers'
  let store = createStore(reducers);

Redux應(yīng)用中數(shù)據(jù)的生命周期遵循4個(gè)步驟：

1. 調(diào)用store.dispatch(action)
2. Redux store調(diào)用傳入的reducer函數(shù)
3. 根reducer應(yīng)該把多個(gè)子reducer輸出合并成一個(gè)單一的state樹
4. Redux store保存了根reducer返回的完整state樹

Redux容器組件
使用connect()方法鏈接展示組件郭卫，傳入兩個(gè)函數(shù)mapStateToProps砍聊、mapDispatchToProps，執(zhí)行connect()方法傳入展示組件
import { connect } from 'react-redux';
connect(mapStateToProps, mapDispatchToProps)(ComponentName)
function mapStateToProps(state) {
return {
text: state.text
}
}
function mapDispatchToProps(dispatch) {
return {
addTodo: text => dispatch(addTodoAction(text))
}
}

傳入store
所有容器組件都可以訪問Redux store贰军，所以可以手動(dòng)監(jiān)聽它玻蝌。一種方式是把它以props的形式傳入到所有容器組件中。但是太麻煩了词疼。因?yàn)楸仨氁胹tore把展示組件包裹一層俯树，僅僅是因?yàn)榍『迷俳M件樹中渲染了一個(gè)容器組件。建議的方式是使用指定的React Redux組件<Provider>來讓所有的容器組件都可以訪問store贰盗，而不必顯示的傳遞它许饿。只需要在渲染根節(jié)點(diǎn)時(shí)來使用即可
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import reducers from './reducers';

const store = createStore(reducers);
render(
<Provider store={store}>
<App />
</Provider>
)

異步Action時(shí)，使用Redux-thunk
使用redux-thunk庫舵盈，通過使用指定的middleware陋率，action創(chuàng)建函數(shù)除了返回action對(duì)象外還可以返回函數(shù)。這個(gè)action創(chuàng)建函數(shù)就成為了thunk秽晚。當(dāng)action創(chuàng)建函數(shù)返回函數(shù)時(shí)瓦糟，這個(gè)函數(shù)會(huì)被Redux Thunk middleware執(zhí)行，這個(gè)函數(shù)不需要保持純凈赴蝇；它還可以帶有副作用狸页，包括執(zhí)行異步API請(qǐng)求。這個(gè)函數(shù)可以dispatch action扯再。

使用Redux-thunk
import thunk from 'redux-thunk';
import { createStore, applyMiddleware } from 'redux';
import reducers from './reducers';

const store = createStore(
reducers,
applyMiddleware(thunk)
)

題目
對(duì)象自引用
嚴(yán)格模式
arguements
proxy reflect
柯理化 反柯理化
ajax的send
詞法作用域芍耘，js回收機(jī)制
ast
模板語言是如何被渲染成html
vue指令
data在組件和vue實(shí)例的區(qū)別 mixin react高級(jí)方法 electron應(yīng)用 鏈表和隊(duì)列 git的使用 ts的使用 vue的原理 抓包 http請(qǐng)求 請(qǐng)求包 vuex 不同的vuex模塊怎么調(diào)用 路由的模式 怎么在hash下消除# linux的使用 nginx端口多配置 option是哪個(gè)層進(jìn)行處理的