誤區:按展示內容劃分難度
「文本圖片 < 超鏈接 < 表單 < 音視頻 < Flash」這種分類法已過時。現代 Web 難度不在「展示什麼內容」,而在於 **架構決策、工程化程度、非功能性需求**。
現代 Web 複雜度維度
| 維度 | 低複雜度 | 中複雜度 | 高複雜度 |
| 架構模式 | 單頁靜態站點 (HTML/CSS/JS) | 前後端分離 (SPA + REST/GraphQL) | 微服務/Serverless/邊緣計算 |
| 狀態管理 | 無狀態/URL 狀態 | 客戶端狀態庫 | 分布式狀態、事件溯源、CQRS |
| 數據層 | 無/靜態 JSON | 單體數據庫 + ORM | 多模數據庫、讀寫分離、分片 |
| 構建部署 | FTP 上傳 | CI/CD 流水線、容器化 | GitOps、金絲雀發布、混沌工程 |
| 性能指標 | 無要求 | 首屏 < 3s、LCP 優化 | 極致 Web Vitals、流式渲染、邊緣緩存 |
| 安全合規 | HTTPS | CSP、XSS/CSRF 防護、GDPR | 零信任、WAF、滲透測試、合規認證 |
| 團隊協作 | 單人 | 前後端分工、代碼評審 | 多倉庫、Monorepo、契約測試 |
「最難」的其實是這些
- 產品決策不確定性:需求頻繁變更導致架構返工。
- 技術債管理:舊代碼耦合、無測試、不敢重構。
- 跨瀏覽器/設備兼容:Safari 特有 Bug、舊 Android WebView、微信小程序雙端適配。
- 性能優化黑盒:第三方腳本阻塞、字體加載閃爍、Hydration mismatch。
- 團隊認知統一:前端不懂後端協議、後端不懂瀏覽器渲染、產品不懂技術邊界。
Flash 時代的終結與現代替代
- Flash 已於 2020/12/31 官方停止支持,所有主流瀏覽器移除插件。
- 動畫/遊戲:Canvas 2D / WebGL / WebGPU + GSAP / Three.js / PixiJS。
- 視頻:HTML5
<video> + HLS/DASH + MSE/EME (DRM)。
- 富交互:WebAssembly 移植 C++/Rust 引擎(如 Figma、AutoCAD Web、Unity WebGL)。
給新手的建議
- 先掌握 **HTML 語義化、CSS 盒模型/彈性佈局/Grid、ES6+ JavaScript** 三大基石。
- 學會一個主流框架,**理解其核心原理**(響應式、虛擬 DOM、編譯時優化)。
- 搭建 **Vite + TypeScript + ESLint + Prettier + Husky** 標準化工程化模板。
- 部署到 **Vercel/Netlify/Cloudflare Pages** 體驗現代 CI/CD。
- 閱讀《Web 性能權威指南》《設計數據密集型應用》《整潔架構》,建立系統性認知。
總結
網站難度不在「有沒有圖片、視頻、Flash」,而在於 **工程化深度、架構決策質量、非功能性需求滿足度**。Flash 是歷史,WebAssembly/WebGPU/Serverless 是當下與未來。專注掌握現代工具鏈、架構模式、性能優化方法論,才是應對複雜度的正確路徑。