前端性能優(yōu)化面試題及技巧一、單選題（每題2分，共10題）1.以下哪個(gè)HTTP方法最適合用于加載靜態(tài)資源（如圖片、CSS、JavaScript文件）？A.GETB.POSTC.PUTD.DELETE2.以下哪個(gè)CSS屬性優(yōu)化效果最明顯？A.`font-family`B.`background-color`C.`border-radius`D.`text-align`3.以下哪個(gè)緩存策略最適合用于API接口？A.強(qiáng)緩存B.協(xié)商緩存C.無(wú)緩存D.上述皆非4.以下哪個(gè)加載資源的方式最適合用于首屏渲染？A.懶加載B.預(yù)加載C.異步加載D.上述皆非5.以下哪個(gè)瀏覽器性能指標(biāo)最能反映頁(yè)面加載速度？A.TTFB（TimetoFirstByte）B.FID（FirstInputDelay）C.CLS（CumulativeLayoutShift）D.LCP（LargestContentfulPaint）6.以下哪個(gè)前端框架最適合用于大型復(fù)雜應(yīng)用？A.ReactB.VueC.SvelteD.Angular7.以下哪個(gè)HTTP頭部字段用于控制瀏覽器緩存策略？A.`Content-Type`B.`Cache-Control`C.`Content-Length`D.`Connection`8.以下哪個(gè)CSS優(yōu)化技巧最適合用于減少重排（Reflow）？A.使用`transform`代替`margin`B.使用`inline-block`代替`div`C.使用`float`代替`flex`D.使用`position`固定代替`absolute`9.以下哪個(gè)JavaScript優(yōu)化技巧最適合用于減少內(nèi)存泄漏？A.使用`var`聲明變量B.使用`let`聲明變量C.使用`const`聲明變量D.使用`global`對(duì)象存儲(chǔ)變量10.以下哪個(gè)瀏覽器性能指標(biāo)最能反映頁(yè)面交互流暢度？A.TTFBB.FIDC.CLSD.LCP二、多選題（每題3分，共5題）1.以下哪些技術(shù)可以用于優(yōu)化頁(yè)面首屏加載速度？A.CSSSpriteB.圖片懶加載C.HTTP/2D.CDN加速E.代碼壓縮2.以下哪些操作會(huì)導(dǎo)致頁(yè)面重排（Reflow）？A.更改元素的寬高B.更改元素的字體大小C.更改元素的背景顏色D.更改元素的文本內(nèi)容E.更改元素的定位3.以下哪些HTTP頭部字段用于控制瀏覽器緩存？A.`Expires`B.`Cache-Control`C.`Pragma`D.`ETag`E.`Last-Modified`4.以下哪些JavaScript性能優(yōu)化技巧可以減少執(zhí)行時(shí)間？A.使用`requestAnimationFrame`B.使用`WebWorkers`C.使用`setTimeout`代替`setInterval`D.使用`Atotype.map`代替`for`循環(huán)E.使用`const`代替`let`5.以下哪些瀏覽器性能指標(biāo)可以反映頁(yè)面性能？A.TTFBB.FIDC.CLSD.LCPE.FMP（FirstMeaningfulPaint）三、簡(jiǎn)答題（每題4分，共5題）1.簡(jiǎn)述瀏覽器緩存的工作原理及其優(yōu)缺點(diǎn)。2.簡(jiǎn)述懶加載（LazyLoading）的工作原理及其適用場(chǎng)景。3.簡(jiǎn)述首屏加載優(yōu)化的主要方法及其原理。4.簡(jiǎn)述內(nèi)存泄漏的常見原因及其解決方法。5.簡(jiǎn)述WebWorkers的工作原理及其適用場(chǎng)景。四、代碼題（每題5分，共2題）1.請(qǐng)編寫一個(gè)JavaScript函數(shù)，實(shí)現(xiàn)圖片懶加載功能。2.請(qǐng)編寫一個(gè)CSS優(yōu)化方案，減少頁(yè)面重排（Reflow）次數(shù)。答案解析一、單選題1.A-解析：GET方法適合用于加載靜態(tài)資源，因?yàn)樗菬o(wú)狀態(tài)的，不會(huì)改變服務(wù)器上的資源。POST方法用于提交數(shù)據(jù)，PUT用于更新資源，DELETE用于刪除資源。2.B-解析：`background-color`只影響元素的背景色，不會(huì)引起DOM結(jié)構(gòu)變化，優(yōu)化效果最明顯。`font-family`、`border-radius`、`text-align`等屬性可能涉及更多渲染計(jì)算。3.B-解析：協(xié)商緩存通過(guò)`ETag`和`Last-Modified`字段判斷資源是否變化，適合API接口，因?yàn)榻涌跀?shù)據(jù)變化頻繁。強(qiáng)緩存通過(guò)`Expires`或`Cache-Control`直接返回緩存資源。4.B-解析：預(yù)加載（Preload）可以在頁(yè)面加載前優(yōu)先加載關(guān)鍵資源，適合首屏渲染。懶加載（LazyLoading）用于非首屏資源，異步加載（Async）用于非關(guān)鍵腳本。5.D-解析：LCP（LargestContentfulPaint）最能反映頁(yè)面加載速度，即首屏最大內(nèi)容元素加載時(shí)間。TTFB反映服務(wù)器響應(yīng)時(shí)間，F(xiàn)ID反映首次交互延遲，CLS反映頁(yè)面布局偏移。6.D-解析：Angular適合大型復(fù)雜應(yīng)用，因其提供完整的解決方案和模塊化設(shè)計(jì)。React和Vue適合中小型應(yīng)用，Svelte在編譯時(shí)優(yōu)化代碼，性能較好但適用場(chǎng)景有限。7.B-解析：`Cache-Control`字段控制瀏覽器緩存策略，如`max-age`、`no-cache`等。`Content-Type`用于指定內(nèi)容類型，`Content-Length`用于指定內(nèi)容長(zhǎng)度，`Connection`用于控制連接。8.A-解析：`transform`（如`translate`、`rotate`）屬于合成層（CompositingLayer），不觸發(fā)重排。`inline-block`、`float`、`position`可能涉及重排。9.B-解析：`let`和`const`有塊級(jí)作用域，`var`有函數(shù)作用域，容易導(dǎo)致全局變量泄漏。`global`對(duì)象存儲(chǔ)變量更易泄漏，應(yīng)避免使用。10.B-解析：FID（FirstInputDelay）反映頁(yè)面首次交互的延遲，最能反映頁(yè)面交互流暢度。TTFB、CLS、LCP反映加載速度和布局穩(wěn)定性。二、多選題1.A、B、C、D、E-解析：CSSSprite、圖片懶加載、HTTP/2、CDN加速、代碼壓縮都是優(yōu)化首屏加載速度的有效方法。2.A、B、E-解析：更改元素的寬高、字體大小、文本內(nèi)容會(huì)觸發(fā)重排。更改背景顏色、定位（如`top`、`left`）可能觸發(fā)重繪（Repaint）而非重排。3.A、B、C、D、E-解析：`Expires`、`Cache-Control`、`Pragma`、`ETag`、`Last-Modified`都是控制瀏覽器緩存的HTTP頭部字段。4.A、B、D-解析：`requestAnimationFrame`優(yōu)化動(dòng)畫性能，`WebWorkers`分離計(jì)算密集型任務(wù)，`Atotype.map`比`for`循環(huán)在某些場(chǎng)景下更快。`setTimeout`和`const`與執(zhí)行時(shí)間優(yōu)化無(wú)關(guān)。5.A、B、C、D、E-解析：TTFB、FID、CLS、LCP、FMP都是反映頁(yè)面性能的瀏覽器性能指標(biāo)。三、簡(jiǎn)答題1.瀏覽器緩存的工作原理及其優(yōu)缺點(diǎn)-原理：瀏覽器緩存通過(guò)HTTP頭部字段（如`Cache-Control`、`ETag`）判斷資源是否變化，若未變化則直接返回緩存資源，否則重新請(qǐng)求。-優(yōu)點(diǎn)：減少服務(wù)器請(qǐng)求，加快加載速度，降低帶寬消耗。-缺點(diǎn)：可能返回過(guò)期資源，需要緩存失效策略。2.懶加載的工作原理及其適用場(chǎng)景-原理：將非首屏資源（如圖片、視頻）延遲加載，當(dāng)滾動(dòng)到視口時(shí)再請(qǐng)求，減少初始加載時(shí)間。-適用場(chǎng)景：首屏加載資源較多，如長(zhǎng)列表、無(wú)限滾動(dòng)、圖片密集型頁(yè)面。3.首屏加載優(yōu)化的主要方法及其原理-方法：1.減少HTTP請(qǐng)求：合并文件（CSS、JS）、CSSSprite。2.資源壓縮：代碼壓縮、圖片壓縮。3.CDN加速：分布式緩存，減少傳輸延遲。4.預(yù)加載關(guān)鍵資源：`<linkrel="preload">`。5.懶加載：非首屏資源延遲加載。-原理：通過(guò)減少傳輸數(shù)據(jù)量、優(yōu)化傳輸路徑、減少加載時(shí)間來(lái)提升首屏加載速度。4.內(nèi)存泄漏的常見原因及其解決方法-常見原因：1.閉包：內(nèi)部函數(shù)引用外部變量，導(dǎo)致外部變量無(wú)法被垃圾回收。2.事件監(jiān)聽：未移除事件監(jiān)聽器，如`addEventListener`未`removeEventListener`。3.定時(shí)器：未清除`setTimeout`或`setInterval`。4.全局變量：濫用全局變量，導(dǎo)致長(zhǎng)期占用內(nèi)存。-解決方法：1.避免不必要的閉包：減少內(nèi)部函數(shù)引用外部變量。2.移除事件監(jiān)聽器：組件卸載時(shí)移除事件監(jiān)聽。3.清除定時(shí)器：使用`clearTimeout`或`clearInterval`。4.使用塊級(jí)作用域：`let`、`const`代替`var`。5.WebWorkers的工作原理及其適用場(chǎng)景-原理：WebWorkers允許在后臺(tái)線程執(zhí)行JavaScript代碼，不阻塞主線程。通過(guò)`Worker`對(duì)象創(chuàng)建線程，主線程與Worker線程通過(guò)消息傳遞（`postMessage`）通信。-適用場(chǎng)景：計(jì)算密集型任務(wù)，如大數(shù)據(jù)處理、復(fù)雜計(jì)算、文件解析，避免阻塞主線程導(dǎo)致頁(yè)面卡頓。四、代碼題1.圖片懶加載函數(shù)javascriptfunctionlazyLoadImages(){constimages=document.querySelectorAll('img[data-src]');constobserver=newIntersectionObserver((entries)=>{entries.forEach(entry=>{if(entry.isIntersecting){constimg=entry.target;img.src=img.getAttribute('data-src');observer.unobserve(img);}});},{rootMargin:'0px',threshold:0.1});images.forEach(img=>observer.observe(img));}lazyLoadImages();-解析：通過(guò)`IntersectionObserver`檢測(cè)圖片是否進(jìn)入視口，若進(jìn)入則將`data-src`賦值給`src`，實(shí)現(xiàn)懶加載。2.減少重排的CSS優(yōu)化方案css/避免重排的CSS技巧/.container{transform:translateZ(0);/提升合成層，減少重排/will-change:transform;/提示瀏覽器優(yōu)化transform/}.layout{display:flex;/使用flex布局，減少定位沖突/flex-wrap:wrap;margin: