博主就讀于電子科技大學(xué)，大三狗一枚！面試是個(gè)漫長(zhǎng)的過(guò)程，從海投到收獲電話面試，一面、二面、三面，一個(gè)步驟出錯(cuò)那么后面就宣告終結(jié)。同時(shí)，面試過(guò)程中你也可能會(huì)遇到一些面試官的刁難，甚至部分面試官會(huì)說(shuō)些比較打擊你的話，但是大部分面試官都是很棒的！

為什么要寫(xiě)這篇文章

從一開(kāi)始手指冒汗被懟的說(shuō)不出話，到最后和面試官侃侃而談?dòng)稳杏杏?，我發(fā)現(xiàn)：同樣的能力水平，在不同的面試表現(xiàn)下，反饋到面試官眼中的結(jié)果可以有著天壤之別。

因此，如果你希望把自己的真實(shí)水平展示給面試官，那么掌握一些合適的方法是非常有必要的。

面經(jīng)分享

第一部分是我前端面試的經(jīng)驗(yàn)總結(jié)，第二部分是我認(rèn)為比較有思考空間的題目

???經(jīng)驗(yàn)總結(jié)

• 一份漂亮的簡(jiǎn)歷，需要包括以下部分（排版由上而下）

  個(gè)人亮點(diǎn)（專(zhuān)精領(lǐng)域，個(gè)人博客，開(kāi)源項(xiàng)目）

  教育經(jīng)歷（畢業(yè)院校，在校經(jīng)歷、榮譽(yù)）

  工作經(jīng)歷（實(shí)習(xí)）

  項(xiàng)目經(jīng)歷

  專(zhuān)業(yè)技能

• 扎實(shí)的前端基礎(chǔ)，比如你知道

  <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'/> `作用是什么？

  flex:1 的 1 代表什么？

  閉包, 作用域, 內(nèi)存？

• 熟悉一門(mén)前端框架（Vue 優(yōu)先）

• 勤刷《前端初級(jí)工程師面試題精編》 的算法題，熟悉掌握相應(yīng)的數(shù)據(jù)結(jié)構(gòu)如常見(jiàn)的鏈表、棧、隊(duì)列、哈希表、樹(shù)

• 熟悉網(wǎng)絡(luò)基礎(chǔ)、Git 命令、Linux 命令、打包工具

• 多去了解前端的新趨勢(shì)（Flutter，PWA，Serveless，GraphQL，CSS Houdini）

• 要有自信，讓面試官感受到你對(duì)前端的熱愛(ài)

此文純個(gè)人觀點(diǎn)，希望讀者保持自己的判斷。???

題外話：看完你會(huì)忍不住點(diǎn)個(gè)贊的，點(diǎn)贊再看，養(yǎng)成習(xí)慣??

???推薦閱讀：

• web前端面試寶典

• 前端工程師，實(shí)際工作中的開(kāi)發(fā)流程？

• 自己的準(zhǔn)備工作分享：前端知識(shí)點(diǎn)總結(jié)

2023前端面試題精選

老生常談的面試題就不放出來(lái)了，大廠常規(guī)面試流程也不寫(xiě)了（不利于閱讀，有興趣的可以翻翻博主文章）

HTML、CSS相關(guān)

- 網(wǎng)絡(luò)中使用最多的圖片格式有哪些

- 請(qǐng)簡(jiǎn)述css盒子模型

- 視頻/音頻標(biāo)簽的使用

- HTML5新增的內(nèi)容有哪些

- HTML5 新增的語(yǔ)義化標(biāo)簽有哪些

- CSS3新增的特性

- 清除浮動(dòng)的方式有哪些？請(qǐng)說(shuō)出各自的優(yōu)點(diǎn)

- 定位的屬性值有何區(qū)別

- 子元素如何在父元素中居中

- Border-box與content-box的區(qū)別

- 元素垂直居中

- 如何讓chrome瀏覽器顯示小于12px的文字

- CSS選擇器有哪些，那些屬性可以繼承，優(yōu)先級(jí)如何計(jì)算？

- CSS3新增的偽類(lèi)有哪些？

- 網(wǎng)頁(yè)中有大量圖片加載很慢 你有什么辦法進(jìn)行優(yōu)化？

- 行內(nèi)元素/塊級(jí)元素有哪些？

- 瀏覽器的標(biāo)準(zhǔn)模式和怪異模式區(qū)別？

- Margin和padding在什么場(chǎng)合下使用

- 彈性盒子布局屬性有那些請(qǐng)簡(jiǎn)述?

- 怎么實(shí)現(xiàn)標(biāo)簽的禁用

- Flex布局原理

- px，rem，em的區(qū)別

- 網(wǎng)頁(yè)的三層結(jié)構(gòu)有哪些

- 請(qǐng)簡(jiǎn)述媒體查詢(xún)

- 三欄布局方式兩邊固定中間自適應(yīng)

- Doctype作用

- CSS 預(yù)處理 sass less 是什么？為什么使用他們

- 怎么轉(zhuǎn)換less為css

JavaScript相關(guān)

- Js基本數(shù)據(jù)類(lèi)型有哪些

- Ajax如何使用

- 如何判斷一個(gè)數(shù)據(jù)是NaN

- 閉包是什么？有什么特性？對(duì)頁(yè)面會(huì)有什么影響

- Js中常見(jiàn)的內(nèi)存泄漏：

- 事件委托是什么？如何確定事件源（Event.target 誰(shuí)調(diào)用誰(shuí)就是事件源）

- 什么是事件冒泡？

- 本地存儲(chǔ)與cookie的區(qū)別

- ES6新特性

- Let與var與const的區(qū)別

- 數(shù)組方法有哪些請(qǐng)簡(jiǎn)述

- 請(qǐng)掌握2種以上數(shù)組去重的方式

- 什么是面向?qū)ο笳?qǐng)簡(jiǎn)述

- 普通函數(shù)和構(gòu)造函數(shù)的區(qū)別

- 請(qǐng)簡(jiǎn)述原型 / 原型鏈 /（原型）繼承

- Promise的理解

- 請(qǐng)簡(jiǎn)述async的用法

- 一個(gè)頁(yè)面從輸入 URL 到頁(yè)面加載顯示完成，這個(gè)過(guò)程中都發(fā)生了什么？

- Js中.call()與.apply()區(qū)別

- 為什么會(huì)造成跨域/請(qǐng)簡(jiǎn)述同源策略

- This指向

- 什么是jsonp工作原理是什么？他為什么不是真正的ajax

- 請(qǐng)寫(xiě)出一個(gè)簡(jiǎn)單的類(lèi)與繼承

- 同步與異步的區(qū)別/阻塞與非阻塞區(qū)別

- 為什么js是弱類(lèi)型語(yǔ)言

- 箭頭函數(shù)與普通函數(shù)的區(qū)別

- For循環(huán)與map循環(huán)有什么區(qū)別

- 原型和繼承，prototype，call和apply繼承的區(qū)別

- 深淺拷貝是什么如何實(shí)現(xiàn)？

- 什么時(shí)候用深拷貝 /淺拷貝

- 什么是js內(nèi)存泄露？

- 什么是csrf攻擊

- 預(yù)加載和懶加載的區(qū)別，預(yù)加載在什么時(shí)間加載合適

- Js的函數(shù)節(jié)流和函數(shù)防抖的區(qū)別

jQuery相關(guān)

- 什么是jQuery？

- 為什么要使用jQuery？jquery有哪些好處？

- Jquery選擇器有哪些

- Jquery插入節(jié)點(diǎn)的方法

- jQuery對(duì)象和DOM對(duì)象是怎樣轉(zhuǎn)換的

- jQuery中.get()提交和.post()提交的區(qū)別

- 怎么使用jQuery中的動(dòng)畫(huà)

- jQuery中如何來(lái)獲取和設(shè)置屬性

- 如何來(lái)設(shè)置和獲取HTML和文本的值？

- jQuery中有哪些方法可以遍歷節(jié)點(diǎn)？

- $(this) 和 this 關(guān)鍵字在 jQuery 中有何不同？

- jQuery 里的 each() 是什么函數(shù)？你是如何使用它的？

- Query中的Delegate()函數(shù)有什么作用？

瀏覽器，HTTP相關(guān)

- http是什么？有什么特點(diǎn)

- HTTP協(xié)議和HTTPS區(qū)別

- 請(qǐng)簡(jiǎn)述ajax的執(zhí)行過(guò)程 以及常見(jiàn)的HTTP狀態(tài)碼

- Get和post不同

- 請(qǐng)輸出三種減少頁(yè)面加載時(shí)間的方式

- 重繪和回流是什么

- 你如何對(duì)網(wǎng)站的文件和資源進(jìn)行優(yōu)化？

Vue相關(guān)

- Vue的核心是什么

- 請(qǐng)簡(jiǎn)述你對(duì)vue的理解

- 請(qǐng)簡(jiǎn)述vue的單向數(shù)據(jù)流

- Vue常用的修飾符有哪些

- v-text與{{}}與v-html區(qū)別

- v-on可以綁定多個(gè)方法嗎

- Vue循環(huán)的key作用

- 什么是計(jì)算屬性

- Vue單頁(yè)面的優(yōu)缺點(diǎn)

- Vuex是什么？怎么使用？在那種場(chǎng)景下使用

- Vue中路由跳轉(zhuǎn)方式（聲明式/編程式）

- 路由中name屬性有什么作用？

- vue跨域的解決方式

- Vue的生命周期請(qǐng)簡(jiǎn)述

- Vue生命周期的作用

- DOM渲染在那個(gè)生命周期階段內(nèi)完成

- Vue路由的實(shí)現(xiàn)

- Vue路由模式hash和history，簡(jiǎn)單講一下

- Vue路由傳參的兩種方式，params和query方式與區(qū)別

- Vue數(shù)據(jù)綁定的幾種方式

- Vue注冊(cè)一個(gè)全局組件

- Vue的路由鉤子函數(shù)/路由守衛(wèi)有哪些

- Vue中如何進(jìn)行動(dòng)態(tài)路由設(shè)置？有哪些方式？怎么獲取傳遞過(guò)來(lái)的數(shù)據(jù)？

- Elementui中的常用組件有哪些？請(qǐng)簡(jiǎn)述你經(jīng)常使用的 并且他們的屬性有哪些？

- Vue中指令有哪些

- Vue如何定義一個(gè)過(guò)濾器

- 對(duì)vue 中keep-alive的理解

- 如何讓組件中的css在當(dāng)前組件生效

- Vue生命周期一共幾個(gè)階段

- Mvvm與mvc的區(qū)別

- Vue組件中的data為什么是函數(shù)

- Vue雙向綁定的原理

- Vue中組件怎么傳值

- Bootstrap的原理

- Watch請(qǐng)簡(jiǎn)述

- Vant Ui請(qǐng)簡(jiǎn)述下

- 計(jì)算屬性與watch區(qū)別

- mvvm框架是什么？它和其它框架（jquery）的區(qū)別是什么？哪些場(chǎng)景適合？

- Vue首屏加載慢的原因，怎么解決的，怎么解決白屏問(wèn)題

- Vue雙數(shù)據(jù)綁定過(guò)程中，這邊兒數(shù)據(jù)改變了怎么通知另一邊改變

- Vuex流程

- Vuex怎么請(qǐng)求異步數(shù)據(jù)

- Vuex中action如何提交給mutation的

- Route與router區(qū)別

- vuex的State特性是？

- vuex的Getter特性是？

- vuex的Mutation特性是？

- vuex的actions特性是？

- vuex的優(yōu)勢(shì)

- v-for與v-if優(yōu)先級(jí)

React相關(guān)

- fetch VS ajax VS axios

- React事件處理—修改this指向

- 請(qǐng)簡(jiǎn)述你對(duì)react的理解

- react組件之間的數(shù)據(jù)傳遞

- Vue與react區(qū)別

- 請(qǐng)簡(jiǎn)述虛擬dom與diff算法

- 調(diào)用 setState 之后發(fā)生了什么？

- react 生命周期函數(shù)

- 為什么虛擬 dom 會(huì)提高性能?(必考)

- State與props區(qū)別

- shouldComponentUpdate 是做什么的

- react diff 原理

- 何為受控組件

- 調(diào)用 super(props) 的目的是什么

- React 中構(gòu)建組件的方式

小程序相關(guān)的

- 小程序的優(yōu)勢(shì)

- 小程序的頁(yè)面構(gòu)成

- 小程序的生命周期

- 小程序如何請(qǐng)求數(shù)據(jù)

- 如何提高小程序的首屏加載時(shí)間

- 請(qǐng)簡(jiǎn)述你經(jīng)常使用的小程序的組件

- wxss與css的區(qū)別請(qǐng)簡(jiǎn)述

- 怎么優(yōu)化小程序

- 小程序如何顯示用戶(hù)頭像與用戶(hù)名

- 請(qǐng)談?wù)勑〕绦虻碾p向綁定和vue的異同？

這邊給大家送上一份前端工程師學(xué)習(xí)成長(zhǎng)思維導(dǎo)圖，對(duì)自己的專(zhuān)業(yè)技能進(jìn)行評(píng)估，需要的同學(xué)可以在評(píng)論區(qū)留言“前端思維導(dǎo)圖”

后話

對(duì)于面試，說(shuō)幾句個(gè)人觀點(diǎn)。

面試，說(shuō)到底是一種考試。正如我們一直批判應(yīng)試教育脫離教育的本質(zhì)，為了面試學(xué)習(xí)技術(shù)也脫離了技術(shù)的初心。但考試對(duì)于人才選拔的有效性是毋庸置疑的，幾千年來(lái)一直如此。除非你有實(shí)力向公司證明你足夠優(yōu)秀，否則，還是得乖乖準(zhǔn)備面試。這也并不妨礙你在通過(guò)面試之后按自己的方式學(xué)習(xí)。

其實(shí)在面試準(zhǔn)備階段，個(gè)人的收獲是很大的，我也認(rèn)為這是一種不錯(cuò)的學(xué)習(xí)方式。首先，面試問(wèn)題大部分基礎(chǔ)而且深入，這些是平時(shí)工作的基礎(chǔ)。就好像我們之前一直不明白學(xué)習(xí)語(yǔ)文的意義，但它的意義就在每天的談話間。

所謂面試造火箭，工作擰螺絲。面試往往有更高的要求，也迫使我們更專(zhuān)心更深入地去學(xué)習(xí)一些知識(shí)，也何嘗不是一種好事。

文內(nèi)教程PDF可以下圖領(lǐng)取：