[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-why-webassembly-is-still-wrong-default-web-apps-zh":3,"article-related-why-webassembly-is-still-wrong-default-web-apps-zh":30,"series-tools-96ec24bd-8710-4289-aae4-8c4e6c417444":81},{"id":4,"slug":5,"title":6,"content":7,"summary":8,"source":9,"source_url":10,"author":11,"image_url":12,"cover_image":12,"category":13,"language":14,"translated_content":11,"related_article_id":15,"keywords":16,"key_takeaways":22,"views":26,"created_at":27,"published_at":28,"topic_cluster_id":29},"96ec24bd-8710-4289-aae4-8c4e6c417444","why-webassembly-is-still-wrong-default-web-apps-zh","為什麼 WebAssembly 仍不是 Web App 的預設選擇","\u003Cp data-speakable=\"summary\">WebAssembly 是處理熱點效能的工具，不該成為多數 Web App 的預設架構。\u003C\u002Fp>\u003Cp>我認為 WebAssembly 被過度使用了，對多數 Web App 而言，JavaScript 仍然是第一選擇。2026 年的 \u003Ca href=\"\u002Fnews\u002Fmdn-webassembly-guide-turns-js-into-a-host-zh\">Wasm\u003C\u002Fa> 堆疊確實更成熟，像 WebAssembly 3.0、WasmGC、Component Model 與更好的瀏覽器支援，都讓它在影像處理、AI 推論、遊戲邏輯上有明顯收益。但這些成功案例共同指向同一件事：Wasm 擅長的是狹窄、昂貴、可量測的工作負載，不是廣泛的 UI 應用，把它當預設只會增加複雜度，未必換來等值的速度。\u003C\u002Fp>\u003Ch2>第一個論點\u003C\u002Fh2>\u003Cp>\u003Ca href=\"\u002Fnews\u002Fwasm-one-codebase-many-runtimes-zh\">Wasm\u003C\u002Fa> 的價值是真實的，但它的強項很窄。文章中的 PicShift 影像管線就是好例子：原本在 JavaScript 需要 3 到 4 秒，換成 Wasm 後可壓到 200 毫秒以下。這不是小幅優化，而是體感等級的差距，也證明了 Wasm 最適合的是計算密集、邊界清楚的熱路徑。\u003C\u002Fp>\n\u003Cfigure class=\"my-6\">\u003Cimg src=\"https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1779975171254-vc7q.png\" alt=\"為什麼 WebAssembly 仍不是 Web App 的預設選擇\" class=\"rounded-xl w-full\" loading=\"lazy\" \u002F>\u003C\u002Ffigure>\n\u003Cp>同樣的模式也出現在基準測試裡。文章提到 Fibonacci 在 WebAssembly 中可比純 JavaScript 快 3 到 10 倍，並給出一個實務判準：若某段計算在 JavaScript 中超過 5 毫秒，才值得考慮 Wasm。這不是叫你重寫整個前端，而是提醒你把 Wasm 當成選配的加速器，而不是整棟房子的地基。\u003C\u002Fp>\u003Ch2>第二個論點\u003C\u002Fh2>\u003Cp>多數 Web App 的瓶頸根本不在 CPU。真正拖慢產品的，常是 DOM 更新、網路往返、版面重排與狀態管理，而不是某個純計算函式。文章也直接承認，Wasm 不能直接碰 DOM，必須透過 JavaScript glue code 轉接，這讓瀏覽器最核心的互動模型變得更繞、更不直覺。\u003C\u002Fp>\u003Cp>跨邊界成本也不是抽象問題。文章舉例，將 50 KB 文字傳入 Wasm 函式，序列化就會多出 8 毫秒延遲。這對一般應用邏輯是很重的稅。如果你的功能主要在搬運字串、物件與事件，Wasm 不會簡化系統，只會在原本的瀏覽器\u003Ca href=\"\u002Fnews\u002Fwhy-webassembly-became-a-production-runtime-zh\">執行\u003C\u002Fa>環境上，再疊一層 runtime 與資料轉換成本。\u003C\u002Fp>\u003Ch2>反方可能怎麼說\u003C\u002Fh2>\u003Cp>最強的反方論點是：Wasm 早已成熟到足以更廣泛採用。WebAssembly 3.0、WasmGC、Component Model 與 WASI Preview 2，確實讓互通性比過去好得多。對想要同一份程式碼同時跑在瀏覽器、伺服器與 edge 的團隊來說，Wasm 的可攜性很有吸引力。\u003C\u002Fp>\n\u003Cfigure class=\"my-6\">\u003Cimg src=\"https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1779975170458-d1gi.png\" alt=\"為什麼 WebAssembly 仍不是 Web App 的預設選擇\" class=\"rounded-xl w-full\" loading=\"lazy\" \u002F>\u003C\u002Ffigure>\n\u003Cp>另一個合理主張是產品面需求。對隱私敏感的 AI 推論、離線工具與 edge 工作負載，Wasm 可以降低延遲、減少伺服器成本，也能把資料留在客戶端。文章提到 \u003Ca href=\"\u002Ftag\u002Fcloudflare\">Cloudflare\u003C\u002Fa> Workers、Fastly Compute 與瀏覽器內推論，這些都不是邊緣案例，而是已經能創造商業價值的部署方式。\u003C\u002Fp>\u003Cp>我接受 Wasm 在這些特定工作負載上可以是正解，但這正是它的上限。可攜性不能消除邊界呼叫成本，新標準也不會讓 Wasm 原生理解 DOM。若你的產品成敗取決於 UI 反應速度、整合效率與開發吞吐量，JavaScript 仍是更好的預設；Wasm 應該是針對熱點的優化層，不是整個堆疊的骨架。\u003C\u002Fp>\u003Ch2>你能做什麼\u003C\u002Fh2>\u003Cp>如果你是工程師，先用 JavaScript 做出功能，再用 profiling 找出真正的慢點，只有熱迴圈、編解碼器、模型推論或物理引擎這類區塊才移到 Wasm。若你是 PM 或創辦人，請要求 CPU profile、序列化成本、bundle 體積與維護負擔的證據，再決定要不要導入。Wasm 要在數據逼你選它時才上場，不要因為它聽起來新，就把它變成預設。\u003C\u002Fp>","WebAssembly 是處理熱點效能的工具，不該成為多數 Web App 的預設架構；大部分產品仍應先用 JavaScript。","daily.dev","https:\u002F\u002Fdaily.dev\u002Fblog\u002Fwebassembly-web-developers-getting-started-wasm\u002F",null,"https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1779975171254-vc7q.png","tools","zh","3cc103d5-b092-4009-9683-4a5e6c20d281",[17,18,19,20,21],"WebAssembly","JavaScript","Web App","效能優化","架構選擇",[23,24,25],"Wasm 適合熱路徑，不適合當多數 Web App 的預設架構。","UI、DOM 與資料搬運通常是 Web App 的主要成本，不是純計算。","導入 Wasm 前要先拿到可量測的瓶頸證據與維護成本評估。",3,"2026-05-28T13:32:21.45168+00:00","2026-05-28T13:32:21.43+00:00","668ddadd-2f38-49c1-9dc2-2cc11ab46519",{"tags":31,"relatedLang":40,"relatedPosts":44},[32,33,35,36,38],{"name":20,"slug":20},{"name":18,"slug":34},"javascript",{"name":21,"slug":21},{"name":17,"slug":37},"webassembly",{"name":19,"slug":39},"web-app",{"id":15,"slug":41,"title":42,"language":43},"why-webassembly-is-still-wrong-default-web-apps-en","Why WebAssembly Is Still the Wrong Default for Web Apps","en",[45,51,57,63,69,75],{"id":46,"slug":47,"title":48,"cover_image":49,"image_url":49,"created_at":50,"category":13},"63d8b456-ad6b-475e-86e9-d4677ca226aa","magenta-realtime-2-score-inside-daw-zh","Magenta RealTime 2 讓你在 DAW 裡即時改曲","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1781046204038-8tox.png","2026-06-09T23:02:55.9651+00:00",{"id":52,"slug":53,"title":54,"cover_image":55,"image_url":55,"created_at":56,"category":13},"f60261ff-a42e-4cfb-9f90-97785e633289","open-source-ai-tools-beat-claude-paid-tiers-zh","開源 AI 工具在價值上已經贏過 Claude 付費方案","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1781045266035-on7t.png","2026-06-09T22:47:20.195939+00:00",{"id":58,"slug":59,"title":60,"cover_image":61,"image_url":61,"created_at":62,"category":13},"8520cd4f-2531-4808-a95d-26f590239d7a","500-ai-agent-projects-show-where-agents-work-now-zh","500 個 AI agent 專案，現在能做什麼","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1781033591132-c0nh.png","2026-06-09T19:32:37.03924+00:00",{"id":64,"slug":65,"title":66,"cover_image":67,"image_url":67,"created_at":68,"category":13},"c557ef1c-7fde-4c86-918e-4fb9680ee9df","chocolatey-go-package-policy-installs-zh","Chocolatey 的 Go 安裝變成政策","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1781029110289-xkbh.png","2026-06-09T18:18:05.078435+00:00",{"id":70,"slug":71,"title":72,"cover_image":73,"image_url":73,"created_at":74,"category":13},"90b2df54-df6e-417d-9e16-91e9ad2f53d7","go-support-policy-turns-releases-into-a-checklist-zh","Go 支援政策把發版變清單","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1781028200122-3m4u.png","2026-06-09T18:02:49.50176+00:00",{"id":76,"slug":77,"title":78,"cover_image":79,"image_url":79,"created_at":80,"category":13},"119c23c6-8ae7-4c4e-820e-1eba0730d702","rustdesk-self-hosting-secure-remote-access-zh","RustDesk 自架遠端存取部署指南","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1781017373324-g7et.png","2026-06-09T15:02:24.118819+00:00",[82,87,92,97,102,107,112,117,122,127],{"id":83,"slug":84,"title":85,"created_at":86},"855cd52f-6fab-46cc-a7c1-42195e8a0de4","surepath-real-time-mcp-policy-controls-zh","SurePath 推出即時 MCP 政策控管","2026-03-26T07:57:40.77233+00:00",{"id":88,"slug":89,"title":90,"created_at":91},"9b19ab54-edef-4dbd-9ce4-a51e4bae4ebb","mcp-in-2026-the-ai-tool-layer-teams-use-zh","2026 年 MCP：團隊真的在用的 AI 工具層","2026-03-26T08:01:46.589694+00:00",{"id":93,"slug":94,"title":95,"created_at":96},"af9c46c3-7a28-410b-9f04-32b3de30a68c","prompting-in-2026-what-actually-works-zh","2026 提示工程，真正有用的是什麼","2026-03-26T08:08:12.453028+00:00",{"id":98,"slug":99,"title":100,"created_at":101},"05553086-6ed0-4758-81fd-6cab24b575e0","garry-tan-open-sources-claude-code-toolkit-zh","Garry Tan 開源 Claude Code 工具包","2026-03-26T08:26:20.068737+00:00",{"id":103,"slug":104,"title":105,"created_at":106},"042a73a2-18a2-433d-9e8f-9802b9559aac","github-ai-projects-to-watch-in-2026-zh","2026 必看 20 個 GitHub AI 專案","2026-03-26T08:28:09.619964+00:00",{"id":108,"slug":109,"title":110,"created_at":111},"a5f94120-ac0d-4483-9a8b-63590071ac6a","claude-code-vs-cursor-2026-zh","Claude Code 與 Cursor 深度對比：202…","2026-03-26T13:27:14.279193+00:00",{"id":113,"slug":114,"title":115,"created_at":116},"0975afa1-e0c7-4130-a20d-d890eaed995e","practical-github-guide-learning-ml-2026-zh","2026 機器學習入門 GitHub 實用指南","2026-03-27T01:16:49.712576+00:00",{"id":118,"slug":119,"title":120,"created_at":121},"bfdb467a-290f-4a80-b3a9-6f081afb6dff","aiml-2026-student-ai-ml-lab-repo-review-zh","AIML-2026：像課綱的學生實驗 Repo","2026-03-27T01:21:51.467798+00:00",{"id":123,"slug":124,"title":125,"created_at":126},"80cabc3e-09fc-4ff5-8f07-b8d68f5ae545","ai-trending-github-repos-and-research-feeds-zh","AI Trending：把 AI 資源收成一張表","2026-03-27T01:31:35.262183+00:00",{"id":128,"slug":129,"title":130,"created_at":131},"3ce6e6e2-bac5-463e-9f8d-45caabcc61f7","awesome-ai-for-science-research-tools-map-zh","AI 科研工具清單，開始像地圖了","2026-03-27T01:46:50.521945+00:00"]