2020年中大廠前端面試總結(jié)

前言

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

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

本文鏈接地址較多，建議查看原文，閱讀體驗(yàn)會(huì)好一些。下面給出的答案有的是自己總結(jié)的，有的是從網(wǎng)上找到寫的很不錯(cuò)的相關(guān)文章，但是這些都僅供參考，不一定是最佳的答案，如果有很好的答案，歡迎留言一起討論互相學(xué)習(xí)，有的還沒有放上合適的鏈接，之后會(huì)不算補(bǔ)充進(jìn)去，畢竟每道題涉及到的內(nèi)容真的挺多的。

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

筆試題

1. 【超高頻】 寫一個(gè)深拷貝，考慮 正則，Date這種類型的數(shù)據(jù)
2. 【高頻】 Vue自定義指令懶加載

• 實(shí)現(xiàn)一個(gè)Vue自定義指令懶加載
  

3. 判斷DOM標(biāo)簽的合法性，標(biāo)簽的閉合，span里面不能有div，寫一個(gè)匹配DOM標(biāo)簽的正則

• 面試題：HTML標(biāo)簽的相關(guān)操作判斷題目
  

4. 替換日期格式，xxxx-yy-zz 替換成 xxx-zz-yy 可以使用 正則的捕獲組來實(shí)現(xiàn)

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

5. 【高頻】 實(shí)現(xiàn)Promise.all, Promise.allSettled (簡單實(shí)現(xiàn)一個(gè)Promise)

6. 獲取一段DOM節(jié)點(diǎn)中標(biāo)簽個(gè)數(shù)最多的標(biāo)簽

• 面試題：HTML標(biāo)簽的相關(guān)操作判斷題目
  

7. 寫一個(gè)簡單的diff

• 簡單實(shí)現(xiàn)一個(gè)Virtual DOM
  

8. 【高頻】 手寫節(jié)流

• 函數(shù)防抖和節(jié)流
  

9. 手寫ES6的繼承

10. 實(shí)現(xiàn)一個(gè)自定義hook - usePrevious

可以參考 usePrevious 這個(gè)的實(shí)現(xiàn)

import?{?useRef?}?from?'react';

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

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

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

??return?prevRef.current;
};

更多自定義hook的寫法可以參考 hooks

11. 【高頻】 實(shí)現(xiàn)一個(gè)vue的雙向綁定

• 簡單通俗的理解Vue3.0中的Proxy

其他題目的答案之前做了整理，可以在 前端學(xué)習(xí)總結(jié)-手寫代碼系列中看到

筆試題中的算法題

1. 二叉樹的最大深度

• 原題地址

2. 另一個(gè)樹的子樹

• 原題地址

3. 相同的樹

• 相同的樹、對(duì)稱二叉樹、翻轉(zhuǎn)二叉樹
  

4. 翻轉(zhuǎn)二叉樹

• 相同的樹、對(duì)稱二叉樹、翻轉(zhuǎn)二叉樹
  

5. 【高頻】 斐波那契數(shù)列

• 斐波那契數(shù)列
  

6. 【高頻】 合并兩個(gè)有序數(shù)組

• 原題地址

7. 【高頻】 打亂數(shù)組

• 打亂數(shù)組

webpack 和babel相關(guān)的問題

1. babel的緩存是怎么實(shí)現(xiàn)的
2. webapck的HMR，怎么配置：

• 瀏覽器是如何更新的
• 如何做到頁面不刷新也就就自動(dòng)更新的
• webpack-dev-server webapck-dev-middleware

相關(guān)文章：Webpack Hot Module Replacement 的原理解析

3. 自己有沒有寫過ast, webpack通過什么把公共的部分抽出來的，屬性配置是什么

4. webpack怎么配置mock轉(zhuǎn)發(fā)代理，mock的服務(wù)，怎么攔截轉(zhuǎn)換的

5. webapck的plugin和loader的編寫， webapck plugin和loader的順序

6. webpack的打包構(gòu)建優(yōu)化，體積和速度

7. DLLPlugin原理，為什么不直接使用壓縮版本的js

HTTP

1. 【超高頻】 緩存（強(qiáng)緩存），如何設(shè)置緩存

• 圖解 HTTP 緩存
• 深入淺出瀏覽器緩存機(jī)制

2. 【高頻】 HTTP2， HTTP2的性能優(yōu)化方面，真的優(yōu)化很多么?

3. 【高頻】 簡單請(qǐng)求和復(fù)雜請(qǐng)求

• 阮一峰-跨域資源共享 CORS 詳解
• CORS原理及@koa/cors源碼解析

4. 【高頻】 HTTPS的整個(gè)詳細(xì)過程

• HTTPS是如何保證安全的
• 深入理解HTTPS工作原理

5. 301和302的區(qū)別

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

6. 怎么用get實(shí)現(xiàn)post，就是使用get方法但是參數(shù)放到request body中

7. TCP和UDP的區(qū)別

• TCP和UDP比較
• TCP和UDP的區(qū)別

更多可以查看 【面試題】HTTP知識(shí)點(diǎn)整理(附答案)

CSS

1. 【超高頻】 flex相關(guān)的問題

• 說一下flex
• flex: 1具體代表什么, 有什么應(yīng)用場(chǎng)景
• flex-basic 是什么含義 相關(guān)文章：Flex 布局教程：語法篇

2. css var 自定義變量的兼容性

3. 行內(nèi)元素和塊級(jí)元素的區(qū)別

4. position有哪些值，分別是什么含義

5. 盒模型

6. CSS的實(shí)現(xiàn)

• 淘寶購物車添加商品到購物車的動(dòng)畫（這回試試使用CSS實(shí)現(xiàn)拋物線運(yùn)動(dòng)效果）
• toolTip的實(shí)現(xiàn) (https://www.jianshu.com/p/fdfa8058a015)

7. 【高頻】 實(shí)現(xiàn)固定寬高比(width: height = 4: 3)的div，怎么設(shè)置

8. 【高頻】 偽類和偽元素

更多可以查看【面試題】CSS知識(shí)點(diǎn)整理(附答案)

JavaScript

1. 單例的應(yīng)用

2. 【超高頻】 什么是閉包，閉包的應(yīng)用場(chǎng)景

• 深入理解JavaScript閉包之什么是閉包
• 深入理解JavaScript閉包之閉包的使用場(chǎng)景
  

3. 如何判斷 當(dāng)前瀏覽器是否支持webp

4. Vue3.0和Vue2.0 實(shí)現(xiàn)雙向綁定的區(qū)別是什么，提到到proxy, 然后又接著讓寫出分別使用Object.defineProperty()和proxy寫一個(gè)簡單的雙向綁定，最后問了一下 proxy除了攔截它的getter和setter外，還能做什么

5. 說說你對(duì)同步阻塞，異步非阻塞的理解

• 怎樣理解阻塞非阻塞與同步異步的區(qū)別？

6. 弱引用，WeakMap和Map的區(qū)別

• ECMAScript 6 入門之Set 和 Map 數(shù)據(jù)結(jié)構(gòu)

7. 【高頻】 安全相關(guān) XSS的反射型是什么，怎么避免

• web安全之XSS實(shí)例解析
• Web安全之CSRF實(shí)例解析
  

8. 【超高頻】 事件循環(huán)

• JavaScript中的Event Loop（事件循環(huán)）機(jī)制

9. 【超高頻】 promise相關(guān)的問題， 說一下你對(duì)Promise的了解

• ECMAScript 6 入門之Promise對(duì)象
• 簡單實(shí)現(xiàn)一個(gè)Promise
  

10. 【超高頻】 瀏覽器渲染（從輸入url到頁面渲染的完成過程）

11. 【超高頻】 首屏加載優(yōu)化， 通過哪些指標(biāo)去衡量性能優(yōu)化的

12. canvas和svg分別是干什么的

• SVG 與 HTML5 的 canvas 各有什么優(yōu)點(diǎn)，哪個(gè)更有前途？

13. 牛客網(wǎng)如何監(jiān)聽你調(diào)到了其他頁面document.hidden，監(jiān)聽 docuemnt.vibibleChange事件

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

14. JS原生3種綁定事件

//?1.?在標(biāo)簽中直接綁定
"handleClick()"?>自定義函數(shù)</button>

//?2.?在js事件中獲取dom事件綁定

dom事件綁定button>
document.getElementById('btn').onclick=handleClick();

//?3.?事件監(jiān)聽addEventListener
elementDOM.addEventListener(eventName,handle,useCapture);

15. 簡單說一下你對(duì) websocket 了解多少？

• WebSocket 是什么原理？為什么可以實(shí)現(xiàn)持久連接？

16. 【超高頻】 實(shí)現(xiàn)復(fù)雜數(shù)據(jù)(去重元素是對(duì)象，數(shù)組)的數(shù)組去重

17. 基本數(shù)據(jù)類型有哪些， 為什么symbol是一個(gè)函數(shù)， BigInt為什么可以用來存儲(chǔ)大整數(shù)

18. 什么是依賴注入

19. JS類型轉(zhuǎn)換

• String([]) 為 ’‘， String({})結(jié)果是什么什么? ?答案是：'[object object]'
• 其他一些很經(jīng)典的類型轉(zhuǎn)換考察，當(dāng)時(shí)沒記那么清楚，大家可以去網(wǎng)上看一下

20. 富文本編輯器相關(guān)的js知識(shí)

• 富文本原理了解一下？
• 富文本編輯器初探
• 編輯器初體驗(yàn)

21. cli工具的一些實(shí)現(xiàn)邏輯

Vue

1. 【高頻】 vue3.0的新特性，了解 composition-api 和react hooks的區(qū)別

• Vue3 究竟好在哪里？（和 React Hook 的詳細(xì)對(duì)比）

2. new Vue做了什么

• new Vue 發(fā)生了什么

3. 雙向綁定原理（Vue2.x和Vue3.x）

• 深入響應(yīng)式原理

4. vue組件通信方法

• vue中8種組件通信方式, 值得收藏!

React

1. 【高頻】 React hooks 相關(guān)的問題

• 為什么引入，什么原理
• hooks如何監(jiān)聽響應(yīng)的，內(nèi)部是如何做到只有數(shù)據(jù)修改的時(shí)候才執(zhí)行函數(shù)
• 依賴的值發(fā)生變化，需要不停地監(jiān)聽和綁定事件
• render props 和HOC相比的優(yōu)缺點(diǎn)
• 和mixin，hoc區(qū)別在哪兒

2. 創(chuàng)建ref的幾種方法

3. context怎么使用，內(nèi)部原理怎么做到的

4. 【超高頻】 React新的生命周期，為什么 getDrivedStatefromProps是靜態(tài)的

• React v16.3之后的組件生命周期函數(shù)
• React新生命周期--getDerivedStateFromProps
• What is getSnapshotBeforeUpdate() in React?

5. react中TS的聲明

其實(shí)就是想了解一下對(duì)TS的使用熟練程度，現(xiàn)在基本項(xiàng)目中開發(fā)都使用了TS，所以要趕緊學(xué)習(xí)起來才行，推薦幾篇我認(rèn)為不錯(cuò)的文章：

• 你不知道的 TypeScript 泛型（萬字長文，建議收藏）
• TypeScript 高級(jí)技巧

6. redux相關(guān)的問題

• redux使用方法，為什么action要返回一個(gè)函數(shù)，返回一個(gè)對(duì)象可以么
• state為什么要設(shè)計(jì)成不可變的

相關(guān)文章

• 為什么redux要返回一個(gè)新的state引發(fā)的血案
• 阮一峰-Redux 入門教程（一）：基本用法

8. 【高頻】 diff算法

9. 【高頻】 key的作用

• 為什么使用v-for時(shí)必須添加唯一的key?

10. immer和imutable的區(qū)別

• 怎么評(píng)價(jià) immer.js?
• Immutable 詳解及 React 中實(shí)踐

11. 【高頻】 react性能優(yōu)化, fiber架構(gòu)

• React Fiber架構(gòu)
• 如何理解 React Fiber 架構(gòu)？

更多可以查看 【面試題】React知識(shí)點(diǎn)整理(附答案)

面試結(jié)果

大概說一下本人的大概情況，本科三年左右工作經(jīng)驗(yàn)，非計(jì)算機(jī)專業(yè)，大三下學(xué)習(xí)決定轉(zhuǎn)行學(xué)習(xí)前端，過程反正挺艱辛的，一直到現(xiàn)在還在惡補(bǔ)計(jì)算機(jī)的一些知識(shí)。畢業(yè)半年左右，一個(gè)偶然的機(jī)會(huì)，進(jìn)入阿里文娛（哈哈，當(dāng)時(shí)面試的時(shí)候也寫過面經(jīng)，感興趣的可以看一下 當(dāng)時(shí)寫的面經(jīng) 2017面末面試總結(jié)），現(xiàn)在因?yàn)閭€(gè)人原因，決定考慮新的機(jī)會(huì)。

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

一般提到面試，肯定都會(huì)想問一下面試結(jié)果，我就大概的說一下面試結(jié)果，哈哈，其實(shí)不太想說，因?yàn)橥K的，并沒有像很多大佬一樣 ”已拿字節(jié)阿里騰訊各大廠offer”，但是畢竟是自己的經(jīng)歷，無論結(jié)果如何都要坦然接受，之前沒好好學(xué)習(xí)，那之后多學(xué)習(xí)就是。360，美團(tuán)，猿輔導(dǎo)最開始的一面掛，小米二面的時(shí)候面試官告知說要求招5年以上工作經(jīng)驗(yàn)的，所以就直接告知不符合（哈哈，可能就是跟小米沒有緣分吧，剛畢業(yè)的時(shí)候面試，終面被拒說要3年以上工作經(jīng)驗(yàn)的，現(xiàn)在夠3年工作經(jīng)驗(yàn)了，卻又要求5年工作年限），騰訊地圖和頭條都是hr直接找過來的，自己并沒有投遞，就順便面了一下，二面面完之后，以為掛了，后來過了一周多（可能是作為備胎把），又打電話過來約面試，其實(shí)之前面試大概了解了一下部門相關(guān)的情況，感覺不是自己想去的，并不是說部門不好，可能做的事情跟現(xiàn)在的情況太像了，所以想做出一些改變。當(dāng)時(shí)家里面又有好多事情處理，也沒有太多的時(shí)間，就直接拒絕了，這件事兒也給自己以后提個(gè)醒，投簡歷之前要先想明白自己想要什么樣的，可以列一些目標(biāo)，而不是因?yàn)榧庇谡夜ぷ鳎C頭和hr直接打電話過來就直接面試。

心得

面試公司的選擇

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

總之要想好自己現(xiàn)在出現(xiàn)什么問題了，為什么打算離職，下一份工作想要什么樣兒的，畢竟一份工作要干很長時(shí)間。

面試準(zhǔn)備

推薦一些很好的文章：

• 在阿里我是如何當(dāng)面試官的
• 阿里前端攻城獅們寫了一份前端面試題答案，請(qǐng)查收
• 大廠面試中遇到的幾十道 webpack 與 react 面試題
• 三年前端，面試思考（頭條螞蟻美團(tuán)offer）
• 大廠面試復(fù)盤(微信/阿里/頭條，均拿offer)
• 霖呆呆的近期面試128題匯總
• 一年半，三本，收到30K+的offer，你也可以
• 螞蟻、字節(jié)、滴滴面試經(jīng)歷總結(jié)
• 一年半經(jīng)驗(yàn)前端社招7家大廠&獨(dú)角獸全過經(jīng)歷 | 掘金技術(shù)征文

好文章真的太多了，哈哈，這里就不全部放出來了，關(guān)于面試，我也準(zhǔn)備做了一些總結(jié)，可以查看 個(gè)人博客

算法

基本每家公司多多少少都會(huì)問很多算法題，算法題對(duì)于我這種基本沒什么基礎(chǔ)的人來說，碰到了就很恐懼，但是沒有其他的辦法，就是兩個(gè)字 “多練”，這里推薦我看過的幾篇文章：

• 天生不聰明
• 寫給前端的算法進(jìn)階指南，我是如何兩個(gè)月零基礎(chǔ)刷200題：
• 前端該如何準(zhǔn)備數(shù)據(jù)結(jié)構(gòu)和算法？
• 前端算法渣的救贖之路
• 我接觸過的前端數(shù)據(jù)結(jié)構(gòu)與算法
• 作為前端，我是如何在Leetcode 算法比賽中進(jìn)入前100的？
• LeetCode 按照怎樣的順序來刷題比較好？

其他的一些想法，之前也寫了一篇文章 關(guān)于面試的一點(diǎn)心得，感興趣的也可以看一下。