摘要：面過(guò)的公司，大疆，阿里，網(wǎng)易，百度，電信研發(fā)中心，深信服，華為，小米，搜狗，騰訊。拿了的公司目前是大疆電信深信服華為。一面二面因?yàn)闀r(shí)間太久，就直接放在一起了，問(wèn)的都是基礎(chǔ)吧，講真，大疆前端面試不難，都是很基礎(chǔ)的，就是時(shí)間長(zhǎng)，等的捉急。

自我介紹下：某985碩士，程序媛，接觸前端一年時(shí)間。從八月份開(kāi)始校招面試筆試，前前后后大廠小廠也都面了挺多，不過(guò)大廠基本都被我掛完了，哭暈我，還是太菜啊。面過(guò)的公司：ThoughtWorks，大疆，阿里，網(wǎng)易，百度，電信it研發(fā)中心，深信服，華為，小米，搜狗，騰訊。拿了offer的公司目前是：大疆、電信、深信服、華為。下面總結(jié)了這段時(shí)間的面筋和掛筋~

10月16日更新，面了騰訊一面，然后就掛了，結(jié)束的太快就像龍卷風(fēng)。

1. 怎么從十萬(wàn)個(gè)節(jié)點(diǎn)中找到想要的節(jié)點(diǎn)，怎么快速在某個(gè)節(jié)點(diǎn)前插入一個(gè)節(jié)點(diǎn)？

這個(gè)題目我已經(jīng)在segmentfault上提問(wèn)了，目前還沒(méi)有人給出回答，求大神前去解答~

題目鏈接： 怎么在有十萬(wàn)個(gè)節(jié)點(diǎn)的html文檔中找到特定的某個(gè)節(jié)點(diǎn)

2. 負(fù)載均衡方式和容錯(cuò)機(jī)制

3. 描述一個(gè)文件從硬盤讀取到進(jìn)程內(nèi)存中的過(guò)程

4. TCP三次握手和揮手的過(guò)程，除了這些書本上的還有哪些?

5. 畫一下OSI七層模型

6. 寫一個(gè)你最熟悉的算法

7. 有哪些偽類和偽元素

8. IE盒模型和標(biāo)準(zhǔn)盒模型，用哪個(gè)屬性改變

9. 怎么清除浮動(dòng)，原理是什么

10. em,rem,px的區(qū)別

大疆是我校招面的第一家公司，從六月份投簡(jiǎn)歷，然后筆試面試到拿到錄用意向書，前后用了近四個(gè)月，來(lái)之不易啊。

因?yàn)闀r(shí)間太久，就直接放在一起了，問(wèn)的都是基礎(chǔ)吧，講真，大疆前端面試不難，都是很基礎(chǔ)的，就是時(shí)間長(zhǎng)，等的捉急。一面是電話面，兩個(gè)面試官輪流問(wèn)；二面是視頻面，是三個(gè)面試官一起微信視頻，視頻面還是蠻累的，上下左右都得顧上；終面是去的現(xiàn)場(chǎng)面，就跟一個(gè)面試官聊了十幾分鐘人生。

1. meta標(biāo)簽

meta標(biāo)簽：提供給頁(yè)面的一些元信息（名稱/值對(duì)）， 比如針對(duì)搜索引擎和更新頻度的描述和關(guān)鍵詞。

name：名稱/值對(duì)中的名稱。常用的有author、description、keywords、generator、revised、others。 把 content 屬性關(guān)聯(lián)到一個(gè)名稱。

http-equiv：沒(méi)有name時(shí)，會(huì)采用這個(gè)屬性的值。常用的有content-type、expires、refresh、set-cookie。把content屬性關(guān)聯(lián)到http頭部。

content： 名稱/值對(duì)中的值， 可以是任何有效的字符串。 始終要和 name 屬性或 http-equiv 屬性一起使用。

scheme： 用于指定要用來(lái)翻譯屬性值的方案。

2. css哪些屬性可以繼承

字體相關(guān)：line-height, font-family, font-size, font-style, font-variant, font-weight, font

文本相關(guān)： letter-spacing, text-align, text-indent, text-transform, word-spacing

列表相關(guān)：list-style-image, list-style-position, list-style-type, list-style

顏色：color

3. css3有哪些新屬性

（1）邊框：

border-radius：圓角邊框，border-radius:25px;

box-shadow：邊框陰影，box-shadow: 10px 10px 5px #888888;

border-image：邊框圖片，border-image:url(border.png) 30 30 round;

（2）背景：

background-size：規(guī)定背景圖片的尺寸，background-size:63px 100px;

background-origin：規(guī)定背景圖片的定位區(qū)域，背景圖片可以放置于 content-box、padding-box 或 border-box 區(qū)域。background-origin:content-box;

CSS3 允許您為元素使用多個(gè)背景圖像。background-image:url(bg_flower.gif),url(bg_flower_2.gif);

（3）文本效果：

text-shadow：向文本應(yīng)用陰影，可以規(guī)定水平陰影、垂直陰影、模糊距離，以及陰影的顏色。text-shadow: 5px 5px 5px #FF0000;

word-wrap：允許文本進(jìn)行換行。word-wrap:break-word;

（4）字體：CSS3 @font-face 規(guī)則可以自定義字體。

（5）2D 轉(zhuǎn)換（transform）

translate()：元素從其當(dāng)前位置移動(dòng)，根據(jù)給定的 left（x 坐標(biāo)） 和 top（y 坐標(biāo)） 位置參數(shù)。 transform: translate(50px,100px);

rotate()：元素順時(shí)針旋轉(zhuǎn)給定的角度。允許負(fù)值，元素將逆時(shí)針旋轉(zhuǎn)。transform: rotate(30deg);

scale()：元素的尺寸會(huì)增加或減少，根據(jù)給定的寬度（X 軸）和高度（Y 軸）參數(shù)。transform: scale(2,4);

skew()：元素翻轉(zhuǎn)給定的角度，根據(jù)給定的水平線（X 軸）和垂直線（Y 軸）參數(shù)。transform: skew(30deg,20deg);

matrix()： 把所有 2D 轉(zhuǎn)換方法組合在一起，需要六個(gè)參數(shù)，包含數(shù)學(xué)函數(shù)，允許您：旋轉(zhuǎn)、縮放、移動(dòng)以及傾斜元素。transform:matrix(0.866,0.5,-0.5,0.866,0,0);

（6）3D 轉(zhuǎn)換

rotateX()：元素圍繞其 X 軸以給定的度數(shù)進(jìn)行旋轉(zhuǎn)。transform: rotateX(120deg);

rotateY()：元素圍繞其 Y 軸以給定的度數(shù)進(jìn)行旋轉(zhuǎn)。transform: rotateY(130deg);

（7）transition：過(guò)渡效果，使頁(yè)面變化更平滑

transition-property ：執(zhí)行動(dòng)畫對(duì)應(yīng)的屬性，例如 color，background 等，可以使用 all 來(lái)指定所有的屬性。

transition-duration：過(guò)渡動(dòng)畫的一個(gè)持續(xù)時(shí)間。

transition-timing-function：在延續(xù)時(shí)間段，動(dòng)畫變化的速率，常見(jiàn)的有：ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier 。

transition-delay：延遲多久后開(kāi)始動(dòng)畫。

簡(jiǎn)寫為：transition: [ || || || ];

（8）animation：動(dòng)畫

使用CSS3 @keyframes 規(guī)則。

animation-name: 定義動(dòng)畫名稱

animation-duration: 指定元素播放動(dòng)畫所持續(xù)的時(shí)間長(zhǎng)

animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , )： 指元素根據(jù)時(shí)間的推進(jìn)來(lái)改變屬性值的變換速率，說(shuō)得簡(jiǎn)單點(diǎn)就是動(dòng)畫的播放方式。

animation-delay: 指定元素動(dòng)畫開(kāi)始時(shí)間

animation-iteration-count:infinite | ：指定元素播放動(dòng)畫的循環(huán)次

animation-direction: normal | alternate： 指定元素動(dòng)畫播放的方向，其只有兩個(gè)值，默認(rèn)值為normal，如果設(shè)置為normal時(shí)，動(dòng)畫的每次循環(huán)都是向前播放；另一個(gè)值是alternate，他的作用是，動(dòng)畫播放在第偶數(shù)次向前播放，第奇數(shù)次向反方向播放。

animation-play-state:running | paused ：控制元素動(dòng)畫的播放狀態(tài)。

簡(jiǎn)寫為： animation:[ || || || || || ]

這里只列出了一部分，詳情可以去看w3school的CSS3 教程。

4. 閉包是什么，什么時(shí)候閉包會(huì)消除?

因?yàn)樽饔糜蜴?，外部不能訪問(wèn)內(nèi)部的變量和方法，這時(shí)我們就需要通過(guò)閉包，返回內(nèi)部的方法和變量給外部，從而就形成了一個(gè)閉包。

JavaScript是一門具有自動(dòng)垃圾回收機(jī)制的編程語(yǔ)言，主要有兩種方式：

標(biāo)記清除（最常用）

垃圾收集器在運(yùn)行的時(shí)候會(huì)給存儲(chǔ)在內(nèi)存中的所有變量都加上標(biāo)記（可以使用任何標(biāo)記方式）。然后，它會(huì)去掉環(huán)境中的變量以及被環(huán)境中的變量引用的變量的標(biāo)記。而在此之后再被加上標(biāo)記的變量將被視為準(zhǔn)備刪除的變量，原因是環(huán)境中的變量已經(jīng)無(wú)法訪問(wèn)到這些變量了。最后，垃圾收集器完成內(nèi)存清除工作，銷毀那些帶標(biāo)記的值并回收它們所占用的內(nèi)存空間。

引用計(jì)數(shù)

引用計(jì)數(shù)（reference counting）的含義是跟蹤記錄每個(gè)值被引用的次數(shù)。當(dāng)聲明了一個(gè)變量并將一個(gè)引用類型值賦給該變量時(shí)，則這個(gè)值的引用次數(shù)就是1。如果同一個(gè)值又被賦給另一個(gè)變量，則該值的引用次數(shù)加1。相反，如果包含對(duì)這個(gè)值引用的變量又取得了另外一個(gè)值，則這個(gè)值的引用次數(shù)減1。當(dāng)這個(gè)值的引用次數(shù)變成0 時(shí)，則說(shuō)明沒(méi)有辦法再訪問(wèn)這個(gè)值了，因而就可以將其占用的內(nèi)存空間回收回來(lái)。這樣，當(dāng)垃圾收集器下次再運(yùn)行時(shí)，它就會(huì)釋放那些引用次數(shù)為零的值所占用的內(nèi)存。

導(dǎo)致問(wèn)題：會(huì)導(dǎo)致循環(huán)引用的變量和函數(shù)無(wú)法回收。

解決：將用完的函數(shù)或者變量置為null。

5. 怎么理解js是單線程的

主要說(shuō)一下異步以及事件循環(huán)機(jī)制，還有事件隊(duì)列中的宏任務(wù)、微任務(wù)。

macrotask：主代碼塊，setTimeout，setInterval、setImmediate等。

microtask：process.nextTick（相當(dāng)于node.js版的setTimeout），Promise 。process.nextTick的優(yōu)先級(jí)高于Promise。

更詳細(xì)可以看這篇博客：這一次，徹底弄懂 JavaScript 執(zhí)行機(jī)制，講的非常清晰。

6. 有哪些排序算法，時(shí)間復(fù)雜度是多少？什么時(shí)候快排的效率最低？

整個(gè)序列已經(jīng)有序或完全倒序時(shí)，快排的效率最低。

7. 原生ajax的請(qǐng)求過(guò)程

創(chuàng)建全平臺(tái)兼容的XMLHttpRequest對(duì)象：

function getXHR(){
  var xhr = null;
  if(window.XMLHttpRequest) {// 兼容 IE7+, Firefox, Chrome, Opera, Safari
    xhr = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    try {
      xhr = new ActiveXObject("Msxml2.XMLHTTP");// 即MSXML3
    } catch (e) {
      try {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");// // 兼容 IE6, IE5，很老的api,雖然瀏覽器支持,功能可能不完善,故不建議使用
      } catch (e) {
        alert("您的瀏覽器暫不支持Ajax!");
      }
    }
  }
  return xhr;
}

Ajax請(qǐng)求數(shù)據(jù)的過(guò)程：

var xhr = getXHR();
xhr.open("GET", url/file,true);  //設(shè)置請(qǐng)求方式，url，以及是否異步
xhr.onreadystatechange = function() {   //設(shè)置回調(diào)監(jiān)聽(tīng)函數(shù)
   if(xhr.readyState==4){
        if(xhr.status==200){
            var data=xhr.responseText;
             console.log(data);
   }
};
xhr.onerror = function() {
  console.log("Oh, error");
};
xhr.send();  //發(fā)送請(qǐng)求

8. http狀態(tài)碼，cookie字段，cookie一般存的是什么，session怎么存在的？

這部分可以參考我的博客：HTTP協(xié)議知識(shí)點(diǎn)總結(jié)

9. http請(qǐng)求方式有哪些？

HTTP1.0定義了三種請(qǐng)求方法： GET, POST 和 HEAD方法。

HTTP1.1新增了五種請(qǐng)求方法：OPTIONS, PUT, DELETE, TRACE 和 CONNECT 方法。

更多請(qǐng)看：HTTP請(qǐng)求方法

10. 怎么用原生js實(shí)現(xiàn)一個(gè)輪播圖，以及滾動(dòng)滑動(dòng)

之前我使用輪播圖都是用的antd的組件，所以我大致說(shuō)了一下思路，用定時(shí)器去實(shí)現(xiàn)，以及如何實(shí)現(xiàn)平滑的滾動(dòng)效果。詳情請(qǐng)看： 原生js實(shí)現(xiàn)輪播圖

11. 用過(guò)哪些開(kāi)源的組件

說(shuō)了antd和element-ui。

12. 怎么實(shí)現(xiàn)上傳下載的功能

主要說(shuō)了下form表單和input標(biāo)簽。

13. react生命周期，以及diff算法，diff算法是對(duì)樹的深度優(yōu)先遍歷還是廣度優(yōu)先遍歷？

對(duì)React、Redux、React-Redux詳細(xì)剖析

是深度優(yōu)先遍歷。 diff的實(shí)現(xiàn)

14. 強(qiáng)緩存和協(xié)商緩存

參考：HTTP協(xié)議知識(shí)點(diǎn)總結(jié)

15. react-router的原理

react-router就是控制不同的url渲染不同的組件。react-router在history庫(kù)的基礎(chǔ)上，實(shí)現(xiàn)了URL與UI的同步。

原理：DOM渲染完成之后，給window添加onhashchange事件監(jiān)聽(tīng)頁(yè)面hash的變化，并且在state屬性中添加了route屬性，代表當(dāng)前頁(yè)面的路由。

具體步驟：

當(dāng)點(diǎn)擊鏈接，頁(yè)面hash改變時(shí)，觸發(fā)綁定在 window 上的 onhashchange 事件；

在 onhashchange 事件中改變組件的 state中的 route 屬性，react組件的state屬性改變時(shí)，自動(dòng)重新渲染頁(yè)面；

頁(yè)面隨著 state 中的route屬性改變，自動(dòng)根據(jù)不同的hash給Child變量賦值不同的組件，進(jìn)行渲染。

參考：react-router的實(shí)現(xiàn)原理

16. 怎么用無(wú)人機(jī)捕獲天空上的鳥

這個(gè)題目我也不造啊，畢竟我沒(méi)用過(guò)無(wú)人機(jī)，有知道的大神可以在評(píng)論中回答一下~

終面是去的現(xiàn)場(chǎng)，在深圳總部那邊，基本就是閑聊了二十來(lái)分鐘吧，面完還有hr小姐姐給我們介紹和參觀了無(wú)人機(jī)，酷炫~

做的項(xiàng)目中，哪個(gè)做的最深入最久

為什么要做前端，喜歡做前端么

未來(lái)的職業(yè)規(guī)劃

了解大疆么，大疆的文化是什么

除了實(shí)習(xí)，還做過(guò)哪些項(xiàng)目

如果生活富足，衣食無(wú)憂，你會(huì)選擇干什么

阿里是提前批，找人內(nèi)推了菜鳥網(wǎng)絡(luò)，面了六輪，面的我懷疑人生了，中途四面本來(lái)已經(jīng)掛了，后面三面面試官又撈起來(lái)給我加面了一輪，不過(guò)最后還是掛在了hr。

1. css選擇器，怎么選擇相同的類

id、class、標(biāo)簽、偽類、通配符等?？梢杂胓etElementsByClassName（）選擇相同的類。

2. css3有哪些偽類，偽類選擇器有哪些

這里要區(qū)分一下偽類和偽元素的概念。根本區(qū)別在于它們是否創(chuàng)造了新的元素(抽象)。

偽類：用于向某些選擇器添加特殊的效果。例如，a標(biāo)簽的:link, :visited, :hover, :active; 以及 :first-child, :last-child。

偽元素：是html中不存在的元素，用于將特殊的效果添加到某些選擇器。例如:before,:after, :first-letter, :first-line。css3只新增了一個(gè)偽元素 ::selection（改變用戶所選取部分的樣式）。

參考： CSS3 選擇器——偽類選擇器

3. OSI七層網(wǎng)絡(luò)模型

參考： 一張非常強(qiáng)大的OSI七層模型圖解

4. MVC和MVVM的區(qū)別

Model用于封裝和應(yīng)用程序的業(yè)務(wù)邏輯相關(guān)的數(shù)據(jù)以及對(duì)數(shù)據(jù)的處理方法；

View作為視圖層，主要負(fù)責(zé)數(shù)據(jù)的展示；

Controller定義用戶界面對(duì)用戶輸入的響應(yīng)方式，它連接模型和視圖，用于控制應(yīng)用程序的流程，處理用戶的行為和數(shù)據(jù)上的改變。

MVC將響應(yīng)機(jī)制封裝在controller對(duì)象中，當(dāng)用戶和你的應(yīng)用產(chǎn)生交互時(shí)，控制器中的事件觸發(fā)器就開(kāi)始工作了。

MVVM把View和Model的同步邏輯自動(dòng)化了。以前Controller負(fù)責(zé)的View和Model同步不再手動(dòng)地進(jìn)行操作，而是交給框架所提供的數(shù)據(jù)綁定功能進(jìn)行負(fù)責(zé)，只需要告訴它View顯示的數(shù)據(jù)對(duì)應(yīng)的是Model哪一部分即可。也就是雙向數(shù)據(jù)綁定，就是View的變化能實(shí)時(shí)讓Model發(fā)生變化，而Model的變化也能實(shí)時(shí)更新到View。

參考： 淺析前端開(kāi)發(fā)中的 MVC/MVP/MVVM 模式

5. 用過(guò)哪些設(shè)計(jì)模式

（1）單例模式

定義：保證一個(gè)類僅有一個(gè)實(shí)例，并提供一個(gè)訪問(wèn)它的全局訪問(wèn)點(diǎn)。

實(shí)現(xiàn)方法：先判斷實(shí)例存在與否，如果存在則直接返回，如果不存在就創(chuàng)建了再返回，這就確保了一個(gè)類只有一個(gè)實(shí)例對(duì)象。

適用場(chǎng)景：一個(gè)單一對(duì)象。比如：彈窗，無(wú)論點(diǎn)擊多少次，彈窗只應(yīng)該被創(chuàng)建一次。

（2）發(fā)布/訂閱模式
定義：又叫觀察者模式,它定義對(duì)象間的一種一對(duì)多的依賴關(guān)系,當(dāng)一個(gè)對(duì)象的狀態(tài)發(fā)生改變時(shí),所有依賴于它的對(duì)象都將得到通知。

場(chǎng)景：訂閱感興趣的專欄和公眾號(hào)。

（3）策略模式
定義：將一個(gè)個(gè)算法（解決方案）封裝在一個(gè)個(gè)策略類中。

優(yōu)點(diǎn)：

策略模式可以避免代碼中的多重判斷條件。

策略模式很好的體現(xiàn)了開(kāi)放-封閉原則，將一個(gè)個(gè)算法（解決方案）封裝在一個(gè)個(gè)策略類中。便于切換，理解，擴(kuò)展。

策略中的各種算法可以重復(fù)利用在系統(tǒng)的各個(gè)地方，避免復(fù)制粘貼。

策略模式在程序中或多或少的增加了策略類。但比堆砌在業(yè)務(wù)邏輯中要清晰明了。

違反最少知識(shí)原則，必須要了解各種策略類，才能更好的在業(yè)務(wù)中應(yīng)用。

應(yīng)用場(chǎng)景：根據(jù)不同的員工績(jī)效計(jì)算不同的獎(jiǎng)金；表單驗(yàn)證中的多種校驗(yàn)規(guī)則。

（4）代理模式

定義：為一個(gè)對(duì)象提供一個(gè)代用品或占位符，以便控制對(duì)它的訪問(wèn)。

應(yīng)用場(chǎng)景：圖片懶加載（先通過(guò)一張loading圖占位，然后通過(guò)異步的方式加載圖片，等圖片加載好了再把完成的圖片加載到img標(biāo)簽里面。）

（5）中介者模式

定義：通過(guò)一個(gè)中介者對(duì)象，其他所有相關(guān)對(duì)象都通過(guò)該中介者對(duì)象來(lái)通信，而不是互相引用，當(dāng)其中的一個(gè)對(duì)象發(fā)生改變時(shí)，只要通知中介者對(duì)象就可以?？梢越獬龑?duì)象與對(duì)象之間的緊耦合關(guān)系。

應(yīng)用場(chǎng)景： 例如購(gòu)物車需求，存在商品選擇表單、顏色選擇表單、購(gòu)買數(shù)量表單等等，都會(huì)觸發(fā)change事件，那么可以通過(guò)中介者來(lái)轉(zhuǎn)發(fā)處理這些事件，實(shí)現(xiàn)各個(gè)事件間的解耦，僅僅維護(hù)中介者對(duì)象即可。

（6）裝飾者模式

定義：在不改變對(duì)象自身的基礎(chǔ)上，在程序運(yùn)行期間給對(duì)象動(dòng)態(tài)的添加方法。

應(yīng)用場(chǎng)景： 有方法維持不變，在原有方法上再掛載其他方法來(lái)滿足現(xiàn)有需求；函數(shù)的解耦，將函數(shù)拆分成多個(gè)可復(fù)用的函數(shù)，再將拆分出來(lái)的函數(shù)掛載到某個(gè)函數(shù)上，實(shí)現(xiàn)相同的效果但增強(qiáng)了復(fù)用性。

參考： JavaScript設(shè)計(jì)模式

6. Http狀態(tài)碼

7. https怎么加密

參考： HTTP協(xié)議知識(shí)點(diǎn)總結(jié)

8. es6相比es5有哪些優(yōu)點(diǎn)

大概說(shuō)一下：let、const，模板字符串，箭頭函數(shù)，做異步處理的promise、generator、async await，es6模塊等。

參考： 阮一峰 —— ECMAScript 6 入門

9. ajax請(qǐng)求過(guò)程

不多說(shuō)，上面有。

10. 有哪些性能優(yōu)化

參考：

嗨，送你一張Web性能優(yōu)化地圖

前端優(yōu)化不完全指南

11. 懶加載怎么實(shí)現(xiàn)

場(chǎng)景：一個(gè)頁(yè)面中很多圖片，但是首屏只出現(xiàn)幾張，這時(shí)如果一次性把圖片都加載出來(lái)會(huì)影響性能。這時(shí)可以使用懶加載，頁(yè)面滾動(dòng)到可視區(qū)在加載。優(yōu)化首屏加載。

實(shí)現(xiàn)：img標(biāo)簽src屬性為空，給一個(gè)data-xx屬性，里面存放圖片真實(shí)地址，當(dāng)頁(yè)面滾動(dòng)直至此圖片出現(xiàn)在可視區(qū)域時(shí)，用js取到該圖片的data-xx的值賦給src。

優(yōu)點(diǎn)：頁(yè)面加載速度快，減輕服務(wù)器壓力、節(jié)約流量，用戶體驗(yàn)好。

12. 項(xiàng)目中寫過(guò)什么組件，組件有哪些功能

主要介紹了下實(shí)習(xí)項(xiàng)目寫過(guò)的組件，說(shuō)了下如何實(shí)現(xiàn)的。

1. react框架有哪些設(shè)計(jì)的好的地方

主要介紹了以下幾個(gè)部分：

JSX語(yǔ)法

組件化

react單項(xiàng)數(shù)據(jù)流

虛擬DOM

react生命周期

2. react是怎么工作的，怎么提高性能

主要還是說(shuō)了下react的生命周期，還有shouldComponentUpdate這個(gè)函數(shù)，以及diff算法。

3. redux有哪些需要改進(jìn)，你覺(jué)得你用的不怎么舒服的地方？

我當(dāng)時(shí)說(shuō)的是redux的subscribe方法有點(diǎn)麻煩，每次更新數(shù)據(jù)都要手動(dòng)的subscribe一下，所以覺(jué)得react-redux的api封裝的更好，用起來(lái)比較簡(jiǎn)單。

參考：

這段時(shí)間研究了下Redux，寫寫自己對(duì)它的感覺(jué)

Redux數(shù)據(jù)流管理架構(gòu)有什么致命缺陷,未來(lái)會(huì)如何改進(jìn)?

4. 怎么設(shè)計(jì)一個(gè)類似于antd 的 react 組件庫(kù)

這個(gè)問(wèn)題把我給問(wèn)懵了額，我是按照軟件工程的生命周期流程來(lái)答的。

5. 你做的最自豪的一個(gè)項(xiàng)目

這個(gè)略過(guò)...言之有理即可

6. mysql 的左關(guān)聯(lián)和右關(guān)聯(lián)

左關(guān)聯(lián)：保留左表中所有的元組，右表中沒(méi)有的屬性填充NULL。

右關(guān)聯(lián)：保留右表中所有的元組，左表中沒(méi)有的屬性填充NULL。

7. 有沒(méi)有折騰過(guò)后端

直接說(shuō)了沒(méi)有，之前學(xué)了點(diǎn)PHP，不過(guò)都快忘得差不多了額。

8. 學(xué)習(xí)方法和未來(lái)的學(xué)習(xí)路線

言之有理即可。

9. 瀏覽器頁(yè)面渲染機(jī)制

解析html建立dom樹

解析css構(gòu)建render樹（將CSS代碼解析成樹形的數(shù)據(jù)結(jié)構(gòu)，然后結(jié)合DOM合并成render樹）

布局render樹（Layout/reflow），負(fù)責(zé)各元素尺寸、位置的計(jì)算

繪制render樹（paint），繪制頁(yè)面像素信息

瀏覽器會(huì)將各層的信息發(fā)送給GPU，GPU會(huì)將各層合成（composite），顯示在屏幕上。

參考： 從瀏覽器多進(jìn)程到JS單線程，JS運(yùn)行機(jī)制最全面的一次梳理

10. XSS和CSRF防范措施

（1）XSS：跨站腳本攻擊

攻擊方式：在URL或者頁(yè)面輸入框中插入JavaScript代碼。

防范：

設(shè)置httpOnly，禁止用document.cookie操作；

輸入檢查：在用戶輸入的時(shí)候進(jìn)行格式檢查；

對(duì)輸出轉(zhuǎn)義。

（2）CSRF：跨站點(diǎn)偽造請(qǐng)求

攻擊方式：攻擊者通過(guò)一些技術(shù)手段欺騙用戶的瀏覽器去訪問(wèn)一個(gè)自己曾經(jīng)認(rèn)證過(guò)的網(wǎng)站并執(zhí)行一些操作（如發(fā)郵件，發(fā)消息，甚至財(cái)產(chǎn)操作如轉(zhuǎn)賬和購(gòu)買商品）。主要是拿到了用戶的登錄態(tài)。

防范：

檢查 Referer 字段：這個(gè)字段用以標(biāo)明請(qǐng)求來(lái)源于哪個(gè)地址。在處理敏感數(shù)據(jù)請(qǐng)求時(shí)，通常來(lái)說(shuō)，Referer 字段應(yīng)和請(qǐng)求的地址位于同一域名下。

添加校驗(yàn) Token：這種數(shù)據(jù)通常是表單中的一個(gè)數(shù)據(jù)項(xiàng)。服務(wù)器生成token并附加在表單中，其內(nèi)容是一個(gè)偽亂數(shù)。當(dāng)客戶端通過(guò)表單提交請(qǐng)求時(shí)，這個(gè)偽亂數(shù)也一并提交上去以供校驗(yàn)。正常的訪問(wèn)時(shí)，客戶端瀏覽器能夠正確得到并傳回這個(gè)偽亂數(shù)，而通過(guò) CSRF 傳來(lái)的欺騙性攻擊中，攻擊者無(wú)從事先得知這個(gè)偽亂數(shù)的值，服務(wù)器端就會(huì)因?yàn)樾ｒ?yàn) Token 的值為空或者錯(cuò)誤，拒絕這個(gè)可疑請(qǐng)求。

通過(guò)輸入驗(yàn)證碼來(lái)校驗(yàn)合法請(qǐng)求。

這一面基本問(wèn)的是個(gè)人知識(shí)沉淀了，如實(shí)回答就可以了。

在項(xiàng)目中的難點(diǎn)，怎么解決的

你的優(yōu)勢(shì)是什么

redux 源碼學(xué)到了什么，怎么看源碼的

了解哪些前端的前沿技術(shù)

平時(shí)看什么書，興趣愛(ài)好是什么

異步有哪些方法

博客寫了什么

除了實(shí)習(xí)經(jīng)歷，還做過(guò)哪些項(xiàng)目

這一面是在杭州菜鳥現(xiàn)場(chǎng)面的，尷尬的是通知我的小姐姐一直強(qiáng)調(diào)是hr面，我天真的以為是hr面了，然鵝問(wèn)了很多技術(shù)，當(dāng)時(shí)候想的是阿里的hr都這么厲害了，都能直接問(wèn)技術(shù)了。臨走之前，特意問(wèn)了面試官是hr面么，他說(shuō)是技術(shù)，然后我......大概就知道自己涼了。

1. mysql的索引用的什么，介紹一下b樹，b+樹，紅黑樹這些

mysql的索引用的是B+樹。

參考： 數(shù)據(jù)結(jié)構(gòu)中常見(jiàn)的樹（BST二叉搜索樹、AVL平衡二叉樹、RBT紅黑樹、B-樹、B+樹、B*樹）

2. Mysql的基本寫法

參考： 一千行 MySQL 學(xué)習(xí)筆記

3. 估算下杭州上空現(xiàn)在有多少架飛機(jī)

這個(gè)題目，也真的是為難我了額。在網(wǎng)上搜到了個(gè)答案，可以參考下：高盛的面試題

4. 兩組數(shù)據(jù)，都存儲(chǔ)五億條url，內(nèi)存有4G，如何找出相同的兩條url

參考： 面試- 阿里-. 大數(shù)據(jù)題目- 給定a、b兩個(gè)文件，各存放50億個(gè)url，每個(gè)url各占64字節(jié)，內(nèi)存限制是4G，讓你找出a、b文件共同的url?

5. 如何找到一個(gè)字符串中最長(zhǎng)的兩個(gè)字符串

解法：后綴數(shù)組。首先生成字符串的所有后綴數(shù)組，在進(jìn)行排序，找出相鄰兩個(gè)最長(zhǎng)的公共子串（從第一位開(kāi)始相同的）

例如：abcdeabc

生成后綴數(shù)組：【abcdeabc，bcdeabc，cdeabc，deabc，eabc，abc，bc，c】

再排序：【abcdeabc，abc，bcdeabc，bc，cdeabc，c，deabc，eabc】

找出相鄰的最長(zhǎng)公共子串：【abc，bc，c】

因此，最長(zhǎng)的串是abc。

6. 在白板上畫出這個(gè)項(xiàng)目的整個(gè)架構(gòu)

畫了下項(xiàng)目的功能架構(gòu)什么的。

7. XSS, CSRF,token 怎么來(lái)的，sql 注入知道么

sql注入：

攻擊方式：服務(wù)器上的數(shù)據(jù)庫(kù)運(yùn)行非法的 SQL 語(yǔ)句，主要通過(guò)拼接字符串的形式來(lái)完成，改變sql語(yǔ)句本身的語(yǔ)義。通過(guò)sql語(yǔ)句實(shí)現(xiàn)無(wú)賬號(hào)登陸，甚至篡改數(shù)據(jù)庫(kù)。

防御：

使用參數(shù)化查詢：使用預(yù)編譯語(yǔ)句，預(yù)先編譯的 SQL 語(yǔ)句，并且傳入適當(dāng)參數(shù)多次執(zhí)行。由于沒(méi)有拼接的過(guò)程，因此可以防止 SQL 注入的發(fā)生。 使用preparedStatement的參數(shù)化sql，通過(guò)先確定語(yǔ)義，再傳入?yún)?shù)，就不會(huì)因?yàn)閭魅氲膮?shù)改變sql的語(yǔ)義。（通過(guò)setInt，setString，setBoolean傳入?yún)?shù)）

單引號(hào)轉(zhuǎn)換：將傳入的參數(shù)中的單引號(hào)轉(zhuǎn)換為連續(xù)兩個(gè)單引號(hào)，PHP 中的 Magic quote 可以完成這個(gè)功能。

檢查變量數(shù)據(jù)類型和格式。

使用正則表達(dá)式過(guò)濾傳入的參數(shù)，對(duì)特殊符號(hào)過(guò)濾或者轉(zhuǎn)義處理。

8. 怎么設(shè)計(jì)一個(gè)ant的組件

9. 你覺(jué)得你實(shí)習(xí)做的項(xiàng)目有什么改進(jìn)的地方

10. 你做過(guò)印象最深刻的項(xiàng)目

11. 算法了解過(guò)嗎

就知道一些基本的排序額...

12. Setstate 會(huì)發(fā)生什么

setState會(huì)引發(fā)一次組件的更新過(guò)程，從而引發(fā)頁(yè)面的重新繪制。主要會(huì)涉及以下幾個(gè)生命周期函數(shù)：

shouldComponentUpdate（被調(diào)用時(shí)this.state沒(méi)有更新；如果返回了false，生命周期被中斷，雖然不調(diào)用之后的函數(shù)了，但是state仍然會(huì)被更新）

componentWillUpdate（被調(diào)用時(shí)this.state沒(méi)有更新）

render（被調(diào)用時(shí)this.state得到更新）

componentDidUpdate

13. 平時(shí)處理過(guò)什么兼容性

參考： web前端兼容性問(wèn)題總結(jié)

14. 了解分布式和負(fù)載均衡么

然鵝我并不了解呃。

參考： 服務(wù)器負(fù)載均衡的基本功能和實(shí)現(xiàn)原理

第四面確實(shí)是掛了，沒(méi)面hr就讓我走了，后面過(guò)了兩天之后，三面面試官又把我撈起來(lái)了，說(shuō)我計(jì)算機(jī)基礎(chǔ)還有數(shù)據(jù)庫(kù)基礎(chǔ)不怎么好，然后說(shuō)問(wèn)我?guī)讉€(gè)簡(jiǎn)單的，之后給了我機(jī)會(huì)面了hr，感謝三面面試官讓我體驗(yàn)了阿里的整個(gè)面試流程，很滿足了。

1. 進(jìn)程和線程的區(qū)別

根本區(qū)別：進(jìn)程是操作系統(tǒng)資源分配的基本單位，而線程是任務(wù)調(diào)度和執(zhí)行的基本單位。

在開(kāi)銷方面：每個(gè)進(jìn)程都有獨(dú)立的代碼和數(shù)據(jù)空間（程序上下文），程序之間的切換會(huì)有較大的開(kāi)銷；線程可以看做輕量級(jí)的進(jìn)程，同一類線程共享代碼和數(shù)據(jù)空間，每個(gè)線程都有自己獨(dú)立的運(yùn)行棧和程序計(jì)數(shù)器（PC），線程之間切換的開(kāi)銷小。

所處環(huán)境：在操作系統(tǒng)中能同時(shí)運(yùn)行多個(gè)進(jìn)程（程序）；而在同一個(gè)進(jìn)程（程序）中有多個(gè)線程同時(shí)執(zhí)行（通過(guò)CPU調(diào)度，在每個(gè)時(shí)間片中只有一個(gè)線程執(zhí)行）。

內(nèi)存分配方面：系統(tǒng)在運(yùn)行的時(shí)候會(huì)為每個(gè)進(jìn)程分配不同的內(nèi)存空間；而對(duì)線程而言，除了CPU外，系統(tǒng)不會(huì)為線程分配內(nèi)存（線程所使用的資源來(lái)自其所屬進(jìn)程的資源），線程組之間只能共享資源。

包含關(guān)系：沒(méi)有線程的進(jìn)程可以看做是單線程的，如果一個(gè)進(jìn)程內(nèi)有多個(gè)線程，則執(zhí)行過(guò)程不是一條線的，而是多條線（線程）共同完成的；線程是進(jìn)程的一部分，所以線程也被稱為輕權(quán)進(jìn)程或者輕量級(jí)進(jìn)程。

2. 冒泡排序和快速排序的區(qū)別

簡(jiǎn)述了下冒泡和快排的思想，以及冒泡和快排的時(shí)間復(fù)雜度。

3. OSI七層模型以及作用

上面有寫噢，不知道的往上翻。

4. 你有哪些優(yōu)勢(shì)，或者打動(dòng)他的

呃，最怕這種自夸的問(wèn)題額，然后就是夸了一頓，手動(dòng)捂臉。

5. 面向?qū)ο蠛头敲嫦驅(qū)ο笥惺裁磪^(qū)別

面向?qū)ο笕筇匦裕悍庋b,繼承,多態(tài)。

面向?qū)ο蟮暮锰帲?/p>

將對(duì)象進(jìn)行分類，分別封裝它們的數(shù)據(jù)和可以調(diào)用的方法，方便了函數(shù)、變量、數(shù)據(jù)的管理，方便方法的調(diào)用（減少重復(fù)參數(shù)等），尤其是在編寫大型程序時(shí)更有幫助。

用面向?qū)ο蟮木幊炭梢园炎兞慨?dāng)成對(duì)象進(jìn)行操作，讓編程思路更加清晰簡(jiǎn)潔，而且減少了很多冗余變量的出現(xiàn)

參考： 面向?qū)ο螅ㄒ唬﹟面向?qū)ο蟾拍罴皟?yōu)點(diǎn)

6. 設(shè)計(jì)模式有哪些，說(shuō)下裝飾者模式和代理模式

前面有總結(jié)，往前翻。

7. 重載和重寫有什么區(qū)別

方法重寫(overriding)：

也叫子類的方法覆蓋父類的方法，要求返回值、方法名和參數(shù)都相同。

子類拋出的異常不能超過(guò)父類相應(yīng)方法拋出的異常。(子類異常不能超出父類異常)

子類方法的的訪問(wèn)級(jí)別不能低于父類相應(yīng)方法的訪問(wèn)級(jí)別(子類訪問(wèn)級(jí)別不能低于父類訪問(wèn)級(jí)別)。

方法重載(overloading):

重載是在同一個(gè)類中的兩個(gè)或兩個(gè)以上的方法，擁有相同的方法名，但是參數(shù)卻不相同，方法體也不相同，最常見(jiàn)的重載的例子就是類的構(gòu)造函數(shù)。

參考： 方法重載和重寫的區(qū)別

為什么選擇前端開(kāi)發(fā)

什么事情讓你最有成就感

什么讓你最有挫敗感

為什么選擇阿里

平時(shí)是怎么學(xué)習(xí)的

職業(yè)發(fā)展

二面三面都有手寫代碼的環(huán)節(jié)，對(duì)于我這種動(dòng)手能力弱的人來(lái)說(shuō)還是挺吃力。當(dāng)時(shí)提前批投遞的是深圳百度，總共只招五個(gè)前端，沒(méi)過(guò)也很正常。后面正式批筆試過(guò)了，但是要去北京面試，也就直接放棄了。

1. 為什么要用flex布局，align-items和justify-content的區(qū)別

傳統(tǒng)布局基于盒模型，非常依賴 display屬性 、position屬性 、float屬性。而flex布局更靈活，可以簡(jiǎn)便、完整、響應(yīng)式地實(shí)現(xiàn)各種頁(yè)面布局，比如水平垂直居中。

align-items：定義在垂直方向上的對(duì)齊方式；

justify-content：定義在水平方向上的對(duì)齊方式。

2. webpack是怎么打包的，babel又是什么？

把項(xiàng)目當(dāng)做一個(gè)整體，通過(guò)一個(gè)給定的主文件（如：index.js），Webpack將從這個(gè)文件開(kāi)始找到項(xiàng)目的所有依賴文件，使用loaders處理它們，最后打包為一個(gè)（或多個(gè)）瀏覽器可識(shí)別的JavaScript文件。

babel將es6、es7、es8等語(yǔ)法轉(zhuǎn)換成瀏覽器可識(shí)別的es5或es3語(yǔ)法。

3. saas和less不同于普通css的地方

定義變量，可以把反復(fù)使用的css屬性值定義成變量，然后通過(guò)變量名來(lái)引用它們，而無(wú)需重復(fù)書寫這一屬性值；

嵌套寫法，父子關(guān)系一目了然；

使用運(yùn)算符，可以進(jìn)行樣式的計(jì)算；

內(nèi)置一些顏色處理函數(shù)用來(lái)對(duì)顏色值進(jìn)行處理，例如加亮、變暗、顏色梯度等；

繼承：為多個(gè)元素定義相同樣式的時(shí)候，我們可以考慮使用繼承的做法；

Mixins （混入）：有點(diǎn)像是函數(shù)或者是宏，當(dāng)某段 CSS經(jīng)常需要在多個(gè)元素中使用時(shí)，可以為這些共用的 CSS 定義一個(gè)Mixin，然后只需要在需要引用這些 CSS 地方調(diào)用該 Mixin 即可。

4. es 6模塊和其他模塊不同的地方

對(duì)比了一下es6模塊和CommonJS模塊：

5. 有沒(méi)有用過(guò)es6的一些異步處理函數(shù)

Promise，generator，async await

6. redux怎么處理異步操作

可以引入Redux-thunk或者redux-promise這種中間件，可以延遲事件的派發(fā)。

其中的原理：是因?yàn)樗麄冇昧薬pplymiddleware()包裝了store的dispatch方法，擁有可以處理異步的能力。

7. 為什么reducer要是個(gè)純函數(shù)，純函數(shù)是什么？

純函數(shù)：對(duì)于相同的輸入，永遠(yuǎn)會(huì)得到相同的輸出，而且沒(méi)有任何可觀察的副作用，也不依賴外部環(huán)境的狀態(tài)。

原因：Redux只通過(guò)比較新舊兩個(gè)對(duì)象的存儲(chǔ)位置來(lái)比較新舊兩個(gè)對(duì)象是否相同（淺比較）。如果你在reducer內(nèi)部直接修改舊的state對(duì)象的屬性值，那么新的state和舊的state將都指向同一個(gè)對(duì)象。因此Redux認(rèn)為沒(méi)有任何改變，返回的state將為舊的state。兩個(gè)state相同的話，頁(yè)面就不會(huì)重新渲染了。

因?yàn)楸容^兩個(gè)Javascript對(duì)象所有的屬性是否相同的的唯一方法是對(duì)它們進(jìn)行深比較。但是深比較在真實(shí)的應(yīng)用當(dāng)中代價(jià)昂貴，因?yàn)橥ǔs的對(duì)象都很大，同時(shí)需要比較的次數(shù)很多。因此一個(gè)有效的解決方法是作出一個(gè)規(guī)定：無(wú)論何時(shí)發(fā)生變化時(shí)，開(kāi)發(fā)者都要?jiǎng)?chuàng)建一個(gè)新的對(duì)象，然后將新對(duì)象傳遞出去。同時(shí)，當(dāng)沒(méi)有任何變化發(fā)生時(shí)，開(kāi)發(fā)者發(fā)送回舊的對(duì)象。也就是說(shuō)，新的對(duì)象代表新的state。

8. 高階函數(shù)是什么，怎么去寫一個(gè)高階函數(shù)

高階函數(shù)：參數(shù)值為函數(shù)或者返回值為函數(shù)。例如map，reduce，filter，sort方法就是高階函數(shù)。

編寫高階函數(shù)，就是讓函數(shù)的參數(shù)能夠接收別的函數(shù)。

9. vue跟react的區(qū)別是什么

沒(méi)有用過(guò)vue，所以就只說(shuō)了vue具有雙向綁定，react是單向數(shù)據(jù)流。

參考： Vue.js與React的全面對(duì)比

10. nodejs處理了什么問(wèn)題

可以處理高并發(fā)的I/O，也能與websocket配合，開(kāi)發(fā)長(zhǎng)連接的實(shí)時(shí)交互應(yīng)用程序。

11. 響應(yīng)式布局，怎么做移動(dòng)端適配

使用媒體查詢可以實(shí)現(xiàn)響應(yīng)式布局。

移動(dòng)端適配方案：

（1）meta viewport：讓當(dāng)前viewport的寬度等于設(shè)備的寬度，同時(shí)不允許用戶手動(dòng)縮放。

width=device-width: 讓當(dāng)前viewport寬度等于設(shè)備的寬度

user-scalable=no: 禁止用戶縮放

initial-scale=1.0: 設(shè)置頁(yè)面的初始縮放值為不縮放

maximum-scale=1.0: 允許用戶的最大縮放值為1.0

minimum-scale=1.0: 允許用戶的最小縮放值為1.0

（2）媒體查詢（響應(yīng)式)

（3）動(dòng)態(tài) rem 方案

參考： 移動(dòng)端是怎么做適配的？

1. 怎么做一個(gè)實(shí)時(shí)的聊天系統(tǒng)

使用WebSocket和nodejs，《nodejs實(shí)戰(zhàn)》這本書詳細(xì)介紹了這個(gè)項(xiàng)目。

2. 當(dāng)消息有延遲的時(shí)候，怎么保證消息的正確順序

每個(gè)消息在被創(chuàng)建時(shí)，都將被賦予一個(gè)全局唯一的、單調(diào)遞增的、連續(xù)的序列號(hào)（SerialNumber，SN）?？梢酝ㄟ^(guò)一個(gè)全局計(jì)數(shù)器來(lái)實(shí)現(xiàn)這一點(diǎn)。通過(guò)比較兩個(gè)消息的SN，確定其先后順序。

3. 怎么做一個(gè)登陸窗口，input有哪些兼容性

使用form表單。

4. input按鈕如何校驗(yàn)

使用正則表達(dá)式。

5. 如何實(shí)現(xiàn)水平垂直居中，relative、absolute、fixed

我說(shuō)了三種方式：

（1）使用表格

.container{
  width: 600px;
  height: 600px;
  background: #eee;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.center{
  background: blue;
}

（2）css3的transform屬性

.container{
  width: 100%;
  height: 400px;
  background: #eee;
  position: relative;
}
.center{
  background: blue;
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

（3）flex布局

.container{
  width: 100%;
  height: 400px;
  background: #eee;
  display: flex;
  justify-content: center;
  align-items: center;
}
.center{
  width: 100px;
  height: 100px;
  background: blue;
  text-align: center;
}

relative：相對(duì)于自己的定位；

absolute：相對(duì)于最近一級(jí)定位元素的定位；

fixed：相對(duì)于窗口的定位。

6. 寫一個(gè)函數(shù)，1s之后依次輸出1,2,3,4,5

直接使用了let和定時(shí)器。

for(let i = 1 ; i < 6; i++){
    setTimeout(() => {
        conosle.log(i)
    }, 1000)
}

7. 事件隊(duì)列（宏任務(wù)、微任務(wù)）

參考：：這一次，徹底弄懂 JavaScript 執(zhí)行機(jī)制

8. 如何每隔三個(gè)數(shù)加一個(gè)逗號(hào)，還要考慮小數(shù)點(diǎn)的情況

這道題就是大疆的筆試題，當(dāng)時(shí)候筆試題也是瞎寫的，后面也沒(méi)仔細(xì)看，沒(méi)想到又成了一道面試題。

function transform(number){
    var num = number.toString() 
    var numArr = num.split(".")
    var [num, dotNum] = numArr


    var operateNum = num.split("").reverse()
    var result = [], len = operateNum.length
    for(var i = 0; i< len; i++){
         result.push(operateNum[i])
         if(((i+1) % 3 === 0) && (i !== len-1)){
              result.push(",")
        }
    }

    if(dotNum){
         result.reverse().push("."， ...dotNum)
         return result.join("")
    }else{
         return result.reverse().join("")
    }

}

9. webpack有配置過(guò)嗎？原理知道嗎

參考前面。

10. 父子組件如何通信，子組件怎么跟父組件通信？

父組件把state作為props傳遞給子組件進(jìn)行通信。

父組件寫好state和處理該state的函數(shù)，同時(shí)將函數(shù)名通過(guò)props屬性值的形式傳入子組件，子組件調(diào)用父組件的函數(shù)，同時(shí)引起state變化。

11. 簡(jiǎn)單說(shuō)一下pwa

面試的這個(gè)部門就是做pwa的，所以說(shuō)了下自己對(duì)pwa的理解。

1. 手寫indexOf

function indexOf(str, val){
    var strLen = str.length, valLen = val.length
    for(var i = 0; i < strLen; i++){
        var matchLen = i + valLen
        var matchStr = str.slice(i, matchLen)
        if(matchLen > strLen){
            return -1
        }
        if(matchStr === val){
            return i
        }
    }
    return -1
}

2. 實(shí)現(xiàn) JS 的繼承

function A () {
   this.name = "a";    
}

A.prototype.getName = function () {
    return this.name;
}

function B () {
}

// B 如何繼承 A

參考： JS實(shí)現(xiàn)繼承的幾種方式

3. 從url輸入到頁(yè)面顯示會(huì)有哪些步驟

（1）DNS服務(wù)器解析域名，找到對(duì)應(yīng)服務(wù)器的IP地址;

（2）和服務(wù)器建立TCP三次握手連接；

（3）發(fā)送HTTP請(qǐng)求，服務(wù)器會(huì)根據(jù)HTTP請(qǐng)求到數(shù)據(jù)服務(wù)器取出相應(yīng)的資源，并返回給瀏覽器；

（4）瀏覽器處理響應(yīng)

加載：瀏覽器對(duì)一個(gè)html頁(yè)面的加載順序是從上而下的。

當(dāng)加載到外部css文件、圖片等資源，瀏覽器會(huì)再發(fā)起一次http請(qǐng)求，來(lái)獲取外部資源。
當(dāng)加載到j(luò)s文件，html文檔會(huì)掛起渲染（加載解析渲染同步）的線程，等待js文件加載、解析完畢才可以恢復(fù)html文檔的渲染線程。

解析：解析DOM樹和CSSDOM樹。

渲染：構(gòu)建渲染樹，將DOM樹進(jìn)行可視化表示，將頁(yè)面呈現(xiàn)給用戶。

4. method有哪些方法，分別是什么意思？post和put的區(qū)別

post：上傳資源

put：修改資源

5. https有幾次握手

6. http2比http1好的地方

主要是考察http2的幾個(gè)特性。

參考：HTTP協(xié)議知識(shí)點(diǎn)總結(jié)

7. 頁(yè)面刷新不出來(lái)，是有哪些問(wèn)題

可以從第三題的每個(gè)步驟進(jìn)行分析，大概是：

域名不存在，或者ip地址錯(cuò)誤

網(wǎng)絡(luò)問(wèn)題，不能建立正常的tcp連接

服務(wù)器找不到正確的資源

8. 上一次系統(tǒng)性的學(xué)習(xí)是什么時(shí)候，怎么學(xué)習(xí)的

學(xué)習(xí)react的時(shí)候，看文檔、博客，照著網(wǎng)上寫了點(diǎn)小項(xiàng)目。

9. 你覺(jué)得項(xiàng)目中最自豪的是什么

10. 上家公司有哪些不好的地方

網(wǎng)易是在杭州網(wǎng)易大廈面的，一天面完三輪，然后錄用排序，擇優(yōu)錄取的吧。我投的是網(wǎng)易考拉，哭唧唧，后面被拒了之后還傷心的卸載了考拉。之后正式批投了杭研，過(guò)了筆試，要去武漢面，本來(lái)?？狄彩窃谖錆h面的，考慮到還要住一晚上，有點(diǎn)怕怕，就沒(méi)去了。

1.css3動(dòng)畫

2. flex布局

3. 實(shí)現(xiàn)call

Function.prototype.call2 = function (context) {
    var context = Object(context) || window
    context.fn = this
    var args = []
    for (var i = 1; i < arguments.length; i++) {
        args.push("arguments[" + i +"]")
    }

    var res = eval("context.fn(" + args + ")")

    delete context.fn
    return res
}

4. 圖片懶加載data-src

5. Promise異步

6. 水平垂直居中

7. 數(shù)組有哪些方法，哪些會(huì)改變?cè)瓟?shù)組

改變?cè)瓟?shù)組的方法：pop、push、reverse、shift、sort、splice、unshift，以及兩個(gè)ES6新增的方法copyWithin 和 fill；

不改變?cè)瓟?shù)組（復(fù)制）：concat、join、slice、toString、toLocaleString、indexOf、lastIndexOf、未標(biāo)準(zhǔn)的toSource以及ES7新增的方法includes；

循環(huán)遍歷：forEach、every、some、filter、map、reduce、reduceRight 以及ES6新增的方法entries、find、findIndex、keys、values。

8. 操作dom有哪些方法

創(chuàng)建：

  createDocumentFragment()    //創(chuàng)建一個(gè)DOM片段

  createElement()   //創(chuàng)建一個(gè)具體的元素

  createTextNode()   //創(chuàng)建一個(gè)文本節(jié)點(diǎn)

  

添加：appendChild()

移出：removeChild()

替換：replaceChild()

插入：insertBefore()

復(fù)制：cloneNode(true)

查找：

  getElementsByTagName()    //通過(guò)標(biāo)簽名稱

  getElementsByClassName()    //通過(guò)標(biāo)簽名稱

  getElementsByName()    //通過(guò)元素的Name屬性的值

  getElementById()    //通過(guò)元素Id，唯一性

9. 左邊定寬右邊自適應(yīng)

（1）左盒子左浮動(dòng)，右盒子width=100%

（2）左盒子左浮動(dòng)，右盒子margin-left=左盒子寬度

（3）左盒子左浮動(dòng)，右盒子右浮動(dòng)，設(shè)置calc（100vw-盒子寬度）

（4）父容器設(shè)置display=flex，右盒子flex：1

10. 事件代理

利用事件冒泡的原理，讓自己的所觸發(fā)的事件，讓他的父元素代替執(zhí)行。打個(gè)比方：一個(gè)button對(duì)象，本來(lái)自己需要監(jiān)控自身的點(diǎn)擊事件，但是自己不來(lái)監(jiān)控這個(gè)點(diǎn)擊事件，讓自己的父節(jié)點(diǎn)來(lái)監(jiān)控自己的點(diǎn)擊事件。

11. 后端了解么

直接說(shuō)了不了解，笑哭。

1. 節(jié)流和防抖，手寫一下代碼

（1）防抖：

定義： 合并事件且不會(huì)去觸發(fā)事件，當(dāng)一定時(shí)間內(nèi)沒(méi)有觸發(fā)這個(gè)事件時(shí)，才真正去觸發(fā)事件。

原理：對(duì)處理函數(shù)進(jìn)行延時(shí)操作，若設(shè)定的延時(shí)到來(lái)之前，再次觸發(fā)事件，則清除上一次的延時(shí)操作定時(shí)器，重新定時(shí)。

場(chǎng)景： keydown事件上驗(yàn)證用戶名，輸入法的聯(lián)想。

實(shí)現(xiàn)：

function debounce(fn, delay) {
    var timer

    return function () {
        var that = this
        var args = arguments

        clearTimeout(timer)
            timer = setTimeout(function () {
            fn.apply(that, args)
        }, delay)
    }
}

（2）節(jié)流：

定義： 持續(xù)觸發(fā)事件時(shí)，合并一定時(shí)間內(nèi)的事件，在間隔一定時(shí)間之后再真正觸發(fā)事件。每間隔一段時(shí)間觸發(fā)一次。

原理：對(duì)處理函數(shù)進(jìn)行延時(shí)操作，若設(shè)定的延時(shí)到來(lái)之前，再次觸發(fā)事件，則清除上一次的延時(shí)操作定時(shí)器，重新定時(shí)。

場(chǎng)景： resize改變布局時(shí)，onscroll滾動(dòng)加載下面的圖片時(shí)。

實(shí)現(xiàn)：

方法一：使用時(shí)間戳。

當(dāng)觸發(fā)事件的時(shí)候，我們?nèi)〕霎?dāng)前的時(shí)間戳，然后減去之前的時(shí)間戳(最一開(kāi)始值設(shè)為0)，如果大于設(shè)置的時(shí)間周期，就執(zhí)行函數(shù)，然后更新時(shí)間戳為當(dāng)前的時(shí)間戳，如果小于，就不執(zhí)行。

缺陷：第一次事件會(huì)立即執(zhí)行，停止觸發(fā)后沒(méi)辦法再激活事件。

function throttle(fn, interval) {
    var previousTime = +new Date()

    return function () {
        var that = this
        var args = arguments
        var now = +new Date()
        if (now - previousTime >= interval) {
            previousTime = now
            fn.apply(that, args)
        }
   }
}

方法二：使用定時(shí)器

當(dāng)觸發(fā)事件的時(shí)候，我們?cè)O(shè)置一個(gè)定時(shí)器，再觸發(fā)事件的時(shí)候，如果定時(shí)器存在，就不執(zhí)行，直到定時(shí)器執(zhí)行，然后執(zhí)行函數(shù)，清空定時(shí)器，這樣就可以設(shè)置下個(gè)定時(shí)器。

缺陷：第一次事件會(huì)在n秒后執(zhí)行，停止觸發(fā)后依然會(huì)再執(zhí)行一次事件。

function throttle(fn, interval) {
    var timer
    return function (){
        var that = this
        var args = arguments

   if(!timer){
        timer = setTimeout(function () {
            fn.apply(that, args)
            timer = null
         }, interval)
        }
    }
}

方法三：優(yōu)化

鼠標(biāo)移入能立刻執(zhí)行，停止觸發(fā)的時(shí)候還能再執(zhí)行一次。

var throttle = function(func,delay){
    var timer = null;
    var startTime = Date.now();

    return function(){
        var curTime = Date.now();
        var remaining = delay-(curTime-startTime);
        var context = this;
        var args = arguments;

        clearTimeout(timer);
        if(remaining<=0){
            func.apply(context,args);
            startTime = Date.now();
        }else{
            timer = setTimeout(func,remaining);
        }
    }
}

2. 知道哪些性能優(yōu)化

3. react為什么比其他要快，虛擬dom知道嗎

4. 寫過(guò)什么組件

5. 平時(shí)怎么學(xué)習(xí)的

6. node，webpack了解么

7. 模塊化，commonjs,es6模塊

8. redux怎么實(shí)現(xiàn)的

項(xiàng)目上有哪些難點(diǎn)，項(xiàng)目中學(xué)到了什么

不喜歡跟什么樣的人共事

平時(shí)怎么學(xué)習(xí)

為什么來(lái)杭州

職業(yè)發(fā)展

搜狗是內(nèi)推的，面試也很迷，第一面到第二面中間隔了二十幾天，然后二面完了也毫無(wú)反饋。

1. 說(shuō)一下項(xiàng)目，整個(gè)網(wǎng)絡(luò)過(guò)程，從前端到后臺(tái)

2. Ajax 底層實(shí)現(xiàn)，readystate 有哪些

0-（未初始化）還沒(méi)有調(diào)用send()方法

1-（載入）已調(diào)用send()方法，正在發(fā)送請(qǐng)求

2-（載入完成）send()方法執(zhí)行完成，已經(jīng)接收到全部響應(yīng)內(nèi)容

3-（交互）正在解析響應(yīng)內(nèi)容

4-（完成）響應(yīng)內(nèi)容解析完成，可以在客戶端調(diào)用了

3. 狀態(tài)碼有哪些，100,307

4. OSI七層模型

5. TCP三次握手

6. SSL握手過(guò)程

7. jQuery 有哪些方法

8. display 有哪些屬性，說(shuō)一下flex的屬性

9. Es6的async awiat ，generator

10. Map有哪些方法

Map的方法：set, get, has, delete, clear

遍歷方法：

keys()：返回鍵名的遍歷器。

values()：返回鍵值的遍歷器。

entries()：返回所有成員的遍歷器。

forEach()：遍歷 Map 的所有成員。

參考： Set 和 Map 數(shù)據(jù)結(jié)構(gòu)

11. 正則用過(guò)嗎？exec, 匹配一個(gè)手機(jī)號(hào)

12. css3動(dòng)畫了解嗎，怎么寫一個(gè)loading動(dòng)畫

13. 怎么實(shí)現(xiàn)跨域,cors涉及哪些請(qǐng)求字段

14. 編程: 判斷兩個(gè)網(wǎng)絡(luò)地址是否屬于同一個(gè)子網(wǎng)掩碼

用與運(yùn)算符就可以了。當(dāng)時(shí)是在牛客網(wǎng)的面試系統(tǒng)上寫的，一直AC不出，也是很迷了額。

15. 怎么上傳文件

1. 怎么計(jì)算在一個(gè)頁(yè)面上的停留時(shí)間

方案1：websocket，前端開(kāi)個(gè)長(zhǎng)連接，后臺(tái)統(tǒng)計(jì)長(zhǎng)連接時(shí)間。

方案2：ajax輪詢，隔幾秒發(fā)一個(gè)查詢，后臺(tái)記錄第一與最后一個(gè)查詢間隔時(shí)間。

方案3： 關(guān)閉窗口或者跳轉(zhuǎn)的時(shí)候會(huì)觸發(fā)window.onbeforeunload函數(shù)，可以在該函數(shù)中做處理（有兼容性問(wèn)題）；統(tǒng)計(jì)完數(shù)據(jù)記錄到本地cookies中，一段時(shí)間后統(tǒng)一發(fā)送。

2. 給你一億個(gè)數(shù)，是連續(xù)的，怎么找出兩個(gè)不存在的數(shù)

用bitmap就能搞定了，存在為1，不存在為0。

3. 一個(gè)搜索框的輸入聯(lián)想，會(huì)遇到什么問(wèn)題？如果第一個(gè)請(qǐng)求延遲，第二個(gè)請(qǐng)求先到，請(qǐng)問(wèn)怎么處理？

鍵盤輸入太快，每次輸入都去聯(lián)想，需要多次發(fā)送請(qǐng)求，會(huì)導(dǎo)致用戶體驗(yàn)太差，可以使用防抖優(yōu)化。

在前端做判斷，判斷此時(shí)的值是否與返回的值相同，不同就丟棄，相同就顯示在頁(yè)面。

4. Http的緩存

5. 二維碼怎么工作的，掃描pc端的二維碼，怎么讓pc端登錄？

pc端隨機(jī)生成一個(gè)含有唯一uid的二維碼，并與服務(wù)器建立一個(gè)長(zhǎng)連接；

手機(jī)掃描二維碼，解析出二維碼中的uid，并把這個(gè)uid和手機(jī)端的用戶密碼進(jìn)行綁定，上傳給服務(wù)器；

服務(wù)器獲得客戶端信息之后，pc端的長(zhǎng)連接輪詢操作會(huì)獲得該消息，顯示該賬號(hào)的信息；

pc端會(huì)再開(kāi)一個(gè)長(zhǎng)連接與手機(jī)端保持通信，等待手機(jī)端確認(rèn)登陸后，獲得服務(wù)器授權(quán)的token，就可以在pc端登陸進(jìn)行正常通信了。

6. Promise 做什么的，有哪幾種狀態(tài)

異步處理的，有三個(gè)狀態(tài)：resolve，pending，reject。

7. 項(xiàng)目有哪些難點(diǎn)，怎么處理的

8. 遇到過(guò)哪些性能優(yōu)化

當(dāng)時(shí)聽(tīng)說(shuō)電信對(duì)學(xué)歷要求很高，本科基本都是211起的，想著自己本科太渣，就直接放棄了網(wǎng)上的筆試。之后電信來(lái)了學(xué)校宣講會(huì)，跟朋友吃完飯看到了，就去說(shuō)湊湊熱鬧，剛好有筆試也就做了。做完之后筆試居然考了最高分，比第二名高出二十分，手動(dòng)捂臉額。一面完分?jǐn)?shù)也挺高的，有95分，運(yùn)氣爆棚。重點(diǎn)是今年電信開(kāi)的薪資實(shí)在太高了，目前還在糾結(jié)選哪個(gè)。

1. Xhtml和html的區(qū)別

XHTML 元素必須被正確地嵌套。

XHTML 元素必須被關(guān)閉。

標(biāo)簽名必須用小寫字母。

XHTML 文檔必須擁有根元素。

2. 遇到過(guò)哪些兼容性問(wèn)題

3. 瀏覽器內(nèi)核有哪些，移動(dòng)端用的是哪個(gè)

Trident內(nèi)核：IE,MaxThon,TT,The Word,360,搜狗瀏覽器等。[又稱為MSHTML]

Gecko內(nèi)核：Netscape6及以上版本，F(xiàn)F,MozillaSuite/SeaMonkey等；

Presto內(nèi)核：Opera7及以上。[Opera內(nèi)核原為：Presto，現(xiàn)為：Blink]

Webkit內(nèi)核：Safari,Chrome等。[Chrome的:Blink(Webkit的分支)]

對(duì)于Android手機(jī)而言，使用率最高的就是Webkit內(nèi)核。

4. 怎么實(shí)現(xiàn)標(biāo)簽頁(yè)的通信

5. Cookie、session,localstorage，sessionstorage

6. React 和jquery 之間的區(qū)別，哪個(gè)好用

7. 怎么實(shí)現(xiàn)繼承

8. Es6,es7有哪些特性

9. 怎么跨域

10. Commonjs用的js哪個(gè)特性?

因?yàn)閖s之前只能在瀏覽器運(yùn)行，為了能讓js能在服務(wù)器上運(yùn)行，所以設(shè)計(jì)了commonjs規(guī)范，而且js之前沒(méi)有模塊化的概念。

11. 選擇器優(yōu)先級(jí)

12. 偽類知道嗎，有哪些

13. 塊級(jí)元素有哪些，怎么轉(zhuǎn)成行內(nèi)元素

14. 一個(gè)完整的http請(qǐng)求，頁(yè)面渲染過(guò)程，js和css文件怎么渲染

一面問(wèn)的都很常規(guī)的，不知道為啥給了這么高的分。二面的時(shí)候三個(gè)面試官，總共就問(wèn)了三個(gè)問(wèn)題，然后就說(shuō)面試結(jié)束了，不超過(guò)五分鐘。

1. TCP怎么工作的

三次握手

2. OSI七層模型，路由器工作在哪一層？

網(wǎng)絡(luò)層

3. 平時(shí)用什么語(yǔ)言，用過(guò)哪些框架

深信服給的薪資居然比電信還低，而且加班還嚴(yán)重，就直接拒了。

1. 跨域，同源策略，webpack里面有個(gè)跨域的方式知道么

2. 怎么把es6轉(zhuǎn)成es5，babel怎么工作的

解析：將代碼字符串解析成抽象語(yǔ)法樹

變換：對(duì)抽象語(yǔ)法樹進(jìn)行變換操作

再建：根據(jù)變換后的抽象語(yǔ)法樹再生成代碼字符串

3. 反向代理知道么，Nginx

4. 繼承有哪些方式

5. 怎么實(shí)現(xiàn)一個(gè)sleep ，手寫一個(gè)promise

6. 能寫一個(gè)二叉樹么，怎么去遍歷

7. 深拷貝怎么寫

（1）var new_arr = JSON.parse( JSON.stringify(arr) );

（2）for in 加遞歸

function isObj(obj) {
//判斷是否為對(duì)象或者函數(shù)，但不是null
    return (typeof obj === "object" || typeof obj === "function") && obj !== null
}

function deepCopy(obj) {
    let newObj = Array.isArray(obj) ? [] : {}
    for(let key in obj) {
        newObj[key] = isObj(obj[key]) ? deepCopy(obj[key]) : obj[key]
    }
    return newObj
}

（3）$.extend()

（4）函數(shù)庫(kù)lodash，提供_.cloneDeep（）

8. 在公司除了完成上級(jí)交待的任務(wù)，還做了什么

9. 怎么實(shí)現(xiàn)垂直中間布局

10. Call和apply，哪個(gè)性能開(kāi)銷大

在思否上提問(wèn)了，已有大神回答。

參考： call和apply的哪個(gè)性能更好

11. 正則寫一個(gè)手機(jī)號(hào)，全局匹配是什么

12. 刪除一個(gè)數(shù)組中的某個(gè)數(shù)

splice方法

13. 模塊化介紹一下，什么是編譯時(shí)優(yōu)化

14. 有哪些網(wǎng)絡(luò)安全名詞，怎么防范

15. 平時(shí)怎么學(xué)習(xí)

二面小哥哥問(wèn)了幾個(gè)問(wèn)題之后，就一直跟我介紹深信服內(nèi)部的一些管理、技術(shù)氛圍、晉升機(jī)制什么的，全程都是笑臉額。

1. git push -u 是什么意思

綁定默認(rèn)提交的遠(yuǎn)程版本庫(kù)，加了參數(shù)-u后，以后即可直接用git push 代替git push origin master

2. git rebase解釋下

有test和dev兩個(gè)分支，分別有兩個(gè)commit，此時(shí)執(zhí)行下列命令：

git checkout test
git rebase dev

以dev為基準(zhǔn)將test的提交進(jìn)行回放，挨個(gè)的應(yīng)用到dev上去，然后test的那些提交就會(huì)廢棄。 等價(jià)于git merge dev。

git merge 和git rebase區(qū)別：

merge不會(huì)修改提交歷史，rebase會(huì)修改提交歷史

。

rebase只應(yīng)用于本地沒(méi)有提交的代碼，如果應(yīng)用到已經(jīng)提交到遠(yuǎn)程的分支不要應(yīng)用，不然會(huì)非常的麻煩，git merge 可以應(yīng)用于遠(yuǎn)程分支。

3. linux命令，怎么打開(kāi)一個(gè)文件

cat abc.txt

4. 你的上級(jí)給你review 代碼時(shí)會(huì)提什么建議

5. 怎么看待加班和工作效率

6. get和post分別進(jìn)行幾次數(shù)據(jù)交互

get請(qǐng)求過(guò)程：（2次交互）

瀏覽器請(qǐng)求tcp連接（第一次握手） 　　

服務(wù)器答應(yīng)進(jìn)行tcp連接（第二次握手） 　　

瀏覽器確認(rèn)，并發(fā)送get請(qǐng)求頭和數(shù)據(jù)（第三次握手，這個(gè)報(bào)文比較小，所以http會(huì)在此時(shí)進(jìn)行第一次數(shù)據(jù)發(fā)送） 　　

服務(wù)器返回200 ok響應(yīng)。

post請(qǐng)求過(guò)程：（3次交互）

瀏覽器請(qǐng)求tcp連接（第一次握手） 　　

服務(wù)器答應(yīng)進(jìn)行tcp連接（第二次握手） 　　

瀏覽器確認(rèn)，并發(fā)送post請(qǐng)求頭（第三次握手，這個(gè)報(bào)文比較小，所以http會(huì)在此時(shí)進(jìn)行第一次數(shù)據(jù)發(fā)送） 　　

服務(wù)器返回100 continue響應(yīng) 　　

瀏覽器開(kāi)始發(fā)送數(shù)據(jù) 　　

服務(wù)器返回200 ok響應(yīng)

7. 怎么打斷點(diǎn)，如何確定一個(gè)結(jié)果來(lái)自于哪個(gè)函數(shù)

TW是內(nèi)推的，做了內(nèi)推作業(yè)后，就面了技術(shù)和文化面。技術(shù)面是在作業(yè)的基礎(chǔ)上加兩個(gè)功能，只寫出來(lái)一個(gè)，后面一個(gè)沒(méi)時(shí)間寫了，然后就只講了下思路。

文化面面了快一個(gè)小時(shí)，聽(tīng)說(shuō)TW不加班，對(duì)女程序員還很友好，挺中意的公司，不過(guò)最后還是掛了額。

華為的面試就不多說(shuō)了，基本不問(wèn)前端的，進(jìn)去是隨機(jī)分崗的。華為的面試陣仗是我見(jiàn)過(guò)的最大的，聽(tīng)說(shuō)要招一萬(wàn)人，在萬(wàn)達(dá)那里面的，全是人啊，闊怕?，F(xiàn)在正泡在offer池里，估計(jì)國(guó)慶后發(fā)正式offer吧。

二面碰到的是個(gè)女面試官，太恐怖了，一直在懟我，最怕碰到女面試官了，慘。

小米是內(nèi)推的，電話面了一面，國(guó)慶后要我去武漢現(xiàn)場(chǎng)面，那會(huì)學(xué)校剛好有事應(yīng)該也不會(huì)去了。

1. redux主要做什么