招聘專(zhuān)業(yè)開(kāi)發(fā)人員的75個(gè)前端面試問(wèn)題
如果您要為團(tuán)隊(duì)招聘前端開(kāi)發(fā)人員，選擇正確的候選人評(píng)估方法至關(guān)重要，但這個(gè)過(guò)程可能很復(fù)雜且耗時(shí)。有些方法不可靠，例如簡(jiǎn)歷篩選——您需要一種策略來(lái)幫助您為團(tuán)隊(duì)找到合適的前端開(kāi)發(fā)人員并避免錯(cuò)誤招聘。面試前端開(kāi)發(fā)人員，要求你在面試之前找到正確的前端面試問(wèn)題。
?
但不要驚慌。我們收集了 75 個(gè)適合初級(jí)和高級(jí)求職者的面試問(wèn)題以及與 Git 和基本前端技能相關(guān)的技術(shù)問(wèn)題。使用下面的問(wèn)題來(lái)構(gòu)建您自己的列表。
?
目錄
向初級(jí)應(yīng)聘者提出的 20 個(gè)前端面試問(wèn)題
5 個(gè)前端初學(xué)者面試問(wèn)題及答案
5 個(gè)用于評(píng)估高級(jí)應(yīng)聘者的高級(jí)前端面試問(wèn)題和答案
19 道關(guān)于 Git 版本控制的前端面試題
關(guān)于 Git 的 5 個(gè)前端面試問(wèn)題及答案
有關(guān) HTML、CSS、React.js 和 JavaScript 的 31 個(gè)前端面試問(wèn)題
有關(guān) HTML、CSS、JavaScript 和 React.js 的 5 個(gè)重要前端面試問(wèn)題及答案
在招聘過(guò)程中什么時(shí)候使用前端面試問(wèn)題最好？
通過(guò)前端面試問(wèn)題評(píng)估開(kāi)發(fā)人員的知識(shí)
?
向初級(jí)應(yīng)聘者提出的 20 個(gè)前端面試問(wèn)題
這 20 個(gè)初級(jí)前端面試問(wèn)題非常適合評(píng)估初級(jí)求職者。向候選人詢問(wèn)本部分中的一些問(wèn)題，以復(fù)習(xí)他們的前端開(kāi)發(fā)知識(shí)。
1、解釋 HTML 中的元標(biāo)記是什么。
2、說(shuō)出三種基本的設(shè)計(jì)元素。
3、哪些技能對(duì)于前端開(kāi)發(fā)人員的工作很重要？
4、解釋負(fù)載平衡的含義。
5、解釋一下NPM的含義。
6、告訴我你對(duì) JavaScript 中范圍的理解。
7、jQuery 和 JavaScript 的主要區(qū)別是什么？
8、告訴我你對(duì)內(nèi)容安全策略了解多少。
9、定義跨站點(diǎn)腳本。
10、解釋以用戶為中心的設(shè)計(jì)的含義，
11、你對(duì) JavaScript 中的回調(diào)有何了解？
12、你對(duì)多態(tài)性有何了解？
13、你能解釋一下KISS原則的含義嗎？
14、你能解釋一下 SOLID 這個(gè)縮寫(xiě)詞的含義嗎？
15、告訴我你對(duì)點(diǎn)擊劫持的了解。
16、你理解 JavaScript 中的強(qiáng)制轉(zhuǎn)換是什么意思嗎？請(qǐng)給出一個(gè)定義。
17、解釋 IIFE 的含義。
18.、告訴我你對(duì) CSS 中的網(wǎng)格系統(tǒng)的了解。
19、解釋一下mixin是什么。
20、說(shuō)出三種減少頁(yè)面加載時(shí)間的方法。
?
5 個(gè)前端初學(xué)者面試問(wèn)題及答案
請(qǐng)參閱本節(jié)中一些關(guān)鍵的初級(jí)前端面試問(wèn)題的五個(gè)示例答案，以檢查申請(qǐng)人回答的準(zhǔn)確性。
1、哪些技能對(duì)于前端開(kāi)發(fā)人員的工作很重要？
有幾項(xiàng)技能對(duì)于前端開(kāi)發(fā)人員的工作至關(guān)重要。從 HTML 到 CSS 再到 JavaScript，許多技術(shù)技能可以幫助前端開(kāi)發(fā)人員構(gòu)建網(wǎng)頁(yè)設(shè)計(jì)并制作結(jié)構(gòu)良好的網(wǎng)頁(yè)。
?
HTML 技能可以幫助前端開(kāi)發(fā)人員構(gòu)建網(wǎng)站，而 CSS 技能則可以使設(shè)計(jì)布局變得更加容易。同時(shí)，熟練掌握 JavaScript 編程語(yǔ)言可以讓開(kāi)發(fā)人員將網(wǎng)頁(yè)元素動(dòng)態(tài)化。
?
2、說(shuō)出三種基本的設(shè)計(jì)元素。
申請(qǐng)人應(yīng)了解以下三個(gè)基本設(shè)計(jì)元素：
大小：形狀占用的空間量
紋理：形狀的表面紋理（可以是光滑的、硬的或軟的）
顏色：物體的顏色，包括明度、色調(diào)和強(qiáng)度
?
3、你理解 JavaScript 中的強(qiáng)制轉(zhuǎn)換是什么意思嗎？請(qǐng)給出一個(gè)定義。
要測(cè)試應(yīng)聘者的入門(mén)級(jí)前端開(kāi)發(fā)人員知識(shí)，請(qǐng)考慮他們是否能夠用 JavaScript 定義強(qiáng)制轉(zhuǎn)換。熟練的應(yīng)聘者會(huì)理解強(qiáng)制轉(zhuǎn)換涉及在運(yùn)行時(shí)將值從一種數(shù)據(jù)類(lèi)型轉(zhuǎn)換為另一種數(shù)據(jù)類(lèi)型。
?
他們可能還提到 JavaScript 中的兩種強(qiáng)制形式——顯式和隱式。
?
當(dāng) JavaScript 根據(jù)使用上下文自動(dòng)將一種數(shù)據(jù)類(lèi)型轉(zhuǎn)換為另一種類(lèi)型時(shí)，就會(huì)發(fā)生隱式強(qiáng)制轉(zhuǎn)換。當(dāng)開(kāi)發(fā)人員使用該語(yǔ)言的內(nèi)置運(yùn)算符或函數(shù)將值從一種數(shù)據(jù)類(lèi)型顯式轉(zhuǎn)換為另一種數(shù)據(jù)類(lèi)型時(shí)，就會(huì)發(fā)生顯式強(qiáng)制轉(zhuǎn)換。
?
4、說(shuō)出三種減少頁(yè)面加載時(shí)間的方法。
具有入門(mén)級(jí)前端開(kāi)發(fā)人員知識(shí)的候選人應(yīng)該從經(jīng)驗(yàn)中了解如何減少頁(yè)面加載時(shí)間。考慮一下他們是否能說(shuō)出三種提高頁(yè)面加載速度的方法。以下是他們可能會(huì)提到的一些技巧：
優(yōu)化圖像
壓縮內(nèi)容
將 CSS 和 JavaScript 代碼放入外部文件中
?
5、告訴我你對(duì) CSS 中的網(wǎng)格系統(tǒng)的了解。
CSS 中的網(wǎng)格系統(tǒng)是前端開(kāi)發(fā)人員用來(lái)在頁(yè)面上水平或垂直排列內(nèi)容的結(jié)構(gòu)。網(wǎng)格系統(tǒng)降低了一致排列內(nèi)容的復(fù)雜性，并具有兩個(gè)關(guān)鍵組件—列和行。
?
5 個(gè)用于評(píng)估高級(jí)應(yīng)聘者的高級(jí)前端面試問(wèn)題和答案
如果您正在尋找高級(jí)前端開(kāi)發(fā)人員，這些高級(jí)前端面試問(wèn)題非常適合評(píng)估他們的知識(shí)。查看以下答案以評(píng)估候選人回答的準(zhǔn)確性。
?
1、說(shuō)出四種 CSS 盒子模型元素的名稱(chēng)。
有 CSS 經(jīng)驗(yàn)的高級(jí)候選人應(yīng)該了解 CSS 盒子模型。他們可能會(huì)解釋 CSS 盒子模型可以幫助開(kāi)發(fā)人員創(chuàng)建復(fù)雜的布局，并說(shuō)出下面列出的四個(gè) CSS 盒子模型元素：
內(nèi)容
填充
邊界
邊距
?
2、srcset有什么優(yōu)點(diǎn)嗎？請(qǐng)說(shuō)出一個(gè)。
srcset是一個(gè) HTML 屬性，用于指定一組具有不同大小和分辨率的圖像 URL。這使瀏覽器能夠根據(jù)用戶的屏幕尺寸或像素密度等因素確定哪個(gè)圖像源最合適。
?
srcset的一個(gè)好處是，它通過(guò)顯示適合用戶設(shè)備大小的圖像來(lái)提高性能并減少加載時(shí)間。
?
3、解釋JSON.stringify()在 JavaScript 中的作用。
申請(qǐng)人應(yīng)該知道，前端開(kāi)發(fā)人員使用JSON.stringify()方法將 JavaScript 值轉(zhuǎn)換為 JSON 字符串。這使他們能夠更輕松地發(fā)送和接收這些對(duì)象。這在將數(shù)據(jù)發(fā)送到 Web 服務(wù)器時(shí)尤其重要，因?yàn)閿?shù)據(jù)必須以字符串形式傳輸。
?
4、你在職業(yè)生涯中使用過(guò) MySQL 嗎？解釋一下 MySQL 是什么。
如果申請(qǐng)人使用過(guò) MySQL，他們就會(huì)知道它是一個(gè)使用 SQL 編程語(yǔ)言的關(guān)系數(shù)據(jù)庫(kù)管理系統(tǒng) (RDBMS)。他們可能還知道 MySQL 使用表結(jié)構(gòu)，并且是最廣泛采用的開(kāi)源 RDBMS。
?
5、你在工作中使用過(guò) MongoDB 嗎？解釋一下什么是 MongoDB。
具有 MongoDB 經(jīng)驗(yàn)的候選人將了解此 NoSQL 數(shù)據(jù)庫(kù)應(yīng)用程序使用名為 BSON（二進(jìn)制 JSON）的面向文檔的格式來(lái)表示數(shù)據(jù)元素。他們還可能會(huì)提到程序員使用 MongoDB 查詢語(yǔ)言在 MongoDB 中進(jìn)行更改。
?
19 道關(guān)于 Git 版本控制的前端面試題
為了評(píng)估申請(qǐng)人的 Git 版本控制知識(shí)，請(qǐng)向他們?cè)儐?wèn)這 19 個(gè)前端面試問(wèn)題。
1、告訴我你對(duì)版本控制系統(tǒng)的了解。
2、集中式和分布式版本控制系統(tǒng)有什么區(qū)別？
3、git push是什么意思？
4、git pull 的作用是什么意思？
5、解釋git config命令的作用。
6、解釋git init命令的作用。
7、解釋git add命令的作用。
8、解釋git diff命令的作用。
9、解釋git commit命令的作用。
10、解釋git reset命令的作用。
11、解釋git status命令的作用。
12、解釋git merge命令的作用。
13、git pull命令有什么作用？
14、git fetch命令有什么作用？
15.、git pull和git fetch有何不同？
16、解釋一下 Git 中的合并沖突是什么。
17、如何解決 Git 中的合并沖突？
18、告訴我你對(duì)git stash了解多少。
19、git merge與git rebase有何不同？
?
關(guān)于 Git 的 5 個(gè)前端面試問(wèn)題及答案
如果您需要查看候選人對(duì)最重要的 Git 前端面試問(wèn)題的回答，請(qǐng)查看此處提供的示例答案。
1、告訴我你對(duì)版本控制系統(tǒng)的了解。
程序員可以使用版本控制系統(tǒng)來(lái)管理文件或數(shù)據(jù)集的更改，或?qū)?shù)據(jù)恢復(fù)到以前的版本。這些系統(tǒng)還可以確保整個(gè)編程團(tuán)隊(duì)使用最新的文件或數(shù)據(jù)集版本。
?
回答這個(gè)問(wèn)題的申請(qǐng)人應(yīng)該知道，版本控制系統(tǒng)被開(kāi)發(fā)團(tuán)隊(duì)廣泛使用：93% 的開(kāi)發(fā)人員使用 Git 來(lái)管理文件和數(shù)據(jù)集。
?
2、集中式和分布式版本控制系統(tǒng)有什么區(qū)別？
向應(yīng)聘者提出這個(gè)問(wèn)題是為了測(cè)試他們對(duì)版本控制系統(tǒng)的了解。
?
使用集中式版本控制系統(tǒng)時(shí)，開(kāi)發(fā)人員將更改提交到一個(gè)中央存儲(chǔ)庫(kù)。與分布式版本控制系統(tǒng)相比，它們往往更易于理解和使用。但是，如果開(kāi)發(fā)人員無(wú)法訪問(wèn)中央存儲(chǔ)庫(kù)或存儲(chǔ)庫(kù)損壞，它將不再可用。
?
另一方面，使用分布式版本控制系統(tǒng)時(shí)，每個(gè)開(kāi)發(fā)人員都有存儲(chǔ)庫(kù)的副本。在這種較新的方法中，每個(gè)團(tuán)隊(duì)成員的本地副本都可以用作備份。他們還可以獨(dú)立處理自己的副本并提交更改，而無(wú)需訪問(wèn)中央服務(wù)器。
?
3、git push是什么意思？
要確定您的前端開(kāi)發(fā)人員候選人是否具備足夠的 Git 知識(shí)，請(qǐng)向他們?cè)儐?wèn)這個(gè)簡(jiǎn)單的前端面試問(wèn)題。
?
具有 Git 經(jīng)驗(yàn)的申請(qǐng)人會(huì)知道git push是開(kāi)發(fā)人員用來(lái)將內(nèi)容推送到遠(yuǎn)程存儲(chǔ)庫(kù)的命令，以將對(duì)本地存儲(chǔ)庫(kù)所做的提交上傳到遠(yuǎn)程存儲(chǔ)庫(kù)。他們還可能解釋git push所需的語(yǔ)法是：
?
$ git push <選項(xiàng)> [<遠(yuǎn)程 URL><分支名稱(chēng)><refspec>…]
?
4、git pull是什么意思？
程序員使用git pull命令從遠(yuǎn)程存儲(chǔ)庫(kù)提取更改并將其與本地副本合并。這首先涉及從遠(yuǎn)程存儲(chǔ)庫(kù)獲取最新更改，然后將這些更改合并到當(dāng)前分支中。
?
5、解釋git config命令的作用。
考生應(yīng)該知道，開(kāi)發(fā)人員使用git config來(lái)自定義 Git 的功能和外觀。換句話說(shuō)，這個(gè)強(qiáng)大的命令使開(kāi)發(fā)人員能夠更改 Git 的配置設(shè)置。
?
有關(guān) HTML、CSS、React.js 和 JavaScript 的 31 個(gè)前端面試問(wèn)題
向面試官詢問(wèn)有關(guān) HTML、CSS、React.js 和 JavaScript 的 31 個(gè)前端面試問(wèn)題，以測(cè)試他們的技術(shù)知識(shí)。
1、解釋 HTML 中的屬性是什么。
2、解釋一下 HTML 中的 marquee 是什么。有沒(méi)有更好的替代方案？
3、定義語(yǔ)義HTML。
4、語(yǔ)義HTML如何工作？
5、解釋如何使用 HTML 在網(wǎng)頁(yè)上顯示表格。
6、你對(duì) HTML 中的 SVG 了解多少？
7、您會(huì)使用哪種方法來(lái)分隔 HTML 中的文本部分？
8、哪些 React.js 子技能對(duì)前端開(kāi)發(fā)人員來(lái)說(shuō)很重要？
9、如何在 HTML 文檔中包含 CSS 樣式？
10、你對(duì) CSS 中的box-sizing屬性有何了解？
11、你會(huì)使用哪種方法來(lái)使用 CSS 隱藏元素？
12、解釋什么是 CSS 精靈。
13、說(shuō)出 JavaScript 接受的三種數(shù)據(jù)類(lèi)型。
14、告訴我你對(duì) JavaScript 中的 cookie 了解多少。
15、解釋 JavaScript 中的閉包是什么。
16、解釋 JavaScript 中的導(dǎo)出和導(dǎo)入是什么。
17、解釋一下 JavaScript 中未定義的變量是什么。
18、解釋 JavaScript 中未聲明的變量是什么。
19、你會(huì)使用哪種方法從 JavaScript 數(shù)組中刪除重復(fù)項(xiàng)？
20、解釋什么是 JSC。
21、虛擬 DOM 與 React.js 有何關(guān)系？
22、解釋什么是 React 擴(kuò)展。
23、告訴我你對(duì) React 中的事件的理解。
24、解釋一下 React.js 中什么是組件。
25、解釋一下 React 中的狀態(tài)是什么。
26、如何在 React.js 中實(shí)現(xiàn)狀態(tài)？
27、說(shuō)出前端開(kāi)發(fā)人員的三個(gè)重要 JavaScript 子技能。
28、描述一下 React.js 中的高階組件是什么。
29、描述一下 React.js 中的純組件是什么。
30、你會(huì)使用哪種方法來(lái)實(shí)現(xiàn) React 路由？
31、解釋 JavaScript 中 null 的含義。
?
有關(guān) HTML、CSS、JavaScript 和 React.js 的 5 個(gè)重要前端面試問(wèn)題及答案
請(qǐng)參閱以下這些重要的 HTML、CSS、JavaScript 和 React.js 前端面試問(wèn)題的示例答案，以評(píng)估申請(qǐng)人的知識(shí)。
1、哪些 React.js 子技能對(duì)前端開(kāi)發(fā)人員來(lái)說(shuō)很重要？
前端開(kāi)發(fā)人員需要各種子技能來(lái)使用 React.js 庫(kù)，從理解設(shè)計(jì)模式到 React 鉤子、狀態(tài)管理和高級(jí) React.js 概念。
?
要構(gòu)建具有動(dòng)態(tài)組件的網(wǎng)站或應(yīng)用程序，候選人還應(yīng)該了解 React.js 如何促進(jìn)該過(guò)程。因此，你應(yīng)該問(wèn)一些后續(xù)問(wèn)題，以確定候選人是否理解 React.js 的重要性。
?
2、說(shuō)出前端開(kāi)發(fā)人員的三個(gè)重要 JavaScript 子技能。
前端開(kāi)發(fā)人員需要幾種 JavaScript 子技能來(lái)為網(wǎng)站添加功能特性。
?
熟悉 JavaScript 的求職者會(huì)知道函數(shù)式編程、跨瀏覽器代碼編寫(xiě)和內(nèi)存管理是一些對(duì)前端開(kāi)發(fā)人員有益的子技能。聽(tīng)聽(tīng)回答，解釋這些技能為何重要。
?
例如，申請(qǐng)人可能會(huì)解釋函數(shù)式編程可以幫助前端開(kāi)發(fā)人員避免數(shù)據(jù)變異和副作用。
?
3、您會(huì)使用哪種方法來(lái)分隔 HTML 中的文本部分？
這道前端面試題比較簡(jiǎn)單，大部分應(yīng)聘者會(huì)理解前端開(kāi)發(fā)人員使用 HTML 標(biāo)簽來(lái)劃分文本部分，并可能列舉出三個(gè)他們會(huì)使用的標(biāo)簽示例。
?
例如，<br>標(biāo)簽可拆分文本行，<blockquote>標(biāo)簽可表示較長(zhǎng)的引用，<p>標(biāo)簽可創(chuàng)建文本段落。
?
4、你對(duì)盒子尺寸有什么了解？
候選人應(yīng)該回答這個(gè)問(wèn)題，解釋一下box-sizing屬性定義如何計(jì)算元素的寬度和高度
?
它們還可能描述此屬性的可能值如何改變 box-sizing 行為。將box-sizing的值設(shè)置為content-box指定元素的寬度和高度應(yīng)僅基于其內(nèi)容框計(jì)算，而不考慮填充、邊框或邊距。
?
但是，將值設(shè)置為border-box表示元素的寬度和高度應(yīng)該包括填充和邊框。
?
5、你會(huì)使用哪種方法從 JavaScript 數(shù)組中刪除重復(fù)項(xiàng)？
前端開(kāi)發(fā)人員可以使用過(guò)濾技術(shù)來(lái)從 JavaScript 數(shù)組中刪除重復(fù)項(xiàng)。此技術(shù)涉及使用三個(gè)參數(shù)來(lái)調(diào)用filter()函數(shù)來(lái)創(chuàng)建一個(gè)不包含任何重復(fù)項(xiàng)的新數(shù)組
?
其他申請(qǐng)人可能更喜歡使用for循環(huán)在一個(gè)空數(shù)組中僅存儲(chǔ)唯一元素。
?
在招聘過(guò)程中什么時(shí)候使用前端面試問(wèn)題最好？
面試，包括技術(shù)或個(gè)人面試，最好在技能測(cè)試之后和決定聘用候選人之前完成。
?
在面試階段之前使用就業(yè)前測(cè)試來(lái)創(chuàng)建最佳前端開(kāi)發(fā)人員候選人名單更有效率——只需幾秒鐘即可收到技能測(cè)試結(jié)果并檢查統(tǒng)計(jì)數(shù)據(jù)。
?
完成面試后，使用技能評(píng)估生成的統(tǒng)計(jì)數(shù)據(jù)以及申請(qǐng)人對(duì)面試問(wèn)題的回答。這些數(shù)據(jù)將幫助您做出明智、成功的招聘決策。
?
通過(guò)前端面試問(wèn)題評(píng)估開(kāi)發(fā)人員的知識(shí)
前端面試問(wèn)題和技能測(cè)試是尋找具有合適技能的開(kāi)發(fā)人員的理想策略。如果您是軟件開(kāi)發(fā)組織的人力資源專(zhuān)業(yè)人員，并且不具備評(píng)估前端開(kāi)發(fā)人員申請(qǐng)人的技術(shù)技能，請(qǐng)先使用匡優(yōu)人才測(cè)評(píng)系統(tǒng)來(lái)評(píng)估他們的能力。
?
