隨著時(shí)代的發(fā)展，很多新興的就業(yè)職位隨之產(chǎn)生。前端工程師將就是隨著互聯(lián)網(wǎng)的快速發(fā)展而產(chǎn)生的。其實(shí)在很多人的觀念里，前端工程師也就是一個(gè)切頁(yè)面的而已，他們也就是會(huì)html、css、javascript這些沒(méi)有任何技術(shù)含量的網(wǎng)頁(yè)制作而已。然而隨著技術(shù)飛速發(fā)展，人們對(duì)這些技術(shù)的要求也是越來(lái)越高，如果只憑著一個(gè)人來(lái)把所有的事情都解決是很困難的，所以這個(gè)時(shí)候前端工程師就開(kāi)始發(fā)揮著他們很大的作用了。

那我們應(yīng)該如何來(lái)面試前端工程師呢？

首先我們要了解到一般關(guān)于工程師的面試都是被分為問(wèn)答面試和代碼面試的。當(dāng)然也有很多公司會(huì)增加一些其他的面試。不過(guò)這就主要看公司的情況而來(lái)。一般前面一二輪的面試都是主要是技術(shù)方面為主。后面幾輪就是你的老板要和你聊聊你的待遇和規(guī)劃的問(wèn)題了。接下來(lái)就讓我們來(lái)聊聊面試前端工程師的一些技巧吧。

如果你想成為一個(gè)優(yōu)秀的前端工程師你就必須要有一些基礎(chǔ)工程師所必需的具有的扎實(shí)的理論基礎(chǔ)。這些扎實(shí)的理論基礎(chǔ)是你面試前端工程師的前提。如果你不具備這些理論上的知識(shí)想必你連面試的資格都沒(méi)有。所以想面試成功你就需要掌握這些有關(guān)的理論知識(shí)。

關(guān)于這個(gè)前端工程師的面試，考察能力時(shí)候很重要的。一般呢，我們可以總結(jié)為前端工程師是有關(guān)基礎(chǔ)理論和能力的綜合。而這個(gè)里面的能力就包含這個(gè)考察能力這個(gè)考察能力呢一般就是指工程師的編程能力。

一般面試官都是通過(guò)案例問(wèn)題來(lái)檢驗(yàn)每個(gè)人的考察能力的。這個(gè)所謂的案例問(wèn)題就是在編程上的一些算法題。這一般有些小復(fù)雜所以就需要你較強(qiáng)的考察能力來(lái)配合了。

在我們?cè)诿鎸?duì)面試官時(shí)我們千萬(wàn)不要緊張。在進(jìn)行自我介紹時(shí)我們要努力做到自信大方、吐字清晰。我們?cè)谧晕医榻B時(shí)要用簡(jiǎn)明扼要的話語(yǔ)來(lái)介紹自己，突出自己的優(yōu)點(diǎn)表明自己的求職意向。你要通過(guò)寥寥數(shù)語(yǔ)把自己的優(yōu)勢(shì)都向面試官介紹清楚。記住不必要的話語(yǔ)要少說(shuō)。

好了關(guān)于如何面試前端工程師這個(gè)話題我就聊到這了。希望我的回答能對(duì)你有所幫助。

作為一名HTML5前端工程師，為了工作，為了就業(yè)我們免不了要參加各種各樣的面試。為此總結(jié)了面試前的注意事項(xiàng)：

第一：注意自己的儀容儀表

面試之前，一定要再次從頭到腳地將自己的儀容儀表檢查一遍。檢查時(shí)主要包括，自己的牙縫是不是還有食物殘?jiān)?，所以你需要就近找一個(gè)衛(wèi)生間，如果沒(méi)有衛(wèi)生間就近找一個(gè)角落也是可以的，但是切記一定不要在大庭廣眾之下。因此，為了給自己整理出著裝的時(shí)間請(qǐng)?jiān)诩s定時(shí)間前20分鐘到達(dá)。

第二：再次檢查面試時(shí)所需的資料是否都已帶全

這些資料主要包括：身份證明、學(xué)歷文憑證明、個(gè)人簡(jiǎn)歷、以往作品等等，如果這些東西齊全之后，需要對(duì)這些資料做一個(gè)整理與排序。因?yàn)闆](méi)有哪個(gè)面試官希望看到面試者拿出一堆“莫名其妙”的東西塞給他，讓他自己再一頁(yè)一頁(yè)的翻找自己需要的內(nèi)容，如果說(shuō)這些資料在面試官手中不小心散落一地，結(jié)果可想而知。這樣的求職者在面試官眼中也一定不是一個(gè)讓人放心、有條不紊的員工。當(dāng)然如果檢查時(shí)發(fā)現(xiàn)資料沒(méi)有帶全，也不要緊張。反而你要慶幸幸虧及時(shí)檢查，也有足夠的時(shí)間組織語(yǔ)言去向面試官解釋。

第三：面試之前將通信工具調(diào)成振動(dòng)或關(guān)閉狀態(tài)

雖然說(shuō)面試者與面試官之間是一個(gè)平等的關(guān)系，但畢竟你是去人家公司求職的，始終處于一個(gè)被動(dòng)的狀態(tài)，所以最起碼的尊重還是要做到的。曾經(jīng)有調(diào)查顯示，對(duì)于面試過(guò)程中接電話或是被電話打斷的求職者，會(huì)被HR減分。

第四：等候面試官時(shí)，仔細(xì)觀察多了解面試公司

在等候面試官時(shí)，可以暗自觀察一下公司的大體情況比如員工的著裝風(fēng)格、公司的LOGO或是貼在墻上的企業(yè)文化、公司的環(huán)境等等，一來(lái)可以在接下來(lái)的面試過(guò)程中表現(xiàn)出自己對(duì)公司的認(rèn)同感，二來(lái)也可以讓自己對(duì)求職公司多些了解，以確定是否要接受這里的工作。如果你身邊有公司的資料宣傳架，不妨取一本翻看一下，也會(huì)增加HR對(duì)你的好感。

第五：放松心情，保持自信

面試時(shí)一定要保持一定的自信，這樣也會(huì)給面試官留下很好的印象。面試只是你步入工作的第一步，即便是失敗了那也是人生重要的經(jīng)歷。失敗是為了更好的迎接下一個(gè)挑戰(zhàn)。

作為一名web前端工程師千萬(wàn)不要覺(jué)得懂技術(shù)面試就能萬(wàn)事大吉了，像以上五點(diǎn)細(xì)節(jié)性的東西也是一定要掌握的。

面試題系列：

網(wǎng)頁(yè)鏈接

Web前端工程師面試主要就是問(wèn)你對(duì)前端工程師有何認(rèn)識(shí)，你最滿意是做了什么項(xiàng)目，詳細(xì)介紹這個(gè)項(xiàng)目的背景過(guò)程。你對(duì)于我們公司有沒(méi)有了解，你對(duì)我們公司的項(xiàng)目有什么意見(jiàn)看法等等。更多前端工程師如何面試你可以到問(wèn)問(wèn)我建筑求職網(wǎng)了解相關(guān)面試技巧。

將這些問(wèn)題作為參考。希望你的面試官有點(diǎn)經(jīng)驗(yàn)，不會(huì)用以下這樣的問(wèn)題開(kāi)場(chǎng)。以防萬(wàn)一，還是準(zhǔn)備一些答案。1.為什么選擇程序員這個(gè)職業(yè)生涯?2.截至目前，你所從事的項(xiàng)目中最喜歡的是哪個(gè)?3.描述一下你夢(mèng)想中的研發(fā)項(xiàng)目。另外一些面試官會(huì)問(wèn)一些通用的技術(shù)問(wèn)題，來(lái)測(cè)試你的技術(shù)能力。有可能部分人不知道這些問(wèn)題是什么意思，而僅僅是在考察你的能力/競(jìng)爭(zhēng)力?；诿嬖嚬俚募夹g(shù)能力級(jí)別的不同，你的答案也會(huì)有所不同。這些問(wèn)題簡(jiǎn)單易答，因此把這些問(wèn)題記下來(lái)。1.描述一下創(chuàng)建一個(gè)新網(wǎng)頁(yè)的過(guò)程2.怎樣減少頁(yè)面加載時(shí)間?3.標(biāo)準(zhǔn)和標(biāo)準(zhǔn)體(standards and standards bodies)為什么重要?4.你使用怎樣一個(gè)過(guò)程來(lái)組織代碼?5.你喜歡用什么工具來(lái)測(cè)試代碼性能?[page]既然你從事前端工作，理解CSS會(huì)非常重要。因此這里為你準(zhǔn)備了一些常見(jiàn)的CSS問(wèn)題。這是展示你知識(shí)儲(chǔ)備的重要開(kāi)始。這些并不是最尖銳或者重要的問(wèn)題，如果不能回答出來(lái)，將對(duì)你很不利。 中的 resetting 和 normalizing 之間的區(qū)別有哪些?2.什么是floats，它是如何工作的?、relative、fixed 和 static 定位的區(qū)別是什么?4.解釋visiblity hidden和display none之間的區(qū)別5.你是如何修復(fù)特定瀏覽器默認(rèn)樣式的問(wèn)題?6.你是否用過(guò)網(wǎng)格系統(tǒng)?目的是?7.如果計(jì)算CSS權(quán)重?8.解釋如何優(yōu)化CSS選擇器。9.為什么需要使用預(yù)編譯器?10.你是如何測(cè)試網(wǎng)站的跨瀏覽器兼容性?現(xiàn)在我們最基本的任務(wù)完成了。誰(shuí)都能死記硬背這些答案來(lái)應(yīng)付以上問(wèn)題。即使是新手前端開(kāi)發(fā)者也能出色地回答大部分問(wèn)題。然而如果想真正讓你的面試官印象深刻并證明你的功底深厚，就把下面這些問(wèn)題牢記在心。1.前端開(kāi)發(fā)的框架是什么?2.響應(yīng)式web app和原生應(yīng)用程序的區(qū)別是什么?3.原生app相對(duì)web app的優(yōu)點(diǎn)是什么?4.客戶端和服務(wù)器端開(kāi)發(fā)的區(qū)別是什么?5.什么是SASS和LESS?它們是如何工作的?面試官會(huì)更多關(guān)注你是如何表達(dá)對(duì)這些問(wèn)題的解釋。他們會(huì)追問(wèn)支持你的答案的工作案例。前面的問(wèn)題你可能可以通過(guò)記憶而過(guò)關(guān)，你可能還會(huì)遇到這些問(wèn)題的擴(kuò)展，但這些答案的深度，將讓你與眾不同。通過(guò)你參與過(guò)的實(shí)際項(xiàng)目，來(lái)展示你的思考過(guò)程。

1、一般HR會(huì)給你一份面試題，里面是一些js/css基礎(chǔ)內(nèi)容，看你的基本功是否牢固。2、做完試題技術(shù)面試官會(huì)問(wèn)你之前做過(guò)哪些項(xiàng)目經(jīng)驗(yàn)，有何得失，平時(shí)是否自學(xué)等。3、問(wèn)些框架內(nèi)容，比如Jquery,react,vue,angular等，UI框架用過(guò)哪些。4、svn/git是否用過(guò)，webpack打包等5、為什么選擇我們的公司，為什么離職等6、你還有什么問(wèn)題問(wèn)我們的

一、基本知識(shí) 我們生活在網(wǎng)際網(wǎng)路時(shí)代，你想知道的任何事情幾乎都能在15分鐘內(nèi)找到相關(guān)資訊?？墒?，能找到資訊并不等于你會(huì)使用它。我認(rèn)為所有前端工程師至少都應(yīng) 該掌握某些基本的知識(shí)，才能有效地完成自己的工作。如果一遇到問(wèn)題，就停下工作上網(wǎng)四處搜尋解決方案，怎么可能保證按期完成工作呢？聽(tīng)聽(tīng)，還有誰(shuí)在說(shuō)“我 不知道，但我可以上網(wǎng)搜到。”請(qǐng)這些同學(xué)把手舉起來(lái)，讓大家認(rèn)識(shí)一下（immediately raises a flag for me.）。下面我列出一些基本的知識(shí)點(diǎn)，這些都是我認(rèn)為一名前端工程師（無(wú)論工作年頭長(zhǎng)短）在沒(méi)有任何外來(lái)幫助的情況應(yīng)該知道的。 [list][*] DOM結(jié)構(gòu)——兩個(gè)節(jié)點(diǎn)之間可能存在哪些關(guān)系以及如何在節(jié)點(diǎn)之間任意移動(dòng)。 [*] DOM操作——怎樣新增、移除、移動(dòng)、復(fù)制、建立和查詢節(jié)點(diǎn)。 [*] 事件——怎樣使用事件以及IE和DOM事件模型之間存在哪些主要差別。 [*] XMLHttpRequest——這是什么、怎樣完整地執(zhí)行一次GET請(qǐng)求、怎樣檢測(cè)錯(cuò)誤。 [*] 嚴(yán)格模式與混雜模式——如何觸發(fā)這兩種模式，區(qū)分它們有何意義。 [*] 盒模型——外邊距、內(nèi)邊距和邊框之間的關(guān)系，IE 8以下版本的瀏覽器中的盒模型有什么不同。 [*] 塊級(jí)元素與行內(nèi)元素——怎么用CSS控制它們、它們?cè)鯓佑绊懼車(chē)脑匾约澳阌X(jué)得應(yīng)該如何定義它們的樣式。 [*] 浮動(dòng)元素——怎么使用它們、它們有什么問(wèn)題以及怎么解決這些問(wèn)題。 [*] HTML與XHTML——二者有什么區(qū)別，你覺(jué)得應(yīng)該使用哪一個(gè)并說(shuō)出理由。 [*] JSON——它是什么、為什么應(yīng)該使用它、到底該怎么使用它，說(shuō)出實(shí)現(xiàn)細(xì)節(jié)來(lái)。 [/list] 重申一下，上述這些知識(shí)點(diǎn)都應(yīng)該是你應(yīng)該“想都不用想”的東西。我一開(kāi)始問(wèn)的所有問(wèn)題都是想摸清你對(duì)所有這些領(lǐng)域知識(shí)的掌握程度。雖然上面列出的這些知識(shí)點(diǎn)并沒(méi)有面面俱到，但我覺(jué)得你至少應(yīng)該掌握這些，才有可能跟我坐到一間辦公室里來(lái)。 二、少量提問(wèn) 我非常贊同面試者問(wèn)的問(wèn)題越少越好。反復(fù)問(wèn)應(yīng)聘者各種問(wèn)題既不公平，也很無(wú)聊。我在任何一次面試中，通常只問(wèn)三個(gè)大問(wèn)題，但每個(gè)問(wèn)題又會(huì)涉及我所能想到的多個(gè)方面?；卮鹈總€(gè)大問(wèn)題一般要經(jīng)過(guò)幾個(gè)步驟，這樣我就可以在每個(gè)步驟中穿插著問(wèn)一些小問(wèn)題。比如說(shuō)：

HR一般不會(huì)面試太深的問(wèn)題，主要是了解一下你之前的工作經(jīng)歷，更多的是你自己描述，中間可能會(huì)問(wèn)一些初級(jí)的問(wèn)題，比如，你為什么從上一家單位離職等類(lèi)似問(wèn)題。

這樣的布局用絕對(duì)定位實(shí)現(xiàn)最合適，ABC的外層用相對(duì)定位，里邊各列用絕對(duì)定位就可以。至于CBA且B寬度自適應(yīng)，還是用絕對(duì)定位，但只定位C,A分部到兩側(cè)，中間的列margin設(shè)成左右列的寬度就可以。

web前端開(kāi)發(fā)工程師想要硬氣的跳槽，起碼應(yīng)該達(dá)到以下幾點(diǎn)： 1.掌握扎實(shí)的技術(shù)基礎(chǔ)， 需要掌握技術(shù)包括：HTML、CSS、JavaScript; HTML是Web程式設(shè)計(jì)的基礎(chǔ)，HTML也是一種規(guī)范，一種標(biāo)準(zhǔn)，它通過(guò)標(biāo)記符號(hào)來(lái)標(biāo)記要顯示的網(wǎng)頁(yè)中的各個(gè)部分。網(wǎng)頁(yè)檔案本身是一種文字檔案，通過(guò)在文字檔案中新增標(biāo)記符，可以告訴瀏覽器如何顯示其中的內(nèi)容。 維護(hù)大型的CSS程式碼庫(kù)并非易事，特別是那些隨意散漫未經(jīng)組織的CSS程式碼極易變成一團(tuán)亂麻，所以，應(yīng)該掌握CSS命名規(guī)范，來(lái)幫助開(kāi)發(fā)者編寫(xiě)優(yōu)質(zhì)的程式碼。 2.深入理解前端工程化和元件開(kāi)發(fā); 需要熟悉web前端框架—— React、等， React為我們提供了直接易用的，以狀態(tài)為核心的前端應(yīng)用開(kāi)發(fā)方式，前端工程師應(yīng)該會(huì)分析React內(nèi)部工作原理，討論React中簡(jiǎn)單元件、類(lèi)元件等渲染流程。 單元測(cè)試是應(yīng)用開(kāi)發(fā)中不可或缺的部分，日常開(kāi)發(fā)中會(huì)用到的單元測(cè)試的例子，所以應(yīng)該掌握。 3.熟練掌握Web開(kāi)發(fā)相關(guān)知識(shí) 至少熟悉一門(mén)后端語(yǔ)言，例如、Java、Go等; 內(nèi)部原理視非常重要的，應(yīng)該明白的主程序是如何啟動(dòng)的、如何載入內(nèi)建模組、os包如何實(shí)現(xiàn)等等。 4.對(duì)技術(shù)有熱情，有一定前端架構(gòu)能力或者技術(shù)深度;具備團(tuán)隊(duì)合作意識(shí)強(qiáng)，能夠多團(tuán)隊(duì)協(xié)作開(kāi)發(fā);具備企業(yè)級(jí)大型前端應(yīng)用開(kāi)發(fā)經(jīng)驗(yàn)更佳。

前端工程師需要懂得設(shè)計(jì)類(lèi)程式碼和js，有需要了解一些后臺(tái)語(yǔ)言，例如PHP等。

1.入門(mén)階段：能夠解決一些問(wèn)題的水平。有一定的基礎(chǔ)(比如最常見(jiàn)的HTML標(biāo)簽及其屬性、事件、方法;最常見(jiàn)的CSS屬性;基礎(chǔ)的JavaScript程式設(shè)計(jì)能力)，能夠完成一些簡(jiǎn)單的Web前端研發(fā)需求。 2.進(jìn)階階段：將JavaScript、HTML、CSS之類(lèi)的編碼幫助手冊(cè)里的每個(gè)方法/屬性都通讀幾遍!只有將基礎(chǔ)打好，以后的路才能走的順暢。 3.入室：最強(qiáng)程式碼，知道所有能夠解決需求的各種方案，能夠選擇使用最優(yōu)秀的方案滿足需求。這個(gè)級(jí)別基本上產(chǎn)品開(kāi)發(fā)程式設(shè)計(jì)中的程式碼主力。程式設(shè)計(jì)師應(yīng)該能夠肯定的回答：對(duì)于這個(gè)需求而言，我的程式碼就是最優(yōu)秀的程式碼。 4.注重細(xì)節(jié)，注意那些當(dāng)前需求里沒(méi)有明文給出的細(xì)節(jié)：程式碼效能的差異、執(zhí)行平臺(tái)(瀏覽器)的差異、需求的隱性擴(kuò)充套件、程式碼的向后相容等等。

web前端工程師是不參與任何的設(shè)計(jì)，直接將網(wǎng)站美工制作的網(wǎng)站效果圖使用ps按照效果圖進(jìn)行切片并使用、css、js等程式碼進(jìn)行網(wǎng)頁(yè)的制作，最終編寫(xiě)出符合w3c標(biāo)準(zhǔn)的相容各個(gè)主流瀏覽器的靜態(tài)頁(yè)面，同時(shí)還需要按照后臺(tái)開(kāi)發(fā)人員的要求留下一些后臺(tái)資料的介面。所以說(shuō)網(wǎng)站前端工程師更多的是程式設(shè)計(jì)而不是設(shè)計(jì)。 UI設(shè)計(jì)師一般是學(xué)美術(shù)或者設(shè)計(jì)出身，精通photoshop、AI、AE等平面設(shè)計(jì)工具，其在網(wǎng)站開(kāi)發(fā)過(guò)程的中的職責(zé)就是按照客戶或者公司的需求設(shè)計(jì)出符合客戶需求和介面或者顏色符合大眾視覺(jué)的網(wǎng)站效果，如根據(jù)不同行業(yè)的需求設(shè)計(jì)顏色、設(shè)計(jì)介面風(fēng)格等，其工作的最后成果就是網(wǎng)站的效果圖。

less和sass什么時(shí)候?qū)W都行，1,2天就能學(xué)會(huì)。這個(gè)不著急，沒(méi)有什么承上啟下的作用，可以單獨(dú)拿出來(lái)學(xué)。 bootstrap就是一個(gè)框架，把最主要的柵格系統(tǒng)看看就好。其他的大概了解能干啥就行，很多公司，是不讓用bootstrap的，而是用原始碼自己寫(xiě)。這個(gè)用一天的時(shí)間沒(méi)啥問(wèn)題。 和angular比較重要，如果學(xué)會(huì)，算是上了一個(gè)臺(tái)階了。所以重點(diǎn)說(shuō)說(shuō)這個(gè)。 angular屬于mvvm框架，一開(kāi)始覺(jué)得angular挺復(fù)雜的，所以想學(xué)一個(gè)簡(jiǎn)單的，輕量級(jí)的，所以決定先學(xué)vue。但是在了解的過(guò)程中發(fā)現(xiàn)，很多的專(zhuān)業(yè)名詞，沒(méi)聽(tīng)過(guò)，或者理解不透。所以又開(kāi)始從頭學(xué)習(xí)。在學(xué)習(xí)的過(guò)程中又開(kāi)始迷茫，發(fā)現(xiàn)了很多JS不懂的地方。 所以，又開(kāi)始深入研究js的dom，函式，ajax，陣列等?？傊昧撕荛L(zhǎng)的時(shí)間，浪費(fèi)了很長(zhǎng)時(shí)間。 最后總結(jié)一下啊。其實(shí)，沒(méi)必要鉆那么多牛角尖。 先做著vue的例子，不懂的地方，直接略過(guò)，很多時(shí)候，不理解的不懂的東西，用著用著，突然就能明白。照貓畫(huà)虎先把VUE的例子跟著做一遍之后，同時(shí)梳理一下涉及到的JS知識(shí)點(diǎn)。能自己用vue做出幾個(gè)小成品的時(shí)候，開(kāi)始結(jié)合js研究。之后再去涉及angular。 angular差不多有個(gè)大概了解的時(shí)候，反過(guò)頭接著學(xué)vue，你會(huì)發(fā)現(xiàn)，又會(huì)發(fā)現(xiàn)很多新東西。 web前端這個(gè)東西特別有意思，當(dāng)你達(dá)到一個(gè)高度，返回來(lái)再看以前的技術(shù)，會(huì)發(fā)現(xiàn)，哎呀，竟然又能發(fā)現(xiàn)新大陸。

培訓(xùn)學(xué)校很多，沒(méi)有具體的衡量標(biāo)準(zhǔn)的。但是可以從幾方面去選擇： 1 有很多優(yōu)秀導(dǎo)師的 2 培養(yǎng)出很多優(yōu)秀學(xué)員的 3 只做培訓(xùn)的，沒(méi)有做其他的 4 做的比較久的。

建議找全程面授課程的地方學(xué)習(xí)，課程體系很重要，現(xiàn)在企業(yè)在用人方面講究全棧的前端工程師人才，所在在課程選擇上要慎重，學(xué)習(xí)內(nèi)容要基于HTML5，要包含pc端+移動(dòng)端+后端。這要才能學(xué)的系統(tǒng)，就業(yè)上才會(huì)有所保障。