參加2019年秋招，投遞Web前端開發工程師，在7月開始準備面試知識點，並投遞提前批簡歷（基本在8月初截止）。8月份開始筆試、電話視訊面試和現場面試，邊面試邊總結知識點，並深入不懂的問題，到9月初提前批全部結束，開始收割offer。收到了百度、網易、華為、拼多多、萬得、小紅書offer。

• 阿里提前批一面（7月22日）（18分鐘）（掛）

  • 為什麼做前端
  • 專案經歷（做了什麼專案，使用了什麼技術，介紹了一通）
  • 專案中你遇到最有挑戰性的問題是什麼（jQuery封裝了一個表格樹元件）
  • jQuery事件機制是怎麼實現的？（答得不好）。
  • js非同步載入的方式（當時沒明白是要問非同步載入js檔案的方式？還是js非同步處理的方法？現在想著應該是想問第一種，我選了第二種回答）
    • 答了三個事件機制、回撥函式、promise。（提示：async），想起來還有generator，async函式，其實還有觀察/訂閱
    • 繼續問：多個非同步任務如何確認都完成了（把es6的promise和jquery裡面的promise搞混淆了，API when()和all()搞錯）
  • proxy是用來幹什麼
  • 最擅長的課程是哪個？（沒準備好，不知說哪個）
  • 資料結構：單鏈表如何查詢中間節點（沒有想到使用兩個指標一快一慢）
  • 你有什麼問題想要問我？

• 百度

  • 內推一面（8月14號）（20分鐘）
    • 自我介紹（多次打斷我，問哪裡人，怎麼是做web前端）
    • 實習專案介紹（完成了哪些工作，使用了什麼技術）
    • RBAC是什麼（由專案中引來的，做了一個使用者許可權管理模組，Role-Based-Access-Controll）
    • 什麼是搜尋二叉樹？
    • 在二叉樹中如何找出兩個節點的第一個公共祖先？（說了算法思路就被停止了，說等hr聯絡後續的面試）
  • 學校專場提前批面試（8月21號）（一個小時）
    • 簡單介紹了專案，聊了聊用過或熟悉哪些前端知識
    • 為什麼做前端
    • angularjs 是怎麼載入html的(答錯方向了，答了ng-router載入html的方式，面試官其實想問bootstrap函式)
    • 問了對原型的理解（把原型物件、建構函式、例項物件三者之間的關係用圖描述了一下)
    • 寫了一個函式，輸入一個只包含大小寫字母的字串，將其中的大寫字母轉換成下劃線“_”加小寫字母；
    • 由於上面函式用了typeof判斷字串型別，然後問了typeof判斷型別的原理，與instanceof有什麼區別
    • es6有哪些新特性
    • 用promise封裝一個圖片動態載入的方法，並寫出如何呼叫該函式
    • 問了一個基礎問題，什麼是紅黑樹
    • 堆、棧、堆疊的區別
    • 聊了一下前端的現狀
    • 你有什麼問題想要問我？
  • 百度二面（8月24號）（電話面試，一個半小時）
    • 純CSS怎麼實現點選一個元素，背景顏色切換，不能使用js和點選事件（使用了angular裡面的ngclass，雙向繫結可以做到，不過隱形的使用了js；a標籤的偽類可以做到顏色的變色，可是沒法迴圈點選變色；最後實在想不出來了，小哥哥提示input，表示沒想到，最後直接告訴我checkbox的:check偽類會有一個選中和未被選中的狀態，可以實現）
    • 原生的checkbox不好看，怎麼自己定義（想到了使用偽類:before和:after，這個思路是對的。但是如果隱藏掉input元素，那麼就無法點選了，我表示不知道怎麼做。面試結束後去看了自定義checkbox，原來點選繫結input的lable元素可以觸發checkbox 的選中與未選中事件）
    • JS問題：如果一個頁面是一個新聞列表，上面有一層透明的遮罩層，使用者不感知這層遮罩，當用戶點選的時候如何能夠點選到下面的新聞列表（提示：元素點選穿透問題，表示學識淺薄、聞所未聞，小哥哥一直慢慢的引導我，最後還是沒有答出最恰當的方案來）
    • 其中回答JS問題的時候，有聊到js事件和Jq的trigger方法，問了我怎麼實現的
    • 瀏覽器快取介紹一下
    • 檔案加載出錯，如何捕獲異常（表示沒用過，小哥哥提示window.onerror捕獲異常），如何在第三方腳本里面捕獲錯誤資訊
    • 然後看了我專案中寫了檔案上傳工作，問JS有哪幾種方式上傳檔案，各有什麼優缺點（居然還有iframe的方式上傳檔案）
    • 演算法和資料結構：用棧來實現佇列操作
    • 實現大小括號的匹配
    • 找出陣列中兩個數之和等於一個數
    • 有什麼想問我的。
  • 百度三面-技術綜合面（9月初）（電話，一個小時）
    • 先自我介紹
    • 為什麼做前端
    • 在實習中學到了什麼
    • 專案中最讓你印象深刻的事情
    • 遇到過什麼挫折
    • 你覺得做的最有成就感的事情是什麼
    • 在校期間有沒有參加過什麼社團
    • 那門課程你覺得你學的最好（資料結構）
    • 講講你對資料結構的認識
    • js、html、css你最擅長哪一個（js），為什麼
    • 問個js的問題，講講你對原型的理解
    • 你有什麼問題要問我的

• 阿里內推一面（8月底電話）（掛）

  • 專案經歷有點少啊，介紹以下專案？
  • webpack、grunt、gulp有什麼區別（簡歷裡面寫了）
  • webpack裡面loader和plugin的作用
  • react的生命週期（坑的開始）
  • react路由原理（描述的不清楚）
  • react元件通訊的方式（context實現元件通訊更方便，知道原理嗎？表示沒用過，說react是自己剛學的）
  • angularjs雙向繫結的原理
  • 閉包是什麼
  • 面試就先這樣吧，你有什麼問題要問我的？

• 美團一面（8月16號，1個小時）（掛）

  • 自我介紹（官方的介紹免掉，從專案開始，為啥做前端）
  • 最近有參加過面試嗎，面的怎麼樣？都問了什麼問題？
  • 看你寫了這麼多技術棧，對react和angularjs熟悉度怎麼樣？
  • 看你有做過移動端開發，聊聊你對移動端、客戶端、web端開發的理解
  • 瀏覽器快取瞭解嗎，介紹一下（講了很久，自己有點迷茫，面試官一直在揪細節，細節到if-modified-since的每個屬性值是什麼意思）
  • 什麼原因去了解到瀏覽器快取的？（好奇http的狀態碼304，然後就追溯到了瀏覽器快取）
  • 你覺得快取有必要嗎？（往瀏覽器效能優化方面引了）
  • 聊聊怎麼優化瀏覽器效能？（講到快取是其中一種，結果面試官又揪著快取的問題不放，看來他很重視）
  • 快取實現還有哪些（說到了CDN快取，manifest快取檔案）；
  • CDN是怎麼實現快取的；
  • 為什麼CDN可以訪問到最近的伺服器資源；
  • 同源策略知道嗎，講一講（講了跨域訪問的幾種方式）
  • 問你一些基礎知識，你對css，html，js熟悉嗎，我們來選一個聊聊（我選了js）
  • 你為什麼選擇js（說了一大堆）
  • js原型講一講
  • 自己怎麼實現一個觀察/訂閱模式的
  • TS（typescript）熟悉嗎？（在angular中用過，瞭解一些基本特點，然後介紹了它與js的差別）
  • 裝飾器Decorator知道嗎（是指@註解嗎？在angular裡面用過，沒有詳細去了解怎麼實現的（其實es6裡面的Decorator是一樣的，看了忘了））
  • react熟悉嗎（瞭解基本知識），react生命週期裡面有個shouldComponentUpdate解釋一下
  • react-router原理是什麼？
  • vue裡面的事件機制講講（不好意思沒有學過vue），那講講angularjs裡面的事件機制
  • webpack用的什麼版本的（用的3.0，現在已經到webpack4.0了），那你對比過4.0和3.0的新增特性嗎（還沒有來得及看），node用的什麼版本的（8.9.1）
  • 你覺得你自己的性格怎麼樣
  • 對於移動端的開發瞭解的怎麼樣（目前只做過安卓客戶端開發）
  • 你有什麼問題要問我的（問了業務，技術棧，對以後的個人發展方向有什麼建議）

• 攜程內推一面:（8月21日現場，半小時）（掛）

  • 自我介紹（簡單講了專案，做了什麼）
  • 介紹一下原型（把原型物件、建構函式、例項物件三者之間的關係用圖描述了一下)
  • SEO優化了解
  • 接下來就開始傻逼模式了：react會嗎，自學的
  • 有移動端開發經驗嗎，只做過安卓原生應用
  • 做過小程式嗎，沒有做過
  • 混合式開發hybrid會嗎，不會
  • react-native會嗎，不會
  • 有native方面的開發經驗嗎，沒有
  • redux會嗎，不會
  • backbonejs會嗎，不會
  • requirejs會嗎，只用過他的模組載入，那懶載入和執行時載入懂嗎，不懂
  • sass和less會嗎，用過sass，他們有什麼區別，簡單描述了一下
  • flex佈局會嗎，會。flex怎麼實現元素的水平垂直居中
  • 如果改變flex-direction為row，主軸和副軸怎麼變化，水平垂直居中的屬性還一樣嗎
  • 你有什麼問題想問我的嗎

• 華為專場招聘會面試（8月22日現場）

  • 一面：（大概半小時）
    • 介紹了專案的架構，然後聊了一會就完了
  • 二面（部門主管）（大概半小時）
    • 從非技術角度介紹一下自己
    • 談談你的職業生涯規劃
    • 聊聊你對華為的認識

• 網易杭州專場招聘會面試（8月25日）

  • 一面（30分鐘）
    • 簡單介紹專案以及自己做了什麼工作（感覺面試官沒有在意，聽了就過了）
    • H5有哪些新特性（答得不全，很多不記得了）
    • 由於講到了H5新增的Web storage，問我這是什麼（localstorage和sessionstorage）——>它們有什麼區別
    • css有哪些偽類和偽元素
    • angularjs的路由機制是什麼（簡歷上的專案是angularjs做的）
    • 又問了我History瞭解嗎
    • jquery(簡歷裡面提到熟悉jquery)的deffered物件是什麼？
    • 跟es6裡面的promise有什麼差別（Jquery分為deffered和promise，jq可以外部改變pedding的狀態，後來面試官提醒我異常處理，等我反應過來catch的處理之後，他開始問我下一道問題了）
    • BOM和DOM是什麼，BOM有哪些API（只答出了window和location，其他忘記了）
    • 問到了js事件機制（捕獲，處理，冒泡），——>有哪些事件型別，哪些事件不能冒泡
    • 然後面試官說結束了，讓我外面等訊息（感覺答得不好，以為涼了，結果出門級收到了二面的通知）
  • 二面（1個小時）
    • 簡單介紹專案以及自己做的工作（很多時間在問框架的相關東西）
    • 比如：如果讓你設計一個專案，你會考慮什麼哪些問題(我從需求（專案型別）、使用場景(PC端還是移動端還是混合式應用)、公司原有的專案架構、使用者流量、開發效率（前後端分離？採用哪些元件）、使用者體驗友好性（佈局、色彩等等）這幾個方面講了我知道的東西)；
    • 然後問了如果前後端分離，你覺得采用哪個框架合適（感覺這是在套路我，我說前後端分離跟框架沒有關係，這是開發的一種模式，都是為了提高開發效率；分離和不分離的區別是傳送的網路請求不再同一個域裡面，每個框架封裝的都是原生的XML物件，所以本質上是沒有差別的）
    • 問題就來了：如何實現跨域訪問（詳解了三種方式）
    • content-type有哪些值
    • （由於講到了佈局）問我三欄式佈局有哪幾種方式
    • css中高度重疊問題
    • 問我用webpack做了什麼，為什麼還要用gulp（講了webpack，gulp，grunt的基本用法，以及它們的差別，至於為什麼要把webpack和gulp結合起來用，我說沒有太弄清楚）
    • 問我用過node沒有（只用了node的npm）
    • 然後還是在聊自己的專案經歷（表示專案很亂，自己去做了哪些改變和工作，自己會主動去做什麼東西，以及開發的過程，學習的方法）
    • 有沒有自己分裝過元件（jQuery做過表格樹，用來幹什麼，遇到了哪些問題，元件的實用性有哪些優勢和缺點都描述了一遍）
    • 問我用過es6嗎（我說實際專案間接用過，因為TypeScript就是es6的超集，然後自己做專案、寫演算法都會使用es6的語法練習）
    • 最後寫了一個函式arrayToObject（要求：一個具有通用性的函式，能在任何場景中使用），輸入資料：[{a:1, b:'eat', c: 'foo '}, {a:2, b:'sport', c: 'ball'}, {a:3, b:'job', c: 'teacher'}], 輸出資料：{1：{a:1, b:'eat', c: 'foo '}，2：{a:2, b:'sport', c: 'ball'}，3：{a:3, b:'job', c: 'teacher'}}，要求：具有過濾功能，根據過濾條件把陣列中符合條件的元素不轉換成物件，可以採用陣列中任意元素物件的屬性值作為輸出物件的鍵
    • 你有什麼問題要問我嗎
  • 三面（HR面，40分鐘）
    • 自我介紹（為什麼考研，為什麼做前端，去了哪個公司實習）
    • 在公司裡面做了什麼專案，學到了什麼，遇到了什麼困難，怎麼解決的
    • 為什麼沒有留在實習的公司
    • 未來的規劃，期望的薪資待遇
    • 你有什麼問題想要問我的

• 小紅書

  • 一面（9月1日視訊面試，1小時）
    • 自我介紹
    • h5有哪些新特性（提到localstorage和sessionstorage）
    • localstorage和sessionstorage有什麼區別（追問：可以儲存物件嗎，答不可以，如何實現物件的儲存）
    • cookie和session與上面的兩個有什麼區別（追問：cookie可以設定多少個，總大小多大）
    • 快取機制（追問：如何實現介面快取，追問：CDN快取）
    • 瀏覽器載入頁面流程
    • 瀏覽器如何渲染內容和樣式的
    • js非同步事件機制（event loop答得不太好）
    • DOM事件機制
    • 牛客網寫程式碼實現Object.assign(target, ...args)方法，提示：polyfill（我犯了兩個錯誤，第一直接定義在了原型物件上面，第二考慮問題不全面，target為undefined和null的時候，args不是物件的時候沒有進行判斷）
  • 二面（9月12日現場，半個小時）
    • 自我介紹+專案經驗
    • angular、react、vue的區別
    • webpack、gulp、grunt的區別
    • 詳細介紹webpack、模組的功能、如何實現專案熱更新，版本4的新特性
    • 現場寫程式碼和程式設計題（for迴圈的閉包問題，promise與setTimeout程式題，回撥函式的使用，方法的分裝，es6的陣列和字串基本api使用）
    • 有什麼問題問我
  • 三面（9月12日現場總監面，半小時）
    • 自我介紹+專案經驗
    • 移動端開發與web端開發的區別
    • 搭建一個專案需要考慮那些問題
    • 如何實現一個通用的日期元件，擴充套件為時間段選擇元件（我使用angularjs來分裝元件）
    • 有什麼問題
  • 四面（9月12日現場HR面，半小時）

• 喜馬拉雅一面（9月30日電話，1小時）（掛）

  • 自我介紹（專案經驗，實習情況）
  • 詳述登入流程
  • 使用者登入系統後，如何實現瀏覽器回退之後不會再進入登入頁，服務端需要做哪些操作
  • 如何實現第三方賬號登入，比如github賬號登入網站
  • 瀏覽器快取（追問細節：如果expires或者max-age沒有過期，但是伺服器更新資源了，客戶端如何獲取新的資源）
  • localstorage和sessionstorage，cookie的區別（追問，localstorage如何實現物件的儲存；cookie在不同域能夠訪問，-答不能，那如何實現跨域訪問cookie；繼續追問：cookie在父子域能否獲取到；追問，storage在域名相同、訪問埠不同時能否共享）
  • js原型和繼承
  • css中position有哪些值（追問，absolute相對誰定位）
  • 浮動流float
  • get請求和post請求有什麼差別
  • 輸入一個url到頁面載入的整個流程
  • react裡面的高階元件時什麼
  • react的受控元件和非受控元件的區別
  • csrf攻擊是什麼，怎麼防禦csrf攻擊
  • sass的繼承方式

• 拼多多

  • 一面（9月2日電話面試，40分鐘）
    • 自我介紹
    • promise和rxjs裡面的observe有什麼區別
    • h5新特新有哪些（往自己熟悉的方向引）
    • localstorage和sessionstorage的區別（追問：如何儲存物件）
    • 瀏覽器快取機制
    • es6用過哪些
    • 設計模式瞭解哪些（自己使用過哪些）
    • angular如何實現兩個component元件如何保證class相同的樣式不覆蓋
    • angular如何實現依賴注入
    • 進入閒聊模式
  • 二面（9月7日電話面試，30分鐘）
    • 還是些常規問題。。。。