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

COCOYIN發表於2019-04-09
面試阿里前端

引言

金三銀四招聘季，筆者也是去面試了一些公司，下面是記錄最近面試阿里的一個部門，和大家分享一下。筆者17年畢業，目前工作經驗算上實習的話差不多有2年半左右，面了一個3-5年經驗的崗位，總體來說確實大廠基本上很多都是問的基礎題，所以大家如果想要找工作的話可以好好準備下基礎知識。

一面

  1. 前端監控做了哪些東西
  2. 怎麼樣說服老闆說這個專案會比開源的更好,做這個的目的，由於我做了個前端監控，所以問了這個問題
  3. 前端錄製視訊如何錄製，還是前端監控的問題
  4. 前端異常監控視訊是在錯誤發生時記錄還是實時記錄
  5. 做過的工程化實踐，如何理解前端工程化

前端工程化除了提升我們的開發體驗外，還要提升使用者體驗和產品效能，用“軟體工程”的角度去回答問題

  1. CSS盒模型

IE盒模型和標準盒模型

  1. call和apply
  2. 瀏覽器快取

強快取和協商快取

強快取：

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

兩個都返回以後者為準,expries由於是拿本地時間和返回的伺服器時間做比較，所以會存在誤差

協商快取：

  • Last-Modified If-Modified-Since 上一次伺服器返回的時間和電腦當前的時間做對比
  • Etag可以理解為一個key，value的hash值，因為有時候時間變了，但是資源本身沒有發生變化，所以可以通過Etag來定位資源本身到底有沒有發生變化
  1. DOM3級模型
  • DOM0 原生的onclick事件和js的onclick事件
  • DOM2 增加了addEventListener，然後將事件模型修改為捕獲階段，目標階段，冒泡階段
  • DOM3 在原來DOM2的事件基礎上面增加了blur，focus和一些鍵盤事件
  1. rem和em的區別
  2. vue和react的區別
  3. 本地儲存的方式，如何清除localstorage

cookie和LocalStorage和SessionStorage

  1. 陣列求最大值的幾種方式
//方式一（利用延展函式）
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改變

  1. event loop理解

這個的話要知道巨集任務佇列和微任務佇列，巨集任務佇列在每次的事件迴圈中只執行一個，微任務佇列在一次事件迴圈中會全部執行完畢，還有幾個巨集任務和微任務如下： 巨集任務macro-task（task）包括：

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

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

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

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

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

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

  • 路由-懶載入
  • 元件
  • 頁面效能和生命週期
  • 使用者體驗-設計一個骨架屏
  1. webpack的loader和plugin區別是什麼，有對webpack做過打包上面的優化麼
  • loader是模組和資源的轉換器，像css-loader，urlloader這些，主要還是注重資源轉換
  • plugin主要是貫穿webpack各個生命週期的鉤子，用來擴充套件webpack的功能，像htmlwebpackplugin或者熱替換模組外掛這些
  1. 專案效能優化的地方

這個我提了一個以前專案裡面做的對幾千行表格滾動載入的優化，後面還問了關於整體專案優化的一些東西，主要還是從CDN，資源合併壓縮，升級成http2，非核心程式碼非同步載入，利用瀏覽器快取這些來回答

  1. http狀態碼

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

  1. 除了Object.defineProperty,還有什麼能實現資料劫持

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

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

這個是一個開放題目，面試官期望前端後端都說說，前端的話主要還是從定時器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)
複製程式碼
  1. 說一個你拿手的專案
  2. 如何預防別人在你的網頁中插小廣告，這題我想應該是考的一道xss安全預防問題
  • xss主要兩種型別，儲存型和反射型，預防的話主要是編碼和過濾來處理
  • 簡單點的話可以直接快取https，可以遮蔽大部分運營商的廣告
  1. 如何設計一個模組化打包器

這個的話需要去看一下require或者seajs這塊的實現方式，大致上面是，寫的還比較簡單，要深入瞭解的話可以去看一些網上的文章：

  • 實現一個函式類似define可以將變數作用域限制在函式內部
  • 實現一個函式類似require可以獲取到define函式中類似module.export的匯出值
  • 載入過程中如果當前記憶體中沒有這個js，那麼動態建立script請求，否則使用記憶體中的js，防止重複載入
  1. 說一下http的一些狀態碼，說一下TCP的三次揮手和四次握手過程
  2. 還考了一道物件引用值的問題
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面了，大致跟你聊聊這個部門的業務和我對於這個部門感興趣的點，還有一些是我以前的工作經歷

相關文章