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

另附上本人 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.郵箱正則匹配 xx@xx.com/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
console.log(this.x);//5
}
show2(x)
}
}
o.show();
46.typeof(null)==object

47.瀏覽器緩存的底層實現原理
48.設計模式
49.css框架實現（例如：bootstrap有哪些文件，做用）
50.常常瀏覽哪些網站(知乎、大漠、阮一峯博客等等，最好說下對公司對應的哪些技術感興趣)
51.百度前端學院，作了哪些題，怎樣實現

阿里

一面
一、自我介紹以後，一個項目一個項目介紹
二、vue的雙向綁定
三、vuex數據流動過程
四、ajax應用場景以及優缺點
五、http請求中post和get請求的區別
六、跨域cros和jsonp；jsonp是怎麼獲取數據的
七、閉包及應用
八、說一下js的繼承。es6裏面的extent是那種繼承方式
九、講一下let const var
十、講一下flexbox
十一、講一下float
十二、移動端適配
1三、promise定義及應用
二面
一、介紹項目，項目中每個點追着細問
二、https實現
三、跨域等問了幾個基礎問題
HR
一、聊人生、聊計劃、周圍以爲厲害的人，影響較大的人、本身的缺點、最近集中面試對你有什麼影響
二、建議：增長只是探索欲及主動性會對之後工做有很好的發展。

攜程

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.怎麼完成一個提交訂單頁面

美團

一、三欄式佈局 margin float flexbox
二、行內元素性質 (非替換元素不可設置高度和margin-top,margin-bottom)
三、清除浮動(clear:both overflow:hidden :after{content:' ';height:0;clear:both})
四、angular雙向綁定、vue雙向綁定(get set)
五、瀏覽器緩存兩種方式
六、屏幕適配佈局：rem
七、http狀態碼
八、不使用緩存方式：在請求路徑後面加rand隨機數
九、image原生布局爲inline
原生屬性查看方式：var myDiv=document.getElementsByTagName("img")[0];
console.log(document.defaultView.getComputedStyle(myDiv,null));

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

一、自我介紹
二、bootstrap 佈局，柵格佈局 ，怎麼處理不一樣設備上的差別
三、http 304 狀態碼是什麼意思？其餘狀態碼？HTTPS
四、ajax跨域，有哪些解決方法，舉了幾個實例讓實現跨域，訪問子域算不算跨域等等等
五、一兩個簡單的算法題（記不清了）
六、求數組中最大數
七、事件委託，點擊 ul 中的li 彈出li內容，動態添加li
八、原型鏈繼承：    b.prototype =new a() 不對嗎？ 
九、es6 ，異步緣由，promise set map等等
十、事件流 
十一、cookie
十二、數組去重
1三、項目

 拼多多

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.還有什麼想問個人？

一、自我介紹
二、js繼承原理
三、閉包，經典閉包問題for循環i，實現指定輸出
四、狀態碼 499 client has closed connection
五、http有哪幾種請求的方法，options做用
六、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字段的值。
七、項目介紹，微信免登錄怎麼實現
八、angular和vue區別
九、手寫多路歸併排序
十、前端性能優化？具體怎麼實現的，用過哪些
十一、sessionStorage和localStorage的不一樣

一、自我介紹
二、項目介紹，vue優勢
三、盒子模型，怎樣在標準盒子模型中實現IE盒子模型
四、知道哪些排序算法，手寫快排，時間複雜度
五、怎樣知道一個元素在當前屏幕 getBoundingClientRect
六、實現空心圓，裏面白色，外面紅色(僞元素、border、radial-gradient)
七、有三個函數，內部實現都是異步的，怎麼讓這三個函數變成一個同步的，以節省時間
--promise.all

一、自我介紹
二、對拼多多有了解嗎，使用過嗎，瞭解工做機制嗎
三、爲何想從事電商，爲何選前端開發
四、有沒有面過其餘公司，有沒有拿到其餘公司的 Offer？
四、對工資有什麼要求嗎
五、家庭成員，父母贊成去上海嗎
六、保研的仍是考研的，研究生成績怎麼樣
七、有男友嗎
八、之後生活規劃。。。

阿里文娛

一面：一、==的類型強制轉換（0=='0'） 3.0===3.0*1 變量提高 變量的命名原則 不一樣數據類型值的相互轉化二、css3新特性三、ul列表，設置前三列顏色不一樣，4-10列斑馬線佈局，以後元素隱藏四、元素隱藏方式 1）display:none 2）visibility:hidden 3）background-color=color 4）移出視口 position:absolute left float+margin-left 5）z-index:-1;五、變量以什麼開頭問題六、ES6新特性 七、判斷數據類型的方式 1）typeof 2）instanceof 3）Object.prototype.toString.call();八、MVC MVP MVVM區別二面和HR（兩個面試官一塊兒面的）；九、項目介紹十、爲何選擇前端十一、用js寫Ajax十二、狀態碼1三、界面有大量的圖片，怎樣去加快加載時間1四、怎樣使用緩存1五、兩欄式佈局實現1六、怎樣修改一個單選或複選框的樣式1七、跨域的方式1八、瀏覽器兼容（我說了綁定事件的）1九、怎樣去除字符串中空格，正則表達式能夠應用於哪些方面20、壓縮js和css文件的原理2一、閉包及應用2二、jquery語法2三、表述能力怎麼樣，若是沒有任何工具，只口述介紹你的項目2四、但願再怎樣環境工做，或對工做環境有什麼要求2五、最近吵過架嗎？贏了仍是輸了（不知道意圖何在）2六、有什麼問題問個人嗎（一面也有問）