2025年前端工程師面試題及答案

一、單項(xiàng)選擇題1.在HTML中，用于定義頁(yè)面標(biāo)題的標(biāo)簽是（）A.<title>B.<h1>C.<header>D.<meta>答案：A2.CSS中，設(shè)置元素字體大小的屬性是（）A.font-styleB.font-weightC.font-sizeD.font-family答案：C3.以下哪種JavaScript數(shù)據(jù)類(lèi)型是基本數(shù)據(jù)類(lèi)型（）A.ObjectB.ArrayC.NumberD.Function答案：C4.在JavaScript中，用于遍歷數(shù)組的方法是（）A.map()B.find()C.forEach()D.filter()答案：C5.HTML5新增的用于繪制圖形的元素是（）A.<canvas>B.<svg>C.<video>D.<audio>答案：A6.CSS中，設(shè)置元素邊框樣式的屬性是（）A.border-widthB.border-colorC.border-styleD.border-radius答案：C7.以下哪個(gè)是JavaScript中的事件綁定方法（）A.addEventListener()B.onclickC.onloadD.onChange答案：A8.在響應(yīng)式設(shè)計(jì)中，常用的CSS布局技術(shù)是（）A.浮動(dòng)布局B.定位布局C.彈性布局（Flexbox）D.表格布局答案：C9.JavaScript中，用于獲取當(dāng)前時(shí)間的對(duì)象是（）A.DateB.TimeC.CalendarD.Clock答案：A10.HTML中，用于創(chuàng)建超鏈接的標(biāo)簽是（）A.<a>B.<link>C.<img>D.<input>答案：A二、多項(xiàng)選擇題1.以下屬于HTML表單元素的有（）A.<input>B.<select>C.<textarea>D.<button>答案：ABCD2.CSS中的盒模型包括哪些部分（）A.content（內(nèi)容區(qū)）B.padding（內(nèi)邊距）C.border（邊框）D.margin（外邊距）答案：ABCD3.以下哪些是JavaScript中的數(shù)組方法（）A.push()B.pop()C.shift()D.unshift()答案：ABCD4.HTML5新增的語(yǔ)義化標(biāo)簽有（）A.<header>B.<nav>C.<article>D.<section>答案：ABCD5.CSS中，可用于設(shè)置文本對(duì)齊方式的屬性值有（）A.leftB.rightC.centerD.justify答案：ABCD6.在JavaScript中，以下哪些是函數(shù)定義的方式（）A.函數(shù)聲明B.函數(shù)表達(dá)式C.箭頭函數(shù)D.構(gòu)造函數(shù)答案：ABCD7.以下屬于前端性能優(yōu)化的方法有（）A.壓縮代碼B.合并文件C.懶加載D.優(yōu)化圖片答案：ABCD8.以下哪些是CSS中的選擇器（）A.元素選擇器B.類(lèi)選擇器C.ID選擇器D.屬性選擇器答案：ABCD9.JavaScript中，事件類(lèi)型包括（）A.鼠標(biāo)事件B.鍵盤(pán)事件C.表單事件D.頁(yè)面加載事件答案：ABCD10.以下哪些是前端框架（）A.ReactB.VueC.AngularD.Bootstrap答案：ABCD三、判斷題1.HTML標(biāo)簽必須成對(duì)出現(xiàn)。（）答案：錯(cuò)誤（有些單標(biāo)簽，如<br><hr>等不需要成對(duì)出現(xiàn)）2.CSS樣式只能寫(xiě)在<style>標(biāo)簽內(nèi)。（）答案：錯(cuò)誤（還可以寫(xiě)在元素的style屬性中，也可以通過(guò)外部CSS文件引入）3.JavaScript中的變量不需要先聲明就可以使用。（）答案：錯(cuò)誤（嚴(yán)格模式下需要先聲明）4.HTML5中的<video>元素只能播放MP4格式的視頻。（）答案：錯(cuò)誤（還支持其他格式，如WebM等）5.CSS中，設(shè)置元素的display屬性為none時(shí)，元素仍然占據(jù)頁(yè)面空間。（）答案：錯(cuò)誤（設(shè)置為none時(shí)，元素不占據(jù)頁(yè)面空間，相當(dāng)于從文檔流中移除）6.JavaScript中的數(shù)組是有序的。（）答案：正確7.在HTML中，<meta>標(biāo)簽用于設(shè)置頁(yè)面的元數(shù)據(jù)。（）答案：正確8.CSS中，設(shè)置元素的opacity屬性可以實(shí)現(xiàn)元素的透明度效果。（）答案：正確9.JavaScript中的函數(shù)內(nèi)部不能訪問(wèn)外部變量。（）答案：錯(cuò)誤（函數(shù)可以訪問(wèn)外部變量，形成閉包）10.響應(yīng)式設(shè)計(jì)是為了讓網(wǎng)頁(yè)在不同設(shè)備上都有良好的顯示效果。（）答案：正確四、簡(jiǎn)答題1.簡(jiǎn)述HTML、CSS和JavaScript在前端開(kāi)發(fā)中的作用。HTML是超文本標(biāo)記語(yǔ)言，用于構(gòu)建網(wǎng)頁(yè)的結(jié)構(gòu)，定義頁(yè)面中的各種元素，如標(biāo)題、段落、列表等。CSS即層疊樣式表，負(fù)責(zé)網(wǎng)頁(yè)的樣式設(shè)計(jì)，包括顏色、字體、布局等，能讓網(wǎng)頁(yè)更加美觀和吸引人。JavaScript是一種腳本語(yǔ)言，為網(wǎng)頁(yè)添加交互性和動(dòng)態(tài)效果，可實(shí)現(xiàn)表單驗(yàn)證、菜單切換、動(dòng)畫(huà)效果等功能，提升用戶(hù)體驗(yàn)。2.什么是CSS盒模型？如何計(jì)算盒模型的寬度和高度？CSS盒模型由內(nèi)容區(qū)（content）、內(nèi)邊距（padding）、邊框（border）和外邊距（margin）組成。內(nèi)容區(qū)是元素實(shí)際顯示的內(nèi)容部分。內(nèi)邊距是內(nèi)容區(qū)與邊框之間的距離，邊框圍繞在內(nèi)邊距之外，外邊距是元素與其他元素之間的距離。盒模型寬度=內(nèi)容區(qū)寬度+左右內(nèi)邊距+左右邊框；高度同理，即內(nèi)容區(qū)高度+上下內(nèi)邊距+上下邊框。3.簡(jiǎn)述JavaScript中閉包的概念及其作用。閉包是指有權(quán)訪問(wèn)另一個(gè)函數(shù)作用域中的變量的函數(shù)。即使該函數(shù)已經(jīng)執(zhí)行完畢，其作用域內(nèi)的變量也不會(huì)被銷(xiāo)毀。閉包的作用主要有：可以讀取函數(shù)內(nèi)部的變量，實(shí)現(xiàn)數(shù)據(jù)的封裝和隱藏，避免全局變量的污染；還可以讓這些變量的值始終保持在內(nèi)存中，實(shí)現(xiàn)數(shù)據(jù)的持久化存儲(chǔ)，方便在不同函數(shù)調(diào)用之間傳遞和共享數(shù)據(jù)。4.請(qǐng)簡(jiǎn)要說(shuō)明前端性能優(yōu)化的幾個(gè)方面。前端性能優(yōu)化包括多方面。代碼層面，壓縮HTML、CSS和JavaScript代碼，去除冗余空格和注釋?zhuān)缓喜⑽募p少HTTP請(qǐng)求次數(shù)。圖片處理上，優(yōu)化圖片格式和大小，采用圖片懶加載，僅在圖片進(jìn)入視口時(shí)加載。緩存策略方面，合理設(shè)置緩存頭，讓瀏覽器緩存靜態(tài)資源。布局優(yōu)化，使用高效的CSS布局技術(shù)如Flexbox和Grid，減少重排和重繪。此外，異步加載腳本，避免阻塞頁(yè)面渲染也是重要的優(yōu)化手段。五、討論題1.在前端開(kāi)發(fā)中，如何實(shí)現(xiàn)一個(gè)響應(yīng)式導(dǎo)航欄？可以使用CSS的媒體查詢(xún)結(jié)合彈性布局技術(shù)來(lái)實(shí)現(xiàn)。首先使用HTML創(chuàng)建導(dǎo)航欄的基本結(jié)構(gòu)，包含鏈接和菜單按鈕等元素。然后利用CSS設(shè)置導(dǎo)航欄的初始樣式，如字體、顏色等。通過(guò)媒體查詢(xún)，針對(duì)不同的屏幕尺寸范圍，調(diào)整導(dǎo)航欄的布局。例如在小屏幕上，將導(dǎo)航項(xiàng)隱藏，顯示菜單按鈕，點(diǎn)擊按鈕后通過(guò)JavaScript控制顯示隱藏導(dǎo)航項(xiàng)。利用Flexbox或Grid布局可以方便地實(shí)現(xiàn)導(dǎo)航項(xiàng)的自適應(yīng)排列，確保在各種設(shè)備上都有良好的顯示效果。2.談?wù)勀銓?duì)前端框架（如React、Vue、Angular）的理解和使用經(jīng)驗(yàn)。前端框架旨在提高開(kāi)發(fā)效率和代碼可維護(hù)性。React采用虛擬DOM，通過(guò)組件化開(kāi)發(fā)，使得代碼可復(fù)用性高，易于維護(hù)和擴(kuò)展，單向數(shù)據(jù)流的設(shè)計(jì)讓數(shù)據(jù)流向清晰。Vue具有輕量級(jí)、上手容易的特點(diǎn)，雙向數(shù)據(jù)綁定機(jī)制簡(jiǎn)化了視圖和數(shù)據(jù)的同步操作，指令系統(tǒng)豐富。Angular是一個(gè)功能強(qiáng)大的框架，有完整的生態(tài)系統(tǒng)，依賴(lài)注入、路由系統(tǒng)等功能完善。在項(xiàng)目中使用過(guò)React，通過(guò)創(chuàng)建組件樹(shù)，實(shí)現(xiàn)復(fù)雜的頁(yè)面交互和功能，提高了開(kāi)發(fā)效率。3.前端開(kāi)發(fā)中，如何處理跨域問(wèn)題？處理跨域問(wèn)題有多種方法。JSONP是一種較老的方式，它利用了<script>標(biāo)簽的src屬性不受同源策略限制的特點(diǎn)，通過(guò)動(dòng)態(tài)創(chuàng)建<script>標(biāo)簽來(lái)實(shí)現(xiàn)跨域數(shù)據(jù)請(qǐng)求，但只支持GET請(qǐng)求。CORS（跨域資源共享）是現(xiàn)代常用的方法，服務(wù)器設(shè)置響應(yīng)頭允許跨域訪問(wèn)，瀏覽器會(huì)自動(dòng)處理跨域請(qǐng)求，支持多種請(qǐng)求方法。代理服務(wù)器也是一種解決方案，在同源服務(wù)器上設(shè)置代理，轉(zhuǎn)發(fā)請(qǐng)求到目標(biāo)服務(wù)器，然后將響應(yīng)返回給前端，隱藏了跨域請(qǐng)求的本質(zhì)。4.描述一次你在前端開(kāi)發(fā)中遇到的性能問(wèn)題及解決方案。在一個(gè)項(xiàng)目中，頁(yè)面加載速度慢，尤其是圖片較多的頁(yè)