【長文慎入】百度阿里網易大疆等大小廠前端校招麵筋

自我介紹下：某985碩士，程式媛，接觸前端一年時間。從八月份開始校招面試筆試，前前後後大廠小廠也都面了挺多，不過大廠基本都被我掛完了，哭暈我，還是太菜啊。面過的公司：ThoughtWorks，大疆，阿里，網易，百度，電信it研發中心，深信服，華為，小米，搜狗。拿了offer的公司目前是：大疆、電信、深信服（已拒），前輩們也可以留下選擇哪個公司的建議，感激不盡。下面總結了這段時間的麵筋和掛筋~

大疆

大疆是我校招面的第一家公司，從六月份投簡歷，然後筆試面試到拿到錄用意向書，前後用了近四個月，來之不易啊。

一面二面

因為時間太久，就直接放在一起了，問的都是基礎吧，講真，大疆前端面試不難，都是很基礎的，就是時間長，等的捉急。一面是電話面，兩個面試官輪流問；二面是視訊面，是三個面試官一起微信視訊，視訊面還是蠻累的，上下左右都得顧上；終面是去的現場面，就跟一個面試官聊了十幾分鍾人生。

1. meta標籤

meta標籤：提供給頁面的一些元資訊（名稱/值對）， 比如針對搜尋引擎和更新頻度的描述和關鍵詞。

• name：名稱/值對中的名稱。常用的有author、description、keywords、generator、revised、others。 把 content 屬性關聯到一個名稱。

• http-equiv：沒有name時，會採用這個屬性的值。常用的有content-type、expires、refresh、set-cookie。把content屬性關聯到http頭部。

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

• scheme： 用於指定要用來翻譯屬性值的方案。

2. css哪些屬性可以繼承

• 字型相關：line-height, font-family, font-size, font-style, font-variant, font-weight, font

• 文字相關： letter-spacing, text-align, text-indent, text-transform, word-spacing

• 列表相關：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：規定背景圖片的尺寸，background-size:63px 100px;

• background-origin：規定背景圖片的定位區域，背景圖片可以放置於 content-box、padding-box 或 border-box 區域。background-origin:content-box;

• CSS3 允許您為元素使用多個背景影象。background-image:url(bg_flower.gif),url(bg_flower_2.gif);

（3）文字效果：

• text-shadow：向文字應用陰影，可以規定水平陰影、垂直陰影、模糊距離，以及陰影的顏色。text-shadow: 5px 5px 5px #FF0000;

• word-wrap：允許文字進行換行。word-wrap:break-word;

（4）字型：CSS3 @font-face 規則可以自定義字型。

（5）2D 轉換（ transform）

• translate()：元素從其當前位置移動，根據給定的 left（x 座標） 和 top（y 座標） 位置引數。 transform: translate(50px,100px);

• rotate()：元素順時針旋轉給定的角度。允許負值，元素將逆時針旋轉。transform: rotate(30deg);

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

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

• matrix()： 把所有 2D 轉換方法組合在一起，需要六個引數，包含數學函式，允許您：旋轉、縮放、移動以及傾斜元素。transform:matrix(0.866,0.5,-0.5,0.866,0,0);

（6）3D 轉換

• rotateX()：元素圍繞其 X 軸以給定的度數進行旋轉。transform: rotateX(120deg);

• rotateY()：元素圍繞其 Y 軸以給定的度數進行旋轉。transform: rotateY(130deg);

（7）transition：過渡效果，使頁面變化更平滑

• transition-property ：執行動畫對應的屬性，例如 color，background 等，可以使用 all 來指定所有的屬性。

• transition-duration：過渡動畫的一個持續時間。

• transition-timing-function：在延續時間段，動畫變化的速率，常見的有：ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier 。

• transition-delay：延遲多久後開始動畫。

簡寫為： transition: [<transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay>];

（8）animation：動畫

使用CSS3 @keyframes 規則。

• animation-name: 定義動畫名稱

• animation-duration: 指定元素播放動畫所持續的時間長

• animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)： 指元素根據時間的推進來改變屬性值的變換速率，說得簡單點就是動畫的播放方式。

• animation-delay: 指定元素動畫開始時間

• animation-iteration-count:infinite | <number>：指定元素播放動畫的迴圈次

• animation-direction: normal | alternate： 指定元素動畫播放的方向，其只有兩個值，預設值為normal，如果設定為normal時，動畫的每次迴圈都是向前播放；另一個值是alternate，他的作用是，動畫播放在第偶數次向前播放，第奇數次向反方向播放。

• animation-play-state:running | paused ：控制元素動畫的播放狀態。

簡寫為： animation:[<animation-name> || <animation-duration>|| <animation-timing-function> || <animation-delay> ||<animation-iteration-count> || <animation-direction>]

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

4. 閉包是什麼，什麼時候閉包會消除?

因為作用域鏈，外部不能訪問內部的變數和方法，這時我們就需要通過閉包，返回內部的方法和變數給外部，從而就形成了一個閉包。

JavaScript是一門具有自動垃圾回收機制的程式語言，主要有兩種方式：

垃圾收集器在執行的時候會給儲存在記憶體中的所有變數都加上標記（可以使用任何標記方式）。然後，它會去掉環境中的變數以及被環境中的變數引用的變數的標記。而在此之後再被加上標記的變數將被視為準備刪除的變數，原因是環境中的變數已經無法訪問到這些變量了。最後，垃圾收集器完成記憶體清除工作，銷燬那些帶標記的值並回收它們所佔用的記憶體空間。

引用計數（reference counting）的含義是跟蹤記錄每個值被引用的次數。當聲明瞭一個變數並將一個引用型別值賦給該變數時，則這個值的引用次數就是1。如果同一個值又被賦給另一個變數，則該值的引用次數加1。相反，如果包含對這個值引用的變數又取得了另外一個值，則這個值的引用次數減1。當這個值的引用次數變成0 時，則說明沒有辦法再訪問這個值了，因而就可以將其佔用的記憶體空間回收回來。這樣，當垃圾收集器下次再執行時，它就會釋放那些引用次數為零的值所佔用的記憶體。

導致問題：會導致迴圈引用的變數和函式無法回收。

解決：將用完的函式或者變數置為null。

5. 怎麼理解js是單執行緒的

主要說一下非同步以及事件迴圈機制，還有事件佇列中的巨集任務、微任務。

• macrotask：主程式碼塊，setTimeout，setInterval、setImmediate等。

• microtask：process.nextTick（相當於node.js版的setTimeout），Promise 。process.nextTick的優先順序高於Promise。

更詳細可以看這篇部落格：這一次，徹底弄懂 JavaScript 執行機制，講的非常清晰。

6. 有哪些排序演算法，時間複雜度是多少？什麼時候快排的效率最低？

排序演算法	最壞事件複雜度	平均時間複雜度	穩定度	空間複雜度
氣泡排序	O(n^2)	O(n^2)	穩定	O(1)
插入排序	O(n^2)	O(n^2)	穩定	O(1)
選擇排序	O(n^2)	O(n^2)	穩定	O(1)
快速排序	O(n^2)	O(n*log2n)	不穩定	O(log2n)~O(n)
二叉樹排序	O(n^2)	O(n*log2n)	不一定	O(n)
堆排序	O(n*log2n)	O(n*log2n)	不穩定	O(1)

整個序列已經有序或完全倒序時，快排的效率最低。

7. 原生ajax的請求過程

建立全平臺相容的XMLHttpRequest物件：

1. function getXHR(){

2.  var xhr = null;

3.  if(window.XMLHttpRequest) {// 相容 IE7+, Firefox, Chrome, Opera, Safari

4.    xhr = new XMLHttpRequest();

5.  } else if (window.ActiveXObject) {

6.    try {

7.      xhr = new ActiveXObject("Msxml2.XMLHTTP");// 即MSXML3

8.    } catch (e) {

9.      try {

10.        xhr = new ActiveXObject("Microsoft.XMLHTTP");// // 相容 IE6, IE5，很老的api,雖然瀏覽器支援,功能可能不完善,故不建議使用

11.      } catch (e) {

12.        alert("您的瀏覽器暫不支援Ajax!");

13.      }

14.    }

15.  }

16.  return xhr;

17. }

Ajax請求資料的過程：

1. var xhr = getXHR();

2. xhr.open('GET', url/file,true);  //設定請求方式，url，以及是否非同步

3. xhr.onreadystatechange = function() {   //設定回撥監聽函式

4.   if(xhr.readyState==4){

5.        if(xhr.status==200){

6.            var data=xhr.responseText;

7.             console.log(data);

8.   }

9. };

10. xhr.onerror = function() {

11.  console.log("Oh, error");

12. };

13. xhr.send();  //傳送請求

8. http狀態碼，cookie欄位，cookie一般存的是什麼，session怎麼存在的？

這部分可以參考我的部落格：HTTP協議知識點總結

9. http請求方式有哪些？

• HTTP1.0定義了三種請求方法： GET, POST 和 HEAD方法。

• HTTP1.1新增了五種請求方法：OPTIONS, PUT, DELETE, TRACE 和 CONNECT 方法。

• 更多請看：HTTP請求方法

10. 怎麼用原生js實現一個輪播圖，以及滾動滑動

之前我使用輪播圖都是用的antd的元件，所以我大致說了一下思路，用定時器去實現，以及如何實現平滑的滾動效果。詳情請看： 原生js實現輪播圖

11. 用過哪些開源的元件

說了antd和element-ui。

12. 怎麼實現上傳下載的功能

主要說了下form表單和input標籤。

13. react生命週期，以及diff演算法，diff演算法是對樹的深度優先遍歷還是廣度優先遍歷？

14. 強快取和協商快取

參考：HTTP協議知識點總結

15. react-router的原理

react-router就是控制不同的url渲染不同的元件。react-router在history庫的基礎上，實現了URL與UI的同步。

原理：DOM渲染完成之後，給window新增onhashchange事件監聽頁面hash的變化，並且在state屬性中添加了route屬性，代表當前頁面的路由。

具體步驟：

• 當點選連結，頁面hash改變時，觸發繫結在 window 上的 onhashchange 事件；

• 在 onhashchange 事件中改變元件的 state中的 route 屬性，react元件的state屬性改變時，自動重新渲染頁面；

• 頁面隨著 state 中的route屬性改變，自動根據不同的hash給Child變數賦值不同的元件，進行渲染。

參考：react-router的實現原理

16. 怎麼用無人機捕獲天空上的鳥

這個題目我也不造啊，畢竟我沒用過無人機，有知道的大神可以在評論中回答一下~

終面

終面是去的現場，在深圳總部那邊，基本就是閒聊了二十來分鐘吧，面完還有hr小姐姐給我們介紹和參觀了無人機，酷炫~

1. 做的專案中，哪個做的最深入最久

2. 為什麼要做前端，喜歡做前端麼

3. 未來的職業規劃

4. 瞭解大疆麼，大疆的文化是什麼

5. 除了實習，還做過哪些專案

6. 如果生活富足，衣食無憂，你會選擇幹什麼

阿里巴巴

阿里是提前批，找人內推了菜鳥網路，面了六輪，面的我懷疑人生了，中途四面本來已經掛了，後面三面面試官又撈起來給我加面了一輪，不過最後還是掛在了hr。

一面

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

id、class、標籤、偽類、萬用字元等。可以用getElementsByClassName（）選擇相同的類。

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

這裡要區分一下偽類和偽元素的概念。根本區別在於它們是否創造了新的元素(抽象)。

• 偽類：用於向某些選擇器新增特殊的效果。例如，a標籤的 :link, :visited,:hover, :active; 以及 :first-child, :last-child。

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

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

3. OSI七層網路模型

OSI七層模型	作用	對應協議	對應裝置
應用層	它是計算機使用者，以及各種應用程式和網路之間的介面	HTTP, FTP, SMTP, POP3	計算機裝置
表示層	資訊的語法語義以及它們的關係，如加密解密、轉換翻譯、壓縮解壓縮	IPX, LPP, XDP
會話層	建立、維護、管理應用程式之間的會話	SSL, TLS, DAP, LDAP
傳輸層	服務點編址，分段與重組、連線控制、流量控制、差錯控制	TCP, UDP	防火牆
網路層	為網路裝置提供邏輯地址，進行路由選擇、分組轉發	IP ARP RARP ICMP IGMP	路由器
資料鏈路層	物理定址，同時將原始位元流轉變為邏輯傳輸路線	PPTP, ARP, RARP	交換機
物理層	機械、電子、定時介面通道通道上的原始位元流傳輸	IEEE 802.2, Ethernet v.2, Internetwork	網絡卡

參考： 一張非常強大的OSI七層模型圖解

4. MVC和MVVM的區別

• Model用於封裝和應用程式的業務邏輯相關的資料以及對資料的處理方法；

• View作為檢視層，主要負責資料的展示；

• Controller定義使用者介面對使用者輸入的響應方式，它連線模型和檢視，用於控制應用程式的流程，處理使用者的行為和資料上的改變。

MVC將響應機制封裝在controller物件中，當用戶和你的應用產生互動時，控制器中的事件觸發器就開始工作了。

MVVM把View和Model的同步邏輯自動化了。以前Controller負責的View和Model同步不再手動地進行操作，而是交給框架所提供的資料繫結功能進行負責，只需要告訴它View顯示的資料對應的是Model哪一部分即可。也就是雙向資料繫結，就是View的變化能實時讓Model發生變化，而Model的變化也能實時更新到View。

參考： 淺析前端開發中的 MVC/MVP/MVVM 模式

5. 用過哪些設計模式

（1）單例模式

定義：保證一個類僅有一個例項，並提供一個訪問它的全域性訪問點。

實現方法：先判斷例項存在與否，如果存在則直接返回，如果不存在就建立了再返回，這就確保了一個類只有一個例項物件。

適用場景：一個單一物件。比如：彈窗，無論點選多少次，彈窗只應該被建立一次。

（2）釋出/訂閱模式 定義：又叫觀察者模式,它定義物件間的一種一對多的依賴關係,當一個物件的狀態發生改變時,所有依賴於它的物件都將得到通知。

場景：訂閱感興趣的專欄和公眾號。

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

優點：

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

• 策略模式很好的體現了開放-封閉原則，將一個個演算法（解決方案）封裝在一個個策略類中。便於切換，理解，擴充套件。

• 策略中的各種演算法可以重複利用在系統的各個地方，避免複製貼上。

• 策略模式在程式中或多或少的增加了策略類。但比堆砌在業務邏輯中要清晰明瞭。

• 違反最少知識原則，必須要了解各種策略類，才能更好的在業務中應用。

應用場景：根據不同的員工績效計算不同的獎金；表單驗證中的多種校驗規則。

（4）代理模式

定義：為一個物件提供一個代用品或佔位符，以便控制對它的訪問。

應用場景：圖片懶載入（先通過一張loading圖佔位，然後通過非同步的方式載入圖片，等圖片載入好了再把完成的圖片載入到img標籤裡面。）

（5）中介者模式

定義：通過一箇中介者物件，其他所有相關物件都通過該中介者物件來通訊，而不是互相引用，當其中的一個物件發生改變時，只要通知中介者物件就可以。可以解除物件與物件之間的緊耦合關係。

應用場景： 例如購物車需求，存在商品選擇表單、顏色選擇表單、購買數量表單等等，都會觸發change事件，那麼可以通過中介者來轉發處理這些事件，實現各個事件間的解耦，僅僅維護中介者物件即可。

（6）裝飾者模式

定義：在不改變物件自身的基礎上，在程式執行期間給物件動態的新增方法。

應用場景： 有方法維持不變，在原有方法上再掛載其他方法來滿足現有需求；函式的解耦，將函式拆分成多個可複用的函式，再將拆分出來的函式掛載到某個函式上，實現相同的效果但增強了複用性。

參考： JavaScript設計模式

6. Http狀態碼

7. https怎麼加密

參考： HTTP協議知識點總結

8. es6相比es5有哪些優點

大概說一下：let、const，模板字串，箭頭函式，做非同步處理的promise、generator、async await，es6模組等。

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

9. ajax請求過程

不多說，上面有。

10. 有哪些效能優化

參考：

11. 懶載入怎麼實現

場景：一個頁面中很多圖片，但是首屏只出現幾張，這時如果一次性把圖片都加載出來會影響效能。這時可以使用懶載入，頁面滾動到可視區在載入。優化首屏載入。

實現：img標籤src屬性為空，給一個data-xx屬性，裡面存放圖片真實地址，當頁面滾動直至此圖片出現在可視區域時，用js取到該圖片的data-xx的值賦給src。

優點：頁面載入速度快，減輕伺服器壓力、節約流量，使用者體驗好。

12. 專案中寫過什麼元件，元件有哪些功能

主要介紹了下實習專案寫過的元件，說了下如何實現的。

二面

1. react框架有哪些設計的好的地方

主要介紹了以下幾個部分：

• JSX語法

• 元件化

• react單項資料流

• 虛擬DOM

• react生命週期

2. react是怎麼工作的，怎麼提高效能

主要還是說了下react的生命週期，還有shouldComponentUpdate這個函式，以及diff演算法。

3. redux有哪些需要改進，你覺得你用的不怎麼舒服的地方？

我當時說的是redux的subscribe方法有點麻煩，每次更新資料都要手動的subscribe一下，所以覺得react-redux的api封裝的更好，用起來比較簡單。

參考：

4. 怎麼設計一個類似於antd 的 react 元件庫

這個問題把我給問懵了額，我是按照軟體工程的生命週期流程來答的。

5. 你做的最自豪的一個專案

這個略過...言之有理即可

6. mysql 的左關聯和右關聯

左關聯：保留左表中所有的元組，右表中沒有的屬性填充NULL。

右關聯：保留右表中所有的元組，左表中沒有的屬性填充NULL。

7. 有沒有折騰過後端

直接說了沒有，之前學了點PHP，不過都快忘得差不多了額。

8. 學習方法和未來的學習路線

言之有理即可。

9. 瀏覽器頁面渲染機制

• 解析html建立dom樹

• 解析css構建render樹（將CSS程式碼解析成樹形的資料結構，然後結合DOM合併成render樹）

• 佈局render樹（Layout/reflow），負責各元素尺寸、位置的計算

• 繪製render樹（paint），繪製頁面畫素資訊

• 瀏覽器會將各層的資訊傳送給GPU，GPU會將各層合成（composite），顯示在螢幕上。

參考： 從瀏覽器多程序到JS單執行緒，JS執行機制最全面的一次梳理

10. XSS和CSRF防範措施

（1）XSS：跨站指令碼攻擊

攻擊方式：在URL或者頁面輸入框中插入JavaScript程式碼。

防範：

• 設定httpOnly，禁止用document.cookie操作；

• 輸入檢查：在使用者輸入的時候進行格式檢查；

• 對輸出轉義。

（2）CSRF：跨站點偽造請求

攻擊方式：攻擊者通過一些技術手段欺騙使用者的瀏覽器去訪問一個自己曾經認證過的網站並執行一些操作（如發郵件，發訊息，甚至財產操作如轉賬和購買商品）。主要是拿到了使用者的登入態。

防範：

• 檢查 Referer 欄位：這個欄位用以標明請求來源於哪個地址。在處理敏感資料請求時，通常來說，Referer 欄位應和請求的地址位於同一域名下。

• 新增校驗 Token：這種資料通常是表單中的一個數據項。伺服器生成token並附加在表單中，其內容是一個偽亂數。當客戶端通過表單提交請求時，這個偽亂數也一併提交上去以供校驗。正常的訪問時，客戶端瀏覽器能夠正確得到並傳回這個偽亂數，而通過 CSRF 傳來的欺騙性攻擊中，攻擊者無從事先得知這個偽亂數的值，伺服器端就會因為校驗 Token 的值為空或者錯誤，拒絕這個可疑請求。

• 通過輸入驗證碼來校驗合法請求。

三面

這一面基本問的是個人知識沉澱了，如實回答就可以了。

1. 在專案中的難點，怎麼解決的

2. 你的優勢是什麼

3. redux 原始碼學到了什麼，怎麼看原始碼的

4. 瞭解哪些前端的前沿技術

5. 平時看什麼書，興趣愛好是什麼

6. 非同步有哪些方法

7. 部落格寫了什麼

8. 除了實習經歷，還做過哪些專案

四面

這一面是在杭州菜鳥現場面的，尷尬的是通知我的小姐姐一直強調是hr面，我天真的以為是hr面了，然鵝問了很多技術，當時候想的是阿里的hr都這麼厲害了，都能直接問技術了。臨走之前，特意問了面試官是hr面麼，他說是技術，然後我......大概就知道自己涼了。

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

mysql的索引用的是B+樹。

參考： 資料結構中常見的樹（BST二叉搜尋樹、AVL平衡二叉樹、RBT紅黑樹、B-樹、B+樹、B*樹）

2. Mysql的基本寫法

參考： 一千行 MySQL 學習筆記

3. 估算下杭州上空現在有多少架飛機

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

4. 兩組資料，都儲存五億條url，記憶體有4G，如何找出相同的兩條url

參考： 面試- 阿里-. 大資料題目- 給定a、b兩個檔案，各存放50億個url，每個url各佔64位元組，記憶體限制是4G，讓你找出a、b檔案共同的url?

5. 如何找到一個字串中最長的兩個字串

解法：字尾陣列。首先生成字串的所有後綴陣列，在進行排序，找出相鄰兩個最長的公共子串（從第一位開始相同的）

例如：abcdeabc

生成字尾陣列：【abcdeabc，bcdeabc，cdeabc，deabc，eabc，abc，bc，c】

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

找出相鄰的最長公共子串：【abc，bc，c】

因此，最長的串是abc。

6. 在白板上畫出這個專案的整個架構

畫了下專案的功能架構什麼的。

7. XSS, CSRF,token 怎麼來的，sql 注入知道麼

sql注入：

攻擊方式：伺服器上的資料庫執行非法的 SQL 語句，主要通過拼接字串的形式來完成，改變sql語句本身的語義。通過sql語句實現無賬號登陸，甚至篡改資料庫。

防禦：

• 使用引數化查詢：使用預編譯語句，預先編譯的 SQL 語句，並且傳入適當引數多次執行。由於沒有拼接的過程，因此可以防止 SQL 注入的發生。 使用preparedStatement的引數化sql，通過先確定語義，再傳入引數，就不會因為傳入的引數改變sql的語義。（通過setInt，setString，setBoolean傳入引數）

• 單引號轉換：將傳入的引數中的單引號轉換為連續兩個單引號，PHP 中的 Magic quote 可以完成這個功能。

• 檢查變數資料型別和格式。

• 使用正則表示式過濾傳入的引數，對特殊符號過濾或者轉義處理。

8. 怎麼設計一個ant的元件

9. 你覺得你實習做的專案有什麼改進的地方

10. 你做過印象最深刻的專案

11. 演算法瞭解過嗎

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

12. Setstate 會發生什麼

setState會引發一次元件的更新過程，從而引發頁面的重新繪製。主要會涉及以下幾個生命週期函式：

• shouldComponentUpdate（被呼叫時this.state沒有更新；如果返回了false，生命週期被中斷，雖然不呼叫之後的函數了，但是state仍然會被更新）

• componentWillUpdate（被呼叫時this.state沒有更新）

• render（被呼叫時this.state得到更新）

• componentDidUpdate

13. 平時處理過什麼相容性

參考： web前端相容性問題總結

14. 瞭解分散式和負載均衡麼

然鵝我並不瞭解呃。

參考： 伺服器負載均衡的基本功能和實現原理

五面

第四面確實是掛了，沒面hr就讓我走了，後面過了兩天之後，三面面試官又把我撈起來了，說我計算機基礎還有資料庫基礎不怎麼好，然後說問我幾個簡單的，之後給了我機會面了hr，感謝三面面試官讓我體驗了阿里的整個面試流程，很滿足了。

1. 程序和執行緒的區別

• 根本區別：程序是作業系統資源分配的基本單位，而執行緒是任務排程和執行的基本單位。

• 在開銷方面：每個程序都有獨立的程式碼和資料空間（程式上下文），程式之間的切換會有較大的開銷；執行緒可以看做輕量級的程序，同一類執行緒共享程式碼和資料空間，每個執行緒都有自己獨立的執行棧和程式計數器（PC），執行緒之間切換的開銷小。

• 所處環境：在作業系統中能同時執行多個程序（程式）；而在同一個程序（程式）中有多個執行緒同時執行（通過CPU排程，在每個時間片中只有一個執行緒執行）。

• 記憶體分配方面：系統在執行的時候會為每個程序分配不同的記憶體空間；而對執行緒而言，除了CPU外，系統不會為執行緒分配記憶體（執行緒所使用的資源來自其所屬程序的資源），執行緒組之間只能共享資源。

• 包含關係：沒有執行緒的程序可以看做是單執行緒的，如果一個程序內有多個執行緒，則執行過程不是一條線的，而是多條線（執行緒）共同完成的；執行緒是程序的一部分，所以執行緒也被稱為輕權程序或者輕量級程序。

2. 氣泡排序和快速排序的區別

簡述了下冒泡和快排的思想，以及冒泡和快排的時間複雜度。

3. OSI七層模型以及作用

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

4. 你有哪些優勢，或者打動他的

呃，最怕這種自誇的問題額，然後就是誇了一頓，手動捂臉。

5. 面向物件和非面向物件有什麼區別

面向物件三大特性：封裝,繼承,多型。

面向物件的好處：

• 將物件進行分類，分別封裝它們的資料和可以呼叫的方法，方便了函式、變數、資料的管理，方便方法的呼叫（減少重複引數等），尤其是在編寫大型程式時更有幫助。

• 用面向物件的程式設計可以把變數當成物件進行操作，讓程式設計思路更加清晰簡潔，而且減少了很多冗餘變數的出現

參考： 面向物件（一）|面向物件概念及優點

6. 設計模式有哪些，說下裝飾者模式和代理模式

前面有總結，往前翻。

7. 過載和重寫有什麼區別

方法重寫(overriding)：

• 也叫子類的方法覆蓋父類的方法，要求返回值、方法名和引數都相同。

• 子類丟擲的異常不能超過父類相應方法丟擲的異常。(子類異常不能超出父類異常)

• 子類方法的的訪問級別不能低於父類相應方法的訪問級別(子類訪問級別不能低於父類訪問級別)。

方法過載(overloading):

過載是在同一個類中的兩個或兩個以上的方法，擁有相同的方法名，但是引數卻不相同，方法體也不相同，最常見的過載的例子就是類的建構函式。

參考： 方法過載和重寫的區別

hr面

1. 為什麼選擇前端開發

2. 什麼事情讓你最有成就感

3. 什麼讓你最有挫敗感

4. 為什麼選擇阿里

5. 平時是怎麼學習的

6. 職業發展

百度

二面三面都有手寫程式碼的環節，對於我這種動手能力弱的人來說還是挺吃力。當時提前批投遞的是深圳百度，總共只招五個前端，沒過也很正常。後面正式批筆試過了，但是要去北京面試，也就直接放棄了。

1. 為什麼要用flex佈局，align-items和justify-content的區別

傳統佈局基於盒模型，非常依賴 display屬性 、position屬性 、float屬性。而flex佈局更靈活，可以簡便、完整、響應式地實現各種頁面佈局，比如水平垂直居中。

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

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

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

把專案當做一個整體，通過一個給定的主檔案（如：index.js），Webpack將從這個檔案開始找到專案的所有依賴檔案，使用loaders處理它們，最後打包為一個（或多個）瀏覽器可識別的JavaScript檔案。

babel將es6、es7、es8等語法轉換成瀏覽器可識別的es5或es3語法。

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

• 定義變數，可以把反覆使用的css屬性值定義成變數，然後通過變數名來引用它們，而無需重複書寫這一屬性值；

• 巢狀寫法，父子關係一目瞭然；

• 使用運算子，可以進行樣式的計算；

• 內建一些顏色處理函式用來對顏色值進行處理，例如加亮、變暗、顏色梯度等；

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

• Mixins （混入）：有點像是函式或者是巨集，當某段 CSS經常需要在多個元素中使用時，可以為這些共用的 CSS 定義一個Mixin，然後只需要在需要引用這些 CSS 地方呼叫該 Mixin 即可。

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

對比了一下es6模組和CommonJS模組：

區別	CommonJS	es6
載入原理	第一次載入模組就會執行整個模組，再次用到時，不會執行該模組，而是到快取中取值。	不會快取執行結果，動態的去被載入的模組中取值，並且變數總是繫結其所在模組。
輸出	值的拷貝（模組中值的改變不會影響已經載入的值）	值的引用（靜態分析，動態引用，原來模組值改變會改變載入的值）
載入方式	執行時載入（載入整個模組，即模組中的所有介面）	編譯時載入（只加載需要的介面）
this指向	指向當前模組	指向undefined
迴圈載入	只輸出已經執行的部分，還未執行的部分不會輸出	遇到模組載入命令import時不會去執行模組，而是生成一個動態的只讀引用，等到真正用到時再去模組中取值。只要引用存在，程式碼就能執行。

5. 有沒有用過es6的一些非同步處理函式

Promise，generator，async await

6. redux怎麼處理非同步操作

可以引入Redux-thunk或者redux-promise這種中介軟體，可以延遲事件的派發。

其中的原理：是因為他們用了applymiddleware()包裝了store的dispatch方法，擁有可以處理非同步的能力。

7. 為什麼reducer要是個純函式，純函式是什麼？

純函式：對於相同的輸入，永遠會得到相同的輸出，而且沒有任何可觀察的副作用，也不依賴外部環境的狀態。

原因：Redux只通過比較新舊兩個物件的儲存位置來比較新舊兩個物件是否相同（淺比較）。如果你在reducer內部直接修改舊的state物件的屬性值，那麼新的state和舊的state將都指向同一個物件。因此Redux認為沒有任何改變，返回的state將為舊的state。兩個state相同的話，頁面就不會重新渲染了。

因為比較兩個Javascript物件所有的屬性是否相同的的唯一方法是對它們進行深比較。但是深比較在真實的應用當中代價昂貴，因為通常js的物件都很大，同時需要比較的次數很多。因此一個有效的解決方法是作出一個規定：無論何時發生變化時，開發者都要建立一個新的物件，然後將新物件傳遞出去。同時，當沒有任何變化發生時，開發者傳送回舊的物件。也就是說，新的物件代表新的state。

8. 高階函式是什麼，怎麼去寫一個高階函式

高階函式：引數值為函式或者返回值為函式。例如map，reduce，filter，sort方法就是高階函式。

編寫高階函式，就是讓函式的引數能夠接收別的函式。

9. vue跟react的區別是什麼

沒有用過vue，所以就只說了vue具有雙向繫結，react是單向資料流。

參考： Vue.js與React的全面對比

10. nodejs處理了什麼問題

可以處理高併發的I/O，也能與websocket配合，開發長連線的實時互動應用程式。

11. 響應式佈局，怎麼做移動端適配

使用媒體查詢可以實現響應式佈局。

移動端適配方案：

（1）meta viewport：讓當前viewport的寬度等於裝置的寬度，同時不允許使用者手動縮放。

1. <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

width=device-width: 讓當前viewport寬度等於裝置的寬度user-scalable=no: 禁止使用者縮放initial-scale=1.0: 設定頁面的初始縮放值為不縮放maximum-scale=1.0: 允許使用者的最大縮放值為1.0minimum-scale=1.0: 允許使用者的最小縮放值為1.0

（2）媒體查詢（響應式)

（3）動態 rem 方案

參考： 移動端是怎麼做適配的？

二面

1. 怎麼做一個實時的聊天系統

使用WebSocket和nodejs，《nodejs實戰》這本書詳細介紹了這個專案。

2. 當訊息有延遲的時候，怎麼保證訊息的正確順序

每個訊息在被建立時，都將被賦予一個全域性唯一的、單調遞增的、連續的序列號（SerialNumber，SN）。可以通過一個全域性計數器來實現這一點。通過比較兩個訊息的SN，確定其先後順序。

3. 怎麼做一個登陸視窗，input有哪些相容性

使用form表單。

4. input按鈕如何校驗

使用正則表示式。

5. 如何實現水平垂直居中，relative、absolute、fixed

我說了三種方式：

（1）使用表格

1. .container{

2.  width: 600px;

3.  height: 600px;

4.  background: #eee;

5.  display: table-cell;

6.  text-align: center;

7.  vertical-align: middle;

8. }

9. .center{

10.  background: blue;

11. }

（2）css3的transform屬性

1. .container{

2.  width: 100%;

3.  height: 400px;

4.  background: #eee;

5.  position: relative;

6. }

7. .center{

8.  background: blue;

9.  position:absolute;

10.  top: 50%;

11.  left: 50%;

12.  transform: translate(-50%, -50%);

13. }

（3）flex佈局

1. .container{

2.  width: 100%;

3.  height: 400px;

4.  background: #eee;

5.  display: flex;

6.  justify-content: center;

7.  align-items: center;

8. }

9. .center{

10.  width: 100px;

11.  height: 100px;

12.  background: blue;

13.  text-align: center;

14. }

• relative：相對於自己的定位；

• absolute：相對於最近一級定位元素的定位；

• fixed：相對於視窗的定位。

6. 寫一個函式，1s之後依次輸出1,2,3,4,5

直接使用了let和定時器。

1. for(let i = 1 ; i < 6; i++){

2.    setTimeout(() => {

3.        conosle.log(i)

4.    }, 1000)

5. }

7. 事件佇列（巨集任務、微任務）

參考：：這一次，徹底弄懂 JavaScript 執行機制

8. 如何每隔三個數加一個逗號，還要考慮小數點的情況

這道題就是大疆的筆試題，當時候筆試題也是瞎寫的，後面也沒仔細看，沒想到又成了一道面試題。

1. function transform(number){

2.    var num = number.toString()

3.    var numArr = num.split('.')

4.    var [num, dotNum] = numArr

5.    var operateNum = num.split('').reverse()

6.    var result = [], len = operateNum.length

7.    for(var i = 0; i< len; i++){

8.         result.push(operateNum[i])

9.         if(((i+1) % 3 === 0) && (i !== len-1)){

10.              result.push(',')

11.        }

12.    }

13.    if(dotNum){

14.         result.reverse().push('.'， ...dotNum)

15.         return result.join('')

16.    }else{

17.         return result.reverse().join('')

18.    }

19. }

9. webpack有配置過嗎？原理知道嗎

參考前面。

10. 父子元件如何通訊，子元件怎麼跟父元件通訊？

父元件把state作為props傳遞給子元件進行通訊。

父元件寫好state和處理該state的函式，同時將函式名通過props屬性值的形式傳入子元件，子元件呼叫父元件的函式，同時引起state變化。

11. 簡單說一下pwa

面試的這個部門就是做pwa的，所以說了下自己對pwa的理解。

三面

1. 手寫indexOf

1. function indexOf(str, val){

2.    var strLen = str.length, valLen = val.length

3.    for(var i = 0; i < strLen; i++){

4.        var matchLen = i + valLen

5.        var matchStr = str.slice(i, matchLen)

6.        if(matchLen > strLen){

7.            return -1

8.        }

9.        if(matchStr === val){

10.            return i

11.        }

12.    }

13.    return -1

14. }

2. 實現 JS 的繼承

1. function A () {

2.   this.name = 'a';    

3. }

4. A.prototype.getName = function () {

5.    return this.name;

6. }

7. function B () {

8. }

9. // B 如何繼承 A

參考： JS實現繼承的幾種方式

3. 從url輸入到頁面顯示會有哪些步驟

（1）DNS伺服器解析域名，找到對應伺服器的IP地址;

（2）和伺服器建立TCP三次握手連線；

（3）傳送HTTP請求，伺服器會根據HTTP請求到資料伺服器取出相應的資源，並返回給瀏覽器；

（4）瀏覽器處理響應

• 載入：瀏覽器對一個html頁面的載入順序是從上而下的。

當載入到外部css檔案、圖片等資源，瀏覽器會再發起一次http請求，來獲取外部資源。 當載入到js檔案，html文件會掛起渲染（載入解析渲染同步）的執行緒，等待js檔案載入、解析完畢才可以恢復html文件的渲染執行緒。

• 解析：解析DOM樹和CSSDOM樹。

• 渲染：構建渲染樹，將DOM樹進行視覺化表示，將頁面呈現給使用者。

4. method有哪些方法，分別是什麼意思？post和put的區別

post：上傳資源

put：修改資源

5. https有幾次握手

6. http2比http1好的地方

主要是考察http2的幾個特性。

參考：HTTP協議知識點總結

7. 頁面重新整理不出來，是有哪些問題

可以從第三題的每個步驟進行分析，大概是：

• 域名不存在，或者ip地址錯誤

• 網路問題，不能建立正常的tcp連線

• 伺服器找不到正確的資源

8. 上一次系統性的學習是什麼時候，怎麼學習的

學習react的時候，看文件、部落格，照著網上寫了點小專案。

9. 你覺得專案中最自豪的是什麼

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

網易

網易是在杭州網易大廈面的，一天面完三輪，然後錄用排序，擇優錄取的吧。我投的是網易考拉，哭唧唧，後面被拒了之後還傷心的解除安裝了考拉。之後正式批投了杭研，過了筆試，要去武漢面，本來海康也是在武漢面的，考慮到還要住一晚上，有點怕怕，就沒去了。

1.css3動畫

2. flex佈局

3. 實現call

1. Function.prototype.call2 = function (context) {

2.    var context = Object(context) || window

3.    context.fn = this

4.    var args = []

5.    for (var i = 1; i < arguments.length; i++) {

6.        args.push('arguments[' + i +']')

7.    }

8.    var res = eval('context.fn(' + args + ')')

9.    delete context.fn

10.    return res

11. }

4. 圖片懶載入data-src

5. Promise非同步

6. 水平垂直居中

7. 陣列有哪些方法，哪些會改變原陣列

改變原陣列的方法：pop、push、reverse、shift、sort、splice、unshift，以及兩個ES6新增的方法copyWithin 和 fill；

不改變原陣列（複製）：concat、join、slice、toString、toLocaleString、indexOf、lastIndexOf、未標準的toSource以及ES7新增的方法includes；

迴圈遍歷：forEach、every、some、filter、map、reduce、reduceRight 以及ES6新增的方法entries、find、findIndex、keys、values。

8. 操作dom有哪些方法

建立：

1.  createDocumentFragment()    //建立一個DOM片段<br>

2.  createElement()   //建立一個具體的元素<br>

3.  createTextNode()   //建立一個文字節點<br>

新增：appendChild()

移出：removeChild()

替換：replaceChild()

插入：insertBefore()

複製：cloneNode(true)

查詢：

1.  getElementsByTagName()    //通過標籤名稱<br>

2.  getElementsByClassName()    //通過標籤名稱<br>

3.  getElementsByName()    //通過元素的Name屬性的值<br>

4.  getElementById()    //通過元素Id，唯一性

9. 左邊定寬右邊自適應

（1）左盒子左浮動，右盒子width=100%

（2）左盒子左浮動，右盒子margin-left=左盒子寬度

（3）左盒子左浮動，右盒子右浮動，設定calc（100vw-盒子寬度）

（4）父容器設定display=flex，右盒子flex：1

10. 事件代理

利用事件冒泡的原理，讓自己的所觸發的事件，讓他的父元素代替執行。打個比方：一個button物件，本來自己需要監控自身的點選事件，但是自己不來監控這個點選事件，讓自己的父節點來監控自己的點選事件。

11. 後端瞭解麼

直接說了不瞭解，笑哭。

二面

1. 節流和防抖，手寫一下程式碼

（1）防抖：

定義： 合併事件且不會去觸發事件，當一定時間內沒有觸發這個事件時，才真正去觸發事件。

原理：對處理函式進行延時操作，若設定的延時到來之前，再次觸發事件，則清除上一次的延時操作定時器，重新定時。

場景： keydown事件上驗證使用者名稱，輸入法的聯想。

實現：

1. function debounce(fn, delay) {

2.    var timer

3.    return function () {

4.        var that = this

5.        var args = arguments

6.        clearTimeout(timer)

7.            timer = setTimeout(function () {

8.            fn.apply(that, args)

9.        }, delay)

10.    }

11. }

（2）節流：

定義： 持續觸發事件時，合併一定時間內的事件，在間隔一定時間之後再真正觸發事件。每間隔一段時間觸發一次。

原理：對處理函式進行延時操作，若設定的延時到來之前，再次觸發事件，則清除上一次的延時操作定時器，重新定時。

場景： resize改變佈局時，onscroll滾動載入下面的圖片時。

實現：

當觸發事件的時候，我們取出當前的時間戳，然後減去之前的時間戳(最一開始值設為0)，如果大於設定的時間週期，就執行函式，然後更新時間戳為當前的時間戳，如果小於，就不執行。

缺陷：第一次事件會立即執行，停止觸發後沒辦法再啟用事件。

1. function throttle(fn, interval) {

2.    var previousTime = +new Date()

3.    return function () {

4.        var that = this

5.        var args = arguments

6.        var now = +new Date()

7.        if (now - previousTime >= interval) {

8.            previousTime = now

9.            fn.apply(that, args)

10.        }

11.   }

12. }

當觸發事件的時候，我們設定一個定時器，再觸發事件的時候，如果定時器存在，就不執行，直到定時器執行，然後執行函式，清空定時器，這樣就可以設定下個定時器。

缺陷：第一次事件會在n秒後執行，停止觸發後依然會再執行一次事件。

1. function throttle(fn, interval) {

2.    var timer

3.    return function (){

4.        var that = this

5.        var args = arguments

6.   if(!timer){

7.        timer = setTimeout(function () {

8.            fn.apply(that, args)

9.            timer = null

10.         }, interval)

11.        }

12.    }

13. }

滑鼠移入能立刻執行，停止觸發的時候還能再執行一次。

1. var throttle = function(func,delay){

2.    var timer = null;

3.    var startTime = Date.now();

4.    return function(){

5.        var curTime = Date.now();

6.        var remaining = delay-(curTime-startTime);

7.        var context = this;

8.        var args = arguments;

9.        clearTimeout(timer);

10.        if(remaining<=0){

11.            func.apply(context,args);

12.            startTime = Date.now();

13.        }else{

14.            timer = setTimeout(func,remaining);

15.        }

16.    }

17. }

2. 知道哪些效能優化

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

4. 寫過什麼元件

5. 平時怎麼學習的

6. node，webpack瞭解麼

7. 模組化，commonjs,es6模組

8. redux怎麼實現的

hr面

1. 專案上有哪些難點，專案中學到了什麼

2. 不喜歡跟什麼樣的人共事

3. 平時怎麼學習

4. 為什麼來杭州

5. 職業發展

搜狗

搜狗是內推的，面試也很迷，第一面到第二面中間隔了二十幾天，然後二面完了也毫無反饋。

一面

1. 說一下專案，整個網路過程，從前端到後臺

2. Ajax 底層實現，readystate 有哪些

0-（未初始化）還沒有呼叫send()方法 1-（載入）已呼叫send()方法，正在傳送請求 2-（載入完成）send()方法執行完成，已經接收到全部響應內容 3-（互動）正在解析響應內容 4-（完成）響應內容解析完成，可以在客戶端呼叫了

3. 狀態碼有哪些，100,307

4. OSI七層模型

5. TCP三次握手

6. SSL握手過程

7. jQuery 有哪些方法

8. display 有哪些屬性，說一下flex的屬性

9. Es6的async awiat ，generator

10. Map有哪些方法

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

遍歷方法：

keys()：返回鍵名的遍歷器。 values()：返回鍵值的遍歷器。 entries()：返回所有成員的遍歷器。 forEach()：遍歷 Map 的所有成員。

參考： Set 和 Map 資料結構

11. 正則用過嗎？exec, 匹配一個手機號

12. css3動畫了解嗎，怎麼寫一個loading動畫

13. 怎麼實現跨域,cors涉及哪些請求欄位

14. 程式設計: 判斷兩個網路地址是否屬於同一個子網掩碼

用與運算子就可以了。當時是在牛客網的面試系統上寫的，一直AC不出，也是很迷了額。

15. 怎麼上傳檔案

二面

1. 怎麼計算在一個頁面上的停留時間

方案1：websocket，前端開個長連線，後臺統計長連線時間。

方案2：ajax輪詢，隔幾秒發一個查詢，後臺記錄第一與最後一個查詢間隔時間。

方案3： 關閉視窗或者跳轉的時候會觸發window.onbeforeunload函式，可以在該函式中做處理（有相容性問題）；統計完資料記錄到本地cookies中，一段時間後統一發送。

2. 給你一億個數，是連續的，怎麼找出兩個不存在的數

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

3. 一個搜尋框的輸入聯想，會遇到什麼問題？如果第一個請求延遲，第二個請求先到，請問怎麼處理？

鍵盤輸入太快，每次輸入都去聯想，需要多次傳送請求，會導致使用者體驗太差，可以使用防抖優化。

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

4. Http的快取

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

• pc端隨機生成一個含有唯一uid的二維碼，並與伺服器建立一個長連線；

• 手機掃描二維碼，解析出二維碼中的uid，並把這個uid和手機端的使用者密碼進行繫結，上傳給伺服器；

• 伺服器獲得客戶端資訊之後，pc端的長連線輪詢操作會獲得該訊息，顯示該賬號的資訊；

• pc端會再開一個長連線與手機端保持通訊，等待手機端確認登陸後，獲得伺服器授權的token，就可以在pc端登陸進行正常通訊了。

6. Promise 做什麼的，有哪幾種狀態

非同步處理的，有三個狀態：resolve，pending，reject。