[{"data":1,"prerenderedAt":1040},["ShallowReactive",2],{"navigation":3,"\u002Farticles\u002Fsync-vs-async":54,"\u002Farticles\u002Fsync-vs-async-surround":1037},[4],{"title":5,"path":6,"stem":7,"children":8,"page":53},"Articles","\u002Farticles","articles",[9,13,17,21,25,29,33,37,41,45,49],{"title":10,"path":11,"stem":12},"Async 到底在解決什麼問題？","\u002Farticles\u002Fasync-waiting","articles\u002Fasync-waiting",{"title":14,"path":15,"stem":16},"Callback 是什麼？","\u002Farticles\u002Fcallback","articles\u002Fcallback",{"title":18,"path":19,"stem":20},"Claude Code 的 Skill、MCP、Hook、Plugin 分別是什麼？","\u002Farticles\u002Fclaude-code-skill-mcp-hook-plugin","articles\u002Fclaude-code-skill-mcp-hook-plugin",{"title":22,"path":23,"stem":24},"用 Daily Snapshot 提升統計查詢速度","\u002Farticles\u002Fdaily-snapshot","articles\u002Fdaily-snapshot",{"title":26,"path":27,"stem":28},"GKE 部署","\u002Farticles\u002Fgke-deployment","articles\u002Fgke-deployment",{"title":30,"path":31,"stem":32},"I\u002FO 密集 vs CPU 密集：執行緒數該開多少？","\u002Farticles\u002Fio-bound-vs-cpu-bound","articles\u002Fio-bound-vs-cpu-bound",{"title":34,"path":35,"stem":36},"從 LLM 到 Agent：打通底層邏輯","\u002Farticles\u002Fllm-to-agent","articles\u002Fllm-to-agent",{"title":38,"path":39,"stem":40},"資訊安全實踐","\u002Farticles\u002Fsecurity-best-practices","articles\u002Fsecurity-best-practices",{"title":42,"path":43,"stem":44},"單機架構的性能優化","\u002Farticles\u002Fsingle-machine-performance","articles\u002Fsingle-machine-performance",{"title":46,"path":47,"stem":48},"伺服器渲染 SSR","\u002Farticles\u002Fssr","articles\u002Fssr",{"title":50,"path":51,"stem":52},"同步 vs 非同步","\u002Farticles\u002Fsync-vs-async","articles\u002Fsync-vs-async",false,{"id":55,"title":50,"author":56,"body":60,"date":1029,"description":1030,"extension":1031,"externalUrl":1032,"image":1033,"meta":1034,"minRead":398,"navigation":961,"path":51,"seo":1035,"stem":52,"__hash__":1036},"blog\u002Farticles\u002Fsync-vs-async.md",{"name":57,"avatar":58},"Gary",{"src":59,"alt":57},"\u002Fimages\u002Fselfie.webp",{"type":61,"value":62,"toc":1016},"minimark",[63,68,76,144,147,150,154,160,254,257,267,269,272,277,280,411,418,425,427,431,434,543,558,560,564,567,726,735,737,741,755,764,766,770,825,827,831,834,850,904,906,909,916,1012],[64,65,67],"h2",{"id":66},"什麼是同步","什麼是同步？",[69,70,71,75],"p",{},[72,73,74],"strong",{},"同步（Synchronous）"," 指程式逐行執行，必須等前一個操作完成，才能繼續下一行。",[77,78,83],"pre",{"className":79,"code":80,"language":81,"meta":82,"style":82},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const result = readFileSync('data.txt') \u002F\u002F 等待讀取完成\nconsole.log(result)                      \u002F\u002F 才執行這行\n","js","",[84,85,86,126],"code",{"__ignoreMap":82},[87,88,91,95,99,103,107,110,113,117,119,122],"span",{"class":89,"line":90},"line",1,[87,92,94],{"class":93},"spNyl","const",[87,96,98],{"class":97},"sTEyZ"," result ",[87,100,102],{"class":101},"sMK4o","=",[87,104,106],{"class":105},"s2Zo4"," readFileSync",[87,108,109],{"class":97},"(",[87,111,112],{"class":101},"'",[87,114,116],{"class":115},"sfazB","data.txt",[87,118,112],{"class":101},[87,120,121],{"class":97},") ",[87,123,125],{"class":124},"sHwdD","\u002F\u002F 等待讀取完成\n",[87,127,129,132,135,138,141],{"class":89,"line":128},2,[87,130,131],{"class":97},"console",[87,133,134],{"class":101},".",[87,136,137],{"class":105},"log",[87,139,140],{"class":97},"(result)                      ",[87,142,143],{"class":124},"\u002F\u002F 才執行這行\n",[69,145,146],{},"優點是邏輯直觀，缺點是遇到耗時操作（讀檔、網路請求）時，整個執行緒會卡住等待。",[148,149],"hr",{},[64,151,153],{"id":152},"什麼是非同步","什麼是非同步？",[69,155,156,159],{},[72,157,158],{},"非同步（Asynchronous）"," 指操作發出後不等結果，程式繼續往下跑，等操作完成時再透過某種機制通知。",[77,161,163],{"className":79,"code":162,"language":81,"meta":82,"style":82},"readFile('data.txt', (err, result) => {\n  console.log(result) \u002F\u002F 完成後才執行\n})\nconsole.log('這行先跑') \u002F\u002F 不等讀檔\n",[84,164,165,202,222,231],{"__ignoreMap":82},[87,166,167,170,172,174,176,178,181,184,188,190,193,196,199],{"class":89,"line":90},[87,168,169],{"class":105},"readFile",[87,171,109],{"class":97},[87,173,112],{"class":101},[87,175,116],{"class":115},[87,177,112],{"class":101},[87,179,180],{"class":101},",",[87,182,183],{"class":101}," (",[87,185,187],{"class":186},"sHdIc","err",[87,189,180],{"class":101},[87,191,192],{"class":186}," result",[87,194,195],{"class":101},")",[87,197,198],{"class":93}," =>",[87,200,201],{"class":101}," {\n",[87,203,204,207,209,211,214,217,219],{"class":89,"line":128},[87,205,206],{"class":97},"  console",[87,208,134],{"class":101},[87,210,137],{"class":105},[87,212,109],{"class":213},"swJcz",[87,215,216],{"class":97},"result",[87,218,121],{"class":213},[87,220,221],{"class":124},"\u002F\u002F 完成後才執行\n",[87,223,225,228],{"class":89,"line":224},3,[87,226,227],{"class":101},"}",[87,229,230],{"class":97},")\n",[87,232,234,236,238,240,242,244,247,249,251],{"class":89,"line":233},4,[87,235,131],{"class":97},[87,237,134],{"class":101},[87,239,137],{"class":105},[87,241,109],{"class":97},[87,243,112],{"class":101},[87,245,246],{"class":115},"這行先跑",[87,248,112],{"class":101},[87,250,121],{"class":97},[87,252,253],{"class":124},"\u002F\u002F 不等讀檔\n",[69,255,256],{},"JavaScript 是單執行緒語言，非同步讓它在等待結果的空檔不會被阻塞，能同時處理多件事。",[258,259,260],"blockquote",{},[69,261,262,263,266],{},"非同步存在的核心目的與「等待」的完整分類，可參考 ",[264,265,10],"a",{"href":11}," 一文。",[148,268],{},[64,270,271],{"id":271},"非同步的三個演進階段",[273,274,276],"h3",{"id":275},"_1-callback","1. Callback",[69,278,279],{},"最早的非同步處理方式，把「完成後要做什麼」當作函式傳入。",[77,281,283],{"className":79,"code":282,"language":81,"meta":82,"style":82},"fetchUser(id, (err, user) => {\n  fetchOrders(user.id, (err, orders) => {\n    fetchProducts(orders[0].id, (err, product) => {\n      \u002F\u002F Callback Hell\n    })\n  })\n})\n",[84,284,285,310,342,383,388,396,404],{"__ignoreMap":82},[87,286,287,290,293,295,297,299,301,304,306,308],{"class":89,"line":90},[87,288,289],{"class":105},"fetchUser",[87,291,292],{"class":97},"(id",[87,294,180],{"class":101},[87,296,183],{"class":101},[87,298,187],{"class":186},[87,300,180],{"class":101},[87,302,303],{"class":186}," user",[87,305,195],{"class":101},[87,307,198],{"class":93},[87,309,201],{"class":101},[87,311,312,315,317,320,322,325,327,329,331,333,336,338,340],{"class":89,"line":128},[87,313,314],{"class":105},"  fetchOrders",[87,316,109],{"class":213},[87,318,319],{"class":97},"user",[87,321,134],{"class":101},[87,323,324],{"class":97},"id",[87,326,180],{"class":101},[87,328,183],{"class":101},[87,330,187],{"class":186},[87,332,180],{"class":101},[87,334,335],{"class":186}," orders",[87,337,195],{"class":101},[87,339,198],{"class":93},[87,341,201],{"class":101},[87,343,344,347,349,352,355,359,362,364,366,368,370,372,374,377,379,381],{"class":89,"line":224},[87,345,346],{"class":105},"    fetchProducts",[87,348,109],{"class":213},[87,350,351],{"class":97},"orders",[87,353,354],{"class":213},"[",[87,356,358],{"class":357},"sbssI","0",[87,360,361],{"class":213},"]",[87,363,134],{"class":101},[87,365,324],{"class":97},[87,367,180],{"class":101},[87,369,183],{"class":101},[87,371,187],{"class":186},[87,373,180],{"class":101},[87,375,376],{"class":186}," product",[87,378,195],{"class":101},[87,380,198],{"class":93},[87,382,201],{"class":101},[87,384,385],{"class":89,"line":233},[87,386,387],{"class":124},"      \u002F\u002F Callback Hell\n",[87,389,391,394],{"class":89,"line":390},5,[87,392,393],{"class":101},"    }",[87,395,230],{"class":213},[87,397,399,402],{"class":89,"line":398},6,[87,400,401],{"class":101},"  }",[87,403,230],{"class":213},[87,405,407,409],{"class":89,"line":406},7,[87,408,227],{"class":101},[87,410,230],{"class":97},[69,412,413,414,417],{},"巢狀層數一深就難以維護，俗稱 ",[72,415,416],{},"Callback Hell","。",[258,419,420],{},[69,421,422,423,266],{},"Callback 的完整定義、判斷標準與常見誤解，可參考 ",[264,424,14],{"href":15},[148,426],{},[273,428,430],{"id":429},"_2-promise","2. Promise",[69,432,433],{},"ES6 引入，讓非同步操作可以鏈式呼叫，改善可讀性。",[77,435,437],{"className":79,"code":436,"language":81,"meta":82,"style":82},"fetchUser(id)\n  .then(user => fetchOrders(user.id))\n  .then(orders => fetchProducts(orders[0].id))\n  .then(product => console.log(product))\n  .catch(err => console.error(err))\n",[84,438,439,446,471,497,520],{"__ignoreMap":82},[87,440,441,443],{"class":89,"line":90},[87,442,289],{"class":105},[87,444,445],{"class":97},"(id)\n",[87,447,448,451,454,456,458,460,463,466,468],{"class":89,"line":128},[87,449,450],{"class":101},"  .",[87,452,453],{"class":105},"then",[87,455,109],{"class":97},[87,457,319],{"class":186},[87,459,198],{"class":93},[87,461,462],{"class":105}," fetchOrders",[87,464,465],{"class":97},"(user",[87,467,134],{"class":101},[87,469,470],{"class":97},"id))\n",[87,472,473,475,477,479,481,483,486,489,491,493,495],{"class":89,"line":224},[87,474,450],{"class":101},[87,476,453],{"class":105},[87,478,109],{"class":97},[87,480,351],{"class":186},[87,482,198],{"class":93},[87,484,485],{"class":105}," fetchProducts",[87,487,488],{"class":97},"(orders[",[87,490,358],{"class":357},[87,492,361],{"class":97},[87,494,134],{"class":101},[87,496,470],{"class":97},[87,498,499,501,503,505,508,510,513,515,517],{"class":89,"line":233},[87,500,450],{"class":101},[87,502,453],{"class":105},[87,504,109],{"class":97},[87,506,507],{"class":186},"product",[87,509,198],{"class":93},[87,511,512],{"class":97}," console",[87,514,134],{"class":101},[87,516,137],{"class":105},[87,518,519],{"class":97},"(product))\n",[87,521,522,524,527,529,531,533,535,537,540],{"class":89,"line":390},[87,523,450],{"class":101},[87,525,526],{"class":105},"catch",[87,528,109],{"class":97},[87,530,187],{"class":186},[87,532,198],{"class":93},[87,534,512],{"class":97},[87,536,134],{"class":101},[87,538,539],{"class":105},"error",[87,541,542],{"class":97},"(err))\n",[69,544,545,546,549,550,553,554,557],{},"Promise 有三種狀態：",[84,547,548],{},"pending"," → ",[84,551,552],{},"fulfilled"," \u002F ",[84,555,556],{},"rejected","，一旦確定就不會再變。",[148,559],{},[273,561,563],{"id":562},"_3-async-await","3. async \u002F await",[69,565,566],{},"ES2017 引入，讓非同步程式碼看起來像同步，是目前最常見的寫法。",[77,568,570],{"className":79,"code":569,"language":81,"meta":82,"style":82},"async function loadData() {\n  try {\n    const user = await fetchUser(id)\n    const orders = await fetchOrders(user.id)\n    const product = await fetchProducts(orders[0].id)\n    console.log(product)\n  } catch (err) {\n    console.error(err)\n  }\n}\n",[84,571,572,588,596,618,640,668,683,699,714,720],{"__ignoreMap":82},[87,573,574,577,580,583,586],{"class":89,"line":90},[87,575,576],{"class":93},"async",[87,578,579],{"class":93}," function",[87,581,582],{"class":105}," loadData",[87,584,585],{"class":101},"()",[87,587,201],{"class":101},[87,589,590,594],{"class":89,"line":128},[87,591,593],{"class":592},"s7zQu","  try",[87,595,201],{"class":101},[87,597,598,601,603,606,609,612,614,616],{"class":89,"line":224},[87,599,600],{"class":93},"    const",[87,602,303],{"class":97},[87,604,605],{"class":101}," =",[87,607,608],{"class":592}," await",[87,610,611],{"class":105}," fetchUser",[87,613,109],{"class":213},[87,615,324],{"class":97},[87,617,230],{"class":213},[87,619,620,622,624,626,628,630,632,634,636,638],{"class":89,"line":233},[87,621,600],{"class":93},[87,623,335],{"class":97},[87,625,605],{"class":101},[87,627,608],{"class":592},[87,629,462],{"class":105},[87,631,109],{"class":213},[87,633,319],{"class":97},[87,635,134],{"class":101},[87,637,324],{"class":97},[87,639,230],{"class":213},[87,641,642,644,646,648,650,652,654,656,658,660,662,664,666],{"class":89,"line":390},[87,643,600],{"class":93},[87,645,376],{"class":97},[87,647,605],{"class":101},[87,649,608],{"class":592},[87,651,485],{"class":105},[87,653,109],{"class":213},[87,655,351],{"class":97},[87,657,354],{"class":213},[87,659,358],{"class":357},[87,661,361],{"class":213},[87,663,134],{"class":101},[87,665,324],{"class":97},[87,667,230],{"class":213},[87,669,670,673,675,677,679,681],{"class":89,"line":398},[87,671,672],{"class":97},"    console",[87,674,134],{"class":101},[87,676,137],{"class":105},[87,678,109],{"class":213},[87,680,507],{"class":97},[87,682,230],{"class":213},[87,684,685,687,690,692,694,696],{"class":89,"line":406},[87,686,401],{"class":101},[87,688,689],{"class":592}," catch",[87,691,183],{"class":213},[87,693,187],{"class":97},[87,695,121],{"class":213},[87,697,698],{"class":101},"{\n",[87,700,702,704,706,708,710,712],{"class":89,"line":701},8,[87,703,672],{"class":97},[87,705,134],{"class":101},[87,707,539],{"class":105},[87,709,109],{"class":213},[87,711,187],{"class":97},[87,713,230],{"class":213},[87,715,717],{"class":89,"line":716},9,[87,718,719],{"class":101},"  }\n",[87,721,723],{"class":89,"line":722},10,[87,724,725],{"class":101},"}\n",[69,727,728,731,732,417],{},[84,729,730],{},"async\u002Fawait"," 底層仍是 Promise，只是語法糖，讓錯誤處理可以用熟悉的 ",[84,733,734],{},"try\u002Fcatch",[148,736],{},[273,738,740],{"id":739},"小結三個階段在演進什麼","小結：三個階段在演進什麼",[69,742,743,744,747,748,751,752,754],{},"JS 非同步的演進，是一條從 ",[72,745,746],{},"callback","（能用但難維護）→ ",[72,749,750],{},"Promise","（結構化、統一錯誤處理）→ ",[72,753,730],{},"（語法糖、可讀性接近同步程式碼）的路線，核心目標始終是同一個：讓「處理非同步結果」這件事，寫起來越來越像寫同步程式碼一樣直覺，同時保留非同步不阻塞的效能優勢。",[69,756,757,758,760,761,763],{},"而且很重要的一點：",[84,759,730],{}," 底層還是 Promise，Promise 底層還是靠 callback 機制（Event Loop 把 callback 塞進 Call Stack 執行）。所以 callback、Event Loop 的原理，是理解 Promise 和 ",[84,762,730],{}," 底層運作的必備基礎，並沒有被取代，只是被包裝得更好用了。",[148,765],{},[64,767,769],{"id":768},"同步-vs-非同步比較","同步 vs 非同步比較",[771,772,773,788],"table",{},[774,775,776],"thead",{},[777,778,779,782,785],"tr",{},[780,781],"th",{},[780,783,784],{},"同步",[780,786,787],{},"非同步",[789,790,791,803,814],"tbody",{},[777,792,793,797,800],{},[794,795,796],"td",{},"執行方式",[794,798,799],{},"等待完成才繼續",[794,801,802],{},"發出後繼續執行",[777,804,805,808,811],{},[794,806,807],{},"適合場景",[794,809,810],{},"運算密集、順序依賴",[794,812,813],{},"I\u002FO 操作、網路請求",[777,815,816,819,822],{},[794,817,818],{},"風險",[794,820,821],{},"阻塞執行緒",[794,823,824],{},"流程較複雜",[148,826],{},[64,828,830],{"id":829},"什麼時候用同步","什麼時候用同步？",[69,832,833],{},"非同步不是萬能的，以下場景用同步更合適：",[835,836,837,844],"ul",{},[838,839,840,843],"li",{},[72,841,842],{},"啟動時的初始化","：程式啟動時讀取設定檔，必須等完成才能繼續",[838,845,846,849],{},[72,847,848],{},"CLI 工具","：簡單腳本沒有並發需求，同步反而清楚",[77,851,853],{"className":79,"code":852,"language":81,"meta":82,"style":82},"\u002F\u002F Node.js 啟動時讀取設定，同步沒問題\nconst config = JSON.parse(readFileSync('config.json', 'utf-8'))\n",[84,854,855,860],{"__ignoreMap":82},[87,856,857],{"class":89,"line":90},[87,858,859],{"class":124},"\u002F\u002F Node.js 啟動時讀取設定，同步沒問題\n",[87,861,862,864,867,869,872,874,877,879,882,884,886,889,891,893,896,899,901],{"class":89,"line":128},[87,863,94],{"class":93},[87,865,866],{"class":97}," config ",[87,868,102],{"class":101},[87,870,871],{"class":97}," JSON",[87,873,134],{"class":101},[87,875,876],{"class":105},"parse",[87,878,109],{"class":97},[87,880,881],{"class":105},"readFileSync",[87,883,109],{"class":97},[87,885,112],{"class":101},[87,887,888],{"class":115},"config.json",[87,890,112],{"class":101},[87,892,180],{"class":101},[87,894,895],{"class":101}," '",[87,897,898],{"class":115},"utf-8",[87,900,112],{"class":101},[87,902,903],{"class":97},"))\n",[148,905],{},[64,907,908],{"id":908},"並行執行多個非同步操作",[69,910,911,912,915],{},"如果多個操作互不依賴，可以用 ",[84,913,914],{},"Promise.all"," 同時發出，縮短等待時間。",[77,917,919],{"className":79,"code":918,"language":81,"meta":82,"style":82},"\u002F\u002F 依序執行：等 A 完成才發 B（慢）\nconst user = await fetchUser(id)\nconst config = await fetchConfig()\n\n\u002F\u002F 並行執行：同時發出（快）\nconst [user, config] = await Promise.all([fetchUser(id), fetchConfig()])\n",[84,920,921,926,941,957,963,968],{"__ignoreMap":82},[87,922,923],{"class":89,"line":90},[87,924,925],{"class":124},"\u002F\u002F 依序執行：等 A 完成才發 B（慢）\n",[87,927,928,930,933,935,937,939],{"class":89,"line":128},[87,929,94],{"class":93},[87,931,932],{"class":97}," user ",[87,934,102],{"class":101},[87,936,608],{"class":592},[87,938,611],{"class":105},[87,940,445],{"class":97},[87,942,943,945,947,949,951,954],{"class":89,"line":224},[87,944,94],{"class":93},[87,946,866],{"class":97},[87,948,102],{"class":101},[87,950,608],{"class":592},[87,952,953],{"class":105}," fetchConfig",[87,955,956],{"class":97},"()\n",[87,958,959],{"class":89,"line":233},[87,960,962],{"emptyLinePlaceholder":961},true,"\n",[87,964,965],{"class":89,"line":390},[87,966,967],{"class":124},"\u002F\u002F 並行執行：同時發出（快）\n",[87,969,970,972,975,977,979,982,984,986,988,992,994,997,1000,1002,1005,1007,1009],{"class":89,"line":398},[87,971,94],{"class":93},[87,973,974],{"class":101}," [",[87,976,319],{"class":97},[87,978,180],{"class":101},[87,980,981],{"class":97}," config",[87,983,361],{"class":101},[87,985,605],{"class":101},[87,987,608],{"class":592},[87,989,991],{"class":990},"sBMFI"," Promise",[87,993,134],{"class":101},[87,995,996],{"class":105},"all",[87,998,999],{"class":97},"([",[87,1001,289],{"class":105},[87,1003,1004],{"class":97},"(id)",[87,1006,180],{"class":101},[87,1008,953],{"class":105},[87,1010,1011],{"class":97},"()])\n",[1013,1014,1015],"style",{},"html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"title":82,"searchDepth":128,"depth":128,"links":1017},[1018,1019,1020,1026,1027,1028],{"id":66,"depth":128,"text":67},{"id":152,"depth":128,"text":153},{"id":271,"depth":128,"text":271,"children":1021},[1022,1023,1024,1025],{"id":275,"depth":224,"text":276},{"id":429,"depth":224,"text":430},{"id":562,"depth":224,"text":563},{"id":739,"depth":224,"text":740},{"id":768,"depth":128,"text":769},{"id":829,"depth":128,"text":830},{"id":908,"depth":128,"text":908},"2026-07-05","解釋同步與非同步的核心差異，以及 JavaScript 中 callback、Promise、async\u002Fawait 的演進與使用場景。","md",null,"\u002Fimages\u002Fdata-flow.jpg",{},{"title":50,"description":1030},"CpGEMhuDWeyrI_bySkUCP6o5rFH1qlSjzbEuyU6h6FI",[1038,1032],{"title":46,"path":47,"stem":48,"description":1039,"children":-1},"介紹伺服器端渲染的運作原理、與 CSR 的差異、優缺點，以及在 Nuxt.js 開發中需要注意的事項。",1784010809814]