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