前端 2018 屆校招筆試面經【百度，阿裡，騰訊，阿裡文娛，攜程，美團，拼多多】

這是師妹今年前端校招面經，目前她已經拿到某大公司的 offer 啦，經她允許，特将面經奉上，希望給正在求職的前端同學帶來一些參考，也祝各位順利找到理想的工作。

另附上本人 2017 屆面經

2017年秋季校招前端面經（百度，騰訊，網易，華為，樂視等）

百度

1.塊級元素和行内元素的差別和舉例

2.HTML5的新特性

3.清除浮動的方法

4.BFC清除浮動的原理

5.盒子模型

6.标準模式和相容模式

7.閉包的定義

8.原型鍊和作用域鍊

9.作用域鍊和閉包的差別

10.Object的原型對象是什麼

11.怎麼判斷一個屬性是對象上的屬性還是其原型對象上的屬性

12.判斷一個對象類型為數組

13.網絡安全的防禦

14.localStorage和cookie的差別

15.前端性能優化

16.層疊上下文

17.手寫events子產品

18.手寫将一個段落裡的單詞首字母都大寫的函數

1.三欄式布局

2.塊級元素和行内元素的差別和舉例

3.h5語義化了解，新增了哪些标簽

4.css有哪些選擇器,權重多少

5.get和post差別

6.浏覽器緩存機制

7.盒子模型

8.es6有哪些新特性

9.跨域有哪幾種實作方式

10.郵箱正則比對 [email protected]/cn

11.實作一個反轉字元串的函數

12.段落首字母大寫函數

13.觀察者模式

14.快速排序怎麼實作的

騰訊

1.為什麼喜歡學習前端。

2.對MVVM架構的了解。

3.angularJS雙向綁定原理。

4.了解過其他的MVVM架構嗎。

5.React虛拟DOM原理。

6.單向資料流動原理。

6.html5，css3，ES6新特性。

7.ES6中比較好用的文法。

8.對閉包和作用域的了解。

9.js怎麼實作面向對象。

10.實作動畫的方式。

11.網站性能優化。

12.如何檢視一個網站的性能。

13.網站上線後如何檢視網站在客戶電腦上的性能。

14.收集使用者資訊主要收集哪些資訊。

15.如何進行跨站請求。

16.如果實作跨域資源共享。

17.網站開發的流程，像是技術選型，人員分工這一類，越詳細越好。

18.網絡分層分為哪幾層。

19.狀态碼301,302。

20.網絡中每一層都有哪些協定。

21.浏覽器的緩存分為哪幾種。

22.常用的排序算法。

23.Web安全。

24.XSS攻擊原理及如何防止。

25.需要屏蔽哪些關鍵詞。

26.了解CDN嗎。

28.OPTIONS請求的作用。

29.HTTP協定有哪些内容。

30.HTTP2.0新特性。

31.HTTPS相對于HTTP新增了哪些内容。

32.HTTPS是怎麼對傳輸内容進行加密的。

33.同一個頁面裡面iframe之間怎麼傳遞資訊。

34.網站如何實作離線應用。

35.cookier有4096B（加減1）位元組的長度限制，容量是多少？js高階教程p629

36.js怎麼實作表單送出按鈕的短期重複點選。

37.ajax的post、get方法，優缺點，實作原理

38.盒模型

39.跨域請求方式

40.浏覽器安全問題

41.input滑鼠滑過擷取内容

42.項目中遇到的困難

43.css帶src的标簽 <link> <a> <img> <audio> <video>

44.談談對閉包的了解

45. var x=5, o={

x:10,

show:function(x){

var x=20;

console.log(this.x);//10

(function show1(){

console.log(this.x);//5

})();

function show2(x){//x是window

}

show2(x)

}

}

o.show();

46.typeof(null)==object

47.浏覽器緩存的底層實作原理

48.設計模式

49.css架構實作（例如：bootstrap有哪些檔案，作用）

50.經常浏覽哪些網站(知乎、大漠、阮一峰部落格等等，最好說下對公司對應的哪些技術感興趣)

51.百度前端學院，做了哪些題，怎樣實作

阿裡

一面

1、自我介紹之後，一個項目一個項目介紹

2、vue的雙向綁定

3、vuex資料流動過程

4、ajax應用場景以及優缺點

5、http請求中post和get請求的差別

6、跨域cros和jsonp；jsonp是怎麼擷取資料的

7、閉包及應用

8、說一下js的繼承。es6裡面的extent是那種繼承方式

9、講一下let const var

10、講一下flexbox

11、講一下float

12、移動端适配

13、promise定義及應用

二面

1、介紹項目，項目中每一個點追着細問

2、https實作

3、跨域等問了幾個基礎問題

HR

1、聊人生、聊計劃、周圍覺得厲害的人，影響較大的人、自己的缺點、最近集中面試對你有什麼影響

2、建議：增加隻是探索欲及主動性會對以後工作有很好的發展。

攜程

1.對js閉包的了解

2.對原型的了解

3.js怎麼實作繼承

4.angular的雙向綁定實作

5.其他架構的雙向綁定實作

6.對連結清單和二叉樹的了解

7.連結清單和數組插入的效率

8.快速排序的原理

9.快速排序的時間複雜度和空間複雜度

10.組合和繼承的關系，哪個好用

11.組合和繼承的例子

//終面

1.項目介紹

2.前端和後端的差別和分工

3.對前端渲染和後端渲染的看法

服務端的計算和渲染效率比較高，但是服務端渲染傳回的頁面就需要重新整理頁面，使用者體驗不好

4.更喜歡哪一種為什麼

5.對前後端聯合渲染有了解嗎

6.為什麼技術選型angularjs

7.為什麼要重構代碼

8.重構代碼的流程

9.具體一個控制器是怎麼重構的

10.寫一個深度拷貝函數

11.怎麼完成一個送出訂單頁面

美團

1、三欄式布局 margin float flexbox

2、行内元素性質 (非替換元素不可設定高度和margin-top,margin-bottom)

3、清除浮動(clear:both overflow:hidden :after{content:' ';height:0;clear:both})

4、angular雙向綁定、vue雙向綁定(get set)

5、浏覽器緩存兩種方式

6、螢幕适配布局：rem

7、http狀态碼

8、不使用緩存方式：在請求路徑後面加rand随機數

9、image原生布局為inline

原生屬性檢視方式：var myDiv=document.getElementsByTagName("img")[0];

console.log(document.defaultView.getComputedStyle(myDiv,null));

總結主要問css和架構原理以及一些浏覽器原理

1、自我介紹

2、bootstrap 布局，栅格布局 ，怎麼處理不同裝置上的差異

3、http 304 狀态碼是什麼意思？其他狀态碼？HTTPS

4、ajax跨域，有哪些解決方法，舉了幾個執行個體讓實作跨域，通路子域算不算跨域等等等

5、一兩個簡單的算法題（記不清了）

6、求數組中最大數

7、事件委托，點選 ul 中的li 彈出li内容，動态添加li

8、原型鍊繼承：    b.prototype =new a() 不對嗎？ 

9、es6 ，異步原因，promise set map等等

10、事件流 

11、cookie

12、數組去重

13、項目

 拼多多

1.兩欄布局，左邊固定，要求先加載内容區域，說出多種方法

2.正則對象test方法和exec方法的不同，分别傳回什麼

3.事件綁定的多種方式，事件監聽addEventListener的第三個參數是什麼，取值各有什麼意思

4.事件代理 阻止事件冒泡(stopPropagation cancelBubble) 阻止事件預設方式

5.js基本資料類型有哪些，寫一個函數判斷變量的類型

6.詳細說說box-sizing屬性取值的差別

box-sizing: content-box|border-box|inherit;

寬度和高度分别應用到元素的什麼位置。

7.有一段文字，裡面有電話号碼，電話号碼是連續數字，需要把電話号碼都替換成*，說出多種做法

var reg=/1[3 4 5 8]\d{9}/g;

1）str.replace(reg,'***********')

2）str.split(reg).join('***********')

3） var str1='';

var lastIndex=0;

while(arr=reg.exec(str)){//arr.index内容所在位置

str1+=str.slice(lastIndex,arr.index)+'***********';

lastIndex=reg.lastIndex;//正規表達式目前所在位置（在選中内容之後）

}

str1+=str.slice(lastIndex);

console.log(str1)

8.Header 頭 Set-cookie: http-only 是幹什麼用的？

二面（2017.08.24，25min）

1.自我介紹

2.講講你做過的項目

3.項目中提到了 React，問：React 元件的生命周期？父子元件之間如何通信？子元件之間如何通信？

4.前端性能優化？

5.http 緩存原理？(Expires Cache-Control if-Modified-Since/last-Modified if-None-Match/ETag)

6.JavaScript 的垃圾回收機制？

7.CSS BFC 原理？

8.box-sizing 屬性（兩種盒子模型）？

9.穩定的排序和不穩定的排序？

快速排序的思路？

堆排序的思路？

10.還有什麼想問我的？

2、js繼承原理

3、閉包，經典閉包問題for循環i，實作指定輸出

4、狀态碼 499 client has closed connection

5、http有哪幾種請求的方法，options作用

6、CROS方法實作跨域

1）Access-Control-Allow-Origin

該字段是必須的。它的值要麼是請求時Origin字段的值，

要麼是一個*，表示接受任意域名的請求。

2）Access-Control-Request-Method

該字段是必須的，用來列出浏覽器的CORS請求會用到哪些

HTTP方法，上例是PUT,GET,POST。

3）Access-Control-Expose-Headers

該字段可選。CORS請求時，XMLHttpRequest對象的

getResponseHeader()方法隻能拿到6個基本字段：

Cache-Control、Content-Language、Content-Type、

Expires、Last-Modified、Pragma。如果想拿到其他字段，

就必須在Access-Control-Expose-Headers裡面指定。

上面的例子指定，getResponseHeader('FooBar')可以傳回

FooBar字段的值。

7、項目介紹，微信免登陸怎麼實作

8、angular和vue差別

9、手寫多路歸并排序

10、前端性能優化？具體怎麼實作的，用過哪些

11、sessionStorage和localStorage的不同

2、項目介紹，vue優點

3、盒子模型，怎樣在标準盒子模型中實作IE盒子模型

4、知道哪些排序算法，手寫快排，時間複雜度

5、怎樣知道一個元素在目前螢幕 getBoundingClientRect

6、實作空心圓，裡面白色，外面紅色(僞元素、border、radial-gradient)

7、有三個函數，内部實作都是異步的，怎麼讓這三個函數變成一個同步的，以節省時間

--promise.all

2、對拼多多有了解嗎，使用過嗎，了解工作機制嗎

3、為什麼想從事電商，為什麼選前端開發

4、有沒有面過其他公司，有沒有拿到其他公司的 Offer？

4、對工資有什麼要求嗎

5、家庭成員，父母同意去上海嗎

6、保研的還是考研的，研究所學生成績怎麼樣

7、有男朋友嗎

8、以後生活規劃。。。

阿裡文娛

一面：

1、==的類型強制轉換（0=='0'） 3.0===3.0*1

變量提升

變量的命名原則

不同資料類型值的互相轉化

2、css3新特性

3、ul清單，設定前三列顔色不同，4-10列斑馬線布局，之後元素隐藏

4、元素隐藏方式

1）display:none 2）visibility:hidden 3）background-color=color

4）移出視口 position:absolute left float+margin-left 5）z-index:-1;

5、變量以什麼開頭問題

6、ES6新特性

7、判斷資料類型的方式

1）typeof 2）instanceof 3）Object.prototype.toString.call();

8、MVC MVP MVVM差別

二面和HR（兩個面試官一起面的）；

9、項目介紹

10、為什麼選擇前端

11、用js寫Ajax

12、狀态碼

13、界面有大量的圖檔，怎樣去加快加載時間

14、怎樣使用緩存

15、兩欄式布局實作

16、怎樣修改一個單選或複選框的樣式

17、跨域的方式

18、浏覽器相容（我說了綁定事件的）

19、怎樣去除字元串中空格，正規表達式可以應用于哪些方面

20、壓縮js和css檔案的原理

21、閉包及應用

22、jquery文法

23、表述能力怎麼樣，如果沒有任何工具，隻口述介紹你的項目

24、希望再怎樣環境工作，或對工作環境有什麼要求

25、最近吵過架嗎？赢了還是輸了（不知道意圖何在）

26、有什麼問題問我的嗎（一面也有問）

樹林美麗、幽暗而深邃，但我有諾言尚待實作，還要奔行百裡方可沉睡。 -- 羅伯特·弗羅斯特