百度阿里網易大疆等大小廠前端校招麪筋 | 掘金技術徵文

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

騰訊

10月16日更新，面了騰訊一面，而後就掛了，結束的太快就像龍捲風。

1. 怎麼從十萬個節點中找到想要的節點，怎麼快速在某個節點前插入一個節點？

這個題目我已經在segmentfault上提問了，目前尚未人給出回答，求大神前去解答~

題目連接： 怎麼在有十萬個節點的html文檔中找到特定的某個節點

2. 負載均衡方式和容錯機制

3. 描述一個文件從硬盤讀取到進程內存中的過程

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

5. 畫一下OSI七層模型

6. 寫一個你最熟悉的算法

7. 有哪些僞類和僞元素

8. IE盒模型和標準盒模型，用哪一個屬性改變

9. 怎麼清除浮動，原理是什麼

10. em,rem,px的區別

大疆

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

一面二面

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

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對象：

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請求數據的過程：

var xhr = getXHR();
xhr.open('GET', url/file,true);  //設置請求方式，url，以及是否異步
xhr.onreadystatechange = function() {   //設置回調監聽函數
   if(xhr.readyState==4){
        if(xhr.status==200){
            var data=xhr.responseText;
             console.log(data);
   }
};
xhr.onerror = function() {
  console.log("Oh, error");
};
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算法是對樹的深度優先遍歷仍是廣度優先遍歷？

• 對React、Redux、React-Redux詳細剖析

• 是深度優先遍歷。 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. 有哪些性能優化

參考：

• 嗨，送你一張Web性能優化地圖
• 前端優化不徹底指南

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封裝的更好，用起來比較簡單。

參考：

• 這段時間研究了下Redux，寫寫本身對它的感受
• Redux數據流管理架構有什麼致命缺陷,將來會如何改進?

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將es六、es七、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的寬度等於設備的寬度，同時不容許用戶手動縮放。

<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.0
minimum-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）使用表格

.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：相對於本身的定位；
• absolute：相對於最近一級定位元素的定位；
• fixed：相對於窗口的定位。

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

直接使用了let和定時器。

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

7. 事件隊列（宏任務、微任務）

參考：：這一次，完全弄懂 JavaScript 執行機制

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

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

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有配置過嗎？原理知道嗎

參考前面。

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

父組件把state做爲props傳遞給子組件進行通訊。

父組件寫好state和處理該state的函數，同時將函數名經過props屬性值的形式傳入子組件，子組件調用父組件的函數，同時引發state變化。

11. 簡單說一下pwa

面試的這個部門就是作pwa的，因此說了下本身對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. 實現 JS 的繼承

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

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

function B () {
}

// 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

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. 數組有哪些方法，哪些會改變原數組

改變原數組的方法：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有哪些方法

建立：
createDocumentFragment() //建立一個DOM片斷
createElement() //建立一個具體的元素
createTextNode() //建立一個文本節點

添加：appendChild()

移出：removeChild()

替換：replaceChild()

插入：insertBefore()

複製：cloneNode(true)

查找：
getElementsByTagName() //經過標籤名稱
getElementsByClassName() //經過標籤名稱
getElementsByName() //經過元素的Name屬性的值
getElementById() //經過元素Id，惟一性

9. 左邊定寬右邊自適應

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

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

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

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

10. 事件代理

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

11. 後端瞭解麼

直接說了不瞭解，笑哭。

二面

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

（1）防抖：

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

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

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

實現：

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）節流：

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

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

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

實現：

• 方法一：使用時間戳。

當觸發事件的時候，咱們取出當前的時間戳，而後減去以前的時間戳(最一開始值設爲0)，若是大於設置的時間週期，就執行函數，而後更新時間戳爲當前的時間戳，若是小於，就不執行。

缺陷：第一次事件會當即執行，中止觸發後沒辦法再激活事件。

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)
        }
   }
}
複製代碼

• 方法二：使用定時器

當觸發事件的時候，咱們設置一個定時器，再觸發事件的時候，若是定時器存在，就不執行，直到定時器執行，而後執行函數，清空定時器，這樣就能夠設置下個定時器。

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

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)
        }
    }
}
複製代碼

• 方法三：優化

鼠標移入能馬上執行，中止觸發的時候還能再執行一次。

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. 知道哪些性能優化

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。

7. 項目有哪些難點，怎麼處理的

8. 遇到過哪些性能優化

電信IT研發中心

當時據說電信對學歷要求很高，本科基本都是211起的，想着本身本科太渣，就直接放棄了網上的筆試。以後電信來了學校宣講會，跟朋友吃完飯看到了，就去說湊湊熱鬧，恰好有筆試也就作了。作完以後筆試竟然考了最高分，比第二名高出二十分，手動捂臉額。一面完分數也挺高的，有95分，運氣爆棚。重點是今年電信開的薪資實在過高了，目前還在糾結選哪一個。

1. Xhtml和html的區別

• XHTML 元素必須被正確地嵌套。
• XHTML 元素必須被關閉。
• 標籤名必須用小寫字母。
• XHTML 文檔必須擁有根元素。

2. 遇到過哪些兼容性問題

3. 瀏覽器內核有哪些，移動端用的是哪一個

• Trident內核：IE,MaxThon,TT,The Word,360,搜狗瀏覽器等。[又稱爲MSHTML]
• Gecko內核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等；
• Presto內核：Opera7及以上。[Opera內核原爲：Presto，現爲：Blink]
• Webkit內核：Safari,Chrome等。[Chrome的:Blink(Webkit的分支)]

對於Android手機而言，使用率最高的就是Webkit內核。

4. 怎麼實現標籤頁的通訊

5. Cookie、session,localstorage，sessionstorage

6. React 和jquery 之間的區別，哪一個好用

7. 怎麼實現繼承

8. Es6,es7有哪些特性

9. 怎麼跨域

10. Commonjs用的js哪一個特性?

由於js以前只能在瀏覽器運行，爲了能讓js能在服務器上運行，因此設計了commonjs規範，並且js以前沒有模塊化的概念。

11. 選擇器優先級

12. 僞類知道嗎，有哪些

13. 塊級元素有哪些，怎麼轉成行內元素

14. 一個完整的http請求，頁面渲染過程，js和css文件怎麼渲染

二面

一面問的都很常規的，不知道爲啥給了這麼高的分。二面的時候三個面試官，總共就問了三個問題，而後就說面試結束了，不超過五分鐘。

1. TCP怎麼工做的

三次握手

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

網絡層

3. 平時用什麼語言，用過哪些框架

深信服

深信服給的薪資竟然比電信還低，並且加班還嚴重，就直接拒了。

一面

1. 跨域，同源策略，webpack裏面有個跨域的方式知道麼

2. 怎麼把es6轉成es5，babel怎麼工做的

• 解析：將代碼字符串解析成抽象語法樹
• 變換：對抽象語法樹進行變換操做
• 再建：根據變換後的抽象語法樹再生成代碼字符串

3. 反向代理知道麼，Nginx

4. 繼承有哪些方式

5. 怎麼實現一個sleep ，手寫一個promise

6. 能寫一個二叉樹麼，怎麼去遍歷

7. 深拷貝怎麼寫

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

（2）for in 加遞歸

function isObj(obj) {
//判斷是否爲對象或者函數，但不是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）函數庫lodash，提供_.cloneDeep（）

8. 在公司除了完成上級交待的任務，還作了什麼

9. 怎麼實現垂直中間佈局

10. Call和apply，哪一個性能開銷大

在思否上提問了，已有大神回答。

參考： call和apply的哪一個性能更好

11. 正則寫一個手機號，全局匹配是什麼

12. 刪除一個數組中的某個數

splice方法

13. 模塊化介紹一下，什麼是編譯時優化

14. 有哪些網絡安全名詞，怎麼防範

15. 平時怎麼學習

二面

二面小哥哥問了幾個問題以後，就一直跟我介紹深信服內部的一些管理、技術氛圍、晉升機制什麼的，全程都是笑臉額。

1. git push -u 是什麼意思

綁定默認提交的遠程版本庫，加了參數-u後，之後便可直接用git push 代替git push origin master

2. git rebase解釋下

有test和dev兩個分支，分別有兩個commit，此時執行下列命令：

git checkout test
git rebase dev
複製代碼

以dev爲基準將test的提交進行回放，挨個的應用到dev上去，而後test的那些提交就會廢棄。 等價於git merge dev。

git merge 和git rebase區別：

• merge不會修改提交歷史，rebase會修改提交歷史 。
• rebase只應用於本地沒有提交的代碼，若是應用到已經提交到遠程的分支不要應用，否則會很是的麻煩，git merge 能夠應用於遠程分支。

3. linux命令，怎麼打開一個文件

cat abc.txt

4. 你的上級給你review 代碼時會提什麼建議

5. 怎麼看待加班和工做效率

6. get和post分別進行幾回數據交互

get請求過程：（2次交互）

• 瀏覽器請求tcp鏈接（第一次握手）   
• 服務器答應進行tcp鏈接（第二次握手）   
• 瀏覽器確認，併發送get請求頭和數據（第三次握手，這個報文比較小，因此http會在此時進行第一次數據發送）   
• 服務器返回200 ok響應。

post請求過程：（3次交互）

• 瀏覽器請求tcp鏈接（第一次握手）   
• 服務器答應進行tcp鏈接（第二次握手）   
• 瀏覽器確認，併發送post請求頭（第三次握手，這個報文比較小，因此http會在此時進行第一次數據發送）   
• 服務器返回100 continue響應   
• 瀏覽器開始發送數據   
• 服務器返回200 ok響應

7. 怎麼打斷點，如何肯定一個結果來自於哪一個函數

ThoughtWorks

TW是內推的，作了內推做業後，就面了技術和文化面。技術面是在做業的基礎上加兩個功能，只寫出來一個，後面一個沒時間寫了，而後就只講了下思路。

文化面面了快一個小時，據說TW不加班，對女程序員還很友好，挺中意的公司，不過最後仍是掛了額。

華爲

華爲的面試就很少說了，基本不問前端的，進去是隨機分崗的。華爲的面試陣仗是我見過的最大的，據說要招一萬人，在萬達那裏面的，全是人啊，闊怕。如今正泡在offer池裏，估計國慶後發正式offer吧。

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

小米

小米是內推的，電話面了一面，國慶後要我去武漢現場面，那會學校恰好有事應該也不會去了。

1. redux主要作什麼的，用過redux的一些中間件嗎，簡單說一下

2. react生命週期說一下，diff算法說一下

3. setstate時會合並修改，是在哪一個函數裏修改的？宏事件和微事件

setstate是異步更新的，經過一個隊列機制實現state的更新，當執行setState時，會將須要更新的state合併後放入狀態隊列，而不會當即更新，隊列能夠高效的批量更新state。

4. let、const、var的區別；若是const定義的是個對象，可以修改對象的屬性嗎？

const實際上保證的並非變量的值不得改動，而是變量指向的那個指針不得改動，能夠給對象添加屬性。若是真的想將對象凍結，應該使用Object.freeze方法。

5. Object.freeze和Object.seal的區別

Object.preventExtension：禁止對象添加新屬性並保留已有屬性;

Object.seal：在一個現有對象上調用 Object.preventExtensions(..) 並把全部現有屬性標記爲 configurable:false;

Object.freeze：在一個現有對象上調用 Object.seal(..) 並把全部「數據訪問」屬性標記爲 writable:false。

6. 說一下防抖，應用場景是什麼

7. 快速排序算法說下，基點怎麼選？若是一個數組是已經排序好的怎麼選基點？

• 數組元素隨機，取固定基準；
• 數組元素已排序或逆序，取隨機基準；
• 更好的方法：三數取中，選取數組開頭，中間和結尾的元素，經過比較，選擇中間的值做爲快排的基準。

8. 算法的穩定性，冒泡、快排

9. lodash，underscore的庫瞭解麼？有哪些方法

10. 整個項目的架構，包括前端、後臺、運營

11. sort的底層實現機制，看過源碼麼？

數組長度<=22時採用插入排序，大於22用快排。

12. 怎麼調試bug？打過斷點麼？若是前端代碼被壓縮，如何去找到相應元素？

chromre控制檯下，在 Scripts 面板下面有個 Pretty print 按鈕(這種符號 {})，點擊會將壓縮 js 文件格式化縮進規整的文件，這時候在設定斷點可讀性就大大提升了。

寫在最後

感謝這一年的學習。另外，公司已籤，感謝各位的關注。

其餘資料

這些都是個人學習筆記，也能夠參考：

• 2019屆校招前端面試題整理——HTML、CSS篇
• JavaScript相關的基礎知識能夠看這兩篇思惟導圖： 你不知道的JavaScript（上卷） ， 你不知道的JavaScript（中卷）第一部分
• HTTP協議知識點總結

我正在參加掘金技術徵文，活動詳情 秋招求職時，寫文就有好禮相送 | 掘金技術徵文