2026年HTMLCSSJS前端工程師前端性能優化專項訓練卷

2026年HTMLCSSJS前端工程師前端性能優化專項訓練卷考試時間：______分鐘總分：______分姓名：______一、選擇題1.以下哪個指標主要衡量頁面加載過程中的視覺穩定性？A.FirstContentfulPaint(FCP)B.LargestContentfulPaint(LCP)C.CumulativeLayoutShift(CLS)D.TimetoInteractive(TTI)2.在前端性能優化中，"減少請求"的主要目的是？A.降低服務器的CPU負載B.減少用戶設備的網絡帶寬消耗C.提升瀏覽器主線程的利用率D.增加緩存命中率3.以下哪種HTTP緩存機制允許瀏覽器在未命中強緩存的情況下，向服務器發起請求，但請求頭中會帶上之前協商緩存的響應頭？A.強緩存B.協商緩存C.代理緩存D.內存緩存4.CSS選擇器`div#app.class1`的性能排序（從高到低）最可能是？A.`#app>div.class1`B.`div#app.class1`C.`.class1#appdiv`D.`div.class1#app`5.當主線程執行一個耗時操作時，為了不阻塞頁面渲染，可以使用什么機制？A.WebWorkersB.ServiceWorkersC.Promise.allD.EventLoop6.以下關于圖片優化的說法，錯誤的是？A.對于色彩豐富、細節復雜的圖片，使用WebP格式通常比JPEG效果更好。B.懶加載（LazyLoading）可以延遲非關鍵圖片的加載，提升首屏加載速度。C.響應式圖片（srcset）允許瀏覽器根據屏幕尺寸選擇合適大小的圖片資源。D.使用CSSSprite可以減少HTTP請求，但會增加圖片的復雜度。7.`will-change:transform;`屬性的主要作用是？A.確保元素在動畫過程中不會觸發重繪B.明確告知瀏覽器該元素可能會有復雜的變換，提前做好優化準備C.讓元素在動畫過程中暫時不可見D.增加元素的CPU占用，使其動畫更流暢8.在JavaScript代碼分割（CodeSplitting）中，使用`React.lazy()`和`Suspense`的主要目的是？A.減少主包體積，實現組件按需加載B.提升函數的執行效率C.增加瀏覽器緩存的大小D.防止內存泄漏9.ServiceWorker的主要優勢不包括？A.實現離線緩存B.優化網絡請求C.修改頁面DOM結構D.提升頁面渲染速度10.WebVitalsAPI中，`TTFB`指的是什么？A.TimetoFirstByteB.TimetoFirstPaintC.TimetoInteractiveD.TotalBlockingTime11.以下哪個不是Webpack的代碼拆分（CodeSplitting）插件？A.`SplitChunksPlugin`B.`MiniCssExtractPlugin`C.`OptimizeCSSAssetsPlugin`D.`SplitChunksPlugin`12.以下關于瀏覽器渲染流水線的說法，錯誤的是？A.Reflow指的是DOM樹或CSSOM樹的改變導致的頁面布局變化。B.Repaint指的是頁面的視覺外觀發生變化，但布局不變。C.CSS的`transform`和`opacity`屬性變化只會觸發Reflow。D.合成（Compositing）是將頁面分成多個層，并行繪制的優化過程。13.在排查JavaScript內存泄漏時，以下哪種情況最可能發生內存泄漏？A.在全局作用域中定義了一個變量B.使用了`let`或`const`聲明循環變量C.在閉包中引用了外部作用域的變量，且該閉包被長期持有D.及時調用了`DOM`元素對應的`removeEventListener`14.以下哪個工具主要用于分析Web應用的內存使用情況和查找內存泄漏？A.ChromeDevToolsNetwork面板B.ChromeDevToolsPerformance面板C.ChromeDevToolsMemory面板D.ChromeDevToolsLighthouse15.對于一個需要頻繁觸發的滾動事件處理函數，為了提升性能，通常會使用？A.`setTimeout`B.`setInterval`C.防抖（Debounce）D.節流（Throttle）二、多選題1.以下哪些屬于WebVitals指標？A.FirstInputDelay(FID)B.LargestContentfulPaint(LCP)C.CumulativeLayoutShift(CLS)D.TimetoLoad(TT)E.TimetoInteractive(TTI)2.以下哪些優化措施有助于提升LCP（LargestContentfulPaint）？A.優化首屏關鍵圖片的大小和格式B.使用懶加載延遲非關鍵資源的加載C.減少主線程執行JS的時間D.使用ServiceWorker進行關鍵資源的緩存E.優化CSS選擇器，減少重繪和回流3.以下哪些屬于HTTP緩存策略的一部分？A.設置`Cache-Control`頭B.設置`Expires`頭C.使用ETag進行協商緩存D.利用CDN進行緩存E.在HTML中使用`<linkrel="preload">`4.以下哪些情況可能導致瀏覽器進行Reflow？A.修改元素的寬高B.修改元素的邊距（margin）C.修改元素的字體大?。╢ont-size）D.修改元素的背景顏色（background-color）E.添加或刪除DOM元素5.ServiceWorker的主要應用場景包括？A.實現離線網頁應用（PWA）B.緩存靜態資源，提升加載速度C.優化網絡請求，如實現請求攔截和重試D.實現實時推送消息（PushNotifications）E.替換主線程執行所有JS代碼6.以下哪些是提升JavaScript執行性能的方法？A.使用`WebWorkers`處理耗時任務B.避免在循環中進行高開銷操作C.使用`TreeShaking`移除未使用的代碼D.盡量使用`let`和`const`代替`var`E.頻繁調用`DOM`操作7.以下哪些屬于前端性能監控的重要性？A.提升用戶體驗，降低跳出率B.及時發現并解決線上性能問題C.優化資源利用率，降低服務器成本D.輔助進行A/B測試E.提升網站SEO排名8.以下哪些是圖片優化的有效手段？A.使用適合場景的圖片格式（如WebP,AVIF）B.對圖片進行壓縮，在保證質量的前提下減小體積C.使用CSSSprite合并小圖標圖片D.實現圖片懶加載E.使用響應式圖片`srcset`和`sizes`屬性9.以下哪些說法有助于減少重繪（Repaint）？A.將頻繁變動的樣式放在單獨的CSS類中，通過JS切換類名B.避免使用會觸發重繪的CSS屬性（如`color`,`background-color`）進行動畫C.使用`transform`和`opacity`屬性進行動畫，因為它們可以由合成器處理D.在`canvas`或`SVG`元素上繪制E.減少DOM操作頻率10.以下哪些是前端性能優化的基本原則？A.最小化資源（減少數量、大?。〣.延遲加載非關鍵資源C.優化資源加載順序D.減少不必要的DOM操作E.提升JavaScript執行效率三、簡答題1.請簡述HTTP緩存的工作原理，包括強緩存和協商緩存的區別。2.什么是重繪（Repaint）和重排（Reflow）？它們分別有哪些常見的觸發場景？3.請解釋什么是“按需加載”和“代碼拆分”，它們在前端性能優化中分別起到什么作用？4.ServiceWorker是如何工作的？它主要解決了哪些前端性能和體驗方面的問題？5.什么是WebVitals？請列舉其中的三個核心指標并簡述其含義。四、分析題1.假設你正在排查一個Web應用的性能問題，用戶反饋加載速度很慢，首屏內容出現多次閃爍和布局抖動。請分析可能的原因，并說明你會使用哪些工具和方法來定位問題。2.給定以下代碼片段（假設使用React框架）：```javascriptfunctionUserProfile(){const[data,setData]=useState(null);useEffect(()=>{asyncfunctionfetchData(){constres=awaitfetch('/api/user/data');constjson=awaitres.json();setData(json);}fetchData();},[]);return(<div>{data?(<div><h1>{}</h1><p>{data.description}</p></div>):(<p>Loading...</p>)}</div>);}```請分析這段代碼在性能方面可能存在的問題，并提出至少三種優化建議。五、實踐題1.假設你正在開發一個使用Webpack打包的React應用。請描述你會如何配置Webpack的`SplitChunksPlugin`來實現JavaScript的代碼分割，并簡述其配置的關鍵參數及其作用。2.請簡述使用ServiceWorker實現靜態資源（如HTML、CSS、JS、圖片）緩存的步驟，并說明如何設置緩存策略（如白名單、黑名單、CacheFirst,NetworkFirst,Stale-While-Revalidate）。試卷答案一、選擇題1.C解析思路：CLS衡量頁面加載期間的布局變化次數和幅度，直接關聯視覺穩定性。FCP是內容首次可見的時間，LCP是largestcontentfulpaint，主要關聯內容的可見性，TTI是用戶可以開始交互的時間。2.B解析思路：減少請求直接減少了用戶在加載頁面過程中需要傳輸的數據量，節省了用戶的流量費用，降低了帶寬消耗。3.B解析思路：協商緩存是在強緩存失效后，瀏覽器根據之前存儲的響應頭信息（如ETag,Last-Modified）向服務器發起請求，服務器根據這些信息判斷是否可以直接返回緩存內容，而不是強制下載。強緩存則直接使用本地緩存。4.A解析思路：ID選擇器（#app）是最快，因為它直接映射到DOM中的唯一元素。之后是標簽選擇器（div），然后是類選擇器（.class1），類選擇器需要遍歷更多元素。組合選擇器會按順序執行，整體性能受后面選擇器的影響。5.A解析思路：WebWorkers允許在后臺線程執行JavaScript代碼，避免阻塞主線程。ServiceWorkers主要用于網絡請求攔截和緩存。Promise.all用于并發操作管理。EventLoop是JavaScript的執行機制，不是解決方案。6.D解析思路：CSSSprite通過合并多個小圖片到一個大圖片中，減少HTTP請求次數。但這會增加單個圖片文件的大小，如果合并的圖片過多或差異不大，可能導致加載時間變長，并非絕對優化。7.B解析思路：`will-change`是一個提示，告知瀏覽器該元素可能會有復雜的視覺變化（如transform,opacity），瀏覽器可以提前做好優化準備（如創建合成層），但并不保證一定會觸發優化或產生預期效果。8.A解析思路：`React.lazy`和`Suspense`配合使用，可以將組件及其依賴的代碼分割成單獨的chunk，在需要渲染該組件時才加載這個chunk，從而實現組件級別的按需加載，減少初始負載。9.C解析思路：ServiceWorker運行在瀏覽器環境，主要權限是攔截和處理網絡請求、管理緩存，它不能直接修改頁面的DOM結構。修改DOM需要通過JavaScript在主線程執行。10.A解析思路：TTFB（TimetoFirstByte）是指從發出HTTP請求到服務器首次響應字節（HTTP頭部信息）所需的時間，主要反映服務器處理請求和返回響應的速度。11.B解析思路：`MiniCssExtractPlugin`用于提取Webpack打包后的CSS到單獨的文件。`OptimizeCSSAssetsPlugin`用于優化CSS文件大小。`SplitChunksPlugin`是Webpack內置的代碼分割插件。`SplitChunksPlugin`本身是一個代碼分割插件。12.C解析思路：`transform`和`opacity`屬性的變化可以由瀏覽器的合成器（Compositor）處理，不觸發主線程的Reflow，但可能會觸發Repaint（如果合成器需要重新繪制該層）或創建合成層。13.C解析思路：閉包會捕獲外部作用域的變量，如果這個閉包被長期保留在內存中（例如作為某個長期存在的對象的屬性），而被捕獲的變量沒有被釋放，就可能導致內存泄漏。14.C解析思路：ChromeDevTools的Memory面板提供了詳細的內存快照、堆分析、內存分配視圖等功能，是排查JavaScript內存泄漏和內存使用問題的核心工具。Network面板用于分析網絡請求。Performance面板用于分析運行時性能（CPU、幀率、事件）。15.D解析思路：節流（Throttle）是指在指定時間內，無論事件觸發多少次，只執行一次事件處理函數，可以限制函數的調用頻率，減少計算量。防抖（Debounce）是指在事件觸發后，延遲一段時間執行函數，如果在這段時間內事件再次觸發，則重新計時，適用于處理快速連續的事件（如滾動）。二、多選題1.A,B,C解析思路：WebVitals定義了三個核心指標：LCP（LargestContentfulPaint）、FID（FirstInputDelay）、CLS（CumulativeLayoutShift）。TTI（TimetoInteractive）雖然也是性能指標，但不在WebVitals核心指標列表中。2.A,B,C,D,E解析思路：提升LCP需要關注首屏最大內容的加載和渲染。優化圖片大小和格式（A）、使用懶加載（B）、緩存關鍵資源（D）、減少重繪回流（E）都能加速首屏渲染。優化JS執行時間（C）也能間接提升LCP，因為JS阻塞可能導致圖片加載渲染延遲。3.A,B,C,D,E解析思路：HTTP緩存策略涵蓋了多種機制。強制型緩存（強緩存，A,B）和協商型緩存（C）是HTTP緩存的基本類型。CDN（D）通過分布式節點加速內容分發，可以看作是緩存的一種形式或輔助手段。預加載（E）是優化加載順序和資源獲取的技術，也間接關聯緩存行為（如預加載資源后可能被緩存）。4.A,B,C,E解析思路：Reflow是DOM結構或樣式變化導致頁面布局需要重新計算。修改寬高（A）、邊距（B）、字體大小（C）都會改變元素尺寸或位置，觸發Reflow。添加或刪除DOM元素（E）會改變DOM樹結構，瀏覽器需要重新計算剩余元素的布局，也會觸發Reflow。修改背景顏色（D）通常只觸發Repaint。5.A,B,C,D解析思路：ServiceWorker的主要應用場景包括離線支持（A）、緩存資源（B）、優化網絡請求（C）、推送消息（D）。它不能完全替代主線程，也不能直接提升頁面渲染速度（渲染速度主要受JS執行、DOM操作、GPU加速影響）。6.A,B,C,D解析思路：提升JS性能的方法包括使用WebWorkers（A）將耗時任務移到后臺線程，避免阻塞主線程；優化代碼邏輯，避免在循環中進行高開銷操作（B）；使用TreeShaking（C）移除未使用的代碼，減小包體積；使用let/const（D）有助于優化變量的查找。頻繁調用DOM操作（E）會降低性能，是應避免的行為。7.A,B,C,D,E解析思路：前端性能監控的重要性體現在多個方面：提升用戶體驗（A），慢加載導致用戶流失；及時發現并解決線上問題（B），避免負面影響；優化資源利用，降低成本（C）；輔助A/B測試（D），評估優化效果；提升SEO排名（E），搜索引擎會考慮網站速度。8.A,B,C,D,E解析思路：圖片優化手段多樣：選擇合適的格式（A）；壓縮（B）；CSSSprite（C）；懶加載（D）；響應式圖片（E）。這些都是常見的有效優化方法。9.A,B,C,E解析思路：減少重繪的方法：將變動樣式放在單獨類中切換（A）；避免使用color,background-color等屬性做動畫（B）；使用transform,opacity做動畫（C）；減少DOM操作（E）。在canvas/SVG上繪制（D）本身不會觸發DOM重繪，但canvas繪制有自身的性能考量。10.A,B,C,D,E解析思路：前端性能優化原則：最小化資源（A）；延遲加載（B）；優化加載順序（C）；減少DOM操作（D）；提升JS執行效率（E）。這些都是公認的基本原則。三、簡答題1.HTTP緩存工作原理：HTTP緩存分為強緩存和協商緩存。強緩存直接使用本地緩存，無需請求服務器。其判斷依據是HTTP響應頭中的`Cache-Control`（優先級最高）、`Expires`（已不常用）、`Pragma`等字段。如果強緩存未命中，或者緩存過期，瀏覽器會發起請求到服務器，此時使用協商緩存。協商緩存的判斷依據是`ETag`（實體標簽）和`Last-Modified`（最后修改時間）字段。服務器根據這些字段與本地資源的對應值判斷是否可以繼續使用本地緩存（304NotModified），否則返回新的資源。2.Reflow（重繪）：指頁面布局或元素的幾何屬性（如位置、大小、邊框、邊距等）發生變化，導致瀏覽器需要重新計算元素位置和繪制頁面。觸發場景包括：修改元素的尺寸（width,height）、位置（margin,padding,border）、字體大小、顏色、布局屬性（display）、添加/刪除DOM元素等。Reflow通常是必要的，但頻繁的Reflow會消耗大量CPU資源。Repaint（重繪）：指頁面元素的外觀發生變化，但其布局位置未變（如背景顏色、邊框顏色、文字顏色、背景圖片等）。瀏覽器只需要重新繪制該元素的外觀即可，不需要重新計算布局。觸發場景包括：修改元素的背景顏色、邊框顏色、文字顏色、背景圖片、visibility等。雖然比Reflow消耗資源少，但頻繁的重繪仍然會影響性能。3.按需加載：指根據實際需要才去加載某個資源或執行某段代碼。例如，當用戶滾動到某個區域時才加載該區域的內容，或者當用戶點擊某個按鈕時才加載并顯示某個組件。按需加載的主要作用是減少初始加載時的網絡請求和數據量，加快首屏加載速度，提升應用響應性。代碼拆分：指將一個大的JavaScript文件拆分成多個小的代碼塊（chunk），然后在需要的時候再加載這些代碼塊。在前端性能優化中，代碼拆分的主要作用是實現JavaScript的按需加載，將代碼塊與路由或組件關聯，只有訪問特定路由或組件時才加載對應的代碼塊，從而減少初始負載。4.ServiceWorker工作原理：ServiceWorker是一個在瀏覽器后臺獨立于Web頁面的JavaScript腳本，它可以攔截和處理網絡請求、管理緩存、推送消息等。它通過注冊（注冊時創建實例并監聽事件）和監聽`install`,`activate`,`fetch`等事件來工作。在`install`階段緩存資源，在`activate`階段清理舊緩存，在`fetch`事件中攔截網絡請求，可以選擇使用緩存響應、請求服務器或兩者結合。它運行在ServiceWorker線程中，與主線程隔離。ServiceWorker解決的問題：離線體驗（A）、緩存資源提升速度（B）、優化網絡請求（C）、推送消息（D）。它通過緩存機制減少了網絡延遲，通過請求攔截實現了更智能的網絡策略，通過后臺運行實現了離線支持。5.WebVitals：WebVitals是由Google提出的一組衡量Web頁面性能的指標，旨在量化用戶體驗的關鍵方面。它包含三個核心指標：*LargestContentfulPaint(LCP)：衡量頁面加載過程中的最大內容元素（通常是圖像或文本塊）何時可見。反映頁面加載速度和用戶感知的等待時間。*FirstInputDelay(FID)：衡量用戶首次與頁面進行交互（如點擊、滾動、提交）時，從交互時間點到瀏覽器響應時間點的延遲。反映頁面的交互響應性。*CumulativeLayoutShift(CLS)：衡量頁面加載期間，由于元素大小變化導致視口內容發生意外的布局偏移的累積程度。反映頁面的視覺穩定性。四、分析題1.可能原因及定位方法：*原因分析：*LCP加載慢：首屏最大內容（可能是圖片或大文本塊）資源過大或加載延遲。*JavaScript阻塞主線程：首屏加載了大量JS，且JS執行時間過長（長時間任務），阻塞了DOM的解析和渲染。*重繪/回流頻繁：首屏或附近區域存在大量動態樣式變化或DOM操作，導致瀏覽器頻繁重繪或回流，引起閃爍和抖動。*緩存未有效利用：強緩存或協商緩存配置不當，導致資源反復下載。*字體加載問題：字體文件過大或加載慢，導致文本渲染延遲。*第三方腳本影響：首屏加載了影響性能的第三方腳本。*定位方法：*ChromeDevToolsNetwork面板：檢查首屏關鍵資源的加載時間（時長、大?。R別緩慢資源（如大圖片、JS文件）。查看緩存狀態。*ChromeDevToolsPerformance面板：錄制加載過程，分析主線程CPU使用率，查找長時間運行的JavaScript任務（LongTasks），這些任務可能導致頁面凍結和布局抖動。觀察渲染過程，識別重繪/回流。*ChromeDevToolsMemory面板：檢查內存使用情況，排查內存泄漏或內存浪費。*Lighthouse：運行audits，獲取LCP,FID,CLS等指標的具體數值和優化建議。*檢查源碼和配置：查看關鍵資源的大小、加載方式（是否懶加載、預加載），檢查Webpack/Babel等構建工具的配置，檢查CSS和JS代碼。*逐步排查：可以嘗試禁用JavaScript加載，查看是否是JS問題；嘗試使用Lighthouse的無障礙模式，禁用網絡連接，查看資源是否能從緩存加載。2.代碼分析及優化建議：*問題分析：*問題1：`fetch`調用放在`useEffect`中，且`[]`為空依賴數組，這意味著這個`fetch`只會在組件首次掛載時執行一次。如果組件頻繁掛載（例如路由切換、列表滾動觸發重渲染），會不斷重新發起相同的請求，即使數據已經加載。*問題2：`fetch`是同步執行的（在`async`函數內部），雖然使用了`await`，但JS引擎會等待`fetch`完成才繼續執行后續代碼。如果`fetch`請求耗時較長，會阻塞組件的渲染，導致用戶看到加載提示的時間可能比實際數據準備時間更長。*問題3：緩存策略未考慮，每次都會請求服務器，沒有利用瀏覽器緩存或應用級緩存。*優化建議：*建議1：將`fetch`邏輯放入異步組件函數或使用自定義鉤子中，并利用React的`memo`或`useMemo`/`useCallback`配合空依賴數組緩存結果，避免在組件每次渲染時都執行?；蛘撸绻麛祿橇斜矸猪摷虞d，應使用`useEffect`配合路由參數或狀態作為依賴，只在數據變化或頁碼變化時請求。*建議2：將耗時的網絡請求（如API調用）抽離到異步函數中，并考慮使用`ReactQuery`或`SWR`等狀態管理庫，它們內置了緩存、自動重試、請求合并等機制，能更好地處理網絡請求和狀態管理，減少不必要的請求和JS阻塞。即使不使用這些庫，也應明確處理加載狀態和錯誤狀態，避免在JS執行完成前渲染空內容或阻塞。*建議3：對API返回的數據進行本地緩存（例如使用`localStorage`,`sessionStorage`,`useState`配合`useMemo`），設置合理的過期時間。對于靜態資源（HTML,CSS,JS），確保服務器配置了有效的強緩存（`Cache-Control`頭）。*建議4：如果數據不是實時變化的，可以考慮在服務器端設置緩存，減少后端壓力。五、實踐題1.Webpack配置代碼分割：*配置描述：使用Webpack內置的`SplitChunksPlugin`進行代碼分割。通過配置`chunks`參數為`all`或指定`test`正則表達式來分割模塊。關鍵參數包括：*`name`:分割后chunk的名稱，可以是`async`（異步加載，默認）、`initial`（入口chunk）或包含hash的名稱。*`chunks`:指定分割哪些chunk，`all`（分割所有模塊）、`async`（只分割非入口的異步模塊）、`initial`（只分割入口的模塊）。*`minSize`:分割的最小大小，低于此大小的模塊不會被分割。*`maxSize`:分割后chunk的最大大小，如果超過此大小會再進行分割。*`minChunks`:至少有多少個模塊共享這個chunk，才會進行分割。*`cacheGroups`:（高級）定義更細粒度的分割規則，例如可以單獨配置公共模塊（vendors）、業務模塊、異步模塊等的不同分割策略。*示例配置片段：```javascript//webpack.config.jsmodule.exports={optimization:{splitChunks:{chunks:'all',//分割所有模塊，包括異步和非異步name:'chunk-[name]-[hash]',//chunk名稱包含名稱和hashminSize:20000,//最小分割大小為20KBmaxSize:250000,//最大chunk大小為250KBminChunks:2,//至少2個模塊共享cacheGroups:{vendors:{test:/[\\/]node_modules[\\/]/,//分割node_modules中的第三方庫name:'vendors',//命名chunks:'all',//分割所有第三方庫},default:{//默認分割規則，分割業務代碼name:'chunk-[name]-[hash]',//命名chunks:'all',//分割所有業務代碼}}}}};```2.ServiceWorker實現靜態資源緩存步驟及策略：*實現步驟：1.注冊ServiceWorker：在主線程的JavaScript代碼中注冊ServiceWorker。通常放在應用入口文件（如`index.js`）或特定頁面的腳本中。```javascriptif('serviceWorker'innavigator){window.addEventListener('load',()=>{navigator.serviceWorker.register('/service-worker.js').then(registration=>{console.log('ServiceWorkerregisteredwithscope:',registration.scope);}).catch(error=>{console.log('ServiceWorkerregistrationfailed:',error);});});}```2.創建ServiceWorker腳本：創建一個名為`service-worker.js`的文件（或其他自定義名稱），該文件位于網站根目錄或指定路徑下。3.監聽安裝事件：在`service-worker.js`中監聽`install`事件。在`install`事件處理函數中，使用`caches.open()`打開一個緩存，并將應用所需的靜態資源（HTML,CSS,JS,圖片等）通過`cache.put()`添加到緩存中。```javascript//service-worker.jsletcacheName='my-cache-v1';self.addEventListener('install',event=>{event.waitUntil(caches.open(cacheName).then(cache=>{//添加需要緩存的資源returncache.addAll(['/','/index.html','/styles/main.css','/scripts/main.js','/images/logo.png','/fonts/myfont.woff']);}));});```4.監聽激活事件：監聽`activate`事件，用于清理舊緩存。可以在`activate`事件中獲取當前注冊的ServiceWorker的`claims`數組，然后使用`caches.keys()`獲取所有緩存名稱，刪除不在`claims`中的舊緩存。```javascriptself.addEventListener('activate',event=>{constcacheWhitelist=[cacheName];event.waitUntil(caches.keys().then(cacheNames=>{returnPromise.all(cacheNames.map(cacheName=>{if(cacheWhitelist.indexOf(cacheName)===-1){returncaches.delete(cacheName);}}));}));});```5.攔截網絡請