引言
金三銀四招聘季,筆者也是去面試了一些公司,下面是記錄最近面試阿里的一個部門,和大家分享一下。筆者17年畢業,目前工作經驗算上實習的話差不多有2年半左右,面了一個3-5年經驗的崗位,總體來說確實大廠基本上很多都是問的基礎題,所以大家如果想要找工作的話可以好好準備下基礎知識。
一面
- 前端監控做了哪些東西
- 怎麼樣說服老闆說這個專案會比開源的更好,做這個的目的,由於我做了個前端監控,所以問了這個問題
- 前端錄製視訊如何錄製,還是前端監控的問題
- 前端異常監控視訊是在錯誤發生時記錄還是實時記錄
- 做過的工程化實踐,如何理解前端工程化
前端工程化除了提升我們的開發體驗外,還要提升使用者體驗和產品效能,用“軟體工程”的角度去回答問題
- CSS盒模型
IE盒模型和標準盒模型
- call和apply
- 瀏覽器快取
強快取和協商快取
強快取:
- expries:返回伺服器過期日期,這是一個絕對的日期
- Cache-Control:max-age=3600相對時間,3600秒後過期
兩個都返回以後者為準,expries由於是拿本地時間和返回的伺服器時間做比較,所以會存在誤差
協商快取:
- Last-Modified If-Modified-Since 上一次伺服器返回的時間和電腦當前的時間做對比
- Etag可以理解為一個key,value的hash值,因為有時候時間變了,但是資源本身沒有發生變化,所以可以通過Etag來定位資源本身到底有沒有發生變化
- DOM3級模型
- DOM0 原生的onclick事件和js的onclick事件
- DOM2 增加了addEventListener,然後將事件模型修改為捕獲階段,目標階段,冒泡階段
- DOM3 在原來DOM2的事件基礎上面增加了blur,focus和一些鍵盤事件
- rem和em的區別
- vue和react的區別
- 本地儲存的方式,如何清除localstorage
cookie和LocalStorage和SessionStorage
- 陣列求最大值的幾種方式
//方式一(利用延展函式)
Math.max(null,...[1,2,4,32]);
//方式二(排序取第一個)
[1,2,3,5].sort(function(a,b){
return b - a;
})[0];
複製程式碼
二面
- react生命週期
- redux和vuex區別
- react的props和state區別
這個主要還是props在元件內部不可變,只能通過父傳子改變,state只能通過setState改變
- event loop理解
這個的話要知道巨集任務佇列和微任務佇列,巨集任務佇列在每次的事件迴圈中只執行一個,微任務佇列在一次事件迴圈中會全部執行完畢,還有幾個巨集任務和微任務如下: 巨集任務macro-task(task)包括:
- setTimeout/setInterval
- setImmediate
- I/O操作
- UI rendering
微任務micro-task(job)包括:
- process.nextTick
- Promise
- Object.observe(已廢棄)
- MutationObserver(H5新特性)
-
對react的理解,和vue對比
-
設計一個spa要考慮哪些因素
這個也是一個開放題目,大致從以下幾點回答
- 路由-懶載入
- 元件
- 頁面效能和生命週期
- 使用者體驗-設計一個骨架屏
- webpack的loader和plugin區別是什麼,有對webpack做過打包上面的優化麼
- loader是模組和資源的轉換器,像css-loader,urlloader這些,主要還是注重資源轉換
- plugin主要是貫穿webpack各個生命週期的鉤子,用來擴充套件webpack的功能,像htmlwebpackplugin或者熱替換模組外掛這些
- 專案效能優化的地方
這個我提了一個以前專案裡面做的對幾千行表格滾動載入的優化,後面還問了關於整體專案優化的一些東西,主要還是從CDN,資源合併壓縮,升級成http2,非核心程式碼非同步載入,利用瀏覽器快取這些來回答
- http狀態碼
這個當時問了4xx以上的幾個狀態碼,比較簡單
- 除了Object.defineProperty,還有什麼能實現資料劫持
可以通過Proxy
,vue3.0也是計劃用這個來代替的,當時腦子一抽都忘記了,後來提醒了一下也想起來了
- 如何設計一個秒殺系統
這個是一個開放題目,面試官期望前端後端都說說,前端的話主要還是從定時器setInterval不準,需要不停的想伺服器校準時間,還有一個是避免重複發請求,後端的話講了一些redis快取和非同步佇列,nginx負載均衡這些扯了一堆,網上也有一些答案,大家可以自行谷歌。
三面+HR面
- 手寫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)
複製程式碼
- 說一個你拿手的專案
- 如何預防別人在你的網頁中插小廣告,這題我想應該是考的一道xss安全預防問題
- xss主要兩種型別,儲存型和反射型,預防的話主要是編碼和過濾來處理
- 簡單點的話可以直接快取https,可以遮蔽大部分運營商的廣告
- 如何設計一個模組化打包器
這個的話需要去看一下require或者seajs這塊的實現方式,大致上面是,寫的還比較簡單,要深入瞭解的話可以去看一些網上的文章:
- 實現一個函式類似define可以將變數作用域限制在函式內部
- 實現一個函式類似require可以獲取到define函式中類似module.export的匯出值
- 載入過程中如果當前記憶體中沒有這個js,那麼動態建立script請求,否則使用記憶體中的js,防止重複載入
- 說一下http的一些狀態碼,說一下TCP的三次揮手和四次握手過程
- 還考了一道物件引用值的問題
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面了,大致跟你聊聊這個部門的業務和我對於這個部門感興趣的點,還有一些是我以前的工作經歷