本教程適宜中小白前端，大牛自行避退。o(∩_∩)o

直接進入主題！

來到面試官面前開說！

首先做基本的自我介紹。注意基本，別太詳細。涵蓋：姓名、畢業學校、專業（選擇性的說）

接著介紹一下你在什麼公司、做過的項目（肯定是要包裝。包裝但不是真正意義上的作假。）企業是通過面試來考驗你是否滿足企業需求。你可以選擇一些確實是你會做，懂得做的項目，作為自己的項目並且展示給別人看。

重點！如何介紹自己做過的項目：

1、簡單的介紹項目的由來。為什麼公司要做這個項目，對公司有什麼好處，2-3句帶過即可。別弄得跟上家公司過來搞傳銷似的。

2、介紹你在這個項目中負責的事情和職責。別事事你都統攬了，別搞得一個項目十幾號人，什麼事都你做了，其他人就只能鬥地主。前端的話，可以說，我負責日常的營銷活動的H5製作，購物車、訂單模塊前端頁面的製作。

3、在你負責的項目和事情裡，你用到了哪些技術。再說每一個技術點的，必須要說下用在項目的什麼地方：比如說整個商城的頁面切換包括購物車、訂單頁面都是採用Vue的路由來做。前端技術例如，像素級的還原設計頁面，REM佈局、彈性佈局、CSS3動畫、過渡效果、字體圖標、canvas、本地存儲、解決兼容性問題、Vue框架、Vue路由、Vuex進行狀態管理、微信小程序等等。

4、接著你要說你在這個項目遇到的問題。要說一下困難的，比較棘手的問題，一來證明你具有獨立解決問題的能力，二來證明你的技術到位能解決困難的問題，三說明你確實做過這樣的項目。解決困難問題事情，比如說某個模塊，父子組件直接的信息傳遞和狀態管理，又或者說解決某個庫兼容性問題。

5、做個總結，你在項目中的收穫。比如說，技術上的收穫，基本可以獨立完成商城前端頁面的開發等等。事業上的收穫，老闆加薪、升職了、表揚了等等。

再來說說，前端面試所遇到的技術點。下面給出常見的問題，基本都可以百度到，這裡就不一一給出答案了。記住這些點你都要整理好，並且可以轉為你自己的口述，將它背熟，是的背熟、重要的事情說3遍，背熟，背熟，背熟。因為面試很容易緊張導致頭腦一片空白，所以當你很熟悉的時候，一來可以減少緊張，二來可以根據肌肉記憶，可以張口就來：

HTML相關問題

(1) 行標籤和塊級標籤分別有哪些？

(2) 常見HTML5的標籤有哪些？

(3) 怎麼頁面結構會比較好？

(4) 如何減少HTTP請求和優化？

減少請求的資源，將多個CSS資源打包到1個文件裡。將多個JS打包到1個JS文件裡。採用雪碧圖將多個圖片放置到1個圖片裡。儘量的壓縮css文件、js文件、圖片文件、採用無損壓縮的方式或者是使用webP格式的圖片。

(5) HTML5和HTML4的區別。

① 自定義標籤

② HTML5兼容HTML4

③ 多出一些標籤canvas/video/audio/iframe等等，多出的JS相關的API

CSS相關問題

(1) 選擇器的問題，選擇器權重的問題。

Id>class>element,越詳細越精確的選擇器權重越過，!important可以迅速將權重提高。

(2) 佈局相關的問題。

正常的佈局、聖盃佈局、居中、定位、REM佈局的原理、彈性佈局、清除浮動等等

(3) Tansfrom位移、旋轉、傾斜、縮放的問題？

一般問順序執行的問題，先位移在旋轉和旋轉後位移有什麼區別

(4) 動畫、過渡性能優化的問題？

儘量減少非常多元素同時產生動畫，儘量少的在1個元素裡設置多個動畫效果。位移的話，儘量使用transform的tranlate來做位移，不要用定位的left、top、right、bottom來實現位移。

(5) CSS兼容性問題

JS相關問題

(1) 變量的提升、函數的提升

(2) 構造對象，構造對象的方法。

構造函數、class、工程模式構造對象、單例模式

(3) 什麼是原型鏈、原型對象、怎麼在原型鏈上添加方法，如何通過原型實現繼承

構造函數的prototype、事例化出來的對象__proto__

(4) this的指向問題

This是根據函數被哪個對象調用，那麼這個this就指向誰。在箭頭函數里，箭頭函數定義的時候，this指向誰就一直指向誰。改變this的指向可以通過call/apply/bind都可以改變this的指向。

(5) 數組常見的方法和排序問題

數組的增刪改查、數組排序、數組複製

(6) 事件的問題

Onclick跟addEventListener這兩種方式監聽的事件有什麼區別。（addEventListener一個事件可以綁定多個函數，很多新出移動端事件比如touch等只有它支持、還可以設置捕獲或者冒泡來進行監聽）

如何阻止冒泡事件？Event.cancelbubble = true

事件傳遞參數的問題？一般在元素上綁定data-xx=xx’

(7) 如何處理操作dom

對元素對象的增刪改查操作。

(8) 如何獲取元素的一些信息：元素的大小、屏幕的寬度、元素的位置

(9) 如何獲取瀏覽器的一些信息：url地址的獲取、UserAgent的獲取、地理位置的獲取

(10) jQuery的鏈式原理？

(11) jQuery常用的方法有哪些？

(12) Vue虛擬DOM是什麼原理？

(13) Vue數據的雙向綁定的原理？

(14) Vue路由的原理是什麼？

(15) Vuex狀態管理的整個過程是什麼樣的？

(16) Vue生命週期這個過程是什麼樣的？

(17) React虛擬dom什麼原理？

(18) React路由什麼原理

(19) Redux是什麼原理

(20) 小程序一些常見的API方法？

這些原理性的問題，並不是大家真的要背熟框架和庫的代碼，而是讓你能夠表述其的原理，是依據什麼，是什麼方式實現的。當然這些基本也可以百度找到，大家要是懶得話，後面我也會出相關這些原理的文章，大家先關注我就行了。好了，大家只要將這些搞明白弄懂了，基本10k以上的月薪唾手可得，祝大家找個好工作。

PS：面試一定多去幾家，薪資才能更理想。