2020年中大廠前端面試總結

時間 2020-08-28

標籤 2020年大廠前端面試總結欄目快樂工作简体版

原文原文鏈接

前言

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

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

本文連接地址較多，建議查看原文，閱讀體驗會好一些。下面給出的答案有的是本身總結的，有的是從網上找到寫的很不錯的相關文章，可是這些都僅供參考，不必定是最佳的答案，若是有很好的答案，歡迎留言一塊兒討論互相學習，有的尚未放上合適的連接，以後會不算補充進去，畢竟每道題涉及到的內容真的挺多的。

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

筆試題

【超高頻】 寫一個深拷貝，考慮正則，Date這種類型的數據
【高頻】 Vue自定義指令懶加載

https://mp.weixin.qq.com/s/36oBZMd-m-2k5EKPghfG3A

判斷DOM標籤的合法性，標籤的閉合，span裏面不能有div，寫一個匹配DOM標籤的正則

https://mp.weixin.qq.com/s/MtHUsWtGQ8k8mxl9oR8_xA

替換日期格式，xxxx-yy-zz 替換成 xxx-zz-yy

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

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

【高頻】 實現Promise.all, Promise.allSettled
獲取一段DOM節點中標籤個數最多的標籤

https://mp.weixin.qq.com/s/MtHUsWtGQ8k8mxl9oR8_xA

寫一個簡單的diff

https://mp.weixin.qq.com/s/w2b9Wn7QWXhy2qf2JX3Kbw

【高頻】 手寫節流

https://mp.weixin.qq.com/s/fNrn94emmLMfuKN_Ukpi6A

手寫ES6的繼承
實現一個自定義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

【高頻】 實現一個vue的雙向綁定

其餘題目的答案以前作了整理，能夠在前端學習總結-手寫代碼系列中看到

筆試題中的算法題

二叉樹的最大深度

原題地址

另外一個樹的子樹

原題地址

相同的樹

原題地址

翻轉二叉樹

原題地址

【高頻】 斐波那契數列

【高頻】 合併兩個有序數組

原題地址

【高頻】 打亂數組

數組區間

webpack 和babel相關的問題

babel的緩存是怎麼實現的
webapck的HMR，怎麼配置：react
- 瀏覽器是如何更新的
- 如何作到頁面不刷新也就就自動更新的
- webpack-dev-server webapck-dev-middleware

相關文章： Webpack Hot Module Replacement 的原理解析

本身有沒有寫過ast, webpack經過什麼把公共的部分抽出來的，屬性配置是什麼
webpack怎麼配置mock轉發代理，mock的服務，怎麼攔截轉換的
webapck的plugin和loader的編寫， webapck plugin和loader的順序
webpack的打包構建優化，體積和速度
DLLPlugin原理，爲何不直接使用壓縮版本的js

HTTP

【超高頻】 緩存（強緩存），如何設置緩存

【高頻】 HTTP2， HTTP2的性能優化方面，真的優化不少麼?
【高頻】 簡單請求和複雜請求

【高頻】 HTTPS的整個詳細過程

301和302的區別

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Status

怎麼用get實現post，就是使用get方法可是參數放到request body中
TCP和UDP的區別

更多能夠查看【面試題】HTTP知識點整理(附答案)

CSS

【超高頻】 flex相關的問題webpack
- 說一下flex
- flex: 1具體表明什麼, 有什麼應用場景
- flex-basic 是什麼含義

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

css var 自定義變量的兼容性
行內元素和塊級元素的區別
position有哪些值，分別是什麼含義
盒模型
CSS的實現git
- 淘寶購物車添加商品到購物車的動畫（這回試試使用CSS實現拋物線運動效果）
- toolTip的實現 (https://www.jianshu.com/p/fdf...
【高頻】 實現固定寬高比(width: height = 4: 3)的div，怎麼設置
【高頻】 僞類和僞元素

更多能夠查看【面試題】CSS知識點整理(附答案)

JavaScript

單例的應用
【超高頻】 什麼是閉包，閉包的應用場景

如何判斷當前瀏覽器是否支持webp
proxy除了攔截它的getter和setter外，還能作什麼
同步阻塞，異步非阻塞
弱引用，WeakMap和Map的區別
【高頻】 安全相關 XSS的反射型是什麼，怎麼避免

【超高頻】 事件循環

JavaScript中的Event Loop（事件循環）機制

【超高頻】 promise相關的問題，說一下你對Promise的瞭解

【超高頻】 瀏覽器渲染（從輸入url到頁面渲染的完成過程）
【超高頻】 首屏加載優化，經過哪些指標去衡量性能優化的
canvas和svg分別是幹什麼的

SVG 與 HTML5 的 canvas 各有什麼優勢，哪一個更有前途？

牛客網如何監聽你調到了其餘頁面

document.hidden，監聽 docuemnt.vibibleChange事件es6

document.addEventListener("visibilitychange", function() {
  console.log( document.hidden );
});

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);

簡單說一下你對 websocket 瞭解多少？

WebSocket 是什麼原理？爲何能夠實現持久鏈接？

實現複雜數據(去重元素是對象，數組)的數組去重 (* 3)
基本數據類型有哪些，爲何symbol是一個函數， BigInt爲何能夠用來存儲大整數
什麼是依賴注入
JS類型轉換github
- String([]) 爲 ’‘， String({})結果是什麼什麼? 答案是：'[object object]'
- 其餘一些很經典的類型轉換考察，當時沒記那麼清楚，你們能夠去網上看一下
富文本編輯器相關的js知識

cli工具的一些實現邏輯

Vue

【高頻】 vue3.0的新特性，瞭解compose api和react hooks的區別
new Vue作了什麼
雙向綁定原理
vue組件通訊方法

React

【高頻】 React hooks 相關的問題

爲何引入，什麼原理
hooks如何監聽響應的，內部是如何作到只有數據修改的時候才執行函數
依賴的值發生變化，須要不停地監聽和綁定事件
render props 和HOC相比的優缺點
和mixin，hoc區別在哪兒

建立ref的幾種方法
context怎麼使用，內部原理怎麼作到的
【超高頻】 React新的生命週期，爲何 getDrivedStatefromProps是靜態的
react中TS的聲明
redux相關的問題

redux使用方法，爲何action要返回一個函數，返回一個對象能夠麼
state爲何要設計成不可變的

相關文章爲何redux要返回一個新的state引起的血案，阮一峯-Redux 入門教程（一）：基本用法

【高頻】 diff算法
【高頻】 key的做用
immer和imutable的區別
【高頻】 react性能優化, fiber架構

更多能夠查看【面試題】React知識點整理(附答案)

面試結果

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

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

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

心得

面試公司的選擇

本次面試有幾家公司（騰訊地圖，頭條，360教育，新東方等）所有都是獵頭和hr直接打電話過來讓面試的，當時就抱着試試的態度，就直接面試了，面試的過程當中感受可能都不太合適（因此面試的時候要問一下公司部門的具體工做內容），換工做的時候儘可能找相關部門的人內推，首先內推的部門你確定會提早有所瞭解，並且還能夠幫忙看看進度啥的，面試過了說不定還能成爲好朋友，哈哈（因此平時要多結交一些大佬，通常大佬的人脈都很普遍，並且他們很能夠給你內推，甚至能夠把他們本身的經驗分享給你）。

老是要想好本身如今出現什麼問題了，爲何打算離職，下一份工做想要什麼樣兒的，畢竟一份工做要幹很長時間。