前端工程師不一定需要懂設(shè)計(jì)方面。倘若有這等要求，前端工程師豈不是一項(xiàng)除其本身特征性工作外還包含用戶界面設(shè)計(jì)、視覺設(shè)計(jì)、業(yè)務(wù)邏輯及交互動(dòng)畫設(shè)計(jì)師等工作的職稱了么！前端工程師，主要工作內(nèi)容與用戶界面的表現(xiàn)緊密聯(lián)系，但均為在圖形上或以其為基礎(chǔ)通過某種實(shí)現(xiàn)方式去正確、準(zhǔn)確呈現(xiàn)什么。之所以以“主要工作”修飾，是因?yàn)? / 的出現(xiàn)與發(fā)展致使前端被引入服務(wù)器端性質(zhì)的工作內(nèi)容。在能力方面：對(duì) HTML / CSS / JavaScript 具有專家級(jí)別的知識(shí)；有較熟練使用 AngularJS / / jQuery 或者其它類庫(kù)的經(jīng)驗(yàn)；較熟悉第三方組件（插件）生態(tài)環(huán)境及具體案例；有較熟練使用 Jade / Swig / Handlebars / Mustache 或者其它模板引擎的經(jīng)驗(yàn)；有較熟練使用 SASS 或者其它 CSS 預(yù)處理器的經(jīng)驗(yàn)；有較熟練使用 CoffeeScript 的經(jīng)驗(yàn)；對(duì) CSS / JavaScript 設(shè)計(jì)模式有很好的認(rèn)識(shí)及應(yīng)用；對(duì)常用數(shù)據(jù)結(jié)構(gòu)和算法熟悉；有使用 GruntJS / GulpJS 任務(wù)運(yùn)行器的經(jīng)驗(yàn)；有使用 Yeoman 生成器的經(jīng)驗(yàn)；有諸如 Bower / Volo / JSPM 等前端靜態(tài)資源包管理器使用經(jīng)驗(yàn)；熟悉本地及遠(yuǎn)程（真機(jī)）調(diào)試操作；有 Git 的使用經(jīng)驗(yàn)；意識(shí)驅(qū)動(dòng)行為，所以：有自己的技術(shù)信仰；有渴望嘗試新技術(shù)的強(qiáng)烈愿景及較強(qiáng)的主觀學(xué)習(xí)、客觀探索能力；擁有令人難以置信的關(guān)注細(xì)節(jié)的精神；在諸如 Github、Sitepoint 等這樣的技術(shù)社區(qū)活動(dòng)；因?yàn)槟悴皇且粋€(gè)人工作，并且要對(duì)一個(gè)產(chǎn)品付之責(zé)任心，所以：有良好的編程風(fēng)格和文檔習(xí)慣；對(duì)模塊化開發(fā)及相關(guān)標(biāo)準(zhǔn)有很好的認(rèn)識(shí)及應(yīng)用；有對(duì)網(wǎng)頁標(biāo)準(zhǔn)和標(biāo)準(zhǔn)制定機(jī)構(gòu)重要性較深刻的理解；建站過程中考慮其它諸如UI、安全性、高性能、SEO、可維護(hù)性以及技術(shù)因素等方面；有跨瀏覽器（主：兼容性）、跨設(shè)備（主：響應(yīng)式）開發(fā)并測(cè)試頁面的經(jīng)驗(yàn)；對(duì)網(wǎng)格在WEB設(shè)計(jì)中的應(yīng)用有深刻的理解，以及具備系統(tǒng)（有組織）地實(shí)現(xiàn)出來的能力；能夠獨(dú)立工作并做出正確的抉擇；能夠適應(yīng)不斷變化的更新 / 擴(kuò)展 / 改版需求，同時(shí)處理多個(gè)項(xiàng)目；能夠提供準(zhǔn)確的定時(shí)估計(jì)工作（適應(yīng)準(zhǔn)時(shí)交付管理法則）；有與服務(wù)器端程序開發(fā)人員協(xié)同工作的經(jīng)驗(yàn)；能夠（熟練）閱讀英文資料；有一定的工作壓力承受能力；然后再為自己從長(zhǎng)遠(yuǎn)打算及加分：有 NodeJS Web / 服務(wù)器 / 客戶端應(yīng)用程序設(shè)計(jì)、開發(fā)、優(yōu)化經(jīng)驗(yàn)；有 MangoDB / Redis 等No SQL 數(shù)據(jù)庫(kù)設(shè)計(jì)、實(shí)現(xiàn)、維護(hù)經(jīng)驗(yàn)；有使用 PhoneGap / Apache Cordova 進(jìn)行移動(dòng)應(yīng)用開發(fā)經(jīng)驗(yàn)；有瀏覽器 Addon 擴(kuò)展（以擴(kuò)展的形式添加一些為提高用戶體驗(yàn)的附加功能）開發(fā)經(jīng)驗(yàn)者；

今天小編要跟大家分享的文章是關(guān)于參加Web前端面試的常見面試題匯總。準(zhǔn)備參加Web前端面試的小伙伴們來和小編一起看一看吧，希望本篇文章能夠?qū)Υ蠹矣兴鶐椭?.漸進(jìn)增強(qiáng)與優(yōu)雅降級(jí)漸進(jìn)增強(qiáng)并不是一種技術(shù)，而是一種設(shè)計(jì)思想。各個(gè)瀏覽器的渲染能力各不相同，要做一個(gè)每個(gè)人都能看到的網(wǎng)頁、感受到的體驗(yàn)都一致的網(wǎng)站幾乎不可能。但還是得網(wǎng)站的可訪問性，保證用戶在任何環(huán)境下都能正常訪問網(wǎng)頁得核心內(nèi)容或能使用基本功能(避免網(wǎng)頁打不開、排版錯(cuò)誤等)，并為他們提供當(dāng)前條件下最好的體驗(yàn)，這就是漸進(jìn)增強(qiáng)得核心思想。優(yōu)雅降級(jí)也是一種設(shè)計(jì)思想，為了保證在高版本瀏覽器中提供最好的體驗(yàn)，碰到低版本瀏覽器再降級(jí)進(jìn)行兼容處理，使其能正常瀏覽。這兩種思想的區(qū)別在于：1.漸進(jìn)增強(qiáng)是向上兼容，優(yōu)雅降級(jí)是向下兼容;2.漸進(jìn)增強(qiáng)是從簡(jiǎn)單到復(fù)雜，優(yōu)雅降級(jí)是從復(fù)雜到簡(jiǎn)單;3.漸進(jìn)增強(qiáng)關(guān)注的是內(nèi)容(保證核心內(nèi)容)，優(yōu)雅降級(jí)關(guān)注的是瀏覽體驗(yàn)(為了兼容低版本瀏覽器)作用DTD(DocumentTypeDefinition，文檔類型定義)是一系列的語法規(guī)則，用來定義XML或(X)HTML的文檔類型。瀏覽器會(huì)使用它來判斷文檔類型，決定何種協(xié)議來解析，以及切換瀏覽模式。DOCTYPE是用來聲明文檔類型和DTD規(guī)范的，一個(gè)主要的用途便是文件的合法性驗(yàn)證。如果文檔代碼不合法，那么瀏覽器解析時(shí)便會(huì)出現(xiàn)一些差錯(cuò)。HTML5的文檔類型聲明：(嚴(yán)格模式)的DTD包含所有HTML元素和屬性，但不包括展示性的和棄用的元素(如font)，它的文檔類型聲明："">標(biāo)準(zhǔn)模式與怪異模式怪異模式(QuirksMode)用于模擬舊瀏覽器的行為。早期的網(wǎng)站并不會(huì)遵循完整的規(guī)范，隨著瀏覽器支持越來越多的規(guī)范，在那些舊的瀏覽器中開發(fā)的頁面在顯示時(shí)會(huì)被破壞。為了向后兼容，瀏覽器發(fā)明了怪異模式，一行錯(cuò)誤或無效的DOCTYPE都會(huì)觸發(fā)怪異模式。瀏覽器使用文件開頭的DOCTYPE來決定用怪異模式處理或標(biāo)準(zhǔn)模式處理。DOCTYPE可以確保不同瀏覽器以相同的方式解析文檔，以及執(zhí)行相同的渲染模式。怪異模式與標(biāo)準(zhǔn)模式的主要區(qū)別：1.怪異模式的寬度和高度會(huì)包含padding和border。標(biāo)準(zhǔn)模式不包含，標(biāo)準(zhǔn)模式下可以通過設(shè)置box-sizing:border-box將標(biāo)準(zhǔn)盒模型轉(zhuǎn)化成怪異模式下的盒模型。2.怪異模式下，當(dāng)內(nèi)容超出容器高度時(shí)，會(huì)將容器拉伸，而不是溢出。3.怪異模式下，在表格中的字體樣式(如font-size)不會(huì)繼承。4.怪異模式下顏色值必須使用十六進(jìn)制標(biāo)記法。3.語義化HTML5中的語義化就是讓元素、屬性或?qū)傩灾涤泻x，更準(zhǔn)確地標(biāo)記特定類型的內(nèi)容。對(duì)元素語義化的目的是為了讓元素的語義和呈現(xiàn)分離，元素只負(fù)責(zé)文檔內(nèi)容的結(jié)構(gòu)與含義，而CSS樣式控制內(nèi)容的呈現(xiàn)，像元素，沒有語義但卻能將字體變粗，這類元素違背了語義化的目的，將會(huì)被廢棄。優(yōu)點(diǎn)·使得HTML文檔結(jié)構(gòu)清晰、布局合理、主體突出、可讀性更強(qiáng)?！び欣赟EO，搜索引擎根據(jù)標(biāo)簽來確定上下文和各個(gè)關(guān)鍵字的權(quán)重。·方便其他設(shè)備解析，如盲人閱讀器根據(jù)語義渲染網(wǎng)頁?！び欣陂_發(fā)和維護(hù)，語義化更具可讀性，代碼更好維護(hù)，與CSS3關(guān)系更和諧。語義化標(biāo)簽·定義文檔的頁眉區(qū)域,應(yīng)作為介紹內(nèi)容或者導(dǎo)航鏈接欄的容器;·footer內(nèi)容的頁腳，通常包含該章節(jié)作者、版權(quán)數(shù)據(jù)或者與文檔相關(guān)的鏈接等信息;·article文檔、頁面、應(yīng)用或網(wǎng)站中的獨(dú)立結(jié)構(gòu)，是可獨(dú)立分配的、可復(fù)用的結(jié)構(gòu)，如在發(fā)布中，它可能是論壇帖子、雜志或新聞文章、博客、用戶提交的評(píng)論、交互式組件，或者其他獨(dú)立的內(nèi)容項(xiàng)目;·nav描述一個(gè)含有多個(gè)超鏈接的區(qū)域，該區(qū)域包含跳轉(zhuǎn)到其他頁面或頁面內(nèi)部其他部分的鏈接列表;·section表示文檔中的一個(gè)區(qū)域(或節(jié))，比如，內(nèi)容中的一個(gè)專題組;·main定義文檔的主要內(nèi)容，該內(nèi)容在文檔中應(yīng)當(dāng)是獨(dú)一無二的，不包含任何在文檔中重復(fù)的內(nèi)容，比如側(cè)邊欄，導(dǎo)航欄鏈接，版權(quán)信息，網(wǎng)站logo，搜索框(搜索框作為文檔的主要內(nèi)容);·aside表示一個(gè)和其余頁面內(nèi)容幾乎無關(guān)的部分，被認(rèn)為是獨(dú)立于該內(nèi)容的一部分且可以被單獨(dú)的拆分出來而不會(huì)影響整體。通常表現(xiàn)為側(cè)邊欄或嵌入內(nèi)容。4.超鏈接偽類:link、:visited、:active和:hover的聲明順序是怎樣的?:link表示未訪問的鏈接狀態(tài);:visited表示已訪問狀態(tài);:active表示激活狀態(tài)(鼠標(biāo)按下);:hover表示懸停狀態(tài)。推薦順序是LVHA，即:link:visited:hover:active。理由如下：·當(dāng)鼠標(biāo)懸停在未訪問的鏈接上時(shí)，:link和:hover都會(huì)命中，如果:hover在:link之前聲明，那么(:hover)就會(huì)被覆蓋;·當(dāng)鼠標(biāo)懸停在已訪問的連接上時(shí)，:visited和:hover都會(huì)命中，如果:hover在:visited之前聲明，那么(:hover)就會(huì)被覆蓋;·當(dāng)鼠標(biāo)單擊鏈接時(shí)，:active和:hover都會(huì)命中，我們大多是想讓:hover只在懸停時(shí)展示樣式，按下鼠標(biāo)時(shí)使用:active樣式，因此:active在:hover之后聲明;·綜上，:hover應(yīng)在:link和:visited之后，在:active之前，因此active在最后。而:link和:visited兩者的順序無所謂，互不影響。常見的長(zhǎng)度單位CSS中除了px長(zhǎng)度單位之外，還有下面幾個(gè)長(zhǎng)度單位：·pc六分之一英寸，1pc=12pt=1/6*1in=16px;·pt一磅，72分之一英寸。1pt=1/12_1pc=1/72_1in≈;·in一英寸，1in=;·ex在含有“X”字母的字體中，它是該字體的小寫字母的高度。對(duì)于很多字體來說，1ex≈;·em1em等于父級(jí)元素的字體大小，2em就是父級(jí)元素字體大小的二倍;·rem當(dāng)用在根元素()的font-size上面時(shí)，它代表了它的初始值;·ch代表元素所用字體font中“0”這一字形的寬度;·vh1vh相當(dāng)于視口高度的1%，100vh就是視口的高度;·vw1vw相當(dāng)于視口寬度的1%，100vw就是視口的寬度;·vmax視口高度vw和寬度vh兩者中的最小值·vmin視口高度vw和寬度vh兩種中的最大值;·%相對(duì)于父級(jí)元素的大小來確定;參考：CSS[1]CSSpercentage[2]6.事件對(duì)象冒泡與捕獲事件冒泡與捕獲是事件處理的兩種機(jī)制，主要描述當(dāng)在一個(gè)元素上有兩個(gè)相同類型的事件處理器被激活會(huì)發(fā)生什么。在點(diǎn)擊子元素時(shí)，瀏覽器運(yùn)行了兩種不同的階段：捕獲階段和冒泡階段。捕獲階段的行為：·瀏覽器檢查元素的最外層祖先，是否在捕獲階段中注冊(cè)了一個(gè)onclick事件處理程序，如果是，則運(yùn)行它;·然后，它移動(dòng)到中單擊元素的下一個(gè)祖先元素，并執(zhí)行相同的操作，然后是單擊元素再下一個(gè)祖先元素，依此類推，直到到達(dá)實(shí)際點(diǎn)擊的元素;而冒泡與捕獲恰恰相反：·瀏覽器檢查實(shí)際點(diǎn)擊的元素是否在冒泡階段中注冊(cè)了一個(gè)onclick事件處理程序，如果是，則運(yùn)行它;·然后它移動(dòng)到下一個(gè)直接的祖先元素，并做同樣的事情，然后是下一個(gè)，等等，直到它到達(dá)元素;而現(xiàn)代瀏覽器在默認(rèn)情況下，所有事件處理程序都在冒泡階段進(jìn)行注冊(cè)。因此上面代碼在點(diǎn)擊子元素時(shí)會(huì)先執(zhí)行子元素綁定的事件，然后向上冒泡，觸發(fā)父元素綁定的事件。addEventListener函數(shù)的第三個(gè)參數(shù)是個(gè)布爾值。含義：·當(dāng)布爾值是false時(shí)(這也是默認(rèn)值)，表示向上冒泡觸發(fā)事件;·當(dāng)布爾值是true時(shí)，表示向下捕獲觸發(fā)事件;不能冒泡的事件有些事件是不會(huì)冒泡的。比如：·blur元素失去焦點(diǎn)時(shí)觸發(fā)，focusout事件也是失去焦點(diǎn)時(shí)觸發(fā)，但可以冒泡;·focus元素獲取焦點(diǎn)時(shí)觸發(fā);·mouseenter鼠標(biāo)移動(dòng)到元素上時(shí)會(huì)觸發(fā)該事件，與之對(duì)應(yīng)的是mouseover事件，但會(huì)冒泡;·mouseleave鼠標(biāo)離開元素時(shí)觸發(fā)，與之對(duì)應(yīng)的是mouseout，但會(huì)冒泡;事件冒泡可以讓我們利用事件委托，尤其是處理大量子元素時(shí)，如果給每個(gè)子元素都綁定事件，這是不優(yōu)雅的，可以將事件綁定到父元素上，并讓子節(jié)點(diǎn)上發(fā)生的事件冒泡到父節(jié)點(diǎn)上，利用屬性可以獲取到當(dāng)前觸發(fā)事件的子元素。事件對(duì)象中的方法·stopPropagation()阻止事件冒泡，當(dāng)設(shè)置后，點(diǎn)擊該元素時(shí)父元素綁定的事件就不會(huì)再觸發(fā);·preventDefault()阻止默認(rèn)事件的發(fā)生;·stopImmediatePropagation()它用來阻止監(jiān)聽同一事件的其他事件監(jiān)聽器被調(diào)用以及阻止事件冒泡，比如給同一個(gè)div元素綁定多個(gè)click事件(使用addEventListener方法可以注冊(cè)多個(gè))，當(dāng)在第二個(gè)事件函數(shù)中調(diào)用stopImmediatePropagation方法時(shí)，點(diǎn)擊div元素時(shí)，后面注冊(cè)的click將不會(huì)被觸發(fā)，而且還會(huì)阻止事件冒泡;比如下面的例子，給p綁定多個(gè)click事件，在第二個(gè)事件函數(shù)中調(diào)用stopImmediatePropagation，第三個(gè)click事件就不會(huì)觸發(fā)，因?yàn)橐沧柚沽嗣芭?，因此父元素的click事件也不會(huì)觸發(fā)。paragraph


("div").addEventListener("click",(event)=>{


alert("我是div元素,我是p元素的上層元素");


//p元素的click事件沒有向上冒泡，該函數(shù)不會(huì)被執(zhí)行


},false);


constp=('p')


("click",(event)=>{


alert("我是p元素上被綁定的第一個(gè)監(jiān)聽函數(shù)");


},false);


("click",(event)=>{


alert("我是p元素上被綁定的第二個(gè)監(jiān)聽函數(shù)");


();


//執(zhí)行stopImmediatePropagation方法，阻止click事件冒泡，并且阻止p元素上綁定的其他click
事件的事件監(jiān)聽函數(shù)的執(zhí)行.


},false);


("click",(event)=>{


alert("我是p元素上被綁定的第三個(gè)監(jiān)聽函數(shù)");


//該監(jiān)聽函數(shù)排在上個(gè)函數(shù)后面，該函數(shù)不會(huì)被執(zhí)行


},false);


“在IE瀏覽器中，使用也可以取消事件冒泡;使用也能阻止默認(rèn)事件的發(fā)生。target與currentTargettarget屬性指向的是事件目標(biāo)，而currentTarget屬性指向的是正在處理當(dāng)前事件的對(duì)象，它總是指向事件綁定的元素。而target指向的可能不是定義時(shí)的事件目標(biāo)。例如：('click',(e)=>{();},false);可能指向div元素，也可能指向它的子元素。而總是指向div元素。以上就是小編今天為大家分享的關(guān)于參加Web前端面試的常見面試題匯總的文章，希望本篇文章能夠?qū)φ郎?zhǔn)備參加前端面試的小伙伴們有所幫助，想要了解更多Web前端知識(shí)記得關(guān)注北大青鳥Web前端培訓(xùn)官網(wǎng)，最后祝愿小伙伴們工作順利，成為一名優(yōu)秀的Web前端工程師。參考資料[1]CSSlength:#/zh-CN/docs/Web/CSS/length[2]CSSpercentage:#/zh-CN/docs/Web/CSS/percentage

從前端開發(fā)要掌握的技術(shù)來講，前面已經(jīng)說得差不多了。我主要想從面試者的角度談一談看法。如果是我面試，就給應(yīng)聘者一個(gè)開放的項(xiàng)目，可以提供服務(wù)器端API或數(shù)據(jù)服務(wù)，限定一周時(shí)間，這叫試做。然后，根據(jù)評(píng)審確定入圍的人，再面試。面試可以圍繞項(xiàng)目展開，首先讓面試者圍繞HTML、CSS和JavaScript講一講設(shè)計(jì)思路、實(shí)現(xiàn)過程、遇到了什么困難，如何解決的，最終實(shí)現(xiàn)方案與設(shè)計(jì)有什么出入，有什么收獲，等等。然后再根據(jù)項(xiàng)目中的不足有針對(duì)性地提問測(cè)試，考察面試者的實(shí)際經(jīng)驗(yàn)和解決問題的能力。解決實(shí)際問題的能力最重要。總之，實(shí)際的開發(fā)工作不同于考試，考試設(shè)計(jì)得越接近實(shí)際工作需要，結(jié)果才可能越真實(shí)，才可能真正招到想要的人。

面試其實(shí)就是一個(gè)不斷選擇與被選擇的過程(不知道說的對(duì)不對(duì))。不同公司的面試方式都有所不同，大多數(shù)人都有過多次面試的經(jīng)歷，前端面試也不外乎那么一些啦(好像有些廢話的感覺)。

面試之前的小故事

HR會(huì)打電話過來我是××公司的，在××上看到你投到我們公司的簡(jiǎn)歷，問你何時(shí)候有空約一個(gè)唄，然后說就星期*吧，既然都打電話請(qǐng)我面試了，好吧，那就約一個(gè)!

然后有些人會(huì)精心準(zhǔn)備，不停刷面試題，整夜整夜的看著HTML/JS/CSS知識(shí)點(diǎn)，還有那些最新的、時(shí)髦的技術(shù)，看看到時(shí)候能不能唬住面試官;而有些人對(duì)自己胸有成竹，哥那么多年的前端經(jīng)驗(yàn)了，啥項(xiàng)目沒有經(jīng)歷過，不就一個(gè)面試，怕啥呢。

很快或者很慢的來到那天。你打扮的清清爽爽漂漂亮亮的，打扮的好會(huì)有加分不，沒錯(cuò)，第一印象也是挺重要的。途中有些人可能會(huì)還一直想著面試官會(huì)問啥題目呢，那啥**屬性是什么來著呢，再次拿出手機(jī)默默的看起資料;有些人可能就會(huì)想著公司不知道妹子多不多漂亮不呢，環(huán)境和福利不知道咋樣，最好別碰到傻逼一樣的面試官哎，不然這以后咋相處好呢。

來到公司，大小公司大家都見多了嘛，也是得看發(fā)展是吧，我們也不是膚淺的人，見到前臺(tái)妹妹，喲，還不錯(cuò)哦。領(lǐng)你進(jìn)會(huì)議室里，讓你稍等一下，她去通知面試官，過了一會(huì)兒，不是面試官進(jìn)來，那就是前臺(tái)妹妹給您送來一杯水。面試官踱步向前，咦~，我是繼續(xù)坐著呢，還是站著呢，還是站起來顯禮貌一些嗯。

給面試的一般會(huì)是Team Leader或者非常資深的工程師。首先會(huì)讓你自我介紹下，然后巴拉巴拉介紹自己，途中或者聊到面試官喜歡的`部分那就會(huì)中斷問幾個(gè)問題吧，介紹完自己，就進(jìn)入正式的戰(zhàn)斗了吧，一般會(huì)有2-3輪的回合。遇知戰(zhàn)斗詳情，請(qǐng)聽下回分解。

哈哈， 開玩笑。以上瞎編胡造，如有雷同，純屬巧合。

這里就只談?wù)勄岸思夹g(shù)的戰(zhàn)斗回合吧，寫的不好，請(qǐng)多見諒。

普通型

面試中問題會(huì)比較的零碎，html/js/css肯定都會(huì)有涉及。知識(shí)點(diǎn)不會(huì)有太大的規(guī)律，可能幾個(gè)公司面試下來你遇到的問題一個(gè)都不帶重復(fù)的。哎，前端的知識(shí)點(diǎn)就是乍一看深似海，仔細(xì)一看深似黑洞啊。問題好的話，一方面考察了面試人對(duì)前端接觸的廣度，深度的話也可以從中接觸到一些。因?yàn)槊嬖嚨臅r(shí)間有限，其實(shí)也非?？简?yàn)面試官對(duì)一個(gè)人的洞察能力。

一般如果不是應(yīng)屆生的話，也就是會(huì)跟你交流你之前的項(xiàng)目，你擔(dān)當(dāng)?shù)慕巧?，你遇到的難題，怎么解決問題，用的框架，與其他工程師的交流溝通協(xié)作等等。 這些其實(shí)你心里肯定是有答案的(可能也有懵逼的)，就看你的表達(dá)，能不能對(duì)上面試官的胃口。

進(jìn)階型

除了基本的問題，面試中會(huì)有一些明顯設(shè)計(jì)過的題目。針對(duì)某幾個(gè)知識(shí)點(diǎn)，或讓你手寫代碼，或讓你提供算法或思路。如果之前沒有遇到過這類問題的話其實(shí)一下子真的挺難回答，或者直接懵逼了，或者回答不出面試官滿意的答案。這其實(shí)對(duì)工程師的要求也是比較的高，不能只是單純的切切頁面，用用插件，需要對(duì)某一類問題或者模式或者算法有深入的了解，對(duì)問題的解決思路有很好的把握。

算法可能不是前端工程師的長(zhǎng)項(xiàng)，但作為優(yōu)秀的工程師，對(duì)算法的了解應(yīng)該會(huì)只深不淺。

這種面試的題目既提現(xiàn)了公司對(duì)面試者的要求，也相對(duì)而言的會(huì)有所體現(xiàn)公司的水平。

出題型

題目比較的綜合，會(huì)通過郵件發(fā)給你，或者有專門的頁面提供，在面試之前讓你2-3天的時(shí)間做完。題目可能是很有名的某一類交互，或游戲，或頁面，或公司自己出的一類小東西。

因?yàn)榉钱?dāng)場(chǎng)面試，所有有比較充足的時(shí)間來思考，來寫一些代碼。一般都會(huì)完成，所以其實(shí)比較的關(guān)注點(diǎn)就是對(duì)代碼的質(zhì)量，通過代碼來考察面試者的思路以及代碼**慣等等。

其未知性也比較多，可能因?yàn)橛行〇|西可能沒法通過代碼來傳遞，溝通，其他的思路，或者題目的缺陷等等。所以這只是面試途中的一個(gè)小部分，大多數(shù)人其實(shí)都會(huì)能做的很好。

直接上機(jī)型

還有的就會(huì)直接給你某一個(gè)交互，或者一張靜態(tài)頁面，或者一個(gè)布局等等，直接給你臺(tái)電腦讓你當(dāng)場(chǎng)寫出來。寫完之后再有所交流，說說自己的想法或者接著談其他的。

當(dāng)你寫代碼時(shí)候，其實(shí)暴露的東西也挺多的。你寫的**慣，思路清晰不清晰，對(duì)代碼的熟悉程度，可能你平時(shí)都是ctrl C + V的，這時(shí)候你咋辦呢。

這個(gè)可能遇到的比較少，但也會(huì)是有的。

結(jié)束語

許多面試可能都會(huì)結(jié)合以上的幾種類型，多方面的考察面試者，其實(shí)，大家都懂的。