2020年中大廠前端面試總結

木子星兮發表於2020-08-27
前端面試

前言

本次面試面試了很多家公司，包括 360，美團，猿輔導，小米，騰訊地圖，頭條，新東方，快手，知乎等幾家公司，剛開始去面試的時候那段時間狀態不是很好（基本每天都加班到很晚，週六日也沒有休息的那種，而且當時心態真的是差到爆，很多平時自己很會的東西，被問到居然答不上來），基本一面就掛的那種（360，美團，猿輔導），越面越失望，後來就直接不面試了，調整自己的狀態，請假休息，好好睡了兩天兩夜之後，調整自己的心態，開始準備面試，接下來的面試就順利的很多。

本篇面試題總結並沒有按照公司那樣分類而是按照知識點進行簡單分類，很多面試題問的頻率非常高，所以面試的時候如果第一次問完，沒回答上來或者回答的不太好，一定要在面完的第一時間記錄下來並且查詢資料，否則就忘記了，或者之後再看就沒有了當時迫切想知道具體答案的那種心情了（有迫切的想知道某些知識的心情的時候目標很明確，學東西也會印象深刻記得牢）。

本文連結地址較多，建議檢視原文，閱讀體驗會好一些。下面給出的答案有的是自己總結的，有的是從網上找到寫的很不錯的相關文章，但是這些都僅供參考，不一定是最佳的答案，如果有很好的答案，歡迎留言一起討論互相學習，有的還沒有放上合適的連結，之後會不算補充進去，畢竟每道題涉及到的內容真的挺多的。

下面題目中標記有 【高頻】 的至少被問過兩次，標記有 【超高頻】 的基本面試的每家公司都問到了。

筆試題

  1. 【超高頻】 寫一個深拷貝，考慮 正則，Date這種型別的資料
  2. 【高頻】 Vue自定義指令懶載入
  1. 判斷DOM標籤的合法性，標籤的閉合，span裡面不能有div，寫一個匹配DOM標籤的正則
  1. 替換日期格式，xxxx-yy-zz 替換成 xxx-zz-yy

可以使用 正則的捕獲組來實現

var reg = /(\d{2})\.(\d{2})\/(\d{4})/
var data = '10.24/2017'
data = data.replace(reg, '$3-$1-$2')
console.log(data)//2017-10-24
  1. 【高頻】 實現Promise.all, Promise.allSettled
  2. 獲取一段DOM節點中標籤個數最多的標籤
  1. 寫一個簡單的diff
  1. 【高頻】 手寫節流
  1. 手寫ES6的繼承
  2. 實現一個自定義hook - usePrevious
import { useRef } from 'react';

export type compareFunction<T> = (prev: T | undefined, next: T) => boolean;

export default <T>(state: T, compare?: compareFunction<T>): T | undefined => {
  const prevRef = useRef<T>();
  const curRef = useRef<T>();

  const needUpdate = typeof compare === 'function' ? compare(curRef.current, state) : true;
  if (needUpdate) {
    prevRef.current = curRef.current;
    curRef.current = state;
  }

  return prevRef.current;
};
更多自定義hook的寫法可以參考 hooks
  1. 【高頻】 實現一個vue的雙向繫結
其他題目的答案之前做了整理，可以在 前端學習總結-手寫程式碼系列中看到

筆試題中的演算法題

  1. 二叉樹的最大深度
  1. 另一個樹的子樹
  1. 相同的樹
  1. 翻轉二叉樹
  1. 【高頻】 斐波那契數列
  1. 【高頻】 合併兩個有序陣列
  1. 【高頻】 打亂陣列
  1. 陣列區間

webpack 和babel相關的問題

  1. babel的快取是怎麼實現的

  2. webapck的HMR，怎麼配置：

    • 瀏覽器是如何更新的
    • 如何做到頁面不重新整理也就就自動更新的
    • webpack-dev-server webapck-dev-middleware
相關文章：Webpack Hot Module Replacement 的原理解析
  1. 自己有沒有寫過ast, webpack通過什麼把公共的部分抽出來的，屬性配置是什麼
  2. webpack怎麼配置mock轉發代理，mock的服務，怎麼攔截轉換的
  3. webapck的plugin和loader的編寫， webapck plugin和loader的順序
  4. webpack的打包構建優化，體積和速度
  5. DLLPlugin原理，為什麼不直接使用壓縮版本的js

HTTP

  1. 【超高頻】 快取（強快取），如何設定快取
  1. 【高頻】 HTTP2， HTTP2的效能優化方面，真的優化很多麼?
  2. 【高頻】 簡單請求和複雜請求
  1. 【高頻】 HTTPS的整個詳細過程
  1. 301和302的區別
  1. 怎麼用get實現post，就是使用get方法但是引數放到request body中
  2. TCP和UDP的區別
更多可以檢視 【面試題】HTTP知識點整理(附答案)

CSS

  1. 【超高頻】 flex相關的問題

    • 說一下flex
    • flex: 1具體代表什麼, 有什麼應用場景
    • flex-basic 是什麼含義

相關文章：Flex 佈局教程：語法篇

  1. css var 自定義變數的相容性
  2. 行內元素和塊級元素的區別
  3. position有哪些值，分別是什麼含義
  4. 盒模型

  5. CSS的實現

  6. 【高頻】 實現固定寬高比(width: height = 4: 3)的div，怎麼設定
  7. 【高頻】 偽類和偽元素
更多可以檢視【面試題】CSS知識點整理(附答案)

JavaScript

  1. 單例的應用
  2. 【超高頻】 什麼是閉包，閉包的應用場景
  1. 如何判斷 當前瀏覽器是否支援webp
  2. proxy除了攔截它的getter和setter外，還能做什麼
  3. 同步阻塞，非同步非阻塞
  4. 弱引用，WeakMap和Map的區別
  5. 【高頻】 安全相關 XSS的反射型是什麼，怎麼避免
  1. 【超高頻】 事件迴圈
  1. 【超高頻】 promise相關的問題， 說一下你對Promise的瞭解
  1. 【超高頻】 瀏覽器渲染（從輸入url到頁面渲染的完成過程）
  2. 【超高頻】 首屏載入優化， 通過哪些指標去衡量效能優化的
  3. canvas和svg分別是幹什麼的
  1. 牛客網如何監聽你調到了其他頁面

document.hidden，監聽 docuemnt.vibibleChange事件

document.addEventListener("visibilitychange", function() {
  console.log( document.hidden );
});
  1. JS原生3種繫結事件
// 1. 在標籤中直接繫結
<button onclick="handleClick()" >自定義函式</button>

// 2. 在js事件中獲取dom事件繫結

<button id="btn" onclick="handleClick()" >dom事件繫結</button>
document.getElementById('btn').onclick=handleClick();

// 3. 事件監聽addEventListener
elementDOM.addEventListener(eventName,handle,useCapture);
  1. 簡單說一下你對 websocket 瞭解多少？
  1. 實現複雜資料(去重元素是物件，陣列)的陣列去重 (* 3)
  2. 基本資料型別有哪些， 為什麼symbol是一個函式， BigInt為什麼可以用來儲存大整數
  3. 什麼是依賴注入

  4. JS型別轉換

    • String([]) 為 ’‘， String({})結果是什麼什麼? 答案是：'[object object]'
    • 其他一些很經典的型別轉換考察，當時沒記那麼清楚，大家可以去網上看一下
  5. 富文字編輯器相關的js知識
  1. cli工具的一些實現邏輯

Vue

  1. 【高頻】 vue3.0的新特性，瞭解compose api和react hooks的區別
  2. new Vue做了什麼
  3. 雙向繫結原理
  4. vue元件通訊方法

React

  1. 【高頻】 React hooks 相關的問題
  • 為什麼引入，什麼原理
  • hooks如何監聽響應的，內部是如何做到只有資料修改的時候才執行函式
  • 依賴的值發生變化，需要不停地監聽和繫結事件
  • render props 和HOC相比的優缺點
  • 和mixin，hoc區別在哪兒
  1. 建立ref的幾種方法
  2. context怎麼使用，內部原理怎麼做到的
  3. 【超高頻】 React新的生命週期，為什麼 getDrivedStatefromProps是靜態的
  4. react中TS的宣告
  5. redux相關的問題
  • redux使用方法，為什麼action要返回一個函式，返回一個物件可以麼
  • state為什麼要設計成不可變的
相關文章 為什麼redux要返回一個新的state引發的血案，阮一峰-Redux 入門教程（一）：基本用法
  1. 【高頻】 diff演算法
  2. 【高頻】 key的作用
  3. immer和imutable的區別
  4. 【高頻】 react效能優化, fiber架構
更多可以檢視 【面試題】React知識點整理(附答案)

面試結果

大概說一下本人的大概情況，本科三年左右工作經驗，非計算機專業，大三下學習決定轉行學習前端，過程反正挺艱辛的，一直到現在還在惡補計算機的一些知識。畢業半年左右，一個偶然的機會，進入阿里文娛（哈哈，當時面試的時候也寫過面經，感興趣的可以看一下 當時寫的面經 2017面末面試總結），現在因為個人原因，決定考慮新的機會。

面試差不多最開始是中3月中旬開始準備的，中間停了差不多小一個月又開始重新面試的，到最後拿到offer差不多5月底左右，歷時近3個月吧，最近抽時間把這些題目總結了一下，算是給自己一個交代吧，上面很多題目自己回答的其實很多都不是很全面，標有 【高頻】 及 【超高頻】 剛開始回答的不好，後來認真學習總結了一下，之後再被問到，基本都回答得差不多

一般提到面試，肯定都會想問一下面試結果，我就大概的說一下面試結果，哈哈，其實不太想說，因為挺慘的，並沒有像很多大佬一樣“已拿位元組阿里騰訊各大廠offer”，但是畢竟是自己的經歷，無論結果如何都要坦然接受，之前沒好好學習，那之後多學習就是。360，美團，猿輔導最開始的一面掛，小米二面的時候面試官告知說要求招5年以上工作經驗的，所以就直接告知不符合（哈哈，可能就是跟小米沒有緣分吧，剛畢業的時候面試，終面被拒說要3年以上工作經驗的，現在夠3年工作經驗了，卻又要求5年工作年限），騰訊地圖和頭條都是hr直接找過來的，自己並沒有投遞，就順便面了一下，二面面完之後，以為掛了，後來過了一週多（可能是作為備胎把），又打電話過來約面試，其實之前面試大概瞭解了一下部門相關的情況，感覺不是自己想去的，並不是說部門不好，可能做的事情跟現在的情況太像了，所以想做出一些改變。當時家裡面又有好多事情處理，也沒有太多的時間，就直接拒絕了，這件事兒也給自己以後提個醒，投簡歷之前要先想明白自己想要什麼樣的，可以列一些目標，而不是因為急於找工作，獵頭和hr直接打電話過來就直接面試。

心得

面試公司的選擇

本次面試有幾家公司（騰訊地圖，頭條，360教育，新東方等）全部都是獵頭和hr直接打電話過來讓面試的，當時就抱著試試的態度，就直接面試了，面試的過程中感覺可能都不太合適（所以面試的時候要問一下公司部門的具體工作內容），換工作的時候儘量找相關部門的人內推，首先內推的部門你肯定會提前有所瞭解，而且還可以幫忙看看進度啥的，面試過了說不定還能成為好朋友，哈哈（所以平時要多結交一些大佬，一般大佬的人脈都很廣泛，而且他們很可以給你內推，甚至可以把他們自己的經驗分享給你）。

總是要想好自己現在出現什麼問題了，為什麼打算離職，下一份工作想要什麼樣兒的，畢竟一份工作要幹很長時間。

面試準備

推薦一些很好的文章：

好文章真的太多了，哈哈，這裡就不全部放出來了，關於面試，我也準備做了一些總結，可以檢視 個人部落格

演算法

基本每家公司多多少少都會問很多演算法題，演算法題對於我這種基本沒什麼基礎的人來說，碰到了就很恐懼，但是沒有其他的辦法，就是兩個字 “多練”，這裡推薦我看過的幾篇文章：

其他的一些想法，之前也寫了一篇文章 關於面試的一點心得，感興趣的也可以看一下。也非常歡迎大家關注我的公眾號 【牧碼的星星】以及加我微信進行交流，公眾號也會偶爾分享一些學習的一些心得。

相關文章