【面試】-阿里前端社招面試

引言

金三銀四招聘季，筆者也是去面試了一些公司，下面是記錄最近面試阿里的一個部門，和你們分享一下。筆者17年畢業，目前工做經驗算上實習的話差很少有2年半左右，面了一個3-5年經驗的崗位，整體來講確實大廠基本上不少都是問的基礎題，因此你們若是想要找工做的話能夠好好準備下基礎知識。

一面

1. 前端監控作了哪些東西
2. 怎麼樣說服老闆說這個項目會比開源的更好,作這個的目的，因爲我作了個前端監控，因此問了這個問題
3. 前端錄製視頻如何錄製，仍是前端監控的問題
4. 前端異常監控視頻是在錯誤發生時記錄仍是實時記錄
5. 作過的工程化實踐，如何理解前端工程化

前端工程化除了提高咱們的開發體驗外，還要提高用戶體驗和產品性能，用「軟件工程」的角度去回答問題

6. CSS盒模型

IE盒模型和標準盒模型

7. call和apply
8. 瀏覽器緩存

強緩存和協商緩存

強緩存：

• expries:返回服務器過時日期，這是一個絕對的日期
• Cache-Control:max-age=3600相對時間，3600秒後過時

兩個都返回之後者爲準,expries因爲是拿本地時間和返回的服務器時間作比較，因此會存在偏差

協商緩存：

• Last-Modified If-Modified-Since 上一次服務器返回的時間和電腦當前的時間作對比
• Etag能夠理解爲一個key，value的hash值，由於有時候時間變了，可是資源自己沒有發生變化，因此能夠經過Etag來定位資源自己到底有沒有發生變化

9. DOM3級模型

• DOM0 原生的onclick事件和js的onclick事件
• DOM2 增長了addEventListener，而後將事件模型修改成捕獲階段，目標階段，冒泡階段
• DOM3 在原來DOM2的事件基礎上面增長了blur，focus和一些鍵盤事件

10. rem和em的區別
11. vue和react的區別
12. 本地存儲的方式，如何清除localstorage

cookie和LocalStorage和SessionStorage

13. 數組求最大值的幾種方式

//方式一（利用延展函數）
Math.max(null,...[1,2,4,32]);
//方式二（排序取第一個）
[1,2,3,5].sort(function(a,b){
    return b - a;
})[0];
複製代碼

二面

1. react生命週期
2. redux和vuex區別
3. react的props和state區別

這個主要仍是props在組件內部不可變，只能經過父傳子改變，state只能經過setState改變

4. event loop理解

這個的話要知道宏任務隊列和微任務隊列，宏任務隊列在每次的事件循環中只執行一個，微任務隊列在一次事件循環中會所有執行完畢，還有幾個宏任務和微任務以下： 宏任務macro-task（task）包括：

• setTimeout/setInterval
• setImmediate
• I/O操做
• UI rendering

微任務micro-task（job）包括：

• process.nextTick
• Promise
• Object.observe（已廢棄）
• MutationObserver(H5新特性)

5. 對react的理解，和vue對比

6. 設計一個spa要考慮哪些因素

這個也是一個開放題目，大體從如下幾點回答

• 路由-懶加載
• 組件
• 頁面性能和生命週期
• 用戶體驗-設計一個骨架屏

7. webpack的loader和plugin區別是什麼，有對webpack作過打包上面的優化麼

• loader是模塊和資源的轉換器，像css-loader，urlloader這些，主要仍是注重資源轉換
• plugin主要是貫穿webpack各個生命週期的鉤子，用來擴展webpack的功能，像htmlwebpackplugin或者熱替換模塊插件這些

8. 項目性能優化的地方

這個我提了一個之前項目裏面作的對幾千行表格滾動加載的優化，後面還問了關於總體項目優化的一些東西，主要仍是從CDN，資源合併壓縮，升級成http2，非核心代碼異步加載，利用瀏覽器緩存這些來回答

9. http狀態碼

這個當時問了4xx以上的幾個狀態碼，比較簡單

10. 除了Object.defineProperty,還有什麼能實現數據劫持

能夠經過Proxy ，vue3.0也是計劃用這個來代替的，當時腦子一抽都忘記了，後來提醒了一下也想起來了

11. 如何設計一個秒殺系統

這個是一個開放題目，面試官指望前端後端都說說，前端的話主要仍是從定時器setInterval不許，須要不停的想服務器校準時間，還有一個是避免重複發請求，後端的話講了一些redis緩存和異步隊列，nginx負載均衡這些扯了一堆，網上也有一些答案，你們能夠自行谷歌。

三面+HR面

1. 手寫reduce或者filter的polyfill

//這裏提供一個filter的寫法
Array.prototype.filters = function filter(fun){
	var arr = this;
	var filterArr = [];
	for(var i = 0,len = arr.length;i < len; i ++){
		if(callback(i,arr[i],arr)){
			filterArr.push(arr[i]);
		}
	}
	return filterArr;
}

function callback(index,item,arr){
	return item > 5;
}



[1,2,3,4,78].filters(callback)
複製代碼

2. 說一個你拿手的項目
3. 如何預防別人在你的網頁中插小廣告，這題我想應該是考的一道xss安全預防問題

• xss主要兩種類型，存儲型和反射型，預防的話主要是編碼和過濾來處理
• 簡單點的話能夠直接緩存https，能夠屏蔽大部分運營商的廣告

4. 如何設計一個模塊化打包器

這個的話須要去看一下require或者seajs這塊的實現方式，大體上面是，寫的還比較簡單，要深刻了解的話能夠去看一些網上的文章：

• 實現一個函數相似define能夠將變量做用域限制在函數內部
• 實現一個函數相似require能夠獲取到define函數中相似module.export的導出值
• 加載過程當中若是當前內存中沒有這個js，那麼動態建立script請求，不然使用內存中的js，防止重複加載

5. 說一下http的一些狀態碼，說一下TCP的三次揮手和四次握手過程
6. 還考了一道對象引用值的問題

var a1,b2;
a1 = {c:1};
b2 = a1;
b2.c = 2;
alert(b2.c);
a1 = {c:3};
alert(b2.c);
a1.c = 4;
alert(b2.c);
複製代碼

接下來就是HR面了，大體跟你聊聊這個部門的業務和我對於這個部門感興趣的點，還有一些是我之前的工做經歷