根據(jù) Google 研究，網(wǎng)站加載時間每增加 1 秒，轉(zhuǎn)化率會下降 7%；而加載速度小于 2 秒的網(wǎng)站，用戶留存率是慢速網(wǎng)站的 3 倍。性能優(yōu)化并非單純的 “技術(shù)調(diào)優(yōu)”，而是直接影響業(yè)務(wù)轉(zhuǎn)化的核心環(huán)節(jié)。本文將從 “資源加載”“代碼優(yōu)化”“緩存策略” 三個維度，提供可量化的優(yōu)化方案。​
一、資源加載優(yōu)化：減少請求與體積​
圖片優(yōu)化：壓縮與格式選擇​
壓縮工具：使用 TinyPNG（有損壓縮）或 Squoosh（Google 開源工具）壓縮圖片，平均可減少 50% 以上體積，且肉眼幾乎無差異。​
格式選擇：優(yōu)先使用 WebP 格式（比 JPG 小 25%-35%，支持透明），對動畫圖使用 AVIF（比 GIF 小 50%），并為不支持的瀏覽器提供降級方案：​
​
<picture>​
<source srcset="image.avif" type="image/avif">​
<source srcset="image.webp" type="image/webp">​
<img src="image.jpg" alt="優(yōu)化圖片">​
</picture>​
​
CSS 與 JS 優(yōu)化：合并、壓縮與延遲加載​
​
<script src="analytics.js" defer></script> <!-- 統(tǒng)計腳本，不影響首屏 -->​
<script src="main.js" async></script> <!-- 獨立功能腳本，無需順序 -->​
​
合并壓縮：使用 Webpack、Vite 等構(gòu)建工具將多個 CSS/JS 文件合并為單個文件，并開啟壓縮（如 Terser 壓縮 JS，CSSNano 壓縮 CSS），減少 HTTP 請求次數(shù)。​
延遲加載：對非首屏 JS 使用defer或async屬性，避免阻塞 DOM 解析：​
defer：腳本按順序加載，DOM 解析完成后執(zhí)行；​
async：腳本加載完成后立即執(zhí)行，不保證順序。​
示例：​
使用 CDN 加速靜態(tài)資源​
CDN（內(nèi)容分發(fā)網(wǎng)絡(luò)）通過全球節(jié)點緩存靜態(tài)資源（圖片、CSS、JS），用戶可從最近的節(jié)點獲取資源，延遲可降低 50% 以上。選擇 CDN 時需關(guān)注 “節(jié)點覆蓋范圍”“HTTPS 支持” 和 “實時監(jiān)控功能”，國內(nèi)推薦阿里云 CDN，國際推薦 Cloudflare。​
二、代碼層面的性能優(yōu)化​
CSS 選擇器優(yōu)化：CSS 選擇器從右向左解析，復(fù)雜選擇器會增加解析時間。例如避免使用div#header .nav li a，改為給鏈接添加類名.nav-link，直接通過類名選擇。​
JS 執(zhí)行效率優(yōu)化：避免在循環(huán)中操作 DOM（每次操作都會觸發(fā)重排重繪），可先創(chuàng)建文檔片段（DocumentFragment），批量操作后再插入 DOM：​
​
const fragment = document.createDocumentFragment();​
for (let i = 0; i < 100; i++) {​
const li = document.createElement(''li'');​
li.textContent = `Item ${i}`;​
fragment.appendChild(li);​
}​
document.querySelector(''ul'').appendChild(fragment);​
​
首屏加載優(yōu)先級：通過<link rel="preload">預(yù)加載首屏關(guān)鍵資源（如核心 CSS、首屏圖片），例如：​
​
<link rel="preload" href="critical.css" as="style">​
<link rel="preload" href="hero-image.webp" as="image" imagesrcset="hero-image-480w.webp 480w, hero-image-800w.webp 800w" imagesizes="100vw">​
​
三、緩存策略：減少重復(fù)加載​
HTTP 緩存：通過設(shè)置響應(yīng)頭控制緩存，常用組合：​
Cache-Control: public, max-age=31536000：靜態(tài)資源（如圖片、JS）設(shè)置 1 年緩存；​
Cache-Control: no-cache：動態(tài)內(nèi)容（如 HTML）每次驗證是否更新；​
ETag或Last-Modified：配合no-cache使用，驗證資源是否變化，不變則返回 304 狀態(tài)碼。​
Service Worker 緩存：對于 PWA（漸進(jìn)式 Web 應(yīng)用），可通過 Service Worker 攔截請求，實現(xiàn)離線緩存。核心流程：​
注冊 Service Worker；​
安裝時緩存核心資源；​
激活時清理舊緩存；​
攔截請求，優(yōu)先從緩存獲取資源。