Web 應用優化實戰：Flickr 架構師 Cal Henderson 的 5 大核心技巧 (壓縮、快取、分發、合併、重寫)

背景

Flickr 作為 Web 2.0 代表，面對海量圖片、頻繁變動的 JS/CSS、高併發讀寫。Cal Henderson 分享的優化策略至今仍具指導意義。

1. 檔案大小與數量平衡：合併但不極端

• **全部合併成單檔** → 減少 HTTP 請求，但阻塞渲染、無法並行下載 (瀏覽器同域限 6 條連線)。
• **完全拆分** → 並行下載快，但請求數爆炸、DNS/TCP/SSL 開銷大。
• **Flickr 折衷**：JS/CSS 各拆 3-5 個邏輯塊 (核心、模組、頁面級)，**既減少請求又保留並行度**。

2. 壓縮策略：mod_deflate > mod_gzip

**實踐**：只壓縮 **文字類資源** (HTML/JS/CSS/JSON/XML)，**圖片/字體/視頻已壓縮**，再壓無效果反增 CPU。

3. 內容級壓縮：JS/CSS Minify

• **JS**：Dojo Compressor / UglifyJS / Terser — 解析 AST、重命名變數、移除死碼、壓縮語法。
• **CSS**：正則替換多空白、移除註釋、縮短顏色值 (`#ff0000`→`red`)、合併重複規則 → **最高 50% 壓縮比**。
• **構建流程整合**：`npm run build` 自動 Minify + 生成 Source Map 供除錯。

4. 快取策略：ETag + Last-Modified + 負載均衡技巧

• **標準快取**：`Last-Modified` + `If-Modified-Since`、`ETag` + `If-None-Match` → 304 Not Modified 省流量。
• **負載均衡坑**：預設 `ETag` 含 `inode`，多台伺服器 inode 不同 → 同檔案 ETag 不同 → 快取失效。
• **Flickr 解法**：`FileETag MTime Size` (僅用修改時間 + 大小)，確保叢集一致。**副作用**：`If-Modified-Since` 精度僅秒，極短間隔修改可能誤判。

5. mod_rewrite 靈活部署：每日構建、環境切換、靜態化

• **每日構建 (Daily Build)**：Rewrite 規則將靜態資源指向版本化目錄 `/static/v20240115/`，回滾只需改 Rewrite 規則。
• **環境隔離**：`RewriteCond %{HTTP_HOST} ^dev\.` → 指向開發版靜態資源。
• **偽靜態化動態頁**：`RewriteRule ^article/(\d+)\.html$ /article.php?id=$1 [L]` 隱藏 `.php`、美化 URL、利於 SEO。

總結：優化清單

1. JS/CSS 合併為 3-5 邏輯塊，啟用 `mod_deflate` + Minify (Terser/cssnano)。
2. 靜態資源強快取 (`Cache-Control: max-age=31536000, immutable`) + 版本化檔名 (`app.v20240115.js`)。
3. 叢集統一 `FileETag MTime Size`，關閉 `inode`。
4. 核心業務頁面靜態化或 Edge Side Includes (ESI) 片段快取。
5. 圖片 WebP/AVIF + 響應式 `srcset`，CDN 就近分發。

1. 上一篇文章： PHP 防圖片盜鏈：Apache Rewrite + PHP 代碼雙重保障，支援白名單、自定義防盜鏈圖
2. 下一篇文章： PHP curl_setopt 完整中文參考：選項分類、常用組合、錯誤碼對照

PHP 相關知識

Laravel 4.2 實作使用者註冊登入完整教學：從安裝到部署的實戰指南

Laravel 作為 PHP 最優雅的框架，提供開箱即用的認

PHP 微信帶參數二維碼（場景值）生成與事件處理完整實作

應用場景 用戶未登錄狀態下生成報價單，掃碼關注公眾號後自動推

PHP 單雙引號差異深度解析：效能、解析行為與雙引號安全隱患

PHP 單雙引號差異深度解析：效能、解析行為與雙引號安全隱患

PHPCMS V9 標簽調用大全：get 標簽、SQL 查詢、多欄目推薦位、分頁、跨庫調用實戰

常用函數速查 截取標題：{str_cut($r[title