2019屆美圖前端實習方向一面、二面面經

作者：很厲害的韓同學

鏈接：https://www.nowcoder.com/discuss/76185

來源：牛客網

經常在知乎看到牛客網的BAT面經，很少有其他公司的面經，坐標廈門普通本科。直接在美圖官網投的2019前端實習方向，筆試完第二天HR小姐姐就給我電話說現場面(感覺美圖真的是很不錯了，沒有內推的情況下筆試完第二天就聯繫我)，今天剛二面完，寫個面經回饋一下小牛牛。

4.17 現場一面

剛去的時候面試官還在面上一個，等了有半小時多，期間HR小姐姐和前台小姐姐偶爾和我聊聊天，所以對美圖的印象真是超級無敵好了。下面進入重點，一面有些忘了，能回憶起來多少寫多少吧。

1.介紹一下自己

這個沒啥說的，面試官說我簡歷寫的有點少...

2.既然是前端，問問關於切圖。會用PS嗎？知道png和jpg有什麼區別嗎？

懵了...直接說不是很懂，只知道png是可以背景透明，其他不了解，比較了解SVG格式。

3.HTML5有什麼新特性？

新的標籤，比如article,audio,video。比較重要的是canvas。增加很多表單屬性。本地化存儲。離線存儲。websocket。SVG圖形。定位。

4.canvas了解多少？

少一點，自己有看著文檔寫過一點點，沒有深入研究過。

5.本地存儲都有什麼？區別？

localstorage、sessionstorage，cookie

區別是local是持久化存儲，不主動清除永遠存在，session是關閉瀏覽器自動清除

cookie存儲少，只有4kb，每次網路請求都會攜帶

6.你覺得HTML5語義化有什麼作用？

內容更結構化，即使沒有css，瀏覽器也能分出每個地方的作用去渲染。

還有就是爬蟲更好的去分析頁面，以及SEO

易維護

7.css優先順序

import優先順序最高，繼承的樣式最低，可繼承的有font-family,color。元素標籤>id>class>選擇符。如果有衝突的話選擇最後出現的樣式

8.水平垂直居中

絕對定位 flex彈性布局 實現方式很多，不細說了

9.css3有什麼新特性

background的幾個屬性，顏色rgba，還有什麼工業化顏色叫什麼我忘了，文字陰影，邊框圓角、圖片，定義字體，box-shadow，響應式meta根據窗口大小載入不同樣式，動畫。選擇器。

10.動畫了解多少？

這個真是跪了，真沒研究過動畫...

11.拋物線動畫怎麼做?講思路就好

懵了10s，說了句沒有思路，面試官給我講解，兩個盒子，水平垂直分解，大家可以自己了解一下。

12.css實現三角形

沒啥說的，邊框模型

13.css實現梯形

同上

14.實現一個奇偶數不同樣式的表格？

css3 nth-child(n)

15.後面幾行不同樣式？

同上，面試官在這裡給我講了下具體的用法，也是講了好久，等我確定明白了之後才問的下一題，而且還說看來你css不是很厲害，那我們聊聊js好了...

16.JS數據類型？

五個基本類型，一個複雜類型，ES6 Symbol

17.數組去重

最簡單的是ES6的Set方法。還可以使用indexOf()，但是有兼容性問題。提了一句看過玉伯有關去重的一篇文章，大概是構建一個對象代替indexOf(),感興趣的可以百度。

18.Promise了解嗎?

是ES6中的規範，JS解決非同步的一種方案。

19.自己有動手配置過webpack嗎？

有看著文檔配置了一下簡單的，沒有深入研究過。

20.性能優化

模塊化，減少HTTP請求，懶載入，減少DOM查詢、操作。後端部署CDN等

21.數組亂排序

這個有點懵，問了一句是排序嗎，面試官說對，可以這樣理解，然後說了sort()方法，面試官說隨機排序，亂的。被搞懵了，說了下可以遍曆數組，方法使用隨機數，每次生成0-數組長度的數字然後取出。面試官這個也可以，sort可以亂排知道嗎，這才想起來...

22.跨域、解決方案，JSONP的原理

這個可以看阮一峰老師的博客

23.hybrid混合開發

webview，原型應用嵌入前端內容，即前端與客戶端混合開發，與HTML5比優點是與原生體驗十分接近，可以快速迭代。面試官補充了一下可以拿到與客戶端通信啊balabala

24.聊一聊其他的，你平時都是如何學習前端的

看書，紅寶書，關注知乎專欄還有一些公眾號等等前端社區，偶爾去慕課網看一看視頻。這裡面試官和我講了好多好多關於怎樣去學習的經驗

25.你覺得前端以後會如何發展

這個在知乎就可以找到很多大佬的NB回答了，反正當時和面試官還憧憬了一番前端的未來-大前端啊哈哈哈，所有和用戶交互的都是前端,不止局限於PC端，移動端，客戶端balabala。

26.問個產品的問題，京東的只有加入購物車和淘寶的有立即購買選項，你覺得是為什麼？

我回答的大概是京東是為了讓用戶可以繼續瀏覽商品，而像淘寶立即購買之後又很多後續頁面，很可能用戶買完支付完就關閉app了。

面試官說答的不錯，還給我講了講關於如何去引導用戶的問題

27.你還有什麼要問的？

這裡皮了一下，問了兩個問題 美圖的技術棧，可不可以再給我講講該如何去進階。

其實當時不止問了這些，聊了快兩個小時，現在只能憑記憶去想了。真的是被美圖的前輩們感動了，每道題都會和我講一下怎樣怎樣更好，最後還說和我說來面試肯定會讓你有些收穫，一度讓我感覺已經涼了...

第二天HR小姐姐電話通知面試過了，問我下次面試時間，我說下周吧，因為這幾天有幾門期中考試，然後就定了個時間。沒過一會小姐姐給我打電話說因為面試的也很多，問我可不可以電話面(因為我學校離軟體園還是蠻遠的)，我說可以，然後定了第二天的電話面。

4.20電話面

約的是三點半，結果面試官三點十分就打過來了，急急忙忙掏個耳機從教室跑出來了，就在走廊面試的...中間還有幾聲下課上課的鐘聲，再加上下課時候來來往往從我身邊走過的人..場面一度很尷尬。

1.介紹一下自己

balabala...面試官說簡歷寫的有些少，介紹自己怎麼還這麼少..

2.說一下對this的理解

答的不是很好，感覺沒答到面試官想要的點上..

3.什麼情況會改變this的值

看函數使用的場合...也答的不好

4.(當時下課太吵沒聽清)一個全局函數b，a是b的對象，直接調用a，this的值什麼來著，反正沒聽清題目，支支吾吾答了下過去了。

當時感覺要跪，前幾個問題都沒答到點上，下面幾個比較基礎就直接寫問題了

5.數組去重

6.有哪些方法可以改變原數組的內容

7.數據類型

8.typeof可以得到哪些類型？typeof(null)是什麼？typeof(String.proptype.call(null))能得到什麼?

9.跨域，解決方案，JSOP原理

順口加了一句 nginx設置代理，node中間件設置代理

10.POST/GET區別

只答出了get的參數在url中顯示...問其他的..暫時想不到了

11.POST默認的數據使用什麼方式?

12.我們在前端如何將數據轉換成JSON發送到後端

JSON方法，在ajax內設置，感覺有也沒答到面試官想要的點

13.在一個不確定的多維數組如何將它轉換成一維數組

沒答出來..

14.跨域，http://a.meitu.com能訪問到http://b.meitu.com的cookie嗎？如何訪問

沒答出來如何訪問

15.排序演算法知道幾個？

16.說一下快排的原理，演算法複雜度？堆排序的原理

這個答完當時心態炸了，突然就對自己很失望，最基礎的數據結構都忘了

17.看你的項目大多數是React，說一下React的生命周期

三個大期，實例化，存在期，銷毀期。以及這幾個時期的方法。

這個是我認為我答得最好的一題了

18.http狀態碼

19.做過的項目有遇到什麼困難，如何解決

說了下自己之前學習前端直接從框架入手，學習redux的時候超級困難，感覺自己有些急功近利，所有放棄框架的學習，從基礎入手

20.你有什麼問我的嗎？

問了一下對Vue和React怎麼看。面試官說只是工具，基礎才是最重要的。其中一個學的透，轉另一個也很容易。

21.最後掛電話前還問了下家不在廈門以後留不留廈門啊balabala，然後說後續HR會再與你聯繫。

也問了好多，只記住沒答出來的問題了...

二面真的是感覺自己跪了，可能當時的環境有些關係，最重要的是發現自己太多不足，不說別的，作為一個軟體工程的學生，連最基礎的數據結構都答不好，電話掛了之後還對自己失望了挺長時間。

作為一個程序員，不管你是前端後端還是其他的，最基礎的也是最重要的就是數據結構和演算法。這句話也是對自己說。

其實就像是一面的面試官對我說的，面試的過程也是不斷提升自己的過程，最重要的不是你拿沒拿到offer，而是你有沒有去重新認識你自己。

最後祝大家春招順利，拿到心儀的offer!

更多筆經面經：https://www.nowcoder.com/discuss?order=0&type=2

與作者交流：https://www.nowcoder.com/discuss/76185