iT邦幫忙

2025 iThome 鐵人賽

DAY 30
0
Modern Web

從 Canvas 到各式各樣的 Web API 之旅系列 第 30

Day 30 - 完賽總結:從 Canvas 到各式各樣的 Web API 之旅 🎉

  • 分享至 

  • xImage
  •  

完!賽!了!第一次參加鐵人賽,每天數著日子發文、熬大夜,終於順利完成了~ 😭 這三十天的鐵人賽,從最初的 Canvas 開始,一步步走進瀏覽器的世界,認識了無數讓網頁更強大的 Web API。每天發文、每天測試、每天 debug,每天都在學習新的東西。回頭看,真的很值得!

在最後一篇裡回顧一下過去 29 天的文章內容。


回顧過去 29 天的文章

一、從 Canvas 開始的繪圖世界

Day 2 ~ Day 8 是整個系列的起點。從 Canvas API 的誕生、基本用法、效能優化,到 Fabric.js 與跨域安全議題,這一週讓大家深入淺出瞭解「瀏覽器如何畫出每一個像素」。

Canvas 是瀏覽器最原始、最自由的一塊畫布。

這段時間最印象深刻的,是理解「為什麼已經有 DOM 和 CSS,還需要 Canvas?」—— 因為有些事情,像素級繪製、遊戲引擎、即時影像處理,DOM 根本辦不到。


二、多媒體互動的世界

Day 9 ~ Day 16Day 18 ~ 19 聚焦在「人與裝置的互動」:

這些 API 讓瀏覽器更像作業系統,讓 Web App 不只是「網頁」。

這幾篇也讓我體會到一件事:權限管理與安全模型 是現代瀏覽器重要的一塊,是保護也是限制。從麥克風到剪貼簿,每一步都牽涉使用者信任。


三、性能與資料的角力場

Day 17Day 20 ~Day 25 IndexedDB、Service Worker、Performance API、Web Animations API——全都是瀏覽器背後的基礎建設。

這些 API 看不見卻影響深遠,讓網頁不只是「展示內容」,而是能儲存、計算、預載、離線的應用。


四、多工與即時:瀏覽器的平行宇宙

Day 26 ~ Day 28 帶我們進入 Worker 與 WebSocket 的世界。

  • Dedicated Worker:讓重運算脫離主執行緒,不再卡畫面。
  • Shared Worker:讓多分頁共用邏輯與資源。
  • WebSocket:讓瀏覽器與伺服器持續連線、即時互動。

瀏覽器其實是一個小型作業系統,能同時處理事件、資料流、繪圖與網路任務。這就是前端的「深度」。


五、極限效能:WebAssembly 登場!

Day 29 是整個系列的壓軸,從 JavaScript 到 C/C++、Rust、Go,全都能在瀏覽器中以接近原生的速度執行。這不只是效能的突破,更象徵語言邊界的融合。

WebAssembly 讓 Web 成為跨語言平台,也讓「效能型應用」不再是原生 App 的專利。


回顧這 30 天

三十天的鐵人賽,最難的不是寫程式,也不是發文,而是堅持與取捨

每天晚上都在想:這篇要講到多深?要不要加 demo?要不要畫圖?
最後學到的不只是 API,而是:

💡「要學會站在瀏覽器的角度思考。」

當你懂得:

  • 為什麼瀏覽器要這樣設計?
  • 為什麼有些 API 被廢止、有些成為標準?

你就不只是「用」它,而是能「理解」它,甚至預測下一步會發展成什麼樣。


後續建議與延伸方向

如果你讀完這系列,想繼續挖掘 Web API 的世界,可以從這些方向出發:

1. 實務整合

  • PWA:Service Worker + Notification + Background Sync。
  • WebRTC:影音串流、即時會議。
  • WebGPU / WebGL2:高效能圖像與 AI 推論。

2. 深入理解

這些都在推動 Web 成為更完整的作業平台。


最後的話

第一次挑戰鐵人賽,真的不輕鬆。每天熬夜查文件、寫文章、寫 demo,但也因此,我習慣並喜歡上「寫技術文章」這件事

有任何問題歡迎留言,感謝這三十天曾經幫忙、給建議、點讚、留言的每一位讀者。如果這系列有讓你更了解瀏覽器世界,或讓你對某個 API 產生興趣,那這趟旅程就值得了。😇


上一篇
Day 29 - WebAssembly 是什麼?讓 C/C++、Rust、Go 在瀏覽器跑、超越 JavaScript 的效能
系列文
從 Canvas 到各式各樣的 Web API 之旅30
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言