Web前端性能優(yōu)化專(zhuān)項(xiàng)訓(xùn)練試卷2025年考試沖刺考試時(shí)間：______分鐘總分：______分姓名：______一、選擇題（每題2分，共20分）1.以下哪個(gè)指標(biāo)主要衡量頁(yè)面加載過(guò)程中的視覺(jué)穩(wěn)定性？A.FIDB.LCPC.CLSD.TTI2.在HTTP緩存策略中，`Cache-Control:public,max-age=3600`表示？A.資源必須經(jīng)過(guò)代理服務(wù)器緩存B.資源可被任何中間節(jié)點(diǎn)緩存，有效期為1小時(shí)C.資源必須在私有緩存中存儲(chǔ)D.資源只能被首次請(qǐng)求的服務(wù)器緩存3.以下哪種圖片格式通常在保持較高質(zhì)量的同時(shí)提供更好的壓縮率，適合用于網(wǎng)頁(yè)？A.BMPB.GIFC.JPEGD.TIFF4.CSS選擇器中，`div#id.class`的選擇器優(yōu)先級(jí)最低的是？A.`div`B.`#id`C.`.class`D.`div#id`5.JavaScript中，以下哪個(gè)方法可以用來(lái)避免在短時(shí)間內(nèi)多次觸發(fā)函數(shù)？A.`setTimeout`B.`setInterval`C.`requestAnimationFrame`D.`throttle`或`debounce`6.以下哪個(gè)瀏覽器開(kāi)發(fā)者工具面板主要用于分析頁(yè)面內(nèi)存使用情況？A.SourcesB.ApplicationC.ConsoleD.Network7.`LCP`（LargestContentfulPaint）的主要目標(biāo)是衡量什么？A.頁(yè)面首次內(nèi)容渲染時(shí)間B.頁(yè)面加載完成時(shí)間C.可交互狀態(tài)達(dá)成時(shí)間D.頁(yè)面所有資源下載完成時(shí)間8.代碼分割（CodeSplitting）的主要目的是什么？A.減少首屏加載的JavaScript體積B.提高服務(wù)器響應(yīng)速度C.減少頁(yè)面重繪次數(shù)D.優(yōu)化CSS加載9.WebWorkers運(yùn)行在哪個(gè)環(huán)境中？A.主線(xiàn)程B.瀏覽器主進(jìn)程C.獨(dú)立的線(xiàn)程D.WebAPI線(xiàn)程10.以下哪項(xiàng)不屬于前端性能優(yōu)化的范疇？A.減少HTTP請(qǐng)求B.優(yōu)化數(shù)據(jù)庫(kù)查詢(xún)C.使用CDN加速內(nèi)容分發(fā)D.減少JavaScript執(zhí)行時(shí)間二、填空題（每空1分，共15分）1.WebVitals指標(biāo)中的FID指的是_______的時(shí)間，單位是毫秒。2.為了減少DNS查找時(shí)間，可以采用_______策略。3.CSS的`will-change`屬性可以用來(lái)告知瀏覽器哪些元素可能會(huì)有動(dòng)畫(huà)或變化，從而進(jìn)行_______優(yōu)化。4.緩存失效策略通常包括兩種：_______緩存和_______緩存。5.使用`<linkrel="preload">`可以指示瀏覽器優(yōu)先下載哪些資源。6.瀏覽器渲染頁(yè)面大致經(jīng)歷Parsing,_______,_______,Compositing這幾個(gè)階段。7.JavaScript執(zhí)行會(huì)導(dǎo)致主線(xiàn)程阻塞，可以使用_______或WebWorkers來(lái)處理耗時(shí)任務(wù)。8.`localStorage`和`sessionStorage`都屬于瀏覽器緩存，它們都是_______類(lèi)型的存儲(chǔ)。9.對(duì)于文本內(nèi)容，可以使用_______編碼方式來(lái)減少體積。三、簡(jiǎn)答題（每題5分，共20分）1.簡(jiǎn)述HTTP強(qiáng)緩存的工作原理。2.解釋什么是重繪（Repaint）和回流（Reflow），并說(shuō)明常見(jiàn)的優(yōu)化方法。3.什么是懶加載（LazyLoading）？請(qǐng)列舉至少兩種在前端常見(jiàn)的懶加載應(yīng)用場(chǎng)景。4.簡(jiǎn)述使用ChromeDevToolsPerformance面板進(jìn)行性能分析的基本步驟。四、案例分析題（每題10分，共20分）1.假設(shè)一個(gè)電商網(wǎng)站首頁(yè)加載緩慢，用戶(hù)反饋打開(kāi)頁(yè)面需要等待較長(zhǎng)時(shí)間才能看到主要內(nèi)容。請(qǐng)分析可能存在的性能瓶頸，并提出至少五條具體的優(yōu)化建議。2.某個(gè)單頁(yè)應(yīng)用（SPA）在用戶(hù)滾動(dòng)頁(yè)面時(shí)出現(xiàn)卡頓現(xiàn)象，請(qǐng)分析可能的原因，并提出相應(yīng)的優(yōu)化措施。---試卷答案一、選擇題1.C2.B3.C4.C5.D6.B7.A8.A9.C10.B二、填空題1.FirstInputDelay2.DNS預(yù)解析/使用CDN3.層（Layer）/Compositing4.強(qiáng)制/協(xié)商5.關(guān)鍵/重要6.Layout/Painting7.WebWorkers/requestAnimationFrame8.瀏覽器/Client-side9.UTF-8三、簡(jiǎn)答題1.解析思路：強(qiáng)緩存通過(guò)HTTP頭信息`Cache-Control:public/max-age`或`Expires`告知瀏覽器/緩存服務(wù)器資源可以在一定時(shí)間內(nèi)直接使用，無(wú)需再次請(qǐng)求原始服務(wù)器。其工作流程是：瀏覽器發(fā)起請(qǐng)求時(shí)，先檢查緩存（如localStorage,sessionStorage,cookie緩存,HTTP緩存等）是否命中。如果命中，且緩存有效（未過(guò)期），則直接使用緩存中的資源，不會(huì)發(fā)送網(wǎng)絡(luò)請(qǐng)求到服務(wù)器。2.解析思路：重繪是指元素的外觀(guān)發(fā)生改變，但布局未變，例如修改元素的背景顏色、邊框顏色、文字內(nèi)容等。回流是指元素的布局發(fā)生改變，例如修改元素的寬度、高度、位置、字體大小等，導(dǎo)致瀏覽器需要重新計(jì)算頁(yè)面布局。優(yōu)化方法包括：減少DOM操作、使用`transform`和`opacity`動(dòng)畫(huà)（觸發(fā)Compositing）、避免深層次選擇器、合理使用CSS屬性、將頻繁重繪的元素變?yōu)榻^對(duì)定位等。3.解析思路：懶加載是一種優(yōu)化技術(shù)，指將非關(guān)鍵資源（通常是頁(yè)面下方或未來(lái)才需要加載的內(nèi)容）延遲到真正需要顯示或使用時(shí)再進(jìn)行加載。應(yīng)用場(chǎng)景包括：長(zhǎng)列表滾動(dòng)加載更多數(shù)據(jù)、圖片/視頻在進(jìn)入可視區(qū)域時(shí)才加載、iframes或組件在需要時(shí)才異步加載等。4.解析思路：使用ChromeDevToolsPerformance面板分析性能的基本步驟：1.打開(kāi)Chrome瀏覽器，按F12或右鍵選擇“檢查”打開(kāi)DevTools。2.切換到“Performance”標(biāo)簽頁(yè)。3.點(diǎn)擊錄制按鈕，進(jìn)行操作（模擬用戶(hù)行為）。4.點(diǎn)擊停止錄制。5.在時(shí)間軸上找到性能問(wèn)題區(qū)域（如長(zhǎng)任務(wù)、重繪/回流、卡頓）。6.使用“記錄”按鈕記錄導(dǎo)致問(wèn)題的具體JavaScript代碼或事件。7.使用“幀率”（FrameRate）和“內(nèi)存”（Memory）等其他面板輔助分析。四、案例分析題1.解析思路：*可能瓶頸：*首屏資源過(guò)大：主CSS/JS文件體積過(guò)大，圖片未優(yōu)化。*HTTP請(qǐng)求過(guò)多：頁(yè)面元素過(guò)多，未做合并或預(yù)加載。*緩存策略不當(dāng)：未有效利用強(qiáng)緩存，或緩存過(guò)期導(dǎo)致重復(fù)加載。*渲染阻塞：關(guān)鍵CSS未內(nèi)聯(lián)，大量JavaScript阻塞DOM構(gòu)建。*第三方腳本影響：廣告、分析腳本加載慢或執(zhí)行耗時(shí)。*服務(wù)器響應(yīng)慢：CDN配置問(wèn)題或服務(wù)器處理能力不足。*優(yōu)化建議：*優(yōu)化首屏關(guān)鍵資源：壓縮CSS/JS，圖片懶加載/格式優(yōu)化（WebP）。*減少HTTP請(qǐng)求：合并文件（CSS/JS），使用雪碧圖或CSSSprite，內(nèi)聯(lián)關(guān)鍵CSS。*建立有效的緩存策略：設(shè)置合理的`Cache-Control`頭，利用ETag。*優(yōu)化加載順序：將關(guān)鍵CSS內(nèi)聯(lián)，非關(guān)鍵CSS使用`rel="preload"`，JavaScript放在`</body>`前或使用異步/延遲加載。*控制第三方腳本：異步加載，設(shè)置廣告攔截延遲。*使用CDN：加速內(nèi)容分發(fā)。*監(jiān)控性能指標(biāo)：使用Lighthouse或自定義監(jiān)控。2.解析思路：*可能原因：*主線(xiàn)程任務(wù)耗時(shí)過(guò)長(zhǎng)：復(fù)雜計(jì)算、DOM操作、未優(yōu)化的JavaScript執(zhí)行。*回流/重繪過(guò)于頻繁：大量DOM變更、復(fù)雜CSS樣式計(jì)算。*大量圖層合成（Compositing）：過(guò)多使用`transform`或`opacity`動(dòng)畫(huà)，導(dǎo)致合成層過(guò)多，消耗資源。*內(nèi)存泄漏：導(dǎo)致瀏覽器頻繁進(jìn)行垃圾回收（GC），搶占主線(xiàn)程時(shí)間。*WebWorkers使用不當(dāng)：未有效隔離耗時(shí)任務(wù)，或通信開(kāi)銷(xiāo)大。*瀏覽器渲染引擎限制：特定瀏覽器或版本的性能瓶頸。*優(yōu)化措施：*優(yōu)化JavaScript：避免長(zhǎng)任務(wù)（LongTasks），使用`requestAnimationFrame`進(jìn)行視覺(jué)更新，`WebWorkers`處理后臺(tái)計(jì)算。*減少回流/重繪：批量DOM操作，使用`DocumentFragment`，避免頻繁修改樣式。*優(yōu)化CSS動(dòng)畫(huà)：使用`tran