前端復(fù)試一般面試什么？前端面試二面聊什么問題

大家好，關(guān)于前端復(fù)試一般面試什么很多朋友都還不太明白，今天小編就來為大家分享關(guān)于前端面試二面聊什么問題的知識，希望對各位有所幫助！

前端面試有幾輪面試

一般公司技術(shù)面試分2-3輪，1面、2面注重基礎(chǔ)，3面注重綜合能力。一般對于社招來說1面、2面是面試部門的高工，3面是前端負責(zé)人或研發(fā)負責(zé)人。對于校招基本也差不太多，只是面試官是隨機的，面試難度相對下降，同時更偏向基礎(chǔ)。當(dāng)然也有一些特殊情況會有更多輪面試，但流程上基本都差不多。

前端總監(jiān)面試一般會問什么

你好，在前端總監(jiān)的面試中，面試官可能會問以下幾類問題：

1.技術(shù)能力問題：

-請介紹你的前端技術(shù)棧和經(jīng)驗。

-你熟悉哪些前端框架和工具？

-如何進行前端性能優(yōu)化？

-你對前端的最新技術(shù)趨勢有了解嗎？

2.項目經(jīng)驗問題：

-請分享你在前端方面的項目經(jīng)驗。

-你在項目中遇到過哪些技術(shù)難題，如何解決的？

-你如何進行團隊協(xié)作和項目管理？

3.面試案例問題：

-請描述一個你在前端方面的成功案例。

-如果你遇到一個復(fù)雜的前端問題，你會如何處理？

4.領(lǐng)導(dǎo)能力問題：

-你如何帶領(lǐng)團隊進行前端開發(fā)？你有哪些團隊管理經(jīng)驗？

-你如何評估團隊成員的技術(shù)能力和工作表現(xiàn)？

-你如何處理團隊中的沖突和問題？

5.自我評價問題：

-你認為自己在前端方面的優(yōu)勢是什么？

-你在前端方面還有哪些需要提升的地方？

-你為什么對擔(dān)任前端總監(jiān)這個職位感興趣？

除了以上問題，面試官還可能會根據(jù)具體情況提出一些行為面試問題，例如：

-請描述一個你在工作中遇到的挑戰(zhàn)，以及你是如何應(yīng)對的？

-請分享一個你在工作中的失敗經(jīng)歷，以及你是如何從中吸取教訓(xùn)的？

在面試過程中，還可能進行一些編程或設(shè)計題目的考察，以測試候選人的實際能力。

如果你是前端開發(fā)的面試官，你最有可能問應(yīng)聘者哪5個問題

問題一：講一下用戶從前端發(fā)起一次請求，到用戶在頁面上看到數(shù)據(jù)，中間發(fā)生了什么事情。

這個主要是考面試者對web應(yīng)用有一個大體上的認識，當(dāng)然是越詳細越好了，能夠答得更詳細，說明這個面試者對整個網(wǎng)頁的運行有一定的認識與思考，而不是只會寫需求。

問題二：問一下Http協(xié)議或者Tcp協(xié)議的一些知識點

計算機基礎(chǔ)，基礎(chǔ)越好的可塑性越高，別說這些工作上用不上，我面過的高級工程師沒幾個答不上的。

問題三：問一個前端比較流行的框架，例如React或者VUE

確定下找過來能干活，用的框架跟我們公司用的比較契合。

問題四：講一個熟悉的項目以及其中遇到的挑戰(zhàn)

這個主要看這個人有沒有真才實學(xué)，對自己做的項目熟不熟悉，有沒有更高層次的思考。

問題五：來我們公司是為了什么？

我喜歡有目的的人，無論是為了錢還是為了提升自己還是為了鍍金，怎么回答其實都可以，就當(dāng)聊聊天。

前端面試都要寫面試題嗎

不一定。前端面試屬于初試，一般考官以被考人的相貌舉止談吐為主。而要求寫面試題的往往是初試過了，考完這關(guān)（寫面試題），基本就通過了。

你遇到的前端面試題都有什么

HTML面試題

1.XHTML和HTML有什么區(qū)別

HTML是一種基本的WEB網(wǎng)頁設(shè)計語言，XHTML是一個基于XML的置標語言最主要的不同：XHTML元素必須被正確地嵌套。XHTML元素必須被關(guān)閉。標簽名必須用小寫字母。XHTML文檔必須擁有根元素。

2.前端頁面有哪三層構(gòu)成，分別是什么?作用是什么?

結(jié)構(gòu)層Html表示層CSS行為層js;3.你做的頁面在哪些流覽器測試過?這些瀏覽器的內(nèi)核分別是什么?Ie(Ie內(nèi)核)火狐（Gecko）谷歌（webkit,Blink）opera(Presto),Safari(wbkit)

4.什么是語義化的HTML?

直觀的認識標簽對于搜索引擎的抓取有好處，用正確的標簽做正確的事情！html語義化就是讓頁面的內(nèi)容結(jié)構(gòu)化，便于對瀏覽器、搜索引擎解析；在沒有樣式CCS情況下也以一種文檔格式顯示，并且是容易閱讀的。搜索引擎的爬蟲依賴于標記來確定上下文和各個關(guān)鍵字的權(quán)重，利于SEO。使閱讀源代碼的人對網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護理解。

5.HTML5為什么只需要寫!DOCTYPEHTML？

HTML5不基于SGML，因此不需要對DTD進行引用，但是需要doctype來規(guī)范瀏覽器的行為（讓瀏覽器按照它們應(yīng)該的方式來運行）；而HTML4.01基于SGML,所以需要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。

6.Doctype作用？標準模式與兼容模式各有什么區(qū)別?

!DOCTYPE聲明位于位于HTML文檔中的第一行，處于html標簽之前。告知瀏覽器的解析器用什么文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會導(dǎo)致文檔以兼容模式呈現(xiàn)。標準模式的排版和JS運作模式都是以該瀏覽器支持的最高標準運行。在兼容模式中，頁面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點無法工作。

7.html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區(qū)分HTML和HTML5？

HTML5現(xiàn)在已經(jīng)不是SGML的子集，主要是關(guān)于圖像，位置，存儲，多任務(wù)等功能的增加。繪畫canvas用于媒介回放的video和audio元素本地離線存儲localStorage長期存儲數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失；sessionStorage的數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除語意化更好的內(nèi)容元素，比如article、footer、header、nav、section表單控件，calendar、date、time、email、url、search新的技術(shù)webworker,websockt,Geolocation移除的元素純表現(xiàn)的元素：basefont，big，center，font,s，strike，tt，u；對可用性產(chǎn)生負面影響的元素：frame，frameset，noframes；支持HTML5新標簽：IE8/IE7/IE6支持通過document.createElement方法產(chǎn)生的標簽，可以利用這一特性讓這些瀏覽器支持HTML5新標簽，瀏覽器支持新標簽后，還需要添加標簽?zāi)J的樣式：

8.請描述一下cookies，sessionStorage和localStorage的區(qū)別？

cookie在瀏覽器和服務(wù)器間來回傳遞。sessionStorage和localStorage不會sessionStorage和localStorage的存儲空間更大；sessionStorage和localStorage有更多豐富易用的接口；sessionStorage和localStorage各自獨立的存儲空間；

9.如何實現(xiàn)瀏覽器內(nèi)多個標簽頁之間的通信?

調(diào)用localstorge、cookies等本地存儲方式

CSS面試題

1.簡要說一下CSS的元素分類

塊級元素：div,p,h1,form,ul,li;行內(nèi)元素:span>,a,label,input,img,strong,em;

2.CSS隱藏元素的幾種方法（至少說出三種）

Opacity:元素本身依然占據(jù)它自己的位置并對網(wǎng)頁的布局起作用。它也將響應(yīng)用戶交互;Visibility:與opacity唯一不同的是它不會響應(yīng)任何用戶交互。此外，元素在讀屏軟件中也會被隱藏;Display:display設(shè)為none任何對該元素直接打用戶交互操作都不可能生效。此外，讀屏軟件也不會讀到元素的內(nèi)容。這種方式產(chǎn)生的效果就像元素完全不存在;Position:不會影響布局，能讓元素保持可以操作;Clip-path:clip-path屬性還沒有在IE或者Edge下被完全支持。如果要在你的clip-path中使用外部的SVG文件，瀏覽器支持度還要低;

3.CSS清除浮動的幾種方法（至少兩種）

使用帶clear屬性的空元素使用CSS的overflow屬性；使用CSS的:after偽元素；使用鄰接元素處理；

4.CSS居中（包括水平居中和垂直居中）

內(nèi)聯(lián)元素居中方案

水平居中設(shè)置：1.行內(nèi)元素

設(shè)置text-align:center；

2.Flex布局

設(shè)置display:flex;justify-content:center;(靈活運用,支持Chroime，F(xiàn)irefox，IE9+)

垂直居中設(shè)置：1.父元素高度確定的單行文本（內(nèi)聯(lián)元素）

設(shè)置height=line-height；

2.父元素高度確定的多行文本（內(nèi)聯(lián)元素）

a:插入table（插入方法和水平居中一樣），然后設(shè)置vertical-align:middle；b:先設(shè)置display:table-cell再設(shè)置vertical-align:middle；塊級元素居中方案

水平居中設(shè)置：1.定寬塊狀元素

設(shè)置左右margin值為auto；

2.不定寬塊狀元素

a:在元素外加入table標簽（完整的，包括table、tbody、tr、td），該元素寫在td內(nèi)，然后設(shè)置margin的值為auto；b:給該元素設(shè)置displa:inine方法；c:父元素設(shè)置position:relative和left:50%，子元素設(shè)置position:relative和left:50%；

垂直居中設(shè)置：

使用position:absolute（fixed）,設(shè)置left、top、margin-left、margin-top的屬性;利用position:fixed（absolute）屬性，margin:auto這個必須不要忘記了;利用display:table-cell屬性使內(nèi)容垂直居中;使用css3的新屬性transform:translate(x,y)屬性;使用:before元素;

5.寫出幾種IE6BUG的解決方法

雙邊距BUGfloat引起的使用display3像素問題使用float引起的使用dislpay:inline-3px超鏈接hover點擊后失效使用正確的書寫順序linkvisitedhoveractiveIez-index問題給父級添加position:relativePng透明使用js代碼改Min-height最小高度！Important解決’select在ie6下遮蓋使用iframe嵌套為什么沒有辦法定義1px左右的寬度容器（IE6默認的行高造成的，使用over:hidden,zoom:0.08line-height:1px）

6.對于SASS或是Less的了解程度？喜歡那個？

語法介紹

7.Bootstrap了解程度

特點，排版，插件的使用;

8.頁面導(dǎo)入樣式時，使用link和@import有什么區(qū)別？

link屬于XHTML標簽，除了加載CSS外，還能用于定義RSS,定義rel連接屬性等作用；而@import是CSS提供的，只能用于加載CSS;頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;import是CSS2.1提出的，只在IE5以上才能被識別，而link是XHTML標簽，無兼容問題;

9.介紹一下CSS的盒子模型？

有兩種，IE盒子模型、標準W3C盒子模型；IE的content部分包含了border和pading;盒模型：內(nèi)容(content)、填充(padding)、邊界(margin)、邊框(border).

10.CSS選擇符有哪些？哪些屬性可以繼承？優(yōu)先級算法如何計算？CSS3新增偽類有那些？

id選擇器（#myid）類選擇器（.myclassname）標簽選擇器（div,h1,p）相鄰選擇器（h1+p）子選擇器（ul>li）后代選擇器（lia）通配符選擇器（*）屬性選擇器（a[rel=“external”]）偽類選擇器（a:hover,li:nth–child）可繼承的樣式：font-sizefont-familycolor,ULLIDLDDDT;不可繼承的樣式：borderpaddingmarginwidthheight;優(yōu)先級就近原則，同權(quán)重情況下樣式定義最近者為準;優(yōu)先級為:JavaScript12!important>id>class>tagimportant比內(nèi)聯(lián)優(yōu)先級高

11.CSS3有哪些新特性？

CSS3實現(xiàn)圓角（border-radius:8px），陰影（box-shadow:10px），對文字加特效（text-shadow、），線性漸變（gradient），旋轉(zhuǎn)（transform）transform:rotate(9deg)scale(0.85,0.90)translate(0px,-30px)skew(-9deg,0deg);//旋轉(zhuǎn),縮放,定位,傾斜增加了更多的CSS選擇器多背景rgba

JavaScript面試題

1.javascript的typeof返回哪些數(shù)據(jù)類型

Ｏbjectnumberfunctionbooleanunderfind;

2.例舉3種強制類型轉(zhuǎn)換和2種隱式類型轉(zhuǎn)換?

強制（parseInt,parseFloat,number）隱式（==–===）；

3.數(shù)組方法pop()push()unshift()shift()

Push()尾部添加pop()尾部刪除Unshift()頭部添加shift()頭部刪除

4.ajax請求的時候get和post方式的區(qū)別?

一個在url后面一個放在虛擬載體里面有大小限制安全問題應(yīng)用不同一個是論壇等只需要請求的，一個是類似修改密碼的;

5.call和apply的區(qū)別

Object.call(this,obj1,obj2,obj3)Object.apply(this,arguments)

6.ajax請求時，如何解釋json數(shù)據(jù)

使用evalparse,鑒于安全性考慮使用parse更靠譜;

7.事件委托是什么

讓利用事件冒泡的原理，讓自己的所觸發(fā)的事件，讓他的父元素代替執(zhí)行！

8.閉包是什么，有什么特性，對頁面有什么影響?簡要介紹你理解的閉包

閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)。

9.添加刪除替換插入到某個接點的方法

obj.appendChidl()obj.innersetBeforeobj.replaceChildobj.removeChild10.說一下什么是javascript的同源策略？

一段腳本只能讀取來自于同一來源的窗口和文檔的屬性，這里的同一來源指的是主機名、協(xié)議和端口號的組合

11.編寫一個b繼承a的方法;

JavaScript1234567891011functionA(name){this.name=name;this.sayHello=function(){alert(this.name+”sayHello!”);};}functionB(name,id){this.temp=A;this.temp(name);//相當(dāng)于newA();deletethis.temp;this.id=id;this.checkId=function(ID){alert(this.id==ID)};}

12.如何阻止事件冒泡和默認事件

JavaScript12345678functionstopBubble(e){if(e&&e.stopPropagation)e.stopPropagation()elsewindow.event.cancelBubble=true}returnfalse

13.下面程序執(zhí)行后彈出什么樣的結(jié)果?

JavaScript12345678910111213141516171819functionfn(){this.a=0;this.b=function(){alert(this.a)}}fn.prototype={b:function(){this.a=20;alert(this.a);},c:function(){this.a=30;alert(this.a);}}varmyfn=newfn();myfn.b();myfn.c();

14.談?wù)凾his對象的理解。

this是js的一個關(guān)鍵字，隨著函數(shù)使用場合不同，this的值會發(fā)生變化。但是有一個總原則，那就是this指的是調(diào)用函數(shù)的那個對象。this一般情況下：是全局對象Global。作為方法調(diào)用，那么this就是指這個對象

15.下面程序的結(jié)果

JavaScript1234567891011functionfun(n,o){console.log(o)return{fun:function(m){returnfun(m,n);}};}vara=fun(0);a.fun(1);a.fun(2);a.fun(3);varb=fun(0).fun(1).fun(2).fun(3);varc=fun(0).fun(1);c.fun(2);c.fun(3);

//答案：

//a:undefined,0,0,0//b:undefined,0,1,2//c:undefined,0,1,1

16.下面程序的輸出結(jié)果

JavaScript123456789varname='World!';(function(){if(typeofname==='undefined'){varname='Jack';console.log('Goodbye'+name);}else{console.log('Hello'+name);}})();

17.了解Node么？Node的使用場景都有哪些？

高并發(fā)、聊天、實時消息推送

18.介紹下你最常用的一款框架

jquery,rn,angular等;

19.對于前端自動化構(gòu)建工具有了解嗎？簡單介紹一下

Gulp,Grunt等；

20.介紹一下你了解的后端語言以及掌握程度

其它

1.對Node的優(yōu)點和缺點提出了自己的看法？

(優(yōu)點）因為Node是基于事件驅(qū)動和無阻塞的，所以非常適合處理并發(fā)請求，因此構(gòu)建在Node上的代理服務(wù)器相比其他技術(shù)實現(xiàn)（如Ruby）的服務(wù)器表現(xiàn)要好得多。此外，與Node代理服務(wù)器交互的客戶端代碼是由javascript語言編寫的，因此客戶端和服務(wù)器端都用同一種語言編寫，這是非常美妙的事情。（缺點）Node是一個相對新的開源項目，所以不太穩(wěn)定，它總是一直在變，而且缺少足夠多的第三方庫支持。看起來，就像是Ruby/Rails當(dāng)年的樣子。

2.你有哪些性能優(yōu)化的方法？

（1）減少http請求次數(shù)：CSSSprites,JS、CSS源碼壓縮、圖片大小控制合適；網(wǎng)頁Gzip，CDN托管，data緩存，圖片服務(wù)器。（2）前端模板JS+數(shù)據(jù)，減少由于HTML標簽導(dǎo)致的帶寬浪費，前端用變量保存AJAX請求結(jié)果，每次操作本地變量，不用請求，減少請求次數(shù)（3）用innerHTML代替DOM操作，減少DOM操作次數(shù)，優(yōu)化javascript性能。（4）當(dāng)需要設(shè)置的樣式很多時設(shè)置className而不是直接操作style。（5）少用全局變量、緩存DOM節(jié)點查找的結(jié)果。減少IO讀取操作。（6）避免使用CSSExpression（css表達式)又稱Dynamicproperties(動態(tài)屬性)。（7）圖片預(yù)加載，將樣式表放在頂部，將腳本放在底部加上時間戳。（8）避免在頁面的主體布局中使用table，table要等其中的內(nèi)容完全下載之后才會顯示出來，顯示div+css布局慢。對普通的網(wǎng)站有一個統(tǒng)一的思路，就是盡量向前端優(yōu)化、減少數(shù)據(jù)庫操作、減少磁盤IO。向前端優(yōu)化指的是，在不影響功能和體驗的情況下，能在瀏覽器執(zhí)行的不要在服務(wù)端執(zhí)行，能在緩存服務(wù)器上直接返回的不要到應(yīng)用服務(wù)器，程序能直接取得的結(jié)果不要到外部取得，本機內(nèi)能取得的數(shù)據(jù)不要到遠程取，內(nèi)存能取到的不要到磁盤取，緩存中有的不要去數(shù)據(jù)庫查詢。減少數(shù)據(jù)庫操作指減少更新次數(shù)、緩存結(jié)果減少查詢次數(shù)、將數(shù)據(jù)庫執(zhí)行的操作盡可能的讓你的程序完成（例如join查詢），減少磁盤IO指盡量不使用文件系統(tǒng)作為緩存、減少讀寫文件次數(shù)等。程序優(yōu)化永遠要優(yōu)化慢的部分，換語言是無法“優(yōu)化”的。

3.http狀態(tài)碼有那些？分別代表是什么意思？100-199用于指定客戶端應(yīng)相應(yīng)的某些動作。200-299用于表示請求成功。300-399用于已經(jīng)移動的文件并且常被包含在定位頭信息中指定新的地址信息。400-499用于指出客戶端的錯誤。4001、語義有誤，當(dāng)前請求無法被服務(wù)器理解。401當(dāng)前請求需要用戶驗證403服務(wù)器已經(jīng)理解請求，但是拒絕執(zhí)行它。500-599用于支持服務(wù)器錯誤。503–服務(wù)不可用4.一個頁面從輸入URL到頁面加載顯示完成，這個過程中都發(fā)生了什么？（流程說的越詳細越好）

查找瀏覽器緩存DNS解析、查找該域名對應(yīng)的IP地址、重定向（301）、發(fā)出第二個GET請求進行HTTP協(xié)議會話客戶端發(fā)送報頭(請求報頭)文檔開始下載文檔樹建立，根據(jù)標記請求所需指定MIME類型的文件文件顯示瀏覽器這邊做的工作大致分為以下幾步：加載：根據(jù)請求的URL進行域名解析，向服務(wù)器發(fā)起請求，接收文件（HTML、JS、CSS、圖象等）。解析：對加載到的資源（HTML、JS、CSS等）進行語法解析，建議相應(yīng)的內(nèi)部數(shù)據(jù)結(jié)構(gòu)（比如HTML的DOM樹，JS的（對象）屬性表，CSS的樣式規(guī)則等等）

5.你常用的開發(fā)工具是什么，為什么？

Sublime,Atom,Nodepad++;

6.說說最近最流行的一些東西吧？常去哪些網(wǎng)站？

Node.js、MVVM、React-native,Angular,Weex等CSDN,Segmentfault,博客園,掘金,Stackoverflow,伯樂在線等

7.介紹下你的項目（如果有的話）？并說一下在做這個項目中運用的技術(shù)以及遇到的難題是如何解決的

關(guān)于本次前端復(fù)試一般面試什么和前端面試二面聊什么問題的問題分享到這里就結(jié)束了，如果解決了您的問題，我們非常高興。