📄 全部影片🎧 語音解析📝 筆記✍️ 練習

📄 全部影片

51 站11 個主題區更新於 2026-10-01 00:59

各站

勘誤件數(這支影片):確定錯誤/已過時見仁見智

顯示 51 / 51 站按空白鍵或 Enter 加下一個條件;條件之間是 AND

Ruby, Rails, and the future of programming - Matz, DHH & Jeremy Daer 1h03m

Ruby, Rails, and the future of programming - Matz, DHH & Jeremy Daer

Ruby on Rails
4 天前 · 17 段 · YouTube
9/9十個階段都做完了
Ruby、Rails 與程式設計的未來:Matz 與 DHH 對 agent 時代的一場對談
  • 用機率取代預測:不知道方向也能行動,押在多個世界都不虧的選擇上
  • 人的價值從打字移到品味、比例感與驗收判斷
  • vibe coding 不是新東西:資深者一直是提案、別人實作、自己驗收
  • agent 要短命行程,所以 JIT 幫不上忙,只能事前編譯(Spinel)
  • 抽象消失不等於依賴消失,只等於依賴變得看不見——開源會更難養
術語:Claude Code coding agent five stages of grief Rubyist software writer software maker taste Spinel …共 47 個
接著看 ←Rails World 2026 Opening Keynote - DHH · 同一場 Rails World:Keynote 拋出的論點,隔天這場座談由 Matz 正面接招
接著看 ←Not Holding Back the Ocean · 先分清愛的是手藝還是目的,再看 Matz 與 DHH 怎麼回答同一題
接著看 →How a Cloudflare Engineer Ships Production Code He Didn't Write | Dillon Mulroy · 座談談完信任與驗收的原則,這站是實際怎麼出不是自己寫的 production code
相關 —3 Frontend Skills AI Can't Replace (become AI-proof) · 都在問 AI 時代人還剩什麼:一邊是品味與驗收,一邊是前端的三項技能
相關 —Lauren Tan grokbot workshop 中文字幕 · vibe coding 的理念端與實作端:座談談為什麼,workshop 談怎麼帶
開啟文字解析 →

確定錯誤/已過時見仁見智(取決於版本或情境)

段落原話(transcript 逐字)說明
6. 寫程式不再是職涯,能力卻被放大
17:41
「as a career, it will be taken away from us in the fairly near future」 這是預測而不是已發生的事實,而且 Matz 在同一段裡自己給了限定條件:他說的是多數人會轉向產品與上市,也就是「以親手寫程式碼為主要價值的職位」會縮小,不等於軟體工程職缺消失。把這句話當成既定事實會做出錯誤的職涯決定;合理的讀法是把它當成一個機率判斷,並注意「不久的將來」沒有定義時間範圍。
依據: Rails World 2026 座談現場發言,未提出任何就業資料佐證
9. Slop、slop grenade 與心理防衛
31:17
「The idea that agents cannot write high-quality, original code without bugs is simply a delusion at this point.」 這句話把兩個強度差很多的主張綁在一起:「agent 寫得出高品質程式碼」(有相當多證據)與「寫得出沒有 bug 的原創程式碼」(沒有證據支持,而且人也做不到)。David 自己在下一段就承認 agent 會犯錯,所以他真正的意思應該是「不比人差」而不是字面上的「沒有 bug」。把這句照字面採信,會低估驗收與測試仍然必要的程度。
依據: 同一場座談稍後 David 自述「sometimes an agent will make a mistake」
10. 判斷要交出去多少:信任等於能力
38:33
「There are no health compensation claims in Denmark.」 字面上不成立:丹麥有全國性的無過失病人補償制度(Patienterstatningen),病人每年提出大量補償申請並獲得理賠。比較接近事實的說法是「丹麥不透過訴訟解決醫療損害」——賠償存在,只是不走法院。這句話在字幕裡還經過機器翻譯,講者原話可能就是「沒有醫療訴訟」;不論如何,用它來支持「有些社會完全不追究」是站不住的,真正成立的論點是制度設計會改變追究的方式與成本。
依據: 丹麥 Patienterstatningen(病人補償協會)自 1992 年起依 Patient Insurance Act 運作
10. 判斷要交出去多少:信任等於能力
38:52
「is about eight times safer than the average person」 「自駕約比一般人安全八倍」沒有公認的來源。目前公開資料多半來自業者自行發布、且限定在特定城市與天候的營運範圍內,比較基準(是否含高速公路、是否只算有人受傷的事故、每百萬英里還是每小時)一換,倍數就會大幅變動。方向上「在其營運範圍內比人類安全」有證據支持,但「八倍」應視為他個人引用的粗略數字而非定論。
依據: 講者自述「according to my data」,現場未指明來源
13. Commodore 64 時代:token 焦慮是短視
45:29
「next year we'll have an agent that works 10 times faster, and the year after that, 100 times faster」 這是一個具體到可以被證偽的預測,但沒有任何依據被提出。「快十倍」本身也沒有定義:是每秒 token 數、同樣任務的完成時間、還是單位成本?過去兩年單位 token 成本確實大幅下降,但那來自模型尺寸、蒸餾與硬體三者疊加,不是一條可外推的曲線。把它當成修辭上的方向(會明顯變快變便宜)合理,當成規劃數字不合理。
依據: 現場未提出任何效能或價格資料
13. Commodore 64 時代:token 焦慮是短視
46:40
「Anthropic and OpenAI may be leading, but their lead is measured in months, if not weeks.」 在公開的能力評測上,前沿模型之間的差距確實常在數個月內被追上,這部分有支持。但「以週計」通常只在單一評測分數上成立,若把資本支出、專用硬體取得、長期記憶與工具整合等一起算,實際落差比分數差距大。這句話是用來支撐「不必擔心被宰」的論點,讀的時候要分清楚是「模型分數的落差」還是「整體產品與成本結構的落差」。
依據: 現場未引用任何評測或市場資料
14. Ruby 的 token 效率與 agent 的偏好
47:52
「static typing doesn't help with either token efficiency or time efficiency」 這個結論來自一次非正式的語言比較,樣本與方法都沒有公開,而且量測的是「最終程式碼」的 token 數與執行時間,不是「agent 完成任務所花的總 token 與總時間」。靜態型別在 agent 迴圈裡的主要價值是編譯器提供的即時、確定性回饋,能減少來回嘗試的次數——這一項不在被測指標裡。所以合理的讀法是「型別不會讓最終產物更省」,不能推論成「型別對 agent 沒有價值」。
依據: Matz 自述為同事對約 13 種語言的比較,現場未說明任務集與量測方式
Rails World 2026 Opening Keynote - DHH 1h03m

Rails World 2026 Opening Keynote - DHH

Ruby on Rails
7 天前 · 24 段 · YouTube
10/10十個階段都做完了
DHH 的 agent 時代宣言:手寫程式碼的終結,與為什麼該選擇樂觀
  • 看懂「被取代的不是能力,是某項技能的經濟價值」這個成本模型
  • 學會用攝影史判斷一次技術跳躍是真臨界點還是雜訊
  • 知道價格歸零後哪些技術選擇要重估:web/native、語言醜陋、抽象化
  • 拿到一條可照做的要求:你的 app 該有 CLI,讓使用者自備 agent
  • 理解為什麼 DHH 把樂觀當成賽局解,而不是情緒或信仰
術語:agent AI psychosis AI euphoria state of the art commission Kodak Brownie democratization of technology pivot …共 63 個
接著看 ←Not Holding Back the Ocean · 先分清愛手藝還是愛目的,DHH 用攝影史把同一題推成產業宣言
接著看 ←How a Cloudflare Engineer Ships Production Code He Didn't Write | Dillon Mulroy · 先看一個工程師六個月的實測代價,再看 DHH 推成全產業結論
接著看 ←Lauren Tan grokbot workshop 中文字幕 · verification 與硬約束,就是 DHH 說的「修工廠而不是補程式碼」
接著看 →Parallel Agent Orchestration with Orca: Local AI Mac · DHH 說上萬 agent 並行讓抽象成瓶頸,Orca 是真的並行跑多 agent
相關 —3 Frontend Skills AI Can't Replace (become AI-proof) · 同一問題的兩種答案:哪些技能被塗灰,哪些留下
相關 —The 3 Skills That Separate Architects From Senior Developers · 抽象與架構該不該重估,對照架構師的結構設計技能
接著看 →Ruby, Rails, and the future of programming - Matz, DHH & Jeremy Daer · 同一場 Rails World:Keynote 拋出的論點,隔天這場座談由 Matz 正面接招
開啟文字解析 →

確定錯誤/已過時見仁見智(取決於版本或情境)

段落原話(transcript 逐字)說明
8. 從 10x 到 1000x:換算成職業的單位
16:15
「an article in ACM Magazine from 1968, where they tested a group of programmers on a variety of different tasks」 1968 年那篇論文(Sackman, Erikson & Grant, CACM)並不是在測「各式各樣的任務」,而是比較線上與離線兩種除錯環境,受試者只有十餘人;著名的 28:1 差距一部分來自受試者使用的語言層級不同。把它當成「個體生產力差 10 倍」的證據,四十年來一直有方法學上的爭議,因此「那場爭論已經結束」也並非共識。
依據: Sackman, Erikson & Grant, “Exploratory experimental studies comparing online and offline programming performance”, CACM 11(1), 1968;後續批評見 Prechelt (1999)、Bossavit《The Leprechauns of Software Engineering》
18. 從手寫程式碼退休,帶著喜悅而不是後悔
40:57
「By the end of the year, it will be virtually all domains, virtually all programmers, virtually all companies.」 這是一個帶明確期限的全稱預測,而他自己在開場才說過「任何預測二十分鐘後就過期」。受管制產業、嵌入式與安全關鍵系統、以及大量有長期歷史包袱的 codebase,目前都沒有出現「手寫程式碼不再具經濟生產力」的公開證據;他的資料來源是自己與 37signals 一家公司。這句該當成立場宣示而不是可驗證的事實。
依據: 他自己於 00:01:45 說「whenever we try to make a prediction, it is out of date about 20 minutes later」;全場唯一的量化依據是他個人的 git 統計與 37signals 的內部決策
22. 一次成形的應用,與半個 MB
54:33
「Apparently not even if you're Spotify and your fucking music player's 1.2 gigabytes.」 拿來對比半 MB 的這個數字偏高。Spotify 桌面版的安裝體積大約在數百 MB 等級,要達到 1.2 GB 通常得把離線歌曲與本機快取一起算進去——那是資料不是程式。用它支撐「應用又肥又懶」的論點方向沒錯,但這個具體數字不宜當作事實引用。
依據: Spotify 桌面版官方下載與安裝後佔用約數百 MB;快取上限預設可成長至數 GB,兩者性質不同
23. 擔憂、安全,與預測為什麼總是錯
56:25
「When ATMs were introduced in the United States in the 1950s,」 年代錯了。世界第一台 ATM 是 1967 年由 Barclays 裝設在倫敦;美國第一台一般認為是 1969 年 Chemical Bank 在紐約 Rockville Centre 的那台,普及則要到 1970 年代末到 1980 年代。1950 年代美國還沒有 ATM,因此「1950 年代的恐慌」在時間上不成立。案例的方向(自動化未必減少就業)仍然有效,錯的是年代。
依據: Barclays, Enfield, 1967;Chemical Bank, Rockville Centre NY, 1969;James Bessen, Learning by Doing (2015)
24. P(bloom) 勝過 P(doom):把不可知變成一個選擇
1:00:08
「William Stanley Jevons, who came up with Jevons' paradox」 歸因錯置。Jevons(1835–1882)是在 1865 年的《The Coal Question》裡用煤與蒸汽機提出這個悖論的,比第一台 ATM 早了一個世紀,他不可能「為了那些 ATM」提出它。悖論本身確實可以用來解釋 ATM 的案例,但那是後人的套用,不是 Jevons 的論述。
依據: W. S. Jevons, The Coal Question, 1865;ATM 首次出現於 1967 年
24. P(bloom) 勝過 P(doom):把不可知變成一個選擇
1:00:16
「In 1950, 30,000 bank tellers. In, I think, 2010 it was, 40,000 bank tellers in the United States.」 數字差了一個量級。這個案例的標準出處是 James Bessen 的研究:美國銀行行員約從 1970 年的 30 萬人增加到 2010 年的約 60 萬人,成長幅度是兩倍而不是三分之一,而且起算點是 1970 年代而非 1950 年。他要表達的方向(自動化之後行員不減反增)是對的,但這組數字不能引用。
依據: James Bessen, “Toil and Technology”, IMF Finance & Development, 2015;美國勞工統計局 (BLS) 歷年 bank teller 就業統計
Building a Harness with Jev 9m14s

Building a Harness with Jev

LangChain✓ 0
10 天前 · 9 段 · YouTube
10/10十個階段都做完了
用 Jev(System 1 model)替 agent harness 裡的分類型判斷換上更快更便宜的模型
  • 看出 tool calling / structured outputs 只替 LLM 加型別約束,沒解慢與貴
  • 說出 System 1 model 為何不生成文字就能快幾十倍、以及它做不到什麼
  • 分辨 Jev 的 choice / score / noul 三種問題,與機率 vs confidence 的差別
  • 把 routing、auto mode、judge 三個用例對回 agent loop 的入口、action 邊、loop 之後
  • 用 langchain-typesafe 寫出最小呼叫,並找出自己 agent 裡該換掉的判斷點
術語:harness agent loop LLM tool calling structured outputs JSON schema primitive Jev …共 32 個
接著看 ←An ex-OpenAI researcher just deleted language from the LLM... · 那站解釋 Jev 為何不生成文字、noul/choice/score;這站把它掛進 agent loop 的 routing、auto mode、judge
接著看 ←Lauren Tan grokbot workshop 中文字幕 · grokbot 說護欄要硬、驗證要自動;這站給 0.1 秒的分類器做 auto mode 攔截與 online evals 打分
相關 —How a Cloudflare Engineer Ships Production Code He Didn't Write | Dillon Mulroy · 共用 harness:Dillon 說多 agent loop 貴且 harness 飄移;這站用便宜的 Jev 接住 loop 裡每輪的判斷
相關 —Jev + Treg is a crazy combo for automation... · 同用 Jev 的 state + 三種 question:一站接進 agent harness,一站蓋商業自動化管線與分層門檻
開啟文字解析 →
Jev + Treg is a crazy combo for automation... 14m29s

Jev + Treg is a crazy combo for automation...

AI Jason
10 天前 · 9 段 · YouTube
10/10十個階段都做完了
Jev(只做決策的校準模型)+ Treg(便宜的資料 API)如何讓商業自動化的可信度與單位經濟同時成立
  • 分清「不可信」與「不划算」:商業自動化卡住的兩個原因各有不同解法
  • Jev 只在選項中分配機率、不生成文字,所以又快又便宜還附校準的信心分數
  • state + choice/true-false/score 三種 question,就能把大多數判斷寫成 Jev 能答的形式
  • 用 0.70/0.35 分層門檻把灰色地帶交給人,用 not_for 劃清選項交界
  • filter → qualify → reach:便宜的判斷先做、貴的資料抓取最後只對前段做
術語:RLHF (Reinforcement Learning from Human Feedback) overconfidence calibration Jev reinforcement learning for calibrated decisions token-by-token generation context window map-reduce …共 38 個
接著看 ←An ex-OpenAI researcher just deleted language from the LLM... · 那站講 Jev 為何刪掉語言、noul/choice/score 與校準信心;這站拿它接 Treg 蓋出三條生產管線
相關 —Lauren Tan grokbot workshop 中文字幕 · 都在問「何時敢讓機器全自動」:一個用 verification 與 CI 硬約束,一個用校準機率的分層門檻
相關 —Building a Harness with Jev · 同用 Jev 的 state + 三種 question:一站接進 agent harness,一站蓋商業自動化管線與分層門檻
開啟文字解析 →

確定錯誤/已過時見仁見智(取決於版本或情境)

段落原話(transcript 逐字)說明
2. Jev 是什麼:只做決策、不生成文字
1:57
「quite consistently Jeff is around five to seven times faster and five times cheaper」 「便宜 5 倍」只在較長輸入成立。作者自己畫面上的對照表顯示成本倍數在 2k 輸入時只有 1.7×,8k/16k/32k 才是 5.8×/5.8×/5.7×;速度倍數(約 5.9–7.0×)則各長度都符合。短 prompt 的場景成本優勢會比作者說的小。
依據: 影片 1:55 處作者自製的 Jev vs GPT-5.6 Luna 對照表(frames/s02_115.jpg)
6. 案例一:詐騙偵測到註冊分析(引入 Treg)
9:17
「track is achieving similar even better accuracy」 「更好」要看指標。作者自己貼出的 Treg vs Clay 對照表:找到人數 289 vs 280、地址精確比對 90.4% vs 89.7% 是 Treg 略勝,但 precision 91.3% vs 93.6% 是 Clay 略勝。「差不多」成立,「更好」不全面;明確拉開差距的是成本(每列 $0.0051 vs $0.0354)與延遲(0.44 s vs 11.2 s)。
依據: 影片 9:15 處作者於 2026-09-16 發表的 Treg vs Clay 對照表(frames/s06_555.jpg)
An ex-OpenAI researcher just deleted language from the LLM... 5m27s

An ex-OpenAI researcher just deleted language from the LLM...

Fireship
10 天前 · 5 段 · YouTube
10/10十個階段都做完了
Jev:把語言從 LLM 裡刪掉,換來一個只回選項機率、附校準信心的 System 1 分類器
  • 說得出「刪掉語言」在技術上是什麼:不解碼,只從固定選項讀機率
  • 分清 Jev 三種回傳形狀 noul / choice / score,以及 noul 回的是機率不是布林
  • 解釋型別安全為何不等於正確,以及 calibrated confidence 與 RLCD 補了什麼
  • 用信心門檻把分類器接進自動化流程:過就自動、沒過退人工或推理模型
  • 看懂 OpenJev 的 frozen Qwen 4B 單次 forward pass 如何重現 Jev,並判斷它沒重現哪一半
術語:Large Language Model (LLM) classifier hallucination output tokens instruction following type-safe schema matching Noul …共 25 個
接著看 →Jev + Treg is a crazy combo for automation... · 那站講 Jev 為何刪掉語言、noul/choice/score 與校準信心;這站拿它接 Treg 蓋出三條生產管線
接著看 →Building a Harness with Jev · 那站解釋 Jev 為何不生成文字、noul/choice/score;這站把它掛進 agent loop 的 routing、auto mode、judge
開啟文字解析 →

確定錯誤/已過時見仁見智(取決於版本或情境)

段落原話(transcript 逐字)說明
1. LLM 的致命缺陷:不會閉嘴
0:50
「200 times faster, 400 times cheaper with free output tokens and zero hallucinations」 同一畫面上 TypeSafe 自己的對照表寫的是「40x–200x faster」(70ms–500ms vs 3–329 秒),200 倍是區間上限;價格 $0.042 vs $0.20–$10 / MTok 算起來約 5–240 倍,「400 倍」要把輸出 token 免費一起算才湊得到。這些數字全是廠商自報,作者後面也自稱它們是 Trust-Me-Bro benchmarks。「零幻覺」只在「不會產生選項以外的輸出」的意義下成立,不代表選對。
依據: 影片 0:52 畫面上的 TypeSafe LLM vs Jev 對照表
3. System 1 模型與便宜到能即時用的場景
2:45
「440 times cheaper than one of the big brand models」 同一支影片前面說的是 400 倍,這裡變 440 倍;依 0:52 對照表 $10 vs $0.042 / MTok 約 238 倍,要選特定最貴的模型並把輸出 token 一起算才會到 400 以上。作者自己也用「if we are to believe these Trust Me Bro Benchmarks」帶過,這是廠商自報數字。
依據: 影片 0:52 的 TypeSafe 對照表;影片 0:50 的「400 times cheaper」
The top 1% Think on Paper. Here’s How To Do It. 19m54s

The top 1% Think on Paper. Here’s How To Do It.

Justin Sung
7 個月前 · 11 段 · YouTube
10/10十個階段都做完了
Think on paper:用「寫錯、寫短、重做」三原則在紙上組織思考,降低混亂但不繞過大腦處理
  • 分辨「把想法卸載到紙上」和「在紙上思考」:前者繞過大腦處理,後者沒有
  • Make it wrong:先把關鍵字撒上紙、大膽猜連結,避免分析癱瘓並 prime 大腦
  • Make it shorter:只留關鍵字、不求漂亮,字數越多代表處理越少
  • Make it again:圖變亂或發現錯誤時 regroup / rearrange / reconnect,重整本身就是學習
  • 同一套三原則適用於讀書、會議、獨自解決複雜問題
術語:think on paper overwhelm cognitive processes make it wrong make it shorter make it again analysis paralysis mind map …共 19 個
接著看 ←How to Remember Everything You Read · PACER 說 Conceptual 資訊要「畫網路式地圖」;這站示範怎麼畫:撒關鍵字、猜連結、重整
相關 —How to Learn So Fast People Assume You're Naturally Gifted · 兩站都把 overwhelm 當起點:一站把困惑變問題清單,一站把拼圖碎片攤上紙再猜連結
相關 —how to learn ANYTHING faster than anyone · 總覽站的「盡快失敗」在這站變成 make it wrong:先猜錯再修正才是學習
開啟文字解析 →

確定錯誤/已過時見仁見智(取決於版本或情境)

段落原話(transcript 逐字)說明
7. 原則二:Make it shorter 的理由
11:30
「you don't need reference material anymore」 取決於材料與用途。可上傳的數位文件確實能交給 AI 查詢,但版權書籍常無法整本上傳、AI 對長文件的回答可能遺漏或出錯、需要精確引用(法規、論文、考試範圍)時仍需要自己的摘錄。「參考筆記的必要性大幅下降」比「完全不需要」更站得住。
依據: 2026 年主流 LLM 產品(ChatGPT、Claude、Gemini)皆支援上傳文件問答,但仍有 context 上限與幻覺問題,官方文件都提醒關鍵資訊需自行核對。
8. 縮短筆記的具體做法
13:25
「goes down as your word count goes up」 研究結論比這句更細:逐字抄寫式的長筆記(例如打字逐字記錄)與較差的概念理解有關聯,但多項研究裡「筆記量」與學習成效是正相關,且 2014 年那項常被引用的研究在 2019、2021 年的直接複製中效果明顯變弱。關鍵變因是有沒有經過改寫與整理,而不是字數本身。
依據: Mueller & Oppenheimer (2014) Psychological Science;Morehead, Dunlosky & Rawson (2019) Educational Psychology Review 的複製研究;Urry et al. (2021) Psychological Science 多實驗室複製。
How to Remember Everything You Read 26m11s

How to Remember Everything You Read

Justin Sung
2 年前 · 12 段 · YouTube
10/10十個階段都做完了
PACER 系統:把閱讀拆成消費與消化兩階段,依五種資訊類別用不同流程記住並用出來
  • 學習成效看留在腦裡多少,不是進到腦裡多少:少讀一點、多消化一點
  • 用 PACER 五類辨識讀到的資訊,每類配一個專屬的消化流程
  • Procedural 立刻練、Analogous 批判類比、Conceptual 畫網路式地圖
  • Evidence 與 Reference 都先存起來、之後再演練,讀的當下絕不硬背
  • 系統刻意不自然,因為大腦一次能存的量有生物限制
術語:consumption digestion Kim Peek FG syndrome PACER encoding passive mode of reading procedural …共 22 個
接著看 ←How to Learn So Fast People Assume You're Naturally Gifted · 兩站都反對硬讀更多:困惑站給提問循環,這站給五類資訊各自的消化流程
相關 —how to learn ANYTHING faster than anyone · 總覽站的「大腦每日容量有限、active recall」在這站變成消費/消化平衡與 store-rehearse
接著看 →The top 1% Think on Paper. Here’s How To Do It. · PACER 說 Conceptual 資訊要「畫網路式地圖」;這站示範怎麼畫:撒關鍵字、猜連結、重整
開啟文字解析 →

確定錯誤/已過時見仁見智(取決於版本或情境)

段落原話(transcript 逐字)說明
6. 消費與消化必須平衡
8:33
「90% of what is consumed is forgotten」 作者說「有些研究指出」但沒給出處。這類數字多半源自 Ebbinghaus 遺忘曲線的通俗轉述,原實驗用的是無意義音節與單一受試者,遺忘比例會因材料是否有意義、間隔多長、有無複習而大幅變動,不能當成「讀完會忘九成」的通則。方向(不處理就忘掉大部分)成立,數字本身不可靠。
依據: Ebbinghaus (1885) Über das Gedächtnis;Murre & Dros (2015) PLoS ONE 的重製實驗顯示曲線形狀與比例高度依賴材料與間隔。
How to Learn So Fast People Assume You're Naturally Gifted 8m22s

How to Learn So Fast People Assume You're Naturally Gifted

Justin Sung✓ 0
1 個月前 · 6 段 · YouTube
10/10十個階段都做完了
Confusion Compass:把困惑轉成問題清單的學習策略
  • 困惑不是學不好的證據,而是大腦正在替新資料找位置的症狀
  • 感到困惑時問「哪些問題有答案我就不困惑」,寫成清單再逐一回答
  • 讀文件完全不困惑是紅旗;用「這對我的工作有什麼影響」主動觸發困惑
  • 困惑→提問→回答是會自己轉的循環,轉得越快學得越快
  • 不提問只硬讀更多,資料點只會越堆越多、彼此不連,變成 overwhelmed
術語:confusion compass learning efficiency confusion as a symptom of learning emotional confusion targeted learning strategy question list red flag: no confusion context of why you're learning …共 13 個
接著看 ←how to learn ANYTHING faster than anyone · 總覽講「盡快失敗、active recall 找缺口」;這站把缺口的訊號(困惑)變成可操作的問題清單
接著看 →How to Remember Everything You Read · 兩站都反對硬讀更多:困惑站給提問循環,這站給五類資訊各自的消化流程
相關 —The top 1% Think on Paper. Here’s How To Do It. · 兩站都把 overwhelm 當起點:一站把困惑變問題清單,一站把拼圖碎片攤上紙再猜連結
開啟文字解析 →
how to learn ANYTHING faster than anyone 5m52s

how to learn ANYTHING faster than anyone

Older Brother
1 年前 · 5 段 · YouTube
9/9十個階段都做完了
學任何東西都更快的四個原則:80/20、盡快失敗、學慢才學快、成長心態
  • 用 80/20 找出被最多東西依賴的基礎,先練到位再談細節
  • 學習只發生在失敗之後:盡快拿到修正訊號,而不是追求做對
  • 用 active recall(闔書自問自答、像教別人一樣講)每幾分鐘失敗一次
  • 大腦每日容量有限:一次只練一個子技能到變習慣,整體反而更快
  • growth mindset 是盡快失敗能持續的前提,immersion 用空檔多跑學習循環
術語:skill of learning cheat codes 80/20 rule fundamentals fail fast learning cycle active recall cognitive capacity …共 12 個
相關 —You Wouldn't Believe These Developer Interview Mistakes... · 一站講通用學習法(80/20、盡快失敗),一站講面試準備時間該放哪,互相印證
接著看 →How to Learn So Fast People Assume You're Naturally Gifted · 總覽講「盡快失敗、active recall 找缺口」;這站把缺口的訊號(困惑)變成可操作的問題清單
相關 —How to Remember Everything You Read · 總覽站的「大腦每日容量有限、active recall」在這站變成消費/消化平衡與 store-rehearse
相關 —The top 1% Think on Paper. Here’s How To Do It. · 總覽站的「盡快失敗」在這站變成 make it wrong:先猜錯再修正才是學習
開啟文字解析 →

確定錯誤/已過時見仁見智(取決於版本或情境)

段落原話(transcript 逐字)說明
3. 原則二:盡快失敗與 Active Recall
2:04
「you do not learn from succeeding the only time you ever learn is after you fail」 這是為了修辭而說的絕對句。實際上成功也會學到東西——它會強化「這樣做是對的」的連結(強化學習的正回饋),只是成功給的訊息量通常比失敗少,因為它不告訴你邊界在哪。作者的核心主張「失敗提供更多可修正的訊號」成立,但「只有失敗才學得到」講過頭了。
依據: 教育心理學的 productive failure 研究(Kapur, 2008 起)支持「先失敗再學效果更好」,但同一批研究也顯示成功經驗對建立自信與鞏固正確做法有作用,並非「什麼都沒學到」。
4. 原則三:學慢一點才學得快
4:14
「you've just learned the overall skill of cooking four times faster」 「1% × 5 項 = 5%,對比 20% 一項,所以快四倍」這個算術建立在作者自己設定的數字上,沒有實證來源;而且假設不同子技能的進步可以直接相加成「整體做菜技能」,這在現實中不成立(燒烤進步 20% 不等於做菜整體進步 20%)。集中練習比分散有效的結論有 cognitive load 與技能自動化的研究支持,但「四倍」只是為了說明用的例子數字,不該當成實際比例。
依據: cognitive load theory(Sweller, 1988)支持一次處理的新元素越少學得越好;但沒有文獻給出「集中 vs 分散 = 4×」這種固定倍率。
Not Holding Back the Ocean 2m28s

Not Holding Back the Ocean

ethanniser.dev
8 個月前 · 4 段 · 原文
9/9十個階段都做完了
AI 時代的軟體工程師:你愛的是手藝,還是目的?
  • 分辨自己愛的是「手藝」還是「目的」,是面對工具革命的第一個問題
  • 差異化工作被 normalize 是每次工具革命的共同模式,不是 AI 獨有
  • 電影剪接從膠卷到數位的轉變,可以直接對照今天的軟體工程
  • 努力、持續學習、產出看得見的成果,在新時代依然是領先的方法
術語:software engineering trusted voice differentiation normalization evolve cutting film making movies digital cinematography …共 13 個
接著看 →How a Cloudflare Engineer Ships Production Code He Didn't Write | Dillon Mulroy · 這篇問「你愛的是剪膠卷還是拍電影」;那站是一個人真的選了拍電影之後六個月的代價與收穫
接著看 →GitHub Copilot 一次只給一種答案?Orca 讓你召喚 AI 大軍同時寫 Code,優劣立判! · 文中說「別人把新工具用得更快」;那站具體看這些新工具(ADE、多 agent)長什麼樣
接著看 →Rails World 2026 Opening Keynote - DHH · 先分清愛手藝還是愛目的,DHH 用攝影史把同一題推成產業宣言
接著看 →Ruby, Rails, and the future of programming - Matz, DHH & Jeremy Daer · 先分清愛的是手藝還是目的,再看 Matz 與 DHH 怎麼回答同一題
開啟文字解析 →

確定錯誤/已過時見仁見智(取決於版本或情境)

段落原話(transcript 逐字)說明
3. 剪膠卷,還是拍電影?
0:51
「And yet when digital cinematography tools arose, if they chose not to evolve, they would’ve gotten left behind.」 這句把「手剪膠卷被取代」歸因於「digital cinematography(數位攝影)」,但實際上取代手工剪接的是數位非線性剪接系統(例如 Avid,1989 年推出、1990 年代普及);數位攝影機在電影圈普及是 2000 年代以後的事,兩者是不同波的變革。作者是把兩者合稱為「數位工具」來講,對「門檻大降」的論點沒有影響,但術語上不夠精確。
依據: Avid/1 Media Composer 1989 年推出;Walter Murch 以 Avid 剪接《English Patient》(1996)獲奧斯卡剪接獎;數位攝影在主流電影普及約 2000 年代(如 Star Wars Episode II, 2002 為首部全數位拍攝的大型商業片)。
How a Cloudflare Engineer Ships Production Code He Didn't Write | Dillon Mulroy 1h04m

How a Cloudflare Engineer Ships Production Code He Didn't Write | Dillon Mulroy

Jan-Niklas Wortmann
21 天前 · 22 段 · YouTube
9/9十個階段都做完了
一個看空 AI 的 Neovim 派工程師,怎麼在六個月內讓 agent 寫出跟自己一模一樣的 production code——以及這件事對人、組織與工作流的代價
  • 為什麼 AI 讓生產力上升卻讓工程師更累:小難題消失、只剩 macro 決策
  • Cloudflare 裁 20% 的內部視角:砍的是中間層,角色壓縮讓軟技能更重要
  • 多 agent loop 對中位數開發者不實際的三個理由:成本、harness 飄移、缺 receipts
  • 用 /tree 自己當 sub-agent:先問已知答案的問題,只把審過的小結帶回主線
  • spec 長得像 code:型別 + interface + call stack + 測試,agent 只負責填空
術語:Neovim line for line bearish whiplash craftsman AFK loop engineering manager …共 59 個
接著看 ←The 3 Skills That Separate Architects From Senior Developers · 那站講架構師靠系統思考與組織影響力;這站說 AI 把 senior→staff 的軟技能門檻壓到每個工程師身上
接著看 ←3 Frontend Skills AI Can't Replace (become AI-proof) · 那站說 AI 取代不了邊界與架構判斷;這站說 agent 差的正是抽象設計,所以 spec 用型別與 interface 定形狀
相關 —My NEW AI Terminal and Code Editor // Orca Review · 都用 Pi:Orca 站示範多 agent 平行編排與 sub agent,Dillon 站主張自己當 sub-agent、由人管 context
相關 —Real Senior Frontend System Design Interview 2026 (AI Coding Included) · 共用 harness 與 AI 工具鏈:一站在面試裡要人守設計錨點,一站在生產裡要人守 context 與 spec
接著看 ←Not Holding Back the Ocean · 這篇問「你愛的是剪膠卷還是拍電影」;那站是一個人真的選了拍電影之後六個月的代價與收穫
接著看 ←Ruby, Rails, and the future of programming - Matz, DHH & Jeremy Daer · 座談談完信任與驗收的原則,這站是實際怎麼出不是自己寫的 production code
接著看 →Lauren Tan grokbot workshop 中文字幕 · Dillon 讀每一行、不信 AFK loop,結尾想把品味寫成 skill 做第一輪 review;那站把信任做成 verification、skill 與 CI 硬約束
相關 —Building a Harness with Jev · 共用 harness:Dillon 說多 agent loop 貴且 harness 飄移;這站用便宜的 Jev 接住 loop 裡每輪的判斷
接著看 →Rails World 2026 Opening Keynote - DHH · 先看一個工程師六個月的實測代價,再看 DHH 推成全產業結論
開啟文字解析 →

確定錯誤/已過時見仁見智(取決於版本或情境)

段落原話(transcript 逐字)說明
1. 開場:六個月沒自己寫 code
0:39
「80% of the value generation is usually done by like 10% of the people」 主持人引用的是模糊的「有統計說」;常見的說法是 Pareto 的 80/20,而軟體工程的「10x 工程師」研究(Sackman 1968 等)樣本很小、方法爭議大。數字本身不能當事實,只能當一種主觀感受。
依據: Pareto principle(80/20);Sackman, Erikson & Grant 1968;Bossavit《The Leprechauns of Software Engineering》對 10x 研究的批評
Parallel Agent Orchestration with Orca: Local AI Mac 6m36s

Parallel Agent Orchestration with Orca: Local AI Mac

Joe Maddalone✓ 0
1 個月前 · 9 段 · YouTube
10/10十個階段都做完了
用 Orca 編排多個 AI coding agent:隔離工位、平行派工、看板監看、diff 審查到 PR
  • 理解 Orca 用 git worktree + setup script 給每個 agent 一個互不干擾的工位
  • 會用 grab page element 把網頁上的元素變成 markup 直接餵給 agent 改
  • 能同時開多個 worktree、各派不同 agent 做不同任務,並用 workspace board 監看
  • 知道審查時可在 diff 上加註解送回 agent 修,滿意再 stage、開 PR
  • 掌握三種編排模式:平行分工、同題比稿、agent handoff/sub agents
術語:agent orchestrator AI coding agent design mode git worktree setup script grab page element DOM Nx …共 22 個
接著看 ←GitHub Copilot 一次只給一種答案?Orca 讓你召喚 AI 大軍同時寫 Code,優劣立判! · 那站講 ADE 與 git worktree 為什麼能隔離;這站六分鐘把開 worktree → 派工 → 開 PR 實際走一遍
接著看 ←Rails World 2026 Opening Keynote - DHH · DHH 說上萬 agent 並行讓抽象成瓶頸,Orca 是真的並行跑多 agent
接著看 →My NEW AI Terminal and Code Editor // Orca Review · 這站示範基本迴圈與 workspace board;那站再進到 orchestration skill、sub agent 與 Yolo 權限
開啟文字解析 →
My NEW AI Terminal and Code Editor // Orca Review 26m03s

My NEW AI Terminal and Code Editor // Orca Review

Christian Lempa
2 個月前 · 13 段 · YouTube
10/10十個階段都做完了
Orca(ADE):圍繞 terminal AI coding agent 的工作空間——隔離 worktree、多 agent orchestration、瀏覽器標註
  • ADE 與 IDE 的差別:Orca 讓 agent 寫檔、人只負責審閱與合併
  • Git worktree 在 Orca 裡是實體隔離的目錄,一個 feature 一個 worktree 讓多 agent 不互踩
  • orchestration skill 讓 agent 之間能傳訊、spawn sub agent,一個 agent 可指揮一隊
  • annotate page element 把「頁面上哪個元素+怎麼改」自動組成 prompt,省掉用文字描述 UI
  • 跑 sub agent 要把權限設 Yolo,否則 Claude/Codex CLI 會被確認提示卡住
術語:ADE (agent development environment) CLI agent Pi Git worktree orchestration SSH terminal emulator quick command …共 43 個
接著看 ←GitHub Copilot 一次只給一種答案?Orca 讓你召喚 AI 大軍同時寫 Code,優劣立判! · 那站講 ADE 與 git worktree 的原理;這站從設定、worktree 到 orchestration 實際走一遍
接著看 ←Parallel Agent Orchestration with Orca: Local AI Mac · 這站示範基本迴圈與 workspace board;那站再進到 orchestration skill、sub agent 與 Yolo 權限
接著看 →Lauren Tan grokbot workshop 中文字幕 · 這站的 orchestration 靠 prompt guardrail 補漏(誤啟 Codex);那站把驗證做成 CI 硬約束
相關 —How a Cloudflare Engineer Ships Production Code He Didn't Write | Dillon Mulroy · 都用 Pi:Orca 站示範多 agent 平行編排與 sub agent,Dillon 站主張自己當 sub-agent、由人管 context
開啟文字解析 →

確定錯誤/已過時見仁見智(取決於版本或情境)

段落原話(transcript 逐字)說明
8. Quick commands 與內建瀏覽器看成果
17:49
「It actually added my real Proxmox node. So, this my real production server.」 畫面上這筆資料是 Proxmox Node 01、IP 10.20.0.11、主機名 pve01.home.arpa。`home.arpa` 是 RFC 8375 保留給家用網路的範例網域,加上作者自己隨後輸入的真實主機名格式完全不同(prox-prod-2.home.<他的網域>.de),這幾乎可以肯定是 agent 生成的種子資料,不是從作者環境讀到的真實節點;他說的「DNS 解析不正確」是因為資料本來就是虛構的。標 debatable 是因為無法百分之百排除作者剛好有一台叫 pve01 的節點。
依據: 截圖 frames/s08_1062.jpg 的資料表;RFC 8375(home.arpa)
GitHub Copilot 一次只給一種答案?Orca 讓你召喚 AI 大軍同時寫 Code,優劣立判! 7m43s

GitHub Copilot 一次只給一種答案?Orca 讓你召喚 AI 大軍同時寫 Code,優劣立判!

GitCovery✓ 0
1 個月前 · 9 段 · YouTube
9/10原聲片段還沒寫翻譯
Orca(ADE):用 git worktree 與虛擬終端機同時指揮多個 AI 編碼代理
  • 理解 ADE(Agentic Development Environment)與 IDE、聊天機器人的差別
  • 看懂 git worktree 如何讓多個代理並行改碼又互不干擾
  • 知道 node-pty 虛擬終端機為何能接任何 CLI 型代理
  • 判斷自己是否需要多代理編排:單一助手就是過度工程
  • 掌握多代理模式的兩個風險:第三方 CLI 依賴、Computer Use 沙箱
術語:AI coding agent Git branch Agentic Development Environment (ADE) IDE orchestration git worktree git diff Code Review …共 20 個
相關 —3 Frontend Skills AI Can't Replace (become AI-proof) · 共用 Code Review:一站談 AI 時代哪些判斷留給人,一站示範人如何當多個 agent 的裁判
相關 —The 3 Skills That Separate Architects From Senior Developers · 同談角色轉變:架構師站講系統性思考與決策,Orca 站把「工匠→指揮官」落成多代理工作流
接著看 ←Not Holding Back the Ocean · 文中說「別人把新工具用得更快」;那站具體看這些新工具(ADE、多 agent)長什麼樣
接著看 →Lauren Tan grokbot workshop 中文字幕 · Orca 讓人用 git diff 挑多個 agent 的最佳解;那站把驗證做成硬約束,讓 agent 產出敢自動合併
接著看 →My NEW AI Terminal and Code Editor // Orca Review · 那站講 ADE 與 git worktree 的原理;這站從設定、worktree 到 orchestration 實際走一遍
接著看 →Parallel Agent Orchestration with Orca: Local AI Mac · 那站講 ADE 與 git worktree 為什麼能隔離;這站六分鐘把開 worktree → 派工 → 開 PR 實際走一遍
開啟文字解析 →
WebSockets Aren’t as Reliable as You Think.. Here's Why 13m01s

WebSockets Aren’t as Reliable as You Think.. Here's Why

Software Developer Diaries
1 年前 · 9 段 · YouTube
10/10十個階段都做完了
WebSocket 的可靠性工程:heartbeat、SSE 備援、load balancer、sticky session、message broker
  • 用應用層 ping/pong heartbeat 偵測悄悄崩潰的 WebSocket server 並自動重連
  • WebSocket 連續失敗時降級到 Server-Sent Events,保住 server 推送的單向通道
  • 多台 WebSocket server 前放 load balancer,用 least connection 而非 round robin
  • sticky session 讓 client 重連回到原本那台,保住 server 端的連線狀態
  • 跨 server 廣播要靠 RabbitMQ 這類 message broker,不是 server 直接互連
術語:WebSocket socket connection request/response push heartbeat ping / pong reconnect health check endpoint …共 29 個
接著看 ←How Web Sockets work | Deep Dive · 先懂一條 WebSocket 連線怎麼建立,再看它在 server 崩潰、多台時會怎麼壞
接著看 ←Keep Those WebSocket Connections Alive! · 那站專講 heartbeat;這站從 heartbeat 出發再加 SSE 備援、load balancer、broker
接著看 ←15 Fullstack Concepts Every Frontend Should Know · 那站帶過 WebSocket、EventSource、round robin 三個概念,這站把它們組成一套可靠性設計
相關 —Real Frontend System Design (from a Senior Engineer) · 都談 load balancer、round robin、horizontal scaling,一個在系統設計面試、一個在 WebSocket 實作
接著看 →How to scale WebSockets to millions of connections · 這站停在兩三台 server 加 nginx 與 broker,那站放大到百萬連線
接著看 →Message Queues in System Design Interviews w/ Meta Staff Engineer · 這站把 RabbitMQ 當黑盒子做跨 server 廣播,那站解釋 queue 為什麼存在、怎麼選
開啟文字解析 →

確定錯誤/已過時見仁見智(取決於版本或情境)

段落原話(transcript 逐字)說明
7. 問題三:多台 server 前面放 load balancer
9:08
「the load bouncer is going to create another one」 load balancer(nginx)本身不會「建立」新的 server 副本,它只能把壞掉的後端暫時剔除、把流量導到活著的那台(max_fails / fail_timeout 的語意就是這樣)。真正「起一台新的」是 autoscaler 或容器編排(Kubernetes、AWS Auto Scaling Group 等)的工作,它們依 health check 結果補足副本數。作者在雲端平台的語境下把兩者合在一起講可以理解,但看 nginx 設定時不要以為那幾行會自動生出新 server。
依據: nginx ngx_http_upstream_module 文件:max_fails / fail_timeout 只影響「該 server 被視為不可用的時間」;nginx 沒有啟動後端程序的功能。
8. Sticky session:重連要回到同一台
10:37
「engine X is going to actually connect the hash in the cookies when talking to this client and the client is Al always going to send a cookie」 nginx 的 ip_hash 不使用 cookie。它直接以 client 的 IP(IPv4 取前三個 octet)計算 hash 來選後端,client 端不需要、也不會收到任何 cookie。作者把「ip_hash」和「cookie 式 sticky session」混在一起了:靠 cookie 的黏性在 nginx 開源版要用 hash $cookie_name 之類的寫法自己拼,NGINX Plus 才有 sticky cookie 指令。他展示的那個帶過期時間與 hash 值的 cookie 屬於後者,跟他圈起來的 ip_hash 那一行無關。後半句「hash 是依使用者 IP 算的」對 ip_hash 而言是對的。
依據: nginx ngx_http_upstream_module 文件的 ip_hash 指令說明(依 client 位址決定 server,IPv4 用前三個 octet);sticky 指令僅列於 NGINX Plus(commercial subscription)。
9. Broadcasting:用 RabbitMQ 跨 server 廣播
12:34
「broadcast it to the client to the websocket client like this okay nothing complicated that was very simple」 畫面上兩台 server 都用 channel.consume 訂閱同一個具名的 broadcast_queue。RabbitMQ 對「一個 queue、多個 consumer」的語意是工作佇列:每則訊息只會投遞給其中一個 consumer(輪流),所以照這段程式碼,一則訊息只會有一台 server 收到、只有那台的 client 會被廣播到,另一台的 client 收不到。要真正廣播應由 publisher 發到 fanout exchange,每台 server 各自宣告一個專屬 queue(exclusive)綁上去。影片沒展示 publish 端與 exchange 設定,可能有其他設定補上這點,所以標為存疑而非確定錯誤。
依據: RabbitMQ 官方教學 Tutorial 2 (Work Queues):同一 queue 的多個 consumer 採 round-robin dispatch;Tutorial 3 (Publish/Subscribe):廣播需 fanout exchange 與每個 consumer 各自的 queue。
How Web Sockets work | Deep Dive 10m21s

How Web Sockets work | Deep Dive

ByteMonk
2 年前 · 8 段 · YouTube
10/10十個階段都做完了
WebSocket 深入:從 HTTP upgrade handshake 到 frame、masking 與 fragmentation
  • 說得出 WebSocket handshake 三個關鍵標頭各自表達什麼,以及為什麼要用 HTTP 開場
  • 算得出 Sec-WebSocket-Accept:Key 接固定 GUID、SHA-1、base64,並知道它證明什麼、不證明什麼
  • 列得出 handshake 失敗的三個條件,以及成功後「HTTP 連線被 WebSocket 取代」的真正意思
  • 看懂一個 frame 的欄位:FIN、opcode、Mask、payload length、masking key
  • 解釋 masking 防的是舊 caching proxy 不是人,fragmentation 防的是 buffer overflow
術語:WebSocket HTTP TCP upgrade request WebSocket handshake Upgrade: websocket Connection: Upgrade Sec-WebSocket-Key …共 32 個
接著看 ←15 Fullstack Concepts Every Frontend Should Know · 那站把 WebSocket 與 HTTP、TCP、SSE 並列點名,這站把 handshake 與 frame 拆到位元
相關 —How Frontend Engineers can master the Full-stack · 共用 HTTP 純文字請求/回應:那站教怎麼讀,這站的 handshake 就是一組 HTTP 文字
接著看 →How to scale WebSockets to millions of connections · 這站講完一條連線怎麼建、資料怎麼走,那站講百萬條連線怎麼撐
相關 —Real Senior Frontend System Design Interview 2026 (AI Coding Included) · 共用 WebSocket/SSE:這站給雙向連線的機制,那站在面試裡決定該不該選它
接著看 →WebSockets Aren’t as Reliable as You Think.. Here's Why · 先懂一條 WebSocket 連線怎麼建立,再看它在 server 崩潰、多台時會怎麼壞
開啟文字解析 →

確定錯誤/已過時見仁見智(取決於版本或情境)

段落原話(transcript 逐字)說明
3. 伺服器驗證並算出 Sec-WebSocket-Accept
3:09
「the server can confirm that the hand check request originated from a genuine web client and not a malicious actor attempting to impersonate a websocket connection」 Sec-WebSocket-Key / Accept 的機制無法證明客戶端「真的是 web client」或「不是惡意程式」:Key 是客戶端隨意產生的明文,任何程式(curl、自寫腳本)都能送出合法的 Key 並通過驗證。RFC 6455 說明這個機制的目的是讓客戶端確認伺服器真的理解 WebSocket 協定、避免非 WebSocket 伺服器或快取的誤回應,並防止瀏覽器裡的腳本被用來對非 WebSocket 服務發動跨協定攻擊;要辨識客戶端身分得靠 Origin 檢查、cookie、token 等其他手段。
依據: RFC 6455 §1.3、§4.2.2、§10.3(2011)
4. 握手完成、失敗條件與 URL 格式
5:13
「the port component is optional as default Port 0 is used for ws and 443 is used for WSS」 ws 的預設 port 是 80,不是 0(port 0 在 TCP 裡是保留值,不能當目的埠)。wss 預設 443 是對的。這很可能是口誤或自動字幕聽錯(80 → 0),但照字面聽會學到錯的數字,故列出。
依據: RFC 6455 §3:「The port component is OPTIONAL; the default for "ws" is port 80, while the default for "wss" is port 443.」
4. 握手完成、失敗條件與 URL 格式
4:43
「the web socket handic ensures a secure and authenticated Connection by including a random key SEC websocket key generated by the client and verified by the server」 Sec-WebSocket-Key 與 Accept 的交換不提供「安全」也不提供「身分驗證」:Key 是明文、公式公開,任何客戶端都能通過。安全(加密、防竄改)來自 wss 的 TLS;客戶端身分驗證要靠 Origin 檢查、cookie、token 等應用層機制。Key/Accept 只證明伺服器真的理解 WebSocket 協定。
依據: RFC 6455 §1.3、§10.1–10.5(2011)
Keep Those WebSocket Connections Alive! 23m03s

Keep Those WebSocket Connections Alive!

Covalence
3 年前 · 13 段 · YouTube
10/10十個階段都做完了
WebSocket heartbeat:用應用層 ping/pong 偵測並清掉死連線
  • 為什麼 WebSocket 斷線後兩端可能都不知道,以及 heartbeat 怎麼補這個洞
  • server 端「先設 isAlive=false 再 ping,下一輪沒回就 terminate」的閉環寫法
  • client 端用可重設的 setTimeout 當看門狗,timeout 要比 server 間隔多一個緩衝
  • 用 binary 訊框區分 ping 與一般訊息:ws 的 { binary: true }、瀏覽器的 Uint8Array 與 Blob 判斷
  • 在 TypeScript 裡擴充第三方與內建 WebSocket 型別的兩種做法:module augmentation 與 extends + as
術語:WebSocket dead connection ping/pong http.Server WebSocketServer heartbeat setInterval binary frame …共 24 個
接著看 ←15 Fullstack Concepts Every Frontend Should Know · 那站分辨 polling/WebSocket/SSE,這站在 WebSocket 上動手寫 heartbeat
接著看 ←JavaScript Visualized - Event Loop, Web APIs, (Micro)task Queue · 先懂 setTimeout 與單執行緒排程,才看得出 interval 與 pong 回呼為何不會 race
相關 —Frontend System Design Explained w/ Senior Engineer (Microfrontends, Monorepo, MCP UI, Reactjs) · 共用 WebSocket、race condition:一站在系統設計層選型,一站在程式碼層保活
接著看 →How to scale WebSockets to millions of connections · heartbeat 解決單機的死連線,那站接著談多台 server 與 load balancer 怎麼擴
接著看 →WebSockets Aren’t as Reliable as You Think.. Here's Why · 那站專講 heartbeat;這站從 heartbeat 出發再加 SSE 備援、load balancer、broker
開啟文字解析 →

確定錯誤/已過時見仁見智(取決於版本或情境)

段落原話(transcript 逐字)說明
3. 設計 heartbeat:間隔、值、ping 函式
5:09
「we're basically sending a one down and」 ws 套件的 send() 收到數字時會先 data.toString(),所以實際送出的 binary 內容是字元 '1'(0x31),不是數值 1(0x01)。影片裡 client 端只判斷是否為 Blob、不比對值,所以機制照常運作;但「送一個 1 下去、期待收到一個 1 回來」這句在位元組層面不成立,client 若真的檢查 data[0] === 1 會失敗。
依據: ws v8.x websocket.js send():`if (typeof data === 'number') data = data.toString();`
8. clearTimeout 與 WebSocketExt 型別
14:42
「actually see it is a node.js.timeout」 這段是跑在瀏覽器的前端程式,瀏覽器的 setTimeout 回傳 number;編輯器顯示 NodeJS.Timeout 是因為前端 tsconfig 同時載入了 @types/node,Node 的宣告蓋過 DOM 的。照抄 NodeJS.Timeout 在這個專案能過,但換到不含 @types/node 的前端專案會編譯失敗;可攜的寫法是 ReturnType<typeof setTimeout>。
依據: TypeScript lib.dom.d.ts:setTimeout(): number;@types/node globals.d.ts:setTimeout(): NodeJS.Timeout
How to scale WebSockets to millions of connections 14m00s

How to scale WebSockets to millions of connections

Ably Realtime
3 年前 · 8 段 · YouTube
10/10十個階段都做完了
WebSocket 擴展:垂直 vs 水平、load balancer 與 backplane
  • 理解 WebSocket 為何比 HTTP 難擴展:有狀態長連線讓資源隨連線數常駐
  • 看穿「原生 WebSocket 撐百萬連線」benchmark 為何不能當容量規劃依據
  • 說出垂直擴展的四個實務問題,以及為何單機終究是單點故障
  • 用一張圖解釋多台伺服器狀態分裂,並知道 Redis pub/sub backplane 怎麼補
  • 列出水平擴展自帶的挑戰:狀態同步、broker 單點、load shedding、thundering herd
術語:WebSocket stateful stateless full-duplex heartbeat buffering backpressure fallback transport …共 34 個
接著看 ←15 Fullstack Concepts Every Frontend Should Know · WebSocket、round robin、單點故障在那站點名,這站把它們拉成一條擴展推理
接著看 ←How Frontend Engineers can master the Full-stack · 垂直/水平擴展與 WebSocket 在那站建立,這站專講兩者用在長連線的代價
接著看 ←Keep Those WebSocket Connections Alive! · heartbeat 解決單機的死連線,那站接著談多台 server 與 load balancer 怎麼擴
接著看 ←How Web Sockets work | Deep Dive · 這站講完一條連線怎麼建、資料怎麼走,那站講百萬條連線怎麼撐
接著看 ←WebSockets Aren’t as Reliable as You Think.. Here's Why · 這站停在兩三台 server 加 nginx 與 broker,那站放大到百萬連線
接著看 →Message Queues in System Design Interviews w/ Meta Staff Engineer · backplane 用的 message broker 在這站只點到,MQ 站把 broker、replication 講完整
相關 —Real Frontend System Design (from a Senior Engineer) · 共用 load balancer、round robin、fault tolerance、horizontal scaling:一站專講 WebSocket,一站放進完整系統設計
相關 —Frontend System Design Explained w/ Senior Engineer (Microfrontends, Monorepo, MCP UI, Reactjs) · 共用 WebSocket、stateless、horizontal scaling:一站講後端怎麼擴,一站講前端架構怎麼接
開啟文字解析 →

確定錯誤/已過時見仁見智(取決於版本或情境)

段落原話(transcript 逐字)說明
4. 垂直擴展的實務問題
4:49
「maybe you hit the limit of available threads or ephemeral」 WebSocket 伺服器接受連入時只用一個 listening port,本身不會耗盡 ephemeral port;會耗盡的是 load balancer / 反向 proxy 對後端建立連線的那一側(每個來源 IP 對同一目標約 6 萬個 port)。單台伺服器最先撞到的通常是 file descriptor 上限(ulimit -n、fs.file-max)與記憶體。是否適用取決於你的架構裡伺服器前面有沒有 proxy,所以標為見仁見智。字幕的「ephemeral pause」是「ephemeral ports」的辨識誤差。
依據: TCP 四元組定義(RFC 793 / RFC 9293);Linux 預設 ip_local_port_range 32768–60999
Cross-Site Request Forgery (CSRF) Explained 14m11s

Cross-Site Request Forgery (CSRF) Explained

PwnFunction
7 年前 · 13 段 · YouTube
10/10十個階段都做完了
CSRF:瀏覽器自動附帶憑證,如何讓別的網站替你發出請求
  • 看懂 CSRF 的成因:cookie 自動附帶,伺服器分不出請求來源
  • 分清同源政策擋的是「讀回應」,不是「送請求」
  • 理解 anti-CSRF token 為何有效,以及它失效的兩種方式
  • 會用表單湊出合法 JSON body,也知道 fetch 是更短的路
  • 知道 Content-Type 與 CORS 如何把主導權交回防守方
術語:cross-domain request endpoint cookie session same-origin policy origin iframe Ajax …共 34 個
相關 —Authorization vs Authentication - Whats the Difference? | Developer Concepts Explained · 那站講 session 怎麼認人,這站示範那份 session 怎麼被別的網站借用
相關 —15 Fullstack Concepts Every Frontend Should Know · HTTP 方法、API 與 endpoint 在那站建立,這站直接拿來拆解一個偽造請求
接著看 →Content Security Policy explained | how to protect against Cross Site Scripting (XSS) · 同源政策擋讀不擋送;XSS 補上「在同源內執行」的另一半,CSP 是防線
開啟文字解析 →

確定錯誤/已過時見仁見智(取決於版本或情境)

段落原話(transcript 逐字)說明
3. 同源政策:能送不能讀
1:17
「the cross iframe communication is not possible due to something called us same origin policy」 說得太滿。同源政策擋的是「未經允許讀取對方的內容與資料」,不是所有跨 iframe 溝通。瀏覽器本來就提供 window.postMessage 讓不同來源的視窗/iframe 明確地互傳訊息,雙方各自檢查 origin 即可;此外還有 CORS、Channel Messaging 等機制。作者接下來自己也會談到 CORS 是「同源政策的合法繞道」,可見這句是為了鋪陳而做的簡化。
依據: window.postMessage 自 HTML5 起即為標準(MDN Window.postMessage),2019 年時所有主流瀏覽器皆已支援多年
5. 拆解:兩個請求長得一模一樣
3:39
「on every single request the cookies are automatically sent to the website regardless of your current domain」 這是 2019 年的預設行為,現在已經反過來了。Chrome 從 80 版(2020 年 2 月起分批推出)開始,把沒有明確標示 SameSite 的 cookie 一律當成 SameSite=Lax,Firefox、Edge 隨後跟進。結果是:跨站的 POST 請求、iframe 內的請求、以及 fetch/Ajax 送出的請求,預設都不會再帶上 cookie——也就是說影片裡示範的那個「從 attacker.com 自動送出 POST 把帳號刪掉」的經典場景,今天在預設設定下不會成功。作者說「除非有設一些旗標」,那個旗標就是 SameSite,而它已經從選配變成預設。要讓 cookie 維持舊行為,網站必須主動寫上 SameSite=None; Secure。這不代表 CSRF 消失了:跨站的頂層 GET 導覽仍會帶 cookie,同站不同子網域之間也不受限制,而且刻意設成 SameSite=None 的網站依然完全暴露。
依據: Chrome 80(2020-02)起 SameSite=Lax by default;RFC 6265bis 將其納入規範;MDN Set-Cookie SameSite 屬性文件
9. 用表單拼出一段合法 JSON
8:01
「but in Ruby it's actually a thing comments are kind of allowed so you can simply add two forward slashes at the end」 講法容易誤導,而且不該被當成可靠的手段。JSON 規範本身完全不含註解,這裡能成立純粹是 Ruby 內建 json 函式庫的解析器實作上會略過 `//` 與 `/* */`,跟「Ruby 這個語言」無關——同樣跑在 Ruby 上但改用其他 JSON 解析器就未必吃這一套,其他語言的主流解析器(Python 的 json、Node 的 JSON.parse、Go 的 encoding/json)則一律拒絕。此外 json gem 後續版本已陸續收緊對註解與多餘字元的容忍度,所以這條路是「碰運氣的實作細節」而非通則。作者自己下一句就推翻它、改用 junk 參數,那才是真正通用的做法。
依據: RFC 8259 未定義註解語法;Ruby json gem 的註解略過屬實作行為且各版本寬鬆度不一
11. Content-Type 這道關卡與 CORS
10:25
「this is basically a bypass for same origin policy」 這個比喻容易留下錯誤印象。CORS 不是繞過同源政策,而是同源政策規範內建的例外申請流程:決定權完全在伺服器,瀏覽器仍然逐條執行檢查,沒有任何規則被跳過。作者自己補了「當然是好的那種、而且只有在伺服器明確允許時才成立」,但很多人聽完仍會把 CORS 記成「讓攻擊變容易的東西」。實際上設定正確的 CORS 是把這一段的攻擊擋在門外的那道鎖(預檢不通過,請求根本送不出去);真正造成漏洞的是設定錯誤的 CORS——例如把來源反射回 Access-Control-Allow-Origin 又同時開啟 Allow-Credentials。
依據: Fetch Standard 的 CORS protocol 章節;MDN Cross-Origin Resource Sharing
12. Flash 加 307 轉址繞過標頭限制
11:50
「flash files they can help you in this case」 這一整套做法今天已經行不通。Adobe 於 2020 年 12 月 31 日終止 Flash Player 支援,2021 年 1 月 12 日起在播放器內封鎖所有內容,Chrome、Firefox、Edge、Safari 也都已移除播放能力,網頁上根本載入不了 Flash 檔案,因此也不存在「用 Flash 強設 Content-Type」這條路。作者自己在影片裡就說「大概再過一年就會完全消失」,只是實際上又多撐了一年半。307 轉址中繼的手法本身仍然有效,但目前瀏覽器裡沒有等價的一般手段可以在跨來源請求上任意設定 Content-Type——換句話說,這一段的價值已經從「可用技巧」轉為「串接思路的教材」。
依據: Adobe Flash Player EOL 公告:2020-12-31 停止支援、2021-01-12 起封鎖內容
RxJS operators and their dangerous consequences 8m53s

RxJS operators and their dangerous consequences

Joshua Morony
1 年前 · 11 段 · YouTube
10/10十個階段都做完了
RxJS 五個常用 operator 的隱藏陷阱:值會卡住、值會消失、相等不是你以為的相等
  • buffer 的來源若不會 complete,湊不滿一批的值會永遠卡在裡面
  • throttle 可能吃掉串流的最後一個值,最終狀態要改到 completion handler 處理
  • distinctUntilChanged 預設比物件參照而非內容,可傳自訂比較函式改掉
  • share 用 refCount 追蹤訂閱,歸零就重置,遇到立刻完成的來源會重跑邏輯
  • shareReplay 預設 refCount 為 false 會永不放手,設成 true 才是多數情況的正解
術語:RxJS operator gotcha Observable emission complete bufferCount Subject …共 29 個
接著看 ←Map, switchMap, mergeMap, flatMap, concatMap, exhaustMap in RxJS - what is the difference? · 前站挑對 operator,本站講同一批 operator 在邊界情況的陷阱
相關 —JavaScript Visualized - Closures · 同樣是「沒人用了卻還活著」的記憶體洩漏,一個出在 closure,一個出在 shareReplay
開啟文字解析 →

確定錯誤/已過時見仁見智(取決於版本或情境)

段落原話(transcript 逐字)說明
5. throttle 的坑:最後一個值可能被吃掉
3:39
「it might then make more sense to handle this final case in the completion Handler of the stream」 把最終狀態移到完成處理函式是可行的繞法,但不是唯一、也未必是最直接的解法。throttleTime 本身可以設定 trailing:throttleTime(300, asyncScheduler, { leading: true, trailing: true }) 會在窗口結束時補送窗內的最後一個值,而且 RxJS 7 的 throttle 在來源 complete 時會先把待送的 trailing 值送出才結束,所以那個 'final' 值不會被吃掉。用哪一種取決於你要的是「最後一個值」還是「串流結束這個事件」,作者的建議在後者成立,在前者則多繞了一圈。
依據: RxJS 7.x throttle/throttleTime 的 ThrottleConfig(leading / trailing),以及 throttle 在 complete 時 flush trailing 值的行為
7. 自訂比較函式,用內容取代參照
4:30
「commonly it is useful to use json. stringify to compare the equality of two objects」 當示範可以,當通用建議則有風險。JSON.stringify 的結果依賴屬性的插入順序,{a:1,b:2} 與 {b:2,a:1} 會被判為不同;undefined 值與函式會被略過、Date 被轉成字串、Map/Set 變成空物件、循環參照直接丟 TypeError,而且在高頻串流上每次比較都要序列化整個物件。實務上更穩的做法是只比你真正在意的欄位(例如 (a, b) => a.id === b.id && a.version === b.version),或使用專門的深層比較函式。
依據: ECMA-262 JSON.stringify 對 undefined/函式/循環參照的處理規則;屬性順序影響輸出字串
11. refCount 才是真正的開關
8:10
「late subscribers will also still be able to get the latest value from the observable」 這句話只在還有其他訂閱者在線上時成立。一旦開啟 refCount(resetOnRefCountZero: true),訂閱數掉到零時內部的 ReplaySubject 會連同緩衝一起被丟棄,之後才來的訂閱者拿不到任何舊值,而是重新訂閱來源、重跑一次邏輯。所以正確的說法是「在共享期間晚加入的訂閱者拿得到最新值」,而不是「任何晚到的訂閱者」。如果需要的是跨越空窗期的快取,就得保留 refCount 為 false,或改用有明確過期策略的快取層。
依據: RxJS 7.x share 的 resetOnRefCountZero 行為:重置時會丟棄 connector 建立的 Subject
Map, switchMap, mergeMap, flatMap, concatMap, exhaustMap in RxJS - what is the difference? 9m48s

Map, switchMap, mergeMap, flatMap, concatMap, exhaustMap in RxJS - what is the difference?

Monsterlessons Academy
3 年前 · 8 段 · YouTube
10/10十個階段都做完了
RxJS 六個 map 系列 operator 的差別:map、mergeMap/flatMap、concatMap、switchMap、exhaustMap
  • 六個 operator 其實是一比五:map 只換值,其餘五個的 callback 都回傳新的 Observable
  • 四種併發策略:mergeMap 全部平行、concatMap 排隊、switchMap 留最新、exhaustMap 留最早
  • 固定所有變因、只換一個 operator,用 console 的輸出節奏反推它的行為
  • flatMap 只是 mergeMap 的別名,不是另一個 operator
  • 單發的 HTTP 請求分不出 concatMap 與 switchMap,要來源連續發值才看得出差別
術語:RxJS Observable map pipe from subscribe operator of …共 20 個
接著看 ←Embrace Reactive Programming in React and Vue with RxJS - Fahad Ibnay Heylaal · 前站建立 Observable/pipe/operator,本站專攻 map 系列的併發取捨
相關 —JavaScript Visualized - Promise Execution · 同樣在講多個非同步工作的排隊與競態,一個用 Promise、一個用 Observable
接著看 →RxJS operators and their dangerous consequences · 前站挑對 operator,本站講同一批 operator 在邊界情況的陷阱
開啟文字解析 →

確定錯誤/已過時見仁見智(取決於版本或情境)

段落原話(transcript 逐字)說明
4. mergeMap / flatMap:全部同時開,誰也不取消
3:10
「flat map is an alias for merge map and it is duplicated inside either xjs」 「flatMap 是 mergeMap 的別名」本身正確,但影片把它講成兩個可以互換使用的等價選項,沒有提到 flatMap 從 RxJS 7 起就被標記為 deprecated、官方明講會在下一個主版本移除。照影片改寫成 flatMap 今天多半仍能跑,但編輯器與建置工具會出現棄用警告,新程式碼應一律寫 mergeMap。
依據: RxJS 7 deprecations 清單:flatMap renamed to mergeMap, will be removed in v8
8. 真實例子:為何 concatMap 和 switchMap 結果一樣
8:58
「switch map completes the previous observable and creates a new one」 switchMap 對前一個內層做的是取消訂閱(unsubscribe),不是讓它完成(complete)。兩者結果不同:被取消的內層不會發出完成通知,subscribe 的第三個 callback 與 last()、toArray() 這類等待完成的 operator 都不會觸發,清理要改寫在 finalize 裡。把取消講成完成,容易讓人以為舊請求的完成處理仍會照跑。
依據: RxJS 官方 switchMap 說明:on each emission the previous inner observable is cancelled
Authorization vs Authentication - Whats the Difference? | Developer Concepts Explained 5m40s

Authorization vs Authentication - Whats the Difference? | Developer Concepts Explained

Roberts Dev Talk
5 年前 · 9 段 · YouTube
9/9十個階段都做完了
Authentication 與 Authorization:你是誰,和你能做什麼
  • 分清 authentication 問「你是誰」、authorization 問「你能做什麼」
  • 認證通常一個 session 一次,授權必須每次存取資源都做
  • token 就是那張通行證:上面編碼了身分,也編碼了角色
  • role 是給人看的分類,permission 是給資源看的動作,兩層要分開
  • 已通過認證的內部使用者,才是授權真正要防的對象
術語:authentication authorization API credentials multi-factor authentication role token access token …共 26 個
接著看 ←15 Fullstack Concepts Every Frontend Should Know · 講完 HTTP 與 API 之後,再看誰能呼叫哪一個
接著看 ←How Frontend Engineers can master the Full-stack · 全端基礎談到登入,這站把權限那一半拆開
接著看 →Content Security Policy explained | how to protect against Cross Site Scripting (XSS) · 這站發出的 access token,正是 XSS 要偷的東西
相關 —Cross-Site Request Forgery (CSRF) Explained · 那站講 session 怎麼認人,這站示範那份 session 怎麼被別的網站借用
開啟文字解析 →

確定錯誤/已過時見仁見智(取決於版本或情境)

段落原話(transcript 逐字)說明
3. Web 版的認證:換成 token
1:14
「make sure the password matches that stored in the database」 照字面聽會以為資料庫裡存著密碼、拿來直接比對。現行做法不會儲存密碼本身,而是存加鹽的單向雜湊(bcrypt、scrypt、Argon2);登入時是把使用者送來的密碼用同樣方式算一次,比對雜湊值。差別很實際:資料庫外洩時,前者等於所有人的密碼一起外流,後者攻擊者拿到的只是難以還原的雜湊。作者這裡是為了講流程而簡化,但這句正好是最常被初學者照字面實作的一句。
依據: OWASP Password Storage Cheat Sheet;NIST SP 800-63B 對密碼儲存的要求
3. Web 版的認證:換成 token
1:30
「The access token normally has an expiry time, so the user only has to authenticate perhaps once per day.」 「一天認證一次」這個體感沒錯,但撐住它的通常不是 access token 的到期時間。現行 OAuth 2.0 實務建議 access token 短命,常見是 5 到 60 分鐘;使用者之所以不必一直登入,是因為背後有 refresh token 或 session cookie 在默默換發新的 access token。把兩者混為一談,容易寫出把 access token 有效期設成一天的實作,等於讓一張被竊的權杖有一整天的通行權。
依據: RFC 9700(OAuth 2.0 Security Best Current Practice)建議縮短 access token 存活期並搭配 refresh token
6. 每次存取都要再檢查一次
3:11
「by checking the roles encoded on the access」 只讀 token 上的角色來判斷授權,是最省事的做法,但它把「這個人現在的權限」換成了「發證當下的權限」。使用者被降權或離職後,手上那張還沒到期的 token 依舊帶著舊角色通行;同樣地,剛被加上的權限也要等換發新 token 才生效。權限敏感的系統通常會補上一層:縮短 token 壽命、維護撤銷清單,或在關鍵操作時回查授權服務。作者這裡講的是通則性的做法,沒有錯,但值得知道它的代價。
依據: RFC 9700(OAuth 2.0 Security BCP)關於 token 生命週期與撤銷的討論;OWASP Broken Access Control
Vapor Mode is the Future of Vue 4m08s

Vapor Mode is the Future of Vue

LearnVue
2 年前 · 7 段 · YouTube
10/10十個階段都做完了
Vue Vapor Mode:把 virtual DOM 蒸發掉的編譯策略
  • 看懂 Vue 從 template 到畫面的完整迴圈:編譯、產樹、mount、diff、patch
  • 分清楚 patch 是必要成本,diff 是「不知道哪裡變了」才付的代價
  • 理解 Vapor 不是新 API,是同一份原始碼的另一種編譯輸出
  • 知道拿掉 virtual DOM 的本錢來自 Vue 既有的 reactivity 追蹤粒度
  • 掌握 Vapor 的落地方式:opt-in、以元件為單位、可與現有元件混用
術語:Vapor Mode virtual DOM Solid JS compilation strategy compiler-informed virtual DOM render function build time reactive data …共 28 個
接著看 ←Reactivity in Vue 3 - How does it work? · Vapor 拿掉 vdom 的本錢就是 effect / track / trigger,那站先把它拆到底
相關 —15 Frontend Concepts Every Senior Dev Has Mastered · 那站建立瀏覽器渲染路徑與 virtual DOM 的成本觀,這站主張把中間那層拿掉
相關 —Every Frontend Architecture Pattern Explained in 23 Minutes · 架構演化史停在 vdom 時代,Vapor 是編譯派給出的下一站
相關 —9 JavaScript Concepts That Got Me To Senior Dev · 都在講「同步重算」與「只改該改的」之間的成本差,一個在語言層一個在框架層
接著看 →Frontend System Design: Performance API, Chrome, React Profiler · Vapor 只給了「更快更省」的承諾沒給數字,這站教你怎麼量出來
相關 —Senior Frontend Interview 2026 🎉 | Javascript 🎯 (Mock) [Most Asked Questions] · 同談 virtual DOM 與 DOM 操作成本,一個講原理一個在面試裡被問
開啟文字解析 →

確定錯誤/已過時見仁見智(取決於版本或情境)

段落原話(transcript 逐字)說明
3. 編譯期最佳化:static hoisting
0:59
「that tools like react don't or at least don't do yet」 在 2024 年 4 月成立,但這條界線後來被 React Compiler 模糊掉了:React 也有了編譯步驟,會自動做 memoization 並提升靜態的 JSX 元素。要注意兩者仍不等價——React Compiler 省的是「元件函式重跑與 re-render」,Vue 省的是「virtual node 的建立與比對」,切入的層級不同。所以這句話今天不能再當成「只有 Vue 有編譯期最佳化」來讀,但也不能反過來說 React 已經追平。
依據: React Compiler(2024 年推出 beta/RC,之後隨 React 19 生態普及)
7. 整合計畫、限制與結語
3:14
「even though it's still in development and not ready to use yet」 這句在影片發布的 2024 年 4 月成立,今天已經過時。Vapor Mode 後來隨 Vue 3.6 進入正式的版本線,不再只是一個要自己 build 的實驗分支——影片裡那個顯示 commit 雜湊的 playground 也已經換成正式版本號。要看 Vapor 現在的狀態與可用範圍,請以 Vue 官方 3.6 的文件為準,不要照這支影片的結論以為它還不能碰。
依據: Vue 3.6(Vapor Mode 隨核心釋出,2025 年起提供)
7. 整合計畫、限制與結語
3:30
「to happen at the component level using something. vapor.」 作者自己用「something like」保留過,而最後定案的啟用方式與這裡描述的檔名慣例不同:實際是在單檔元件的 script 區塊上加一個 vapor 標記(`<script setup vapor>`),而不是把檔案改名成 .vapor.vue。「以元件為單位、可與現有元件混用」這個大方向沒有變,變的只是寫法。看這段時請把重點放在粒度,不要把那個檔名當成 API。
依據: Vue 3.6 的 vapor 啟用方式(script 區塊屬性)
JavaScript Visualized - Execution Contexts 11m40s

JavaScript Visualized - Execution Contexts

Lydia Hallie
2 年前 · 12 段 · YouTube
10/10十個階段都做完了
JavaScript execution context:從 call stack 上的一格,拆到 realm、environment record、scope chain 與 closure
  • 說得出 execution context 的兩個階段,以及各階段做了什麼
  • 分得清 object record 與 declarative record,知道 var 與 const/let 為何待遇不同
  • 把 hoisting 從口訣還原成 creation phase 的記憶體配置
  • 用 outer env 這一條指標解釋 scope chain 與 closure
  • 知道 realm 是什麼,為何 iframe 裡的 Array 不等於外面的 Array
術語:execution context call stack environment record identifier binding creation phase execution phase global execution context realm …共 27 個
接著看 ←9 JavaScript Concepts That Got Me To Senior Dev · 那站把 call stack、closure、scope chain 列成清單,這站還原成同一組 execution context 零件
接著看 →JavaScript Visualized - Closures · 共用 9 個術語;closure 在這站只是一條 environment 指標,那站專門把它講到底
接著看 →JavaScript Visualized - Event Loop, Web APIs, (Micro)task Queue · 這站走完 call stack 就結束,那站補上 web API 與兩個佇列讓順序不再連續
接著看 →JavaScript Visualized - Promise Execution · execution context 與 call stack 建立後,那站看 Promise 怎麼排進微任務佇列
接著看 →Senior Frontend Interview 2026 🎉 | Javascript 🎯 (Mock) [Most Asked Questions] · closure、scope chain、hoisting 在這站是機制,在那場模擬面試裡是被驗收的答案
相關 —Reactivity in Vue 3 - How does it work? · 共用 closure:一站是語言機制本身,一站用它做響應式的依賴追蹤
開啟文字解析 →

確定錯誤/已過時見仁見智(取決於版本或情境)

段落原話(transcript 逐字)說明
5. Global object 的三種屬性來源
2:35
「we do it implicitly whenever we declare a function in the global scope or whenever we have a variable with VAR keyword in the global scope these are also added to the global object」 這句只在 classic script 成立。若這段程式是以 ES module 載入(<script type="module">、Node 的 .mjs 或 type: module),頂層的 var 與 function 宣告會進入 module environment record,不會成為 global object 的屬性,因此 globalThis 上取不到它們。今日多數專案以 module 為預設,作者未區分這兩種載入方式。
依據: ECMAScript:GlobalDeclarationInstantiation(script)對比 InitializeEnvironment(module)
11. Hoisting 的三種待遇與 TDZ
9:16
「classes and imports are hoisted so memory is allocated for them but they remain uninitialized」 把 import 和 const/let/class 歸為同一種待遇並不精確。module 的 import binding 在連結(linking)階段就完成初始化,早於整個 module 的求值,所以在 import 敘述之前的位置使用被匯入的名字是合法的,並不落在 temporal dead zone。只有在循環相依的 module 圖中,提前存取另一個尚未求值完成的 module 匯出,才會真的得到 ReferenceError。
依據: ECMAScript 規格:module 的 InitializeEnvironment 於 Link 階段執行,早於 Evaluate
JavaScript Visualized - Closures 11m33s

JavaScript Visualized - Closures

Lydia Hallie
2 年前 · 13 段 · YouTube
10/10十個階段都做完了
JavaScript closure 的底層機制:function object、environment record 與 scope chain
  • 用「誰還參考著誰」解釋 closure,不再靠背定義
  • 說得出 [[Environment]] 與 [[OuterEnv]] 兩條參考的差別
  • 知道被保留的 environment record 是呼叫外層函式時才產生的
  • 算得出多個 closure 各自持有獨立狀態的輸出結果
  • 看得出哪些寫法會意外把大量資料釘在記憶體裡
術語:closure execution context environment record identifier binding creation phase execution phase call stack garbage collection …共 30 個
相關 —JavaScript Visualized - Event Loop, Web APIs, (Micro)task Queue · 同一系列的視覺化,都從 call stack 與 execution context 出發,先看誰都行
接著看 ←9 JavaScript Concepts That Got Me To Senior Dev · 九個概念只點到 closure 與 scope chain,這支把同一組詞拆到記憶體層級
接著看 ←JavaScript Visualized - Execution Contexts · 共用 9 個術語;closure 在這站只是一條 environment 指標,那站專門把它講到底
接著看 →Senior Frontend Interview 2026 🎉 | Javascript 🎯 (Mock) [Most Asked Questions] · 懂了 [[Environment]] 與 scope chain,再去看面試題怎麼考 closure
相關 —Reactivity in Vue 3 - How does it work? · Vue 的 effect 就是靠 closure 抓住依賴,這裡先懂它怎麼被保留
相關 —JavaScript Visualized - Promise Execution · 同系列視覺化,都把 execution context 拆開看內部欄位,先看誰都行
相關 —RxJS operators and their dangerous consequences · 同樣是「沒人用了卻還活著」的記憶體洩漏,一個出在 closure,一個出在 shareReplay
開啟文字解析 →

確定錯誤/已過時見仁見智(取決於版本或情境)

段落原話(transcript 逐字)說明
12. 用途二的反面:意外的 closure
10:38
「we're not actually using any of this data in The Returned functions」 兩點要保留。第一,畫面上的程式碼其實有用到:retrieve 回傳 ({ ...user })、update 做 Object.assign(user, info),兩者都參考了 user,而 user 是從 userData 裡 find 出來的一個元素——沒用到的是 userData 這個大陣列本身,不是「這些資料」。第二,也更重要:規範層級的模型確實會把整份 environment record 保留下來,但 V8 實際上只把「有內層函式參考到」的變數放進 context,沒被任何內層函式提到的 userData 通常不會被 context 化,也就不會因為這兩個箭頭函式而留在記憶體裡。所以這個例子作為「closure 可能扣住大資料」的示意是對的,但按圖上的程式碼在 V8 跑,userData 未必真的洩漏。要穩定重現這個問題,得讓某個被回傳的函式真的提到 userData。
依據: ECMA-262 的 Function Environment Record 模型 vs. V8 context allocation(V8 只為被內層函式參考的變數配置 context slot;同一 scope 的所有內層函式共用一個 context,因此只要有任一內層函式提到該變數就會整個保留)
JavaScript Visualized - Event Loop, Web APIs, (Micro)task Queue 12m34s

JavaScript Visualized - Event Loop, Web APIs, (Micro)task Queue

Lydia Hallie
2 年前 · 12 段 · YouTube
10/10十個階段都做完了
JavaScript 的非同步執行模型:call stack、web APIs、task queue、microtask queue 與 event loop
  • 看懂 call stack、兩個佇列與 event loop 各自負責什麼
  • 知道 setTimeout 的延遲是到佇列的延遲,不是到執行的延遲
  • 分得出哪些 callback 進 task queue、哪些進 microtask queue
  • 能自己推導 promise、setTimeout、queueMicrotask 混用時的輸出順序
  • 知道 microtask 無限自我排隊會餓死 task queue 而凍結程式
術語:JavaScript runtime JavaScript engine memory heap non-blocking single-threaded call stack execution context blocking …共 30 個
接著看 ←9 JavaScript Concepts That Got Me To Senior Dev · 九個概念用一節帶過 event loop,這站整支把兩個佇列與搬運規則拆開
接著看 ←JavaScript Visualized - Promise Execution · 作者明說先看 promise 那支;懂了 reaction record 才接得住 microtask queue 的優先權
接著看 ←JavaScript Visualized - Execution Contexts · 這站走完 call stack 就結束,那站補上 web API 與兩個佇列讓順序不再連續
接著看 →Top 15 Frontend Interview Questions for 2026 (wa/ Senior Engineer) · 面試題直接考 event loop 的執行順序,先在這站把規則推熟
相關 —JavaScript Visualized - Closures · 同一系列的視覺化,都從 call stack 與 execution context 出發,先看誰都行
接著看 →Keep Those WebSocket Connections Alive! · 先懂 setTimeout 與單執行緒排程,才看得出 interval 與 pong 回呼為何不會 race
開啟文字解析 →

確定錯誤/已過時見仁見智(取決於版本或情境)

段落原話(transcript 逐字)說明
8. Microtask queue 有優先權
8:27
「I believe in node you can set like Mex tick depth or something like that which prevents this exact thing from happening」 作者自己也用「我記得好像」的語氣說的,但這個設定在現代 Node.js 並不存在。她指的應該是舊版的 process.maxTickDepth,它在 Node 0.12 就被移除了,而且當年管的是 process.nextTick 的遞迴深度,並不是 promise/queueMicrotask 的 microtask。現在的 Node.js 沒有任何內建開關可以擋住無限 microtask 迴圈,行為和瀏覽器一樣會卡死,只能靠自己不要寫出會自我複製的 microtask。
依據: process.maxTickDepth 於 Node.js 0.12(2015)移除;Node.js 目前文件中無對應設定
8. Microtask queue 有優先權
6:37
「so only those callbacks or those function body parts get pushed onto the microtask CU so it's very specific」 「只有這些」是為了教學而收緊的說法。她列的四項(then/catch/finally、await 之後、queueMicrotask、MutationObserver)涵蓋了日常九成情況,但規格上還有其他來源也會排入 microtask,例如 custom element 的 reaction callbacks、動態 import() 的完成、Atomics.waitAsync。把它記成「promise 相關與少數瀏覽器內部機制」比記成一份封閉清單安全。
依據: HTML Standard「queue a microtask」與 WHATWG custom element reactions
JavaScript Visualized - Promise Execution 8m42s

JavaScript Visualized - Promise Execution

Lydia Hallie
2 年前 · 8 段 · YouTube
10/10十個階段都做完了
Promise 的執行模型:物件內部欄位、promise reaction record 與 microtask queue
  • 說得出 promise 物件的內部欄位:state、result、fulfill/reject reactions
  • 知道 then 的工作是建立 promise reaction record,不是執行 callback
  • 分得清「排進 microtask queue」與「立刻執行」的差別
  • 能自己推出 1、3、2 這類混合同步與 then 的輸出順序
  • 理解 then 回傳新 promise,所以鏈式 then 能非阻塞地逐步加工結果
術語:Promise Promise constructor executor function internal slot [[PromiseState]] [[PromiseResult]] resolve reject …共 34 個
接著看 ←9 JavaScript Concepts That Got Me To Senior Dev · 九概念站建立了 call stack、event loop、callback,這站把 Promise 拆到欄位層
接著看 ←Top 15 Frontend Interview Questions for 2026 (wa/ Senior Engineer) · 面試題站點到 microtask queue 就停;這站補上 handler 何時被排進去
相關 —JavaScript Visualized - Closures · 同系列視覺化,都把 execution context 拆開看內部欄位,先看誰都行
接著看 ←JavaScript Visualized - Execution Contexts · execution context 與 call stack 建立後,那站看 Promise 怎麼排進微任務佇列
相關 —Embrace Reactive Programming in React and Vue with RxJS - Fahad Ibnay Heylaal · Promise 一次一個值,RxJS 把同一個非同步問題換成多值的 stream
接著看 →JavaScript Visualized - Event Loop, Web APIs, (Micro)task Queue · 作者明說先看 promise 那支;懂了 reaction record 才接得住 microtask queue 的優先權
相關 —Map, switchMap, mergeMap, flatMap, concatMap, exhaustMap in RxJS - what is the difference? · 同樣在講多個非同步工作的排隊與競態,一個用 Promise、一個用 Observable
開啟文字解析 →

確定錯誤/已過時見仁見智(取決於版本或情境)

段落原話(transcript 逐字)說明
4. 複習:microtask queue 優先於 task queue
2:14
「stack is empty the event Loop first checks in the microtask que and whenever this queue is empty it goes to the task que」 這個順序描述夠用來判斷輸出,但不是規格的實際流程。HTML 規格的 event loop 是「取一個 task 執行 → 立刻做一次 microtask checkpoint 把 microtask queue 清空 → 可能渲染 → 再取下一個 task」,也就是每個 task 後面都跟一次完整的 microtask 清空,而不是「microtask queue 空了才開始跑 task queue」。另外瀏覽器有多條 task queue(不同 task source)可自行挑選,Node.js 還多一條優先權更高的 process.nextTick 佇列。
依據: HTML Standard, 8.1.7.3 Event loop processing model(microtask checkpoint);Node.js docs, The Node.js Event Loop
7. then 也回傳 promise:鏈式處理
5:21
「also creates a promis object and this is now set to fulfilled because we returned result time two」 結果沒錯,但時間感被壓掉了:動畫看起來像 1 → 2 → 4 在同一瞬間完成,實際上 then 回傳的那顆 promise 不是立刻 fulfilled——第一個 handler 得先被排進 microtask queue、被取出執行,回傳值才會 resolve 第二顆 promise,接著才排第二個 handler。三個 then 的鏈至少要三輪 microtask,所以與其他 microtask(例如另一條 promise 鏈)交錯時,順序會是逐輪交替而不是一條鏈先跑完。
依據: ECMA-262, 27.2.5.4 Promise.prototype.then / PerformPromiseThen 與 NewPromiseReactionJob(每個 reaction 都是一份獨立的 job)
Reactivity in Vue 3 - How does it work? 9m47s

Reactivity in Vue 3 - How does it work?

Vue Mastery
4 年前 · 11 段 · YouTube
10/10十個階段都做完了
Vue 3 的響應式引擎:用 effect / track / trigger 與三層 targetMap 從零把依賴存起來
  • 說得出 Vue 憑什麼知道 price 改了要更新哪三個地方
  • 理解 dep 為什麼是 Set:同一個 effect 加兩次也只留一份
  • 畫得出 targetMap → depsMap → dep 三層結構與各層的 key
  • 看得懂 Vue 3 原始碼裡的 effect / track / trigger 在做什麼
  • 分得清響應式的兩塊拼圖:儲存依賴,與自動重跑
術語:reactivity stack trace @vue/reactivity Object.defineProperty Proxy template computed property dependency …共 28 個
相關 —9 JavaScript Concepts That Got Me To Senior Dev · closure 與 garbage collection 講完,這站就用它們把 effect 存起來
相關 —Top 15 Frontend Interview Questions for 2026 (wa/ Senior Engineer) · 那邊考 Map、WeakMap 與 GC,這站拿它們當依賴的儲存結構
相關 —JavaScript Visualized - Closures · Vue 的 effect 就是靠 closure 抓住依賴,這裡先懂它怎麼被保留
相關 —JavaScript Visualized - Execution Contexts · 共用 closure:一站是語言機制本身,一站用它做響應式的依賴追蹤
相關 —Embrace Reactive Programming in React and Vue with RxJS - Fahad Ibnay Heylaal · 同樣講值改變怎麼傳播:一個靠依賴追蹤,一個靠 stream
接著看 →Vapor Mode is the Future of Vue · Vapor 拿掉 vdom 的本錢就是 effect / track / trigger,那站先把它拆到底
開啟文字解析 →

確定錯誤/已過時見仁見智(取決於版本或情境)

段落原話(transcript 逐字)說明
2. Vue 怎麼知道要更新畫面
1:00
「And it starts by taking a look at a simple Vue app.」 這裡搭配的投影片用的是 Vue 2 的建立方式 var vm = new Vue({ el: '#app', ... }),但這是一門 Vue 3 課程。Vue 3 已移除全域的 new Vue() 建構式,改成 createApp({ ... }).mount('#app');照著螢幕寫在 Vue 3 專案裡會直接壞掉。這只影響範例語法,不影響後面要講的響應式機制。
依據: Vue 3 遷移指南 Global API: createApp(new Vue 已移除)
4. 從零打造響應式引擎
1:57
「in the same exact way, that Vue 3 does reactivity.」 「一模一樣」要打點折。三層結構(targetMap → depsMap → dep)與命名確實和當時 Vue 3.0–3.3 的原始碼一致,但課程版本省略了 activeEffect 堆疊、巢狀 effect、舊依賴清除、排程佇列、ref 與 computed 等大量真實邏輯。而且 Vue 3.4(2023-12)與 3.5(2024-09)兩次重寫 reactivity 之後,內部細節已經和影片不同,「一模一樣」在今天更接近「概念上一致」。
依據: Vue 3.4 / 3.5 reactivity 重寫,packages/reactivity/src/dep.ts
6. 用 Set 當儲存空間 dep
3:13
「we'll use a dep variable which stands for dependency, and it's a new set.」 在影片當時的 Vue 3.0–3.3 裡,dep 確實是一個 Set<ReactiveEffect>;但這一點今天已經過時。Vue 3.4 把 dep 改成 Map(effect → trackId 版本號)以支援依賴去重與版本比對,Vue 3.5 再把它改寫成 Dep 類別 + 雙向鏈結串列(Link 節點),Set 已經不存在了。targetMap 與 depsMap 這兩層仍在,所以本課的三層心智模型依然適用,只有最內層的容器換過。
依據: Vue 3.4(2023-12)、3.5(2024-09)reactivity 重寫;packages/reactivity/src/dep.ts
9. 多個物件與 targetMap
6:54
「A weak map is simply a map where the keys are objects.」 這個定義抓錯重點。WeakMap 和 Map 真正的差別是「對 key 只持弱引用、可被垃圾回收」,而不只是 key 的型別限制;正是這一點才讓 Vue 敢用一個全域 targetMap 而不洩漏記憶體。另外自 ES2023 起,未註冊的 symbol 也可以當 WeakMap 的 key,所以「key 必須是物件」這句在今天也不再精確。
依據: TC39 Symbols as WeakMap keys(ES2023);MDN WeakMap(weakly held keys)
The ultimate guide to web performance 6m43s

The ultimate guide to web performance

Beyond Fireship
3 年前 · 7 段 · YouTube
10/10十個階段都做完了
Core Web Vitals:用 LCP、FID、CLS 量網頁效能,並用工具找出該修的地方
  • 用 LCP、FID、CLS 三個指標描述「看得到、按得動、不亂跳」
  • 記住 Google 的門檻:LCP 2.5 秒、FID 100 毫秒、超過就算差
  • 優化 LCP 的順序:壓資源 → 上 CDN → 拆掉 render blocking JavaScript
  • 互動變慢只有一個原因:JavaScript 執行太久,只能搬走或延後載入
  • 用 Web Vitals 擴充套件釘單頁問題,用 Unlighthouse 掃整站並接進 CI
術語:Core Web Vitals Lighthouse bounce Largest Contentful Paint (LCP) First Contentful Paint (FCP) network waterfall Search Engine Optimization (SEO) WebP …共 28 個
接著看 →Core Web Vitals Explained: LCP, INP & CLS · 這站六分鐘建立三個指標的輪廓,那站把過時的 FID 換成 INP 並拆到瀏覽器時序
接著看 →15 Frontend Concepts Every Senior Dev Has Mastered · 三個指標的意義懂了,那站把它們掛回關鍵渲染路徑,看出各自量到哪一段
相關 —Frontend System Design at Scale (The Senior Dev Playbook) · 同談 Core Web Vitals 與 lazy loading:一站給指標與工具,一站談大規模下的架構取捨
開啟文字解析 →

確定錯誤/已過時見仁見智(取決於版本或情境)

段落原話(transcript 逐字)說明
3. 優化 LCP 的三層做法
1:42
「you likely want to use modern formats like webp」 2023 年講 webp 是對的,但今天說「現代格式」只提 webp 已經不完整。AVIF 自 2024 年起在 Chrome、Firefox、Safari、Edge 都可用,同畫質下通常又比 WebP 小 20–50%;照片類素材現在的建議寫法是 `<picture>` 依序給 AVIF → WebP → JPEG。仍然只用 WebP 不算錯,但已不是最省的選擇。
依據: AVIF 在 Safari 16.4(2023-03)後補齊,2024 年起被視為 baseline available(web.dev / MDN Baseline)
4. FID:畫得出來還要按得動
2:58
「to process event handler is for that interaction」 作者把 FID 描述成「從使用者互動到瀏覽器『處理完』事件處理器」的時間,這是錯的。FID 只量到瀏覽器「開始」執行事件處理器為止的排隊延遲,處理器本身跑多久、以及跑完後畫面多久才更新,都不算在 FID 裡。這個區分很重要:一個事件處理器跑三秒的頁面,FID 仍然可能是漂亮的綠色。真正把整段涵蓋進去的是後來的 INP。
依據: web.dev/articles/fid:FID measures the time from first interaction to the time when the browser is actually able to begin processing event handlers
4. FID:畫得出來還要按得動
2:43
「we also have first input delay which measures interactivity」 此段內容已過時:FID 已不再是 Core Web Vitals。Google 於 2024-03-12 正式以 INP(Interaction to Next Paint)取代 FID,並於 2024-09-09 讓 FID 完全退場(CrUX 與 PageSpeed Insights 不再回報)。今天要優化互動性應該看 INP,門檻是 200ms(好)/500ms(差),而不是影片裡的 100ms/300ms。本段其餘的優化手段(減少 JavaScript 執行時間、web worker、延遲載入)對 INP 依然適用,只是還要額外注意事件處理器本身的耗時與重繪。
依據: Google Search Central / web.dev 公告:INP 於 2024-03-12 成為 Core Web Vital,FID 於 2024-09-09 退役
7. Unlighthouse:整站掃描與實測
5:41
「it'll bring up a UI to show you how bad your website performance is in real time」 這句在畫面上的呈現與口述有落差:截圖裡掃 amazon.com 時 SITE SCORE 還在轉圈、worker 進度才 44%,也就是「即時」指的是路由狀態與逐頁分數陸續回填,整站總分要掃完才算得出來。此外預設是在模擬行動裝置與節流條件下跑的實驗室數據,跟真實使用者的 Core Web Vitals(第 75 百分位)不會一致,所以拿它比較不同網站時只能當相對參考。
依據: 截圖 frames/s07_357.jpg:amazon.com、ROUTES 147、WORKER PROGRESS 44% 154/354、DEVICE Emulated Mobile
Core Web Vitals Explained: LCP, INP & CLS 14m46s

Core Web Vitals Explained: LCP, INP & CLS

I Code It
6 個月前 · 13 段 · YouTube
10/10十個階段都做完了
Core Web Vitals:用 LCP、CLS、INP 三個指標拆解前端效能
  • 說得出 LCP、CLS、INP 各自量什麼、及格線是多少
  • 解釋阻塞腳本為何會拖慢一張與它無關的圖片
  • 用 defer、preload、fetchpriority 重排載入順序
  • 知道圖片補上 width/height 就能讓版面預留空間
  • 把長運算切塊並交還主執行緒,換回可互動的頁面
術語:Core Web Vitals Largest Contentful Paint Cumulative Layout Shift Interaction to Next Paint viewport hero image LCP candidate render-blocking script …共 29 個
接著看 ←15 Frontend Concepts Every Senior Dev Has Mastered · 那站用渲染路徑掛出 LCP/INP/CLS 的位置,這站把三個指標逐一拆到瀏覽器時序
接著看 ←9 JavaScript Concepts That Got Me To Senior Dev · 先懂 event loop 與單執行緒,才看得懂 INP 為何被一段長工作卡住
接著看 ←The ultimate guide to web performance · 這站六分鐘建立三個指標的輪廓,那站把過時的 FID 換成 INP 並拆到瀏覽器時序
接著看 →Frontend System Design: Performance API, Chrome, React Profiler · 三個指標的成因懂了,接著學怎麼用 Performance API 與 Profiler 量它們
相關 —Frontend System Design at Scale (The Senior Dev Playbook) · 同談 Core Web Vitals 與 defer:一個講機制,一個講大規模架構下的取捨
相關 —Real Frontend System Design (from a Senior Engineer) · 面試情境裡會用到這裡的 Core Web Vitals 與 Web Worker 結論
相關 —Top 15 Frontend Interview Questions for 2026 (wa/ Senior Engineer) · main thread 與 reflow 在面試題裡以問答形式再出現一次
開啟文字解析 →

確定錯誤/已過時見仁見智(取決於版本或情境)

段落原話(transcript 逐字)說明
4. 阻塞腳本為什麼拖慢 LCP
3:17
「which means the image request only starts after the script finishes」 在這個範例裡並不成立。hero image 是直接寫在 HTML 裡的 <img src>,即使主解析器被 header 的阻塞腳本卡住,Chrome 的 preload scanner 仍會掃描後續 HTML 並提早發出圖片請求。LCP 之所以還是爛,真正原因是主執行緒被腳本佔住、圖片下載完也畫不出來(LCP 記的是完成繪製的時刻),再加上腳本與圖片搶頻寬。作者的說法只有在圖片由 JavaScript 動態插入、或網址藏在 data-src / CSS 背景圖裡時才正確。
依據: preload scanner 自 2008 年起即為主流瀏覽器標準行為;web.dev〈Don't fight the browser preload scanner〉(2022)
6. 修法:defer、preload、fetchpriority
4:22
「It won't change the DOM element.」 defer 並不保證腳本不會改動 DOM,也不需要這個保證。defer 的定義是「延到 HTML 解析完成之後才執行」,腳本執行時 DOM 已經完整,因此它可以(而且通常就是要)修改 DOM。之所以安全,是因為執行時機已經避開解析階段,而不是因為腳本不碰 DOM。真正會因為改動 DOM 而不安全的是解析期間執行 document.write 的同步腳本。
依據: HTML Living Standard:defer 腳本在解析完成後、DOMContentLoaded 之前依序執行
9. after:寫上寬高,CLS 歸零
8:24
「Here, we simply add width and height attribute to the image element.」 after 版本改動的不只是寬高。對照畫面上兩份檔案:before 的 img 用 data-src 加一段 setTimeout 腳本延遲插入,after 則直接寫 src 並補上 width/height,等於同時拿掉了延遲載入。結論本身沒錯(預留空間確實是消除位移的關鍵),但這組 before/after 並非只差一個變因,嚴格說不算單變因對照;照著只補寬高、保留 lazy 插入的頁面,一樣可以把 CLS 降到 0。
依據: 影片 07:27 的 cls-before.html 與 08:37 的 cls-after.html 逐行對照
12. 修法:切成小塊並交還控制權
12:54
「This can be done using the technique like set timeout or uh chunk loop.」 setTimeout(…, 0) 仍然可行且相容性最好,但已不是今天的首選寫法。它讓出控制權之後,任何其他排隊中的工作都可能插到你前面,導致整批處理被無限拖長;瀏覽器現已提供 scheduler.yield()(Chrome 129+,2024 年 9 月起)與 scheduler.postTask(),讓出之後仍保有優先權接續執行。另外要小心的是別把 Promise.resolve().then() 當成讓出——微任務會在同一輪清空,畫面照樣不會更新。
依據: scheduler.yield() 自 Chrome 129(2024-09)起正式提供;web.dev〈Optimize long tasks〉建議優先使用 scheduler.yield()
Frontend System Design: Performance API, Chrome, React Profiler 13m12s

Frontend System Design: Performance API, Chrome, React Profiler

I Code It
1 個月前 · 11 段 · YouTube
10/10十個階段都做完了
前端效能的三把量尺:Performance API、Chrome Performance、React Profiler
  • 把「頁面很慢」拆成有多慢、哪裡慢、跟什麼比三個可回答的問題
  • 用 performance.now() 與 mark / measure 建立可重複比對的 baseline
  • 用 Chrome Performance 火焰圖把時間定位到 main thread 的某個函式
  • 用 React Profiler 的 actualDuration 量單一子樹的渲染成本
  • 把三個數字並排才看得出瓶頸;profiler 數字只當相對比較用
術語:baseline performance optimization code splitting lazy loading web worker Performance API duration performance.now() …共 34 個
接著看 ←15 Frontend Concepts Every Senior Dev Has Mastered · 那站建立 main thread、CRP、lazy loading 的心智模型,這站教你怎麼量它們
接著看 ←Top 15 Frontend Interview Questions for 2026 (wa/ Senior Engineer) · 面試題點到 main thread 阻塞與 code splitting,這站給證明改動有沒有用的量法
相關 —Senior Frontend Interview 2026 🎉 | Javascript 🎯 (Mock) [Most Asked Questions] · 共用 layout、virtualization、code splitting:一站口頭答題,一站實際量給你看
接著看 ←Core Web Vitals Explained: LCP, INP & CLS · 三個指標的成因懂了,接著學怎麼用 Performance API 與 Profiler 量它們
接著看 ←Vapor Mode is the Future of Vue · Vapor 只給了「更快更省」的承諾沒給數字,這站教你怎麼量出來
接著看 →Frontend System Design Explained w/ Senior Engineer (Microfrontends, Monorepo, MCP UI, Reactjs) · 量出瓶頸之後,那站給 bundle 切分、渲染策略等可以拿來改的選項
接著看 →Real Frontend System Design (from a Senior Engineer) · 這站把 web worker 當成待驗證的假設,那站把它當成 scale level 的零件用
開啟文字解析 →

確定錯誤/已過時見仁見智(取決於版本或情境)

段落原話(transcript 逐字)說明
5. Performance API 的天花板:知道多久,不知道為何
5:58
「Is it layout or is it rendering? The performance API cannot answer these questions.」 作為「why 要靠 profiler」的教學對比,這句話成立;但講成 Performance API 完全回答不了 layout / rendering 的歸因,以今天的瀏覽器來說偏絕對。PerformanceObserver 的 long-animation-frame entry 會給出該影格的 styleAndLayoutDuration 與造成阻塞的腳本來源,layout-shift、event、element 等 entry type 也各自提供部分歸因。準確的說法是:Performance API 給得出「哪一類工作佔了多久」,但給不出呼叫堆疊,所以要定位到某一行程式碼仍然需要 profiler。
依據: Long Animation Frames API(Chrome 123 起預設開啟,2024);PerformanceObserver 支援的 layout-shift / event / element entry type(Event Timing、Layout Instability 規格)。
10. Profiler 的數字怎麼讀才對
10:58
「React can also integrate with Chrome performance where you will see」 這句在影片脈絡裡被講成一個通則,但它其實高度依賴版本。React 早年靠 User Timing marks 提供的 DevTools 時間軸資訊在 React 18 已被移除;現在畫面上看得到的 `Scheduler ⚛` 與 `Components ⚛` 自訂軌道,是 React 19.1 之後才加入的 Performance tracks 功能,而且只在開發模式與支援自訂軌的 Chrome 版本才會出現。用舊版 React 或 production build 的人照著做會看不到任何 React 軌道。
依據: React 19.1 release notes(2025)新增 Performance Tracks(Scheduler ⚛ / Components ⚛);React 18 移除 unstable_trace 與 User Timing 整合;Chrome DevTools extensibility API for custom tracks(Chrome 125+)。
You Wouldn't Believe These Developer Interview Mistakes... 9m23s

You Wouldn't Believe These Developer Interview Mistakes...

Program With Erik
3 年前 · 7 段 · YouTube
9/9十個階段都做完了
大廠工程師面試:面試官看到的系統性錯誤,以及準備時間該放在哪裡
  • 面試官看到的落敗模式:不是題目太難,而是準備方向系統性偏掉
  • 最常把人考倒的是基本功:Box model、responsive design、REST
  • 外面的 senior 不等於大廠的 senior,投錯職級等於自己加難度
  • 行為題要的是可佐證的 impact,臨場唬不過去,得事前備好場景
  • junior 與實習幾乎不考 system design,那段時間該還給基本功
術語:FANG hiring freeze responsive design Box model event listener REST endpoint HTTP verb …共 22 個
相關 —how to learn ANYTHING faster than anyone · 一站講通用學習法(80/20、盡快失敗),一站講面試準備時間該放哪,互相印證
接著看 →Top 15 Frontend Interview Questions for 2026 (wa/ Senior Engineer) · 這站只說「基本功一直把人考倒」,那站直接給 15 題的答法
接著看 →Senior Frontend Interview 2026 🎉 | Javascript 🎯 (Mock) [Most Asked Questions] · 這站列出該補的基本功,那場模擬面試把它們一題一題問出來
接著看 →How Senior Frontend Engineers Think in System Design Interviews · 這站說 system design 只對 mid/senior 重要,那站示範那一關怎麼答
相關 —The 3 Skills That Separate Architects From Senior Developers · 同談職級與影響力:一站是進得去,一站是進去之後往上走
開啟文字解析 →

確定錯誤/已過時見仁見智(取決於版本或情境)

段落原話(transcript 逐字)說明
1. 面試官視角:同樣的錯誤一再出現
0:40
「there's layoffs there's hiring freezes I really think that good candidates can still get through this process and that a lot of companies are still hiring」 這是 2022 年 11 月錄的,當時裁員才剛開始。後續 2023–2024 年大廠的裁員與招募緊縮持續了更久,且縮得最兇的正是本片主推的入門管道——新鮮人職缺與實習名額。「好的候選人仍然過得了關」大方向沒錯,但「很多公司還在招」在之後兩年對 junior 明顯不成立,投遞數量與等待時間都要往上調整。
依據: 2022-11 上傳;2023–2024 年 Meta、Amazon、Google 等多輪裁員與新鮮人職缺縮減
5. 別過度投資 system design
6:02
「for junior level positions at most of these companies you're not going to get any system design question」 以 2022 年、以及純粹的 new grad 職缺來說大致成立,但說成「大部分公司都不會問」偏絕對。實務上不少大廠的新鮮人流程會放一輪偏設計的題(物件導向設計、把一個功能拆成模組與 API),有些團隊也會用淺版設計題取代第二輪演算法;近年新鮮人競爭變激烈後這個比例更高。安全的做法是照投遞公司公布的面試流程確認,而不是預設一定不考。
依據: 2022-11 上傳;Google/Meta 等公司公開的 new grad 面試指南多列有設計或物件導向設計輪
7. 面試是數字遊戲:失敗、複盤、再投
8:30
「you can always reapply usually within six months to a year to a lot of these big tech companies」 大方向對,但「六個月到一年」是概略值,各家與各關卡不同,且政策會變動:有的公司對走到最終輪才被拒的候選人採一年起算,也有公司對特定職級或特定失敗原因延長。投之前應以該公司當時公告的規定為準,不要直接套這個區間。
依據: 2022-11 上傳;Google、Meta、Amazon 等公司的重新申請規定各異且歷年調整過
7. 面試是數字遊戲:失敗、複盤、再投
8:43
「they're gonna be very similar probably even similar in Pay」 「同領域的其他大公司待遇相近」在頂級公司之間大致成立,但整體市場的薪資分層其實相當明顯:同一職級在不同層級的公司之間,總報酬(尤其是股票部分)可能差到一倍以上,而且股票價值會隨股價變動。把「換一家差不多」當成預設可能低估了取捨,投遞時仍應個別確認總報酬結構。
依據: 2022-11 上傳;公開薪資彙整資料顯示同職級跨公司總報酬差距顯著
Lauren Tan grokbot workshop 中文字幕 59m41s

Lauren Tan grokbot workshop 中文字幕

Casey
1 個月前 · 20 段 · YouTube
10/10十個階段都做完了
怎麼把 coding agent 從「要盯著看」養成「敢自動合併」——verification、skill 與硬約束架構
  • 信任決定你能同時用幾個 agent,沒有捷徑可跳級
  • verification 讓 agent 自己驗證,人才不會變成瓶頸
  • 把每個觀察到的失敗模式寫成 skill,再用 eval 當單元測試
  • 護欄要硬:架構與 CI 擋得住,rules 與 skill 只是補強
  • 每次在 PR 上留言糾正,就該改寫成 lint 規則或 CI failure
術語:React Compiler individual contributor agent hallucination trust curve in the loop auto-merge pull request …共 54 個
接著看 ←The 3 Skills That Separate Architects From Senior Developers · 架構師「改掉造成問題的條件」,這站把它落成 lint 與 CI 的硬約束
接著看 ←3 Frontend Skills AI Can't Replace (become AI-proof) · 那站的 code smell 與靜態分析靠人判斷,這站把判斷交給 CI 硬性執行
接著看 ←Senior Frontend Interview 2026 🎉 | Javascript 🎯 (Mock) [Most Asked Questions] · 那站講透 useEffect 為何是地雷,這站在 CI 直接把它禁掉
相關 —Real Senior Frontend System Design Interview 2026 (AI Coding Included) · 同談 AI 寫程式的 hallucination:一個在面試現場,一個在生產流程
接著看 ←GitHub Copilot 一次只給一種答案?Orca 讓你召喚 AI 大軍同時寫 Code,優劣立判! · Orca 讓人用 git diff 挑多個 agent 的最佳解;那站把驗證做成硬約束,讓 agent 產出敢自動合併
接著看 ←My NEW AI Terminal and Code Editor // Orca Review · 這站的 orchestration 靠 prompt guardrail 補漏(誤啟 Codex);那站把驗證做成 CI 硬約束
接著看 ←How a Cloudflare Engineer Ships Production Code He Didn't Write | Dillon Mulroy · Dillon 讀每一行、不信 AFK loop,結尾想把品味寫成 skill 做第一輪 review;那站把信任做成 verification、skill 與 CI 硬約束
相關 —Ruby, Rails, and the future of programming - Matz, DHH & Jeremy Daer · vibe coding 的理念端與實作端:座談談為什麼,workshop 談怎麼帶
相關 —Jev + Treg is a crazy combo for automation... · 都在問「何時敢讓機器全自動」:一個用 verification 與 CI 硬約束,一個用校準機率的分層門檻
接著看 →Building a Harness with Jev · grokbot 說護欄要硬、驗證要自動;這站給 0.1 秒的分類器做 auto mode 攔截與 online evals 打分
接著看 →Rails World 2026 Opening Keynote - DHH · verification 與硬約束,就是 DHH 說的「修工廠而不是補程式碼」
開啟文字解析 →

確定錯誤/已過時見仁見智(取決於版本或情境)

段落原話(transcript 逐字)說明
8. P-Stack 是觀察失敗模式長出來的
18:23
「pull the agent to a different latent space」 「把 agent 拉到不同的 latent space」是社群流行的比喻,不是機制上的描述。給高品質 prompt 並沒有讓模型換到另一個表示空間,改變的是它在既有上下文下的輸出分佈(條件機率)。講者自己也說這是「花俏的說法」,但聽者容易把它當成技術事實。
依據: 講者原話下一句即為 which is kind of like a fancy way of just saying…
15. Dune 的硬約束:連註解都禁
41:26
「we've banned use effect」 全面禁用 useEffect 是相當激進的取捨。React 官方的立場是它被大量誤用,但它仍是「與外部系統同步」(訂閱、手動 DOM 操作、非 React 的第三方元件)的正規逃生口;完全禁用意味著這些情境必須由框架另外提供替代機制。在 Dune 這種自帶完整框架的環境裡說得通,直接照抄到一般 React 專案則可能無路可走。
依據: React 官方文件〈You Might Not Need an Effect〉建議的是減少誤用,而非停用
15. Dune 的硬約束:連註解都禁
42:00
「banned code comments as well」 她給的理由(agent 常把針對單一 PR 的一句指正寫成永久的全域註解)是真實觀察,但結論偏一刀切。註解仍是記錄「為什麼這樣做」的少數手段,尤其是繞過某個外部限制或非直覺的取捨;把它整個禁掉等於把這類資訊全部推給 commit message 與 PR 描述,而那些東西在讀程式碼時並不在眼前。這是取捨而非定論。
依據: 同段講者自述理由為「99% 的情況 agent 寫的註解在記錄無關的歷史」
17. 選技術棧,也把 review 變成規則
49:23
「if the code compiles, it's probably works and it's good」 Rust 編譯器保證的是記憶體安全與型別正確,不是邏輯正確——能編過的程式一樣可能算錯答案、呼叫錯 API、寫錯商業規則。講者自己有加上 more or less、somewhat、probably 等緩衝詞,但這句話容易被讀成「編過就不用驗證」,而那會和她自己排在第一位的 verification 相矛盾。合理的讀法是:編譯器擋掉的那一類錯誤人不必再查,其他類別仍然要靠測試與實際執行。
依據: 同一場她把 verification 列為最重要的能力(約 07:52 起)
19. Grokbot:非工程師的 Cursor 時刻
54:46
「the cost per token is the same as 4.5」 這是她臨場補充的價格資訊,她自己也先聲明「希望我沒講錯」。定價會隨時間調整,而且輸入、輸出、快取讀取的單價通常不同,「每 token 成本相同」不一定對所有計價項目都成立。要引用這個數字前,請以官方定價頁的當期資訊為準。
依據: 講者原話前一句為 hopefully I'm not saying this incorrectly
The 3 Skills That Separate Architects From Senior Developers 6m42s

The 3 Skills That Separate Architects From Senior Developers

The Serious CTO
27 天前 · 9 段 · YouTube
9/9十個階段都做完了
架構師與資深工程師的三個差別:系統性思考、組織影響力、結構設計
  • 分辨「修掉耦合」與「改掉造成耦合的條件」差在哪
  • 把「這樣比較好嗎」換成「對什麼比較好」的提問法
  • 用成本、風險、價值把技術主張寫成商業論證
  • 技術願景必須包含遷移路徑,不只是一張目標架構圖
  • 看懂微服務遷移真正的計價單位是跨服務呼叫比例
術語:architect senior developer leverage pull request systemic thinking local fix microservices trade-off accounting …共 31 個
接著看 ←Every Frontend Architecture Pattern Explained in 23 Minutes · 那站把架構演化與六軸取捨攤開,這站問誰來訂這些取捨、憑什麼訂
接著看 ←Frontend System Design Explained w/ Senior Engineer (Microfrontends, Monorepo, MCP UI, Reactjs) · 共用 Conway's law、microservices、API gateway;那站切邊界,這站談怎麼改掉造成耦合的條件
接著看 ←Real Frontend System Design (from a Senior Engineer) · 那站逐層加壓做出架構決策,這站補上決策要怎麼換算成成本、風險、價值
接著看 ←Frontend System Design at Scale (The Senior Dev Playbook) · 那站把資深工程師的檢查面向做滿,這站問何時該從交解法變成訂限制
相關 —How Senior Frontend Engineers Think in System Design Interviews · 共用 Architecture Decision Record:一站教面試裡怎麼決策,一站談決策本身成為主要產物
相關 —You Wouldn't Believe These Developer Interview Mistakes... · 同談職級與影響力:一站是進得去,一站是進去之後往上走
相關 —Rails World 2026 Opening Keynote - DHH · 抽象與架構該不該重估,對照架構師的結構設計技能
接著看 →Lauren Tan grokbot workshop 中文字幕 · 架構師「改掉造成問題的條件」,這站把它落成 lint 與 CI 的硬約束
相關 —GitHub Copilot 一次只給一種答案?Orca 讓你召喚 AI 大軍同時寫 Code,優劣立判! · 同談角色轉變:架構師站講系統性思考與決策,Orca 站把「工匠→指揮官」落成多代理工作流
接著看 →How a Cloudflare Engineer Ships Production Code He Didn't Write | Dillon Mulroy · 那站講架構師靠系統思考與組織影響力;這站說 AI 把 senior→staff 的軟技能門檻壓到每個工程師身上
開啟文字解析 →

確定錯誤/已過時見仁見智(取決於版本或情境)

段落原話(transcript 逐字)說明
2. 技能一:系統性思考與微服務陷阱
1:20
「A lot of times the recovery goes from 15 minutes to 90 minutes.」 這一串數字(15→90 分鐘、40%、18 個月)被放在「研究裡的例子」的框架下講,但影片沒有指名任何一份研究或資料來源,敘述詞也是「A lot of times(很多時候)」。復原時間隨服務拆分而惡化確實是被廣泛觀察到的現象,方向可信;但這幾個具體數字應該當成示範用的舉例,不能當成可以拿去引用的業界基準或平均值。
依據: 影片全程未提出研究名稱、年份或樣本;同類公開資料(如 DORA State of DevOps 報告)量測的是 MTTR 分級區間,並未給出「微服務造成 6 倍惡化」這類定值。
5. 把技術主張換算成商業帳
2:49
「That's a 1.2 million cost increase, but it frees up 2.5 engineer years valued at 1 million in productivity.」 照影片給的數字直接算,這個提案是每年淨虧 20 萬美金(成本 +120 萬、效益 100 萬),並不支持「所以應該換到 cloud-native」的結論。這個例子當成「商業論證長什麼樣」的格式示範沒問題,但當成「換過去划算」的證據就不成立——除非補上影片沒提到的其他效益(上市時間、故障成本、未來擴展不必再加人)或攤到多年來看。
依據: 算式取自影片自述數字:4.2M − 3.0M = 1.2M 成本增加;釋放 2.5 engineer years 估值 1.0M;淨額 −0.2M/年。
7. 技術願景要附一條路:Netflix 花了七年
4:38
「And before migrating, they built Hystrix, Eureka, and Zuul.」 時序顛倒了。Netflix 的雲端/微服務遷移大約從 2008–2009 年開始、2016 年才宣告完成,而 Hystrix、Eureka、Zuul 都是在遷移「進行中」為了解決當下遇到的問題而做出來並陸續開源的(Eureka、Hystrix 約 2012 年,Zuul 約 2013 年),不是遷移前先備妥的前置工具。作者要傳達的道理(願景必須包含前置條件與遷移路徑)本身成立,但這個案例其實更接近「邊走邊鋪路」而不是「先鋪好路再走」。另外 Hystrix 已在 2018 年由 Netflix 宣布停止主動開發、進入維護模式,今天不該當成建議採用的元件;同期的替代方案是 resilience4j 或服務網格/自適應併發限制那一類做法。
依據: Netflix 官方技術部落格記載遷移自 2008 年資料中心故障後啟動、2016 年完成最後一個資料中心下線;Netflix OSS 各專案的 GitHub 首次釋出時間為 Eureka/Hystrix 2012、Zuul 2013;Hystrix 於 2018 年 11 月公告進入 maintenance mode。
How Frontend Engineers can master the Full-stack 39m18s

How Frontend Engineers can master the Full-stack

theSeniorDev
1 年前 · 18 段 · YouTube
10/10十個階段都做完了
前端工程師轉全端:沿著分層架構把資料層、商業邏輯層、持久層一層層走完
  • 用一張分層架構圖把全端知識定位,而不是背清單
  • 把 HTTP 請求與回應讀成同一種純文字格式的兩個方向
  • 從 under-fetching 推出 GraphQL、BFF、N+1 的因果鏈
  • 用 CAP 當框架理解讀寫分離、索引、分片三種擴展手段
  • 分辨哪些知識該動手練、哪些當歷史讀就好
術語:full-stack layered architecture data layer HTTP header status code REST CRUD …共 50 個
相關 —15 Fullstack Concepts Every Frontend Should Know · 同一批全端概念,一個從封包往上、一個從分層往下
接著看 ←9 JavaScript Concepts That Got Me To Senior Dev · 同步/非同步與 Promise 是串流與批次合併的前提
接著看 ←15 Frontend Concepts Every Senior Dev Has Mastered · 快取從效能技巧深入到 Cache-Control、max-age、ETag 的機制
相關 —Top 15 Frontend Interview Questions for 2026 (wa/ Senior Engineer) · 共用 CAP、最終一致性、唯讀副本、max-age 與即時協定選型
接著看 →Real Frontend System Design (from a Senior Engineer) · CAP、唯讀副本、水平擴展被用進一場完整的系統設計題
接著看 →Real Senior Frontend System Design Interview 2026 (AI Coding Included) · BFF 與 SSE/WebSocket 的判準被用在面試現場的取捨
接著看 →Authorization vs Authentication - Whats the Difference? | Developer Concepts Explained · 全端基礎談到登入,這站把權限那一半拆開
接著看 →How to scale WebSockets to millions of connections · 垂直/水平擴展與 WebSocket 在那站建立,這站專講兩者用在長連線的代價
相關 —How Web Sockets work | Deep Dive · 共用 HTTP 純文字請求/回應:那站教怎麼讀,這站的 handshake 就是一組 HTTP 文字
開啟文字解析 →

確定錯誤/已過時見仁見智(取決於版本或情境)

段落原話(transcript 逐字)說明
7. HTTP 快取:Cache-Control 與 ETag
11:00
「I have a max age of 86 400,000 milliseconds」 單位講錯了。`Cache-Control` 的 `max-age` 指令單位是「秒」,不是毫秒。他自己畫面上圈起來的正是 `Cache-Control: public, max-age=86400`,也就是 86400 秒 = 24 小時;若真的是 86,400,000 毫秒也剛好是同一個 24 小時,但螢幕上的數字是 86400 而非 86400000。同一段講到的 `Age: 10843` 同樣以秒計。
依據: RFC 9111 §5.2.2.1(Cache-Control max-age,delta-seconds);影片 11:00 畫面 DevTools Response Headers 顯示 max-age=86400、Age: 10843
11. 資料串流:WebSocket 與 SSE
19:39
「That's how WhatsApp, Facebook, Instagram, that's how they all work」 當成心智模型可以,當成事實則不精確。這些平台的行動 App 大多不是用瀏覽器的 WebSocket——WhatsApp 的行動端長期使用改造自 XMPP 的自訂二進位協定跑在持久 TCP 連線上,Facebook Messenger 行動端則以 MQTT 為主,都是為了在弱網與省電上表現更好。它們的「網頁版」確實用 WebSocket。作者要傳達的「持久雙向連線」概念是對的,但把它們一律等同於 WebSocket 並不準確。
依據: Facebook Engineering, "Building Mobile-First Infrastructure for Messenger"(MQTT);WhatsApp 公開技術說明與協定分析文獻(XMPP 變體)
15 Fullstack Concepts Every Frontend Should Know 41m57s

15 Fullstack Concepts Every Frontend Should Know

theSeniorDev
7 個月前 · 16 段 · YouTube
10/10十個階段都做完了
從一個封包到一套可擴展架構:前端該懂的 15 個全端概念
  • 看得懂一個 fetch 之後,封包、DNS、TLS 各發生了什麼
  • 分辨 polling、WebSocket、SSE 各自適合什麼場景
  • 知道 REST 為什麼在多客戶端時裂開,GraphQL 補了什麼
  • 認得 N+1 問題,並知道 DataLoader 的批次化在做什麼
  • 說得出 API Gateway 與 BFF 的差別,以及 BFF 為什麼歸前端
術語:HTTP TCP HTTP header status code DNS domain name IANA IP …共 53 個
接著看 ←9 JavaScript Concepts That Got Me To Senior Dev · fetch 與 async/await 在那站建立,這站所有範例都以它為起點
接著看 →Real Frontend System Design (from a Senior Engineer) · TLS、快取、REST/GraphQL、Gateway、BFF 在這站建立,那站直接當零件用
接著看 →Frontend System Design Explained w/ Senior Engineer (Microfrontends, Monorepo, MCP UI, Reactjs) · API Gateway、BFF、SSE、WebSocket 等十個共同術語,那站不再解釋
接著看 →Real Senior Frontend System Design Interview 2026 (AI Coding Included) · SSE/WebSocket/polling 的機制差別在這站建立,那站直接拿來選型
相關 —Every Frontend Architecture Pattern Explained in 23 Minutes · 共用 GraphQL 與 N+1:一站從協定往上推,一站從架構演化往下切
相關 —15 Frontend Concepts Every Senior Dev Has Mastered · 共用 ETag、TTL:一站講快取在協定裡怎麼運作,一站講瀏覽器端效能
相關 —How Senior Frontend Engineers Think in System Design Interviews · 共用 WebSocket/polling:一站給協定機制,一站給沒答案時的決策方法
相關 —Top 15 Frontend Interview Questions for 2026 (wa/ Senior Engineer) · 共用 SSE/WebSocket/max-age:一站解釋機制,一站是面試速答清單
相關 —How Frontend Engineers can master the Full-stack · 同一批全端概念,一個從封包往上、一個從分層往下
接著看 →Authorization vs Authentication - Whats the Difference? | Developer Concepts Explained · 講完 HTTP 與 API 之後,再看誰能呼叫哪一個
相關 —Cross-Site Request Forgery (CSRF) Explained · HTTP 方法、API 與 endpoint 在那站建立,這站直接拿來拆解一個偽造請求
接著看 →How to scale WebSockets to millions of connections · WebSocket、round robin、單點故障在那站點名,這站把它們拉成一條擴展推理
接著看 →Keep Those WebSocket Connections Alive! · 那站分辨 polling/WebSocket/SSE,這站在 WebSocket 上動手寫 heartbeat
接著看 →How Web Sockets work | Deep Dive · 那站把 WebSocket 與 HTTP、TCP、SSE 並列點名,這站把 handshake 與 frame 拆到位元
接著看 →WebSockets Aren’t as Reliable as You Think.. Here's Why · 那站帶過 WebSocket、EventSource、round robin 三個概念,這站把它們組成一套可靠性設計
開啟文字解析 →

確定錯誤/已過時見仁見智(取決於版本或情境)

段落原話(transcript 逐字)說明
3. IP:機器之間如何找到彼此
9:26
「so expensive around the 2000 people came up with the idea of IPv6」 把 IPv6 的提出時間推晚了大約五年。IPv6 的第一份規格 RFC 1883 在 1995 年就發布,1998 年由 RFC 2460 定稿,並非「2000 年左右才有這個想法」。作者要表達的「因為位址枯竭才做 IPv6」這個因果本身是對的。
依據: RFC 1883 (1995-12)、RFC 2460 (1998-12)
4. HTTP 快取與 E-Tag
12:29
「Now that number it's in milliseconds.」 Cache-Control 的 max-age 單位是「秒」,不是毫秒。畫面上的 max-age=31536000 當成秒剛好是一年(也是規範建議的上限用法);若真是毫秒就只有約 8.7 小時,跟旁邊 age=672803 已經超過七天卻仍算新鮮的事實直接矛盾。
依據: RFC 9111 §5.2.2.1 max-age:delta-seconds
5. TLS:為什麼要換兩種加密
14:14
「in order to prevent this in 1996 which is basically 30 years ago Netscape」 Netscape 的 SSL 2.0 在 1995 年就隨 Navigator 出貨(SSL 1.0 從未公開),SSL 3.0 才是 1996;標準化並改名為 TLS 1.0 則要到 1999 年的 RFC 2246。說「1996 年 Netscape 提出 HTTPS」大方向沒錯,時間點略晚一年。
依據: SSL 2.0 (1995)、SSL 3.0 (1996)、RFC 2246 TLS 1.0 (1999)
9. RPC / tRPC 與 MCP
24:26
「it was only probably 7 months ago. So, this stuff is pretty recent.」 這是錄影當下的相對時間,現在讀會誤導。MCP 由 Anthropic 在 2024 年 11 月發布並開源,至今已超過一年,且已被多家 AI 廠商與 IDE 採用,不再是「剛出來七個月」的實驗性東西。
依據: Model Context Protocol 公開發布:2024-11
14. API Gateway:重複的事只做一次
36:39
「the TLS handshake which takes at least five round trips to the network」 這是 TLS 1.2 以前(含 TCP 三次交握)的粗估。TLS 1.3 已把完整交握壓到 1-RTT,對曾連過的伺服器還能 0-RTT 續傳。作者用這個數字論證「Gateway 之後走 HTTP 比較快」,結論方向仍成立,但省下的幅度被高估了。
依據: RFC 8446 (TLS 1.3, 2018)
Senior Frontend Interview 2026 🎉 | Javascript 🎯  (Mock) [Most Asked Questions] 30m36s

Senior Frontend Interview 2026 🎉 | Javascript 🎯 (Mock) [Most Asked Questions]

Dev. Aditya
5 個月前 · 17 段 · YouTube
10/10十個階段都做完了
資深前端模擬面試:從效能觀念題到 useRef 實作題的深度驗收
  • 看懂一場資深前端面試如何從開放題逐層追問到底層機制
  • 分清 debounce / throttle、useRef / useState 兩組相近工具的判準
  • 掌握 setInterval 的 id 為什麼必須放進 useRef 而不是變數或 state
  • 認識 Rules of Hooks 的成因:React 靠呼叫順序對應狀態
  • 知道 error boundary 至今仍只有 class 元件有原生解法
術語:re-render memoization prop drilling dynamic import tree shaking bundle virtual DOM reconciliation …共 43 個
接著看 ←15 Frontend Concepts Every Senior Dev Has Mastered · 面試站直接拿 critical rendering path、reconciliation、virtual DOM、memoization 當共同語言使用
接著看 ←9 JavaScript Concepts That Got Me To Senior Dev · closure 與 lexical scope 在這站是被驗收的答案,而不是被解釋的內容
相關 —Top 15 Frontend Interview Questions for 2026 (wa/ Senior Engineer) · 同樣是面試題:一邊是整理好的標準答案,一邊是真實臨場的卡關與修正
接著看 ←You Wouldn't Believe These Developer Interview Mistakes... · 這站列出該補的基本功,那場模擬面試把它們一題一題問出來
接著看 ←JavaScript Visualized - Closures · 懂了 [[Environment]] 與 scope chain,再去看面試題怎麼考 closure
接著看 ←JavaScript Visualized - Execution Contexts · closure、scope chain、hoisting 在這站是機制,在那場模擬面試裡是被驗收的答案
相關 —Vapor Mode is the Future of Vue · 同談 virtual DOM 與 DOM 操作成本,一個講原理一個在面試裡被問
相關 —Real Senior Frontend System Design Interview 2026 (AI Coding Included) · 兩場 2026 資深前端模擬面試:一場考觀念與手寫實作,一場考系統設計
接著看 →Frontend System Design Explained w/ Senior Engineer (Microfrontends, Monorepo, MCP UI, Reactjs) · reconciliation、hydration、WebSocket 等單點觀念在這站被放進整個系統設計裡
接著看 →Lauren Tan grokbot workshop 中文字幕 · 那站講透 useEffect 為何是地雷,這站在 CI 直接把它禁掉
相關 —Frontend System Design: Performance API, Chrome, React Profiler · 共用 layout、virtualization、code splitting:一站口頭答題,一站實際量給你看
開啟文字解析 →

確定錯誤/已過時見仁見智(取決於版本或情境)

段落原話(transcript 逐字)說明
8. 生命週期方法到 useEffect
10:25
「I think in it's React 13, hooks was introduced」 hooks 不是在 React 13 引入的,而是 React 16.8(2019 年 2 月正式釋出)。React 也從未有過 13 這個版本號——16 之後直接跳到 17、18、19。
依據: React 16.8 release notes, 2019-02-06
8. 生命週期方法到 useEffect
10:40
「If the dependency array is empty, whatever is there in the use effect will fire when the component is unmounted」 依賴陣列為空時,effect 內容是在元件「掛載後」執行一次,不是卸載時;卸載時執行的是 effect 回傳的清理函式。受試者下一句就正確描述了清理函式,可見是口誤,但字面說法會誤導。
依據: React 官方文件 useEffect:Reference / Parameters
9. SSR 為什麼快,又為什麼利於 SEO
12:54
「First input delay and it will make it better」 兩個問題:一是 FID(First Input Delay)已於 2024 年 3 月被 INP(Interaction to Next Paint)取代,不再是 Core Web Vitals 指標;二是 SSR 不必然改善互動延遲——HTML 提早出現但 hydration 未完成時,使用者的點擊反而可能等更久。
依據: Google web.dev, INP replaced FID as a Core Web Vital in March 2024
10. 全域錯誤邊界:卡關與正解
15:34
「But, in functional based component, we do not have any community we can say」 面試官這句(語音辨識疑為 equivalent)意思是「函式元件沒有等價寫法」。就 React 原生 API 而言正確,但實務上函式元件完全能用 error boundary——透過 react-error-boundary 套件,或 Next.js App Router 的 error.tsx;只是底層仍是 class 實作。說「函式元件無法做錯誤邊界」會誤導。
依據: react-error-boundary 套件;Next.js App Router error.tsx 慣例
11. 一萬筆列表與 code splitting
16:32
「There are a bunch of libraries that we can we can use like React Virtual DOM is there」 沒有名為「React Virtual DOM」的虛擬列表函式庫——virtual DOM 是 React 的內部機制(見第 2 段),跟列表虛擬化是兩件事。受試者應該是把兩個名詞混在一起了。實際的套件是 react-window、react-virtualized、react-virtuoso 與 TanStack Virtual,面試官當場補正為 react-window。
依據: react-window / react-virtualized 皆為 Brian Vaughn 所作;npm 上無 react-virtual-dom 列表套件
Frontend System Design at Scale (The Senior Dev Playbook) 7m12s

Frontend System Design at Scale (The Senior Dev Playbook)

Monsterlessons Academy
7 個月前 · 13 段 · YouTube
10/10十個階段都做完了
前端 system design:從載入到上線的取捨清單
  • 資深面試考的是取捨與界定問題,不是技術名詞清單
  • 從載入到上線的十三個面向,各自的適用時機與代價
  • micro-frontend 是組織問題的解法,小專案導入只有成本
  • tree shaking 在建置期做,import 寫錯就完全失效且無警告
  • 把資料分成 server / global UI / local state,工具才選得對
術語:system design senior developer scalable architecture bundling code splitting lazy loading chunk micro-frontend …共 38 個
相關 —Frontend System Design Explained w/ Senior Engineer (Microfrontends, Monorepo, MCP UI, Reactjs) · 同樣談微前端與 monorepo:那站往組織與渲染推,這站往上線流程與可靠性推
相關 —Core Web Vitals Explained: LCP, INP & CLS · 同談 Core Web Vitals 與 defer:一個講機制,一個講大規模架構下的取捨
相關 —The ultimate guide to web performance · 同談 Core Web Vitals 與 lazy loading:一站給指標與工具,一站談大規模下的架構取捨
接著看 →How Senior Frontend Engineers Think in System Design Interviews · 這站收在「先問限制再提方案」,那站整支都在示範 Clarify → Choose → Explain 怎麼做
接著看 →Real Frontend System Design (from a Senior Engineer) · 把這站的十三項檢查面向,實際套進一題從需求推到微前端的完整案例
接著看 →15 Frontend Concepts Every Senior Dev Has Mastered · 共同術語 CDN、lazy loading、Core Web Vitals;那站用關鍵渲染路徑把效能講到底
接著看 →Every Frontend Architecture Pattern Explained in 23 Minutes · micro-frontend 與渲染策略在那站被展開成一條「解決什麼、製造什麼」的演化鏈
接著看 →The 3 Skills That Separate Architects From Senior Developers · 那站把資深工程師的檢查面向做滿,這站問何時該從交解法變成訂限制
開啟文字解析 →

確定錯誤/已過時見仁見智(取決於版本或情境)

段落原話(transcript 逐字)說明
7. CDN 與快取:距離就是延遲
3:26
「it may take just 2 milliseconds」 口述說命中快取只要 2 毫秒,但他自己的投影片寫的是約 20ms。2ms 對真實的網路往返(含 TLS 與最後一哩)幾乎不可能達到,即使邊緣節點就在同一座城市;20ms 才是同城命中快取的合理量級。面試時引用這個數字建議說「數百毫秒降到數十毫秒」,不要說 2ms。
依據: 同段投影片(影片 03:27)標示 Tokyo → Edge node → Cache hit ≈ 20ms
8. Bundle 最佳化與瀏覽器載入順序
3:37
「We obviously have tree shaking on the client」 tree shaking 不發生在 client(瀏覽器),而是在建置期由打包工具做靜態分析後移除未使用的匯出——產物送到瀏覽器時已經是砍過的。這個區分很重要:正因為它是建置期的靜態分析,`require` 或整包 import 這種要到執行期才知道用了什麼的寫法才會讓它失效,也就是作者下一句自己提到的坑。
依據: webpack 官方文件 Tree Shaking 章節將其定義為 bundler 在 build 階段依 ES module 靜態結構移除 dead code
9. State management:三種 state
4:42
「For global UI state you might want to use Redux」 把 Redux 當成全域 UI 狀態的預設選擇在 2026 年已偏保守。純 Redux 的樣板量大,官方本身也推薦改用 Redux Toolkit;而純 UI 狀態的新專案多半直接選 Zustand 或 Jotai(作者自己的投影片就把 Zustand 排在 Redux 前面)。Redux 仍有優勢的場景是需要嚴謹的 action 紀錄、時間旅行除錯,或團隊已有大量既有 Redux 程式碼。
依據: 同段投影片標示「Use: Zustand / Redux」,Zustand 在前;Redux 官方文件自 2021 起以 Redux Toolkit 為建議寫法
How Senior Frontend Engineers Think in System Design Interviews 11m07s

How Senior Frontend Engineers Think in System Design Interviews

I Code It
4 個月前 · 8 段 · YouTube
10/10十個階段都做完了
前端系統設計面試:在沒有正確答案時做決定並說清楚取捨
  • 卡住的原因通常不是懂太少,而是看得見太多合理選項卻不敢選
  • 分頁與即時協作的「正確答案」會隨產品體驗翻轉,可推導而非背誦
  • Clarify → Choose → Explain:資訊不完整時仍能推進的三個動作
  • steel thread:先拉通最薄的端到端方案,等需求推你才加複雜度
  • 附上「什麼情況我會回頭重看」,決定就從賭注變成可撤回的判斷
術語:system design interview trade-off offset-based pagination cursor-based pagination WebSocket polling constraint analysis paralysis …共 26 個
接著看 ←Frontend System Design at Scale (The Senior Dev Playbook) · 這站收在「先問限制再提方案」,那站整支都在示範 Clarify → Choose → Explain 怎麼做
相關 —15 Fullstack Concepts Every Frontend Should Know · 共用 WebSocket/polling:一站給協定機制,一站給沒答案時的決策方法
接著看 ←You Wouldn't Believe These Developer Interview Mistakes... · 這站說 system design 只對 mid/senior 重要,那站示範那一關怎麼答
接著看 →Real Senior Frontend System Design Interview 2026 (AI Coding Included) · Clarify→Choose→Explain 的方法,在那站變成一整場實際答題的節奏
接著看 →Frontend System Design Explained w/ Senior Engineer (Microfrontends, Monorepo, MCP UI, Reactjs) · 這站只給決策方法,那站補上要決策的具體內容:BFF、渲染策略、微前端
相關 —Top 15 Frontend Interview Questions for 2026 (wa/ Senior Engineer) · 同為前端面試準備,共用 WebSocket/polling:一支給決策方法,一支給答題清單
相關 —Real Frontend System Design (from a Senior Engineer) · 同一場面試的兩面:一站教沒答案時怎麼決定,一站給可以拿來決定的心智模型清單
相關 —The 3 Skills That Separate Architects From Senior Developers · 共用 Architecture Decision Record:一站教面試裡怎麼決策,一站談決策本身成為主要產物
開啟文字解析 →

確定錯誤/已過時見仁見智(取決於版本或情境)

段落原話(transcript 逐字)說明
6. 選一個合理起點:steel thread
8:35
「maybe you start with offset-based pagination for search results」 作為「先簡單再說」的示範沒問題,但把 offset 分頁說成搜尋結果的安全起點稍嫌樂觀。搜尋結果只要底層資料會變動(新內容持續索引、或依即時分數排序),翻頁時就會出現漏看與重複;資料量大時 OFFSET 也需掃過前面所有列,深頁會明顯變慢。實務上不少搜尋系統即使有頁碼介面,底層仍用 search_after 或游標實作。作者本人在第 3 段其實已經給出了正確判準(資料變動頻率),只是這裡沒把它套用回來。
依據: Elasticsearch 官方文件對 from/size 深度分頁設有 index.max_result_window 上限(預設 10000),並建議改用 search_after
Real Frontend System Design (from a Senior Engineer) 48m25s

Real Frontend System Design (from a Senior Engineer)

theSeniorDev
10 個月前 · 19 段 · YouTube
10/10十個階段都做完了
前端系統設計面試:用心智模型把一個 client-server 架構逐層加壓到微前端
  • 把一句空泛的題目拆成功能/非功能需求,再各自往下推
  • 從 UI 草稿抽狀態,用不可再簡測試砍掉可推導的冗餘
  • 用信封背面估算把模糊大數推成尖峰每小時的具體請求量
  • 看懂 CDN、SSR、邊緣運算、唯讀副本其實是同一招:把東西搬近使用者
  • 用康威定律解釋微前端、design system 與 monorepo 為何綁在一起出現
術語:mental model scale level functional requirement non-functional requirement user story low-fidelity mockup state irreducibility test …共 73 個
接著看 ←15 Frontend Concepts Every Senior Dev Has Mastered · Core Web Vitals、CSR/SSR、hydration、CDN 在那站建立,這站直接拿來當架構決策的輸入
接著看 ←Every Frontend Architecture Pattern Explained in 23 Minutes · SSR、CDN、GraphQL、微前端在架構演化站被系統性建立,這站當成可選零件逐層裝上
相關 —Frontend System Design Explained w/ Senior Engineer (Microfrontends, Monorepo, MCP UI, Reactjs) · 同一批零件、兩種組織法:一站用驗證時間串起推理鏈,一站用 scale level 逐層加壓
相關 —Top 15 Frontend Interview Questions for 2026 (wa/ Senior Engineer) · 共用 CAP、CDN、edge computing、read replica:一站是分題速答,一站是一條完整推理線
相關 —How Senior Frontend Engineers Think in System Design Interviews · 同一場面試的兩面:一站教沒答案時怎麼決定,一站給可以拿來決定的心智模型清單
接著看 ←Frontend System Design at Scale (The Senior Dev Playbook) · 把這站的十三項檢查面向,實際套進一題從需求推到微前端的完整案例
接著看 ←15 Fullstack Concepts Every Frontend Should Know · TLS、快取、REST/GraphQL、Gateway、BFF 在這站建立,那站直接當零件用
接著看 ←How Frontend Engineers can master the Full-stack · CAP、唯讀副本、水平擴展被用進一場完整的系統設計題
接著看 ←Frontend System Design: Performance API, Chrome, React Profiler · 這站把 web worker 當成待驗證的假設,那站把它當成 scale level 的零件用
相關 —Core Web Vitals Explained: LCP, INP & CLS · 面試情境裡會用到這裡的 Core Web Vitals 與 Web Worker 結論
相關 —How to scale WebSockets to millions of connections · 共用 load balancer、round robin、fault tolerance、horizontal scaling:一站專講 WebSocket,一站放進完整系統設計
接著看 →Real Senior Frontend System Design Interview 2026 (AI Coding Included) · 這站的需求拆解、流量估算與 scale level 順序,在那場完整模擬面試裡被實際跑一次
接著看 →The 3 Skills That Separate Architects From Senior Developers · 那站逐層加壓做出架構決策,這站補上決策要怎麼換算成成本、風險、價值
相關 —WebSockets Aren’t as Reliable as You Think.. Here's Why · 都談 load balancer、round robin、horizontal scaling,一個在系統設計面試、一個在 WebSocket 實作
開啟文字解析 →

確定錯誤/已過時見仁見智(取決於版本或情境)

段落原話(transcript 逐字)說明
5. 狀態的高度:lifting state
9:02
「make sure you start with your state being very global and then raise it as high as necessary but as low as possible」 這句把方向講反了。同一段前面的原則是「as low as possible, as high as necessary」——從元件樹最低層開始放,只在有共用需求或副作用需要時才往上抬。照字面「start with your state being very global」做,會得到一份什麼都在頂層的狀態,正是這段要避免的結果。
依據: 同段 8:06 前後作者自己的表述:lifting state is a necessary evil, only if it's really necessary
10. 網路延遲與 CDN(scale level 1)
22:32
「when it comes to TCP plus TLS that's HTTPS you need at least four round trips」 這是 TLS 1.2 時代的數字。TLS 1.3(RFC 8446,2018)把交握壓到一次來回,續連可用 0-RTT;TCP 本身是一次來回即可送出資料。因此現代 HTTPS 建連約兩次來回,換算約 300 毫秒而非影片說的 600 毫秒;走 HTTP/3(QUIC)時傳輸層與加密交握合併,還會更短。結論(距離造成的延遲要靠縮短距離解決)不受影響,但數字別直接背去面試。
依據: RFC 8446(TLS 1.3, 2018)1-RTT handshake / 0-RTT resumption;RFC 9000(QUIC, 2021)
11. 從白畫面到邊緣運算(scale level 3)
28:19
「because we have the partitioning guarantee, we'll use the consistency guarantee」 這句把 CAP 的取捨講反了,也和他自己下一句「資料可能不一致」矛盾。CAP 的正確讀法是:分散式系統必須容忍網路分區(P 不是可以放棄的選項),因此在分區發生時只能在一致性(C)與可用性(A)之間二選一。地理分散的唯讀副本選的是可用性,代價是最終一致性。另外 CAP 只描述分區期間的行為,平時的取捨其實是延遲與一致性(PACELC)。
依據: Gilbert & Lynch 對 CAP 的形式化證明(2002);Abadi 的 PACELC(2012)
16. Design system 與 monorepo
41:47
「that would be our scale level number seven where we scale our organization」 這裡的編號跳號了。影片實際出現過的階層是 Level 0(純 client-server)、Level 1(加 CDN)、Level 3(邊緣運算+分散式資料庫)、Level 4(API Gateway+BFF+負載平衡)、Level 5(微前端),接著直接跳到 Level 7,中間的 2 與 6 沒有對應的畫面。這是自創的教學編號而非業界標準,記住演進順序即可,別把數字當共通語言用在面試裡。
依據: 影片內出現的階層標題投影片(0:45、12:58、24:05、29:05、36:45、39:00)
15 Frontend Concepts Every Senior Dev Has Mastered 35m42s

15 Frontend Concepts Every Senior Dev Has Mastered

theSeniorDev
11 個月前 · 17 段 · YouTube
10/10十個階段都做完了
資深前端的 15 個核心心智模型:從瀏覽器渲染路徑到微前端架構
  • 用關鍵渲染路徑當骨架,把所有前端效能技巧掛回同一張圖上
  • 看懂 LCP/INP/CLS 各自量到路徑的哪一段,以及該動哪裡
  • 從快取、CDN、壓縮、延遲載入到 critical CSS 的優化順序與理由
  • 用 essential state 與 reducer 模式把狀態壓到最小、變更收斂成一次計算
  • 分辨 SSR、rehydration、PPR、server components 各自解決什麼缺口
術語:mental model critical rendering path DOM CSSOM render tree first contentful paint render blocking Core Web Vitals …共 67 個
相關 —9 JavaScript Concepts That Got Me To Senior Dev · 作者結尾直接指路:語言層基礎之後,用這站把前端整體概念補齊
接著看 ←Frontend System Design at Scale (The Senior Dev Playbook) · 共同術語 CDN、lazy loading、Core Web Vitals;那站用關鍵渲染路徑把效能講到底
相關 —15 Fullstack Concepts Every Frontend Should Know · 共用 ETag、TTL:一站講快取在協定裡怎麼運作,一站講瀏覽器端效能
接著看 ←The ultimate guide to web performance · 三個指標的意義懂了,那站把它們掛回關鍵渲染路徑,看出各自量到哪一段
接著看 →Frontend System Design Explained w/ Senior Engineer (Microfrontends, Monorepo, MCP UI, Reactjs) · CRP、Core Web Vitals、SSR、CDN 在這站建立,那站直接拿來用不再解釋
接著看 →Every Frontend Architecture Pattern Explained in 23 Minutes · SSR、hydration、RSC 在這站只講概念,那站攤開整條架構演化與取捨
接著看 →Real Senior Frontend System Design Interview 2026 (AI Coding Included) · essential state 與衍生狀態的刪去法,在那場模擬面試裡實際用來圈狀態
接著看 →Top 15 Frontend Interview Questions for 2026 (wa/ Senior Engineer) · 同一批模型換成 15 道面試題,示範怎麼在口頭作答時組織它們
相關 —3 Frontend Skills AI Can't Replace (become AI-proof) · 共用 essential state 與單一事實來源:一站當效能地基,一站當 AI 判準
接著看 →Real Frontend System Design (from a Senior Engineer) · Core Web Vitals、CSR/SSR、hydration、CDN 在那站建立,這站直接拿來當架構決策的輸入
接著看 →Senior Frontend Interview 2026 🎉 | Javascript 🎯 (Mock) [Most Asked Questions] · 面試站直接拿 critical rendering path、reconciliation、virtual DOM、memoization 當共同語言使用
接著看 →How Frontend Engineers can master the Full-stack · 快取從效能技巧深入到 Cache-Control、max-age、ETag 的機制
接著看 →Frontend System Design: Performance API, Chrome, React Profiler · 那站建立 main thread、CRP、lazy loading 的心智模型,這站教你怎麼量它們
接著看 →Core Web Vitals Explained: LCP, INP & CLS · 那站用渲染路徑掛出 LCP/INP/CLS 的位置,這站把三個指標逐一拆到瀏覽器時序
相關 —Vapor Mode is the Future of Vue · 那站建立瀏覽器渲染路徑與 virtual DOM 的成本觀,這站主張把中間那層拿掉
開啟文字解析 →

確定錯誤/已過時見仁見智(取決於版本或情境)

段落原話(transcript 逐字)說明
2. #1 關鍵渲染路徑
1:14
「with the JavaScript that it will find in the hat section of the HTML document it will build the DOM」 DOM 是瀏覽器解析 HTML 標記本身建出來的,不是用 head 裡的 JavaScript 建的。head 裡的同步 script 反而會暫停 HTML 解析、延後 DOM 建構。作者這裡把 CSS→CSSOM 的對應關係誤套到 JS→DOM 上(同一張投影片的箭頭其實也是 HTML→DOM)。
依據: HTML Living Standard, 8.1 Parsing HTML documents;MDN「Critical rendering path」
3. #2 Core Web Vitals
3:14
「the LCP and the CLS are basically measured during the initial render」 LCP 確實只看初次載入到使用者第一次互動為止,但 CLS 是整個頁面生命週期持續累積的(以 session window 計算),捲動過程中晚載入的元素造成的位移一樣算分。把 CLS 說成只在初次渲染量測會讓人漏掉最常見的扣分來源。
依據: web.dev「Cumulative Layout Shift (CLS)」;CLS 自 2021 年 6 月改為 session window 演算法
4. #3 HTTP 快取與 TTL
9:09
「set that max age to 3 million milliseconds」 Cache-Control 的 max-age 單位是「秒」,不是毫秒。畫面上的值是 30541039 秒(約 353 天),與同一張截圖裡 Expires 標示的 2026-09-29 相符;若當成毫秒只有約 8.5 小時,前後就矛盾了。數量級也念錯了:30541039 是三千萬而非三百萬。
依據: RFC 9111 §5.2.2.1(max-age 以 delta-seconds 表示)
6. #4 內容協商與壓縮
11:03
「broadly with broadly being actually the most efficient one」 Brotli 對文字資源的壓縮率確實通常優於 gzip,但說它「最有效率」已經不完整:畫面上瀏覽器送出的 Accept-Encoding 就包含 zstd。Zstandard 自 2024 年起被 Chrome 123+ 與 Firefox 126+ 支援,壓縮率接近 Brotli 而壓縮/解壓速度快數倍,動態內容場景反而更適合。「最有效率」也要看比的是壓縮率還是速度。
依據: RFC 8878(Zstandard);Chrome 123 起支援 Content-Encoding: zstd(2024-03)
12. #10 Windowing 與可視區觀察
25:38
「if you go after the thousand HTML elements even the browser starts to suffer」 沒有「一千個節點」這樣的固定門檻,作者自己也說「不記得確切數字」。實際成本取決於節點的樣式複雜度、是否觸發排版、以及每次更新影響的範圍——幾千個簡單節點可能毫無問題,而幾百個帶陰影與濾鏡的節點就會卡。Lighthouse 的參考值是 DOM 總數超過 1400 才警告、深度超過 32 層才提醒,與影片說的數量級不同。
依據: Lighthouse「Avoid an excessive DOM size」稽核門檻(警告 ~1400 節點)
14. #12 Rehydration
29:55
「run the hydrate command on the client」 React 18(2022 年 3 月)起改用 `hydrateRoot(container, <App/>)`,舊的 `ReactDOM.hydrate` 已標記為棄用,在 React 19 被移除。概念完全相同,但照著舊 API 名稱去查文件或寫程式會踩空。
依據: React 18 release notes;React 19 移除 ReactDOM.hydrate
9 JavaScript Concepts That Got Me To Senior Dev 20m11s

9 JavaScript Concepts That Got Me To Senior Dev

theSeniorDev
9 個月前 · 9 段 · YouTube
10/10十個階段都做完了
JavaScript 執行模型:從 event loop 到 async/await 的一條推理鏈
  • 用 event loop 圖逐行推出任何非同步程式碼的 console 輸出順序
  • 分清 macro-task 與 micro-task 佇列:setTimeout 排下一輪,Promise 在本輪結束前
  • 用 scope chain 判斷函式看得到哪些變數,並解釋 this 為何屬於呼叫而非函式
  • 從永生的根往外追引用鏈,找出 closure 造成的記憶體洩漏
  • 說明 async/await 如何被翻譯回 Promise + generator,而非另一套機制
術語:Event Loop Call Stack Macro-task Queue Micro-task Queue Promise API Tick Callback Promise …共 28 個
接著看 ←Top 15 Frontend Interview Questions for 2026 (wa/ Senior Engineer) · 面試題只點到 event loop 與記憶體回收,這站把 call stack、兩個佇列與 GC 的機制整條攤開
相關 —Embrace Reactive Programming in React and Vue with RxJS - Fahad Ibnay Heylaal · Promise 只決議一次,Observable 可持續推送:同一個非同步問題的兩種模型
相關 —15 Frontend Concepts Every Senior Dev Has Mastered · 作者結尾直接指路:語言層基礎之後,用這站把前端整體概念補齊
接著看 →Senior Frontend Interview 2026 🎉 | Javascript 🎯 (Mock) [Most Asked Questions] · closure 與 lexical scope 在這站是被驗收的答案,而不是被解釋的內容
接著看 →15 Fullstack Concepts Every Frontend Should Know · fetch 與 async/await 在那站建立,這站所有範例都以它為起點
接著看 →How Frontend Engineers can master the Full-stack · 同步/非同步與 Promise 是串流與批次合併的前提
接著看 →Core Web Vitals Explained: LCP, INP & CLS · 先懂 event loop 與單執行緒,才看得懂 INP 為何被一段長工作卡住
相關 —Reactivity in Vue 3 - How does it work? · closure 與 garbage collection 講完,這站就用它們把 effect 存起來
接著看 →JavaScript Visualized - Promise Execution · 九概念站建立了 call stack、event loop、callback,這站把 Promise 拆到欄位層
接著看 →JavaScript Visualized - Event Loop, Web APIs, (Micro)task Queue · 九個概念用一節帶過 event loop,這站整支把兩個佇列與搬運規則拆開
接著看 →JavaScript Visualized - Closures · 九個概念只點到 closure 與 scope chain,這支把同一組詞拆到記憶體層級
接著看 →JavaScript Visualized - Execution Contexts · 那站把 call stack、closure、scope chain 列成清單,這站還原成同一組 execution context 零件
相關 —Vapor Mode is the Future of Vue · 都在講「同步重算」與「只改該改的」之間的成本差,一個在語言層一個在框架層
開啟文字解析 →

確定錯誤/已過時見仁見智(取決於版本或情境)

段落原話(transcript 逐字)說明
2. Event loop 的整體架構
2:13
「In between the browser will regend and then run the next iteration.」 把「每一輪之間瀏覽器都會 render」講得像必然。實際上 render 是由瀏覽器依畫面更新頻率(一般約 60fps)決定的,多個 tick 可能共用一次 render,頁面在背景分頁時甚至幾乎不 render。正確的說法是「render 只會發生在 tick 之間,但不保證每個 tick 都發生」。
依據: HTML Living Standard, event loop processing model §8.1.7「update the rendering」步驟;瀏覽器只在該次迭代被判定為 rendering opportunity 時才更新畫面
5. Closure 與垃圾回收
10:13
「And so the only variable that can be garbage collected is tax rate dividends.」 在他的例子裡 taxRateDividends 是**最上層的 const**,屬於 global/module scope。只要這支 script 的環境還活著(分頁沒關、模組沒卸載),全域繫結一般不會被回收,實際能不能收掉取決於引擎最佳化與這段程式碼是否被包在函式裡。這個結論在「把整段包進一個函式」的情境下完全正確,直接套到全域變數則過於武斷。
依據: V8 的 mark-and-sweep 以全域物件與模組環境為 GC root;ECMAScript 規格未要求回收仍可達的全域繫結
6. 從 callback hell 到 Promise
12:03
「So the old implementation of our fetch API was not returning a promise like it does today, but rather asking you to pass a call back to it.」 瀏覽器的 fetch() 從 2015 年首次登場就是回傳 Promise,從來沒有 callback 版本。callback 時代的網路 API 是 XMLHttpRequest(他投影片上寫的其實是自己包的 function fetch(url, callback))。如果把這句聽成「標準 fetch 曾經是 callback 式的」就會記錯歷史;他要表達的應該是「以前自己包的抓資料函式長這樣」。
依據: Fetch Standard 於 2015 年發布,Chrome 42 / Firefox 39 起支援,介面自始即為 Promise-based
7. async/await 是 Promise 的語法糖
15:45
「And we also call that polyfill or syntax sugar.」 async/await 是語言原生語法,是 syntax sugar,但不是 polyfill。polyfill 指的是在缺少某功能的舊環境裡、用既有語法自己實作出該 API;把新語法轉成舊語法的工具叫 transpiler(Babel)。他在第 8 段展示的 asyncPolyfill 示意圖是「用 generator 模擬 async」的教學範例,那才勉強算 polyfill,但語言內建的 async/await 本身不是。
依據: MDN Glossary: Polyfill(以 JavaScript 實作瀏覽器原生未提供的功能)vs. Syntactic sugar;async/await 為 ES2017 原生語法
8. Generator:async/await 的另一半
16:35
「Now generator functions are a relatively new feature of the language」 generator 是 ES6(ECMAScript 2015)的功能,跟 Promise、let/const、箭頭函式同一批,到 2025 年已滿十年,所有現代瀏覽器與 Node 都原生支援。說它「相對新」在 2015 年成立,今天比較準確的說法是「相對少用」而不是相對新。
依據: ECMAScript 2015 (ES6) 規格納入 generator function;Chrome 39 / Firefox 26 / Node 4 起支援
Frontend System Design Explained w/ Senior Engineer (Microfrontends, Monorepo, MCP UI, Reactjs) 38m02s

Frontend System Design Explained w/ Senior Engineer (Microfrontends, Monorepo, MCP UI, Reactjs)

theSeniorDev
3 個月前 · 18 段 · YouTube
10/10十個階段都做完了
前端系統設計:從團隊怎麼分工,推到畫面怎麼渲染
  • AI 讓實作時間趨近於零,真正的新瓶頸是驗證時間
  • 微前端與微服務解的是組織問題,不是效能問題
  • API gateway 收攏橫切關注點,BFF 收攏資料形狀與擁有權
  • Core Web Vitals 把「好慢」拆成 LCP、INP、CLS 三個可歸因的數字
  • 渲染策略的判準是:這一頁的內容在什麼時候才能確定
術語:system design agentic coding monolith microservices client-server model two pizzas team verification time architectural drift …共 77 個
接著看 ←Every Frontend Architecture Pattern Explained in 23 Minutes · 架構演化站列出的 micro-frontend、BFF、CDN、SSR,在這站被接成一條由驗證時間驅動的推理鏈
接著看 ←Top 15 Frontend Interview Questions for 2026 (wa/ Senior Engineer) · 面試題點到的 bundle 切分、即時協定、Core Web Vitals,在這站各自展開成機制與判準
接著看 ←15 Frontend Concepts Every Senior Dev Has Mastered · CRP、Core Web Vitals、SSR、CDN 在這站建立,那站直接拿來用不再解釋
接著看 ←How Senior Frontend Engineers Think in System Design Interviews · 這站只給決策方法,那站補上要決策的具體內容:BFF、渲染策略、微前端
接著看 ←Senior Frontend Interview 2026 🎉 | Javascript 🎯 (Mock) [Most Asked Questions] · reconciliation、hydration、WebSocket 等單點觀念在這站被放進整個系統設計裡
接著看 ←15 Fullstack Concepts Every Frontend Should Know · API Gateway、BFF、SSE、WebSocket 等十個共同術語,那站不再解釋
接著看 ←Frontend System Design: Performance API, Chrome, React Profiler · 量出瓶頸之後,那站給 bundle 切分、渲染策略等可以拿來改的選項
相關 —How to scale WebSockets to millions of connections · 共用 WebSocket、stateless、horizontal scaling:一站講後端怎麼擴,一站講前端架構怎麼接
接著看 →Real Senior Frontend System Design Interview 2026 (AI Coding Included) · 這站建立的 SSE 判準、design system 與垂直切片,在那場模擬面試裡被拿來實際設計一個系統
相關 —3 Frontend Skills AI Can't Replace (become AI-proof) · 共用 Core Web Vitals 與 critical rendering path:一站談架構怎麼降驗證成本,一站談哪些判斷 AI 取代不了
相關 —Real Frontend System Design (from a Senior Engineer) · 同一批零件、兩種組織法:一站用驗證時間串起推理鏈,一站用 scale level 逐層加壓
相關 —Frontend System Design at Scale (The Senior Dev Playbook) · 同樣談微前端與 monorepo:那站往組織與渲染推,這站往上線流程與可靠性推
接著看 →The 3 Skills That Separate Architects From Senior Developers · 共用 Conway's law、microservices、API gateway;那站切邊界,這站談怎麼改掉造成耦合的條件
相關 —Keep Those WebSocket Connections Alive! · 共用 WebSocket、race condition:一站在系統設計層選型,一站在程式碼層保活
開啟文字解析 →

確定錯誤/已過時見仁見智(取決於版本或情境)

段落原話(transcript 逐字)說明
2. 從單體到微服務:團隊撐不住了
1:45
「as many as you can feed with one pizza」 作者剛說完這條規則叫 two pizzas team,緊接著卻把它描述成「一個披薩餵得飽」。Amazon 的原始規則是**兩個**披薩餵得飽的人數(約 5–9 人),一個披薩會把上限壓得比他自己給的 5–9 人還低,前後矛盾。他下一句「有了 AI 就變成 one pizza team」才是刻意的引申。
依據: Jeff Bezos 的 two-pizza team rule,Amazon 內部沿用至今的說法為 two pizzas
6. API Gateway:把 edge functions 收成一次
9:55
「HTTPS it's likely less performant than the HTTP」 這個說法以今天的標準過度簡化了。TLS 1.3 把 handshake 壓到 1-RTT、session resumption 可到 0-RTT,開銷通常只有個位數毫秒;而且 HTTP/2 與 HTTP/3 在瀏覽器上都**只**在 TLS 之上啟用,所以走 HTTPS 反而拿得到多工與更好的壅塞控制,整體常常更快。內部服務間改走純 HTTP 現在也不再是推薦做法——zero trust 與 service mesh 的主流意見是內網一律 mTLS,把加密成本交給基礎設施。
依據: RFC 8446(TLS 1.3, 2018);主流瀏覽器僅在 TLS 上支援 HTTP/2 與 HTTP/3
8. Load balancing:單台 server 的天花板
14:05
「it can usually satisfy up to 2,000 to 10,000 concurrent requests」 這個區間只在「幾乎純 I/O、每個請求 CPU 工作極少」的前提下成立,作者沒有講出這個前提。一旦每個請求有 JSON 序列化、模板渲染、加密或任何同步運算,Node.js 的單執行緒事件迴圈會讓實際承載量掉到數百甚至更低。反過來說,純轉發的代理型工作可以遠高於一萬。當成數量級的直覺可以,當成容量規劃的依據不行——實際數字只能靠壓測得出。
依據: Node.js 單執行緒事件迴圈模型;承載量取決於每請求的 CPU 時間與 I/O 比例
10. CDN:跟光速借時間
19:58
「whenever the server pushes a new version, that's called cache invalidation」 這個定義把兩件事混在一起了。cache invalidation 指的是**讓既有的快取項目失效**(CDN 上叫 purge),是一個明確的清除動作;「server 推上新版本」本身並不會讓舊快取失效,除非你主動 purge,或是用下一句他提到的 cache busting 讓新版本有新的網址。實務上正是因為 invalidation 不可靠,現代前端才幾乎全面改用內容雜湊檔名來繞過它。
依據: CDN 供應商(Cloudflare、Fastly、CloudFront)皆將 invalidation/purge 定義為主動清除既有快取項目的操作
17. 渲染策略:CSR、SSG、ISR、SSR
34:53
「that's like building an F1 car to go to the groceries」 這個比喻對「為了 SEO 就全站 SSR」的批評是對的,但把 SSR 一概說成過度設計在今天偏保守。Next.js App Router、Remix、Nuxt 已經把 SSR 變成預設路徑,運維成本大幅下降;而 React Server Components 與 partial hydration 也在削減他點出的 hydration 代價。比較準確的判準不是「要不要 SSR」,而是**逐路由**決定:內容在建置時就能確定的用 SSG,需要個人化的才用 SSR。
依據: Next.js App Router(2023 起預設 Server Components)、Remix、Nuxt 3 皆以 SSR 為預設渲染模式
Real Senior Frontend System Design Interview 2026 (AI Coding Included) 40m31s

Real Senior Frontend System Design Interview 2026 (AI Coding Included)

theSeniorDev
4 個月前 · 16 段 · YouTube
10/10十個階段都做完了
前端系統設計面試:從一張 UI 推到最小狀態、資料流與 AI 工具鏈
  • 一條可重複的面試路線:需求 → 狀態 → 實作 → 非功能性需求 → AI 工具鏈
  • 用刪去法從 UI 圈出狀態,能算出來的衍生狀態一律不存
  • 前端狀態只有兩個來源:後端同步與使用者事件,據此窮舉狀態轉移
  • 即時更新選 SSE 而非 polling 或 WebSocket 的判準:是不是真的雙向
  • AI 缺乏視覺智能,要先產出設計系統與狀態圖當錨點讓它只做內插
術語:System Design Interview Functional Requirements Non-Functional Requirements SLO Core Web Vitals RUM State Derived State …共 48 個
接著看 ←Top 15 Frontend Interview Questions for 2026 (wa/ Senior Engineer) · 面試題的分類式答法與即時協定判準(SSE/WebSocket/Polling),在這站變成一整場完整設計
接著看 ←Every Frontend Architecture Pattern Explained in 23 Minutes · SSR、SSG、BFF、CDN 在架構演化站被系統性建立,這站直接當成選項拿來取捨
接著看 ←3 Frontend Skills AI Can't Replace (become AI-proof) · AI 取代不了的判斷力,在這站落成穩定錨點產物:設計系統、狀態圖、循序圖
接著看 ←Frontend System Design Explained w/ Senior Engineer (Microfrontends, Monorepo, MCP UI, Reactjs) · 這站建立的 SSE 判準、design system 與垂直切片,在那場模擬面試裡被拿來實際設計一個系統
接著看 ←15 Frontend Concepts Every Senior Dev Has Mastered · essential state 與衍生狀態的刪去法,在那場模擬面試裡實際用來圈狀態
接著看 ←How Senior Frontend Engineers Think in System Design Interviews · Clarify→Choose→Explain 的方法,在那站變成一整場實際答題的節奏
接著看 ←Real Frontend System Design (from a Senior Engineer) · 這站的需求拆解、流量估算與 scale level 順序,在那場完整模擬面試裡被實際跑一次
相關 —Senior Frontend Interview 2026 🎉 | Javascript 🎯 (Mock) [Most Asked Questions] · 兩場 2026 資深前端模擬面試:一場考觀念與手寫實作,一場考系統設計
接著看 ←15 Fullstack Concepts Every Frontend Should Know · SSE/WebSocket/polling 的機制差別在這站建立,那站直接拿來選型
接著看 ←How Frontend Engineers can master the Full-stack · BFF 與 SSE/WebSocket 的判準被用在面試現場的取捨
相關 —How Web Sockets work | Deep Dive · 共用 WebSocket/SSE:這站給雙向連線的機制,那站在面試裡決定該不該選它
相關 —Lauren Tan grokbot workshop 中文字幕 · 同談 AI 寫程式的 hallucination:一個在面試現場,一個在生產流程
相關 —How a Cloudflare Engineer Ships Production Code He Didn't Write | Dillon Mulroy · 共用 harness 與 AI 工具鏈:一站在面試裡要人守設計錨點,一站在生產裡要人守 context 與 spec
開啟文字解析 →

確定錯誤/已過時見仁見智(取決於版本或情境)

段落原話(transcript 逐字)說明
4. 把畫面翻成資料模型
7:45
「you want a lot of decimals, then those numbers can store a lot more than a plain integer」 BigInt 不能存小數。它是任意精度的「整數」型別,寫 1.5n 直接語法錯誤。金融資料要精確小數,正確做法是存最小貨幣單位的整數(例如以「分」為單位存 8190242),或用 decimal.js / big.js 這類十進位函式庫;JavaScript 的 number 是 IEEE 754 雙精度浮點數,0.1 + 0.2 !== 0.3 的問題就出在這裡。
依據: ECMAScript 規範 BigInt 型別定義:BigInt values represent integer values;TC39 decimal 提案仍在 stage 1(2026)
10. Web 效能的三個維度
21:31
「There will be no layout shifts because we already preloaded this」 SSR 能減少版面位移,但不等於「不會有」。hydration 前後的差異、晚載入的網頁字體造成的重排、以及圖表函式庫在客戶端算完尺寸後才調整容器,都還是會產生 CLS。真正的保證來自替容器預留固定尺寸(明確的高度或 aspect-ratio)與 font-display 策略,SSR 只是讓內容更早就位。
依據: web.dev CLS 最佳實務:Always include size attributes on images and video elements, or reserve space with CSS aspect-ratio
13. 快取:用讀寫比決定快取什麼
28:37
「they add a style tag in your HTML file」 這個描述適用於 styled-components、Emotion 這類執行期的 CSS-in-JS,不適用於 CSS Modules。CSS Modules 是建置期把 class 名稱雜湊化,產出的仍是獨立的 .css 檔案,完全可以獨立快取——作者的結論(把設計系統的 CSS 拆出來單獨快取)是對的,但他把兩種技術混在同一句話裡講,字面上會誤導。
依據: css-loader / Vite 的 CSS Modules 產出獨立樣式表;styled-components v6 執行期以 <style> 注入
14. AI 開發工具鏈:模型、harness、審查代理
31:53
「probably everybody talks about about Opus 4.7」 這是 2026 年 5 月錄影當下的快照,現在已經換代:Anthropic 最新的是 Claude 5 系列(Opus 5、Sonnet 5、Fable 5.1)加上 Haiku 4.5。任何講具體模型版本的建議都有極短的保存期限,該帶走的是他的選型判準(資料能不能出境、預算、harness 適不適合做 review),而不是型號。
依據: 影片上傳日 2026-05-11;截至 2026-09 Anthropic 現行旗艦為 Claude Opus 5
14. AI 開發工具鏈:模型、harness、審查代理
34:34
「I think was it 800 billion parameters」 Anthropic 從未公開 Claude 任何一代的參數量,OpenAI、Google 同樣不公開,所以「800B」是沒有來源的猜測。另外他的推論方向也反了:大型雲端模型贏在能力與上下文長度,而不是比本地小模型「快」——同樣的硬體上,參數越多每個 token 越慢,雲端之所以感覺快是因為推論硬體與批次處理,不是因為模型大。
依據: Anthropic 官方模型說明頁未揭露任何參數量數據
Every Frontend Architecture Pattern Explained in 23 Minutes 22m33s

Every Frontend Architecture Pattern Explained in 23 Minutes

theSeniorDev
1 年前 · 12 段 · YouTube
10/10十個階段都做完了
前端架構演化史:每一站解決了什麼,又製造了什麼
  • 用一條因果鏈記住六種前端架構:每一站解決什麼、製造什麼
  • 分清楚 SSG、ISR、SSR、RSC 各自的前提與代價
  • 知道 hydration 為什麼存在,以及它造成的空窗期
  • 判斷 clean architecture 與 micro-frontend 什麼時候是過度設計
  • 把面試回答從「我們用 React」升級成一句架構敘述
術語:MVC tight coupling framework lock-in SPA client-side routing SEO thin client thick client …共 36 個
接著看 ←Top 15 Frontend Interview Questions for 2026 (wa/ Senior Engineer) · 面試題只點到 monolith 與 micro-frontend,這站把整條架構演化與六軸取捨攤開
接著看 ←15 Frontend Concepts Every Senior Dev Has Mastered · SSR、hydration、RSC 在這站只講概念,那站攤開整條架構演化與取捨
接著看 ←Frontend System Design at Scale (The Senior Dev Playbook) · micro-frontend 與渲染策略在那站被展開成一條「解決什麼、製造什麼」的演化鏈
相關 —15 Fullstack Concepts Every Frontend Should Know · 共用 GraphQL 與 N+1:一站從協定往上推,一站從架構演化往下切
接著看 →3 Frontend Skills AI Can't Replace (become AI-proof) · 模組邊界從架構圖變成實際判準:邊界清楚,agent 改一次才省 token
接著看 →Real Senior Frontend System Design Interview 2026 (AI Coding Included) · SSR、SSG、BFF、CDN 在架構演化站被系統性建立,這站直接當成選項拿來取捨
接著看 →Frontend System Design Explained w/ Senior Engineer (Microfrontends, Monorepo, MCP UI, Reactjs) · 架構演化站列出的 micro-frontend、BFF、CDN、SSR,在這站被接成一條由驗證時間驅動的推理鏈
接著看 →Real Frontend System Design (from a Senior Engineer) · SSR、CDN、GraphQL、微前端在架構演化站被系統性建立,這站當成可選零件逐層裝上
接著看 →The 3 Skills That Separate Architects From Senior Developers · 那站把架構演化與六軸取捨攤開,這站問誰來訂這些取捨、憑什麼訂
相關 —Vapor Mode is the Future of Vue · 架構演化史停在 vdom 時代,Vapor 是編譯派給出的下一站
開啟文字解析 →

確定錯誤/已過時見仁見智(取決於版本或情境)

段落原話(transcript 逐字)說明
3. SPA:邏輯搬到瀏覽器那一刻
4:18
「And because you get this initial empty page, you also have very poor SEO.」 在今天要打折扣。Google 等主流搜尋引擎已經會執行 JavaScript 後再索引,純 SPA 不等於搜不到。但執行有排程延遲、內容更新反映得慢,而且社群平台產生分享預覽時多半只讀初始 HTML 的 meta 標籤、完全不跑 JavaScript。所以結論仍然成立,理由要改成「慢且不可靠」,而不是「搜不到」。
依據: Google Search Central 文件說明 JavaScript 網站的兩階段索引(crawl → render queue → index)
10. clean architecture 在前端值不值得
15:33
「So basically you have an application where you could entirely swap your front-end framework and you wouldn't have to change the whole thing.」 在前端要大打折扣。後端抽掉框架後核心邏輯仍佔大部分程式碼,但前端最大宗的程式碼——元件結構、狀態管理、表單、路由、動畫、無障礙處理——本來就住在最外層。即使完美分層,換框架仍要重寫絕大部分,被保住的往往只是幾個純計算函式。作者自己在幾句話後也承認這通常是過度設計。
依據: 同段稍後他自己的結論:「investing in those abstractions to make that possible it's usually just overengineering」
3 Frontend Skills AI Can't Replace (become AI-proof) 15m15s

3 Frontend Skills AI Can't Replace (become AI-proof)

theSeniorDev
2 個月前 · 13 段 · YouTube
10/10十個階段都做完了
AI 時代的前端:哪些技能會被塗灰,哪三個不會
  • 用「成功條件可否寫清楚」判斷一項前端技能會不會被 AI 吃掉
  • 清楚的模組邊界不只好維護,還直接決定 agent 改一次要花多少 token
  • 好架構是穿過所有功能的折衷線,不是為單一功能量身訂做的最佳解
  • AI 產出的兩個典型 code smell:寫死的 CSS 數值、內嵌在 render 裡的元件
  • 狀態設計要收斂到 essential state,並讓每份資料只存一次
術語:frontend system design database sharding clear boundaries programming to interfaces token efficiency code smell overfitting design into code …共 35 個
接著看 ←Top 15 Frontend Interview Questions for 2026 (wa/ Senior Engineer) · 面試站點到的「AI 壞習慣:硬寫像素、重複 state」,在這站被展開成 code smell 與靜態分析
接著看 ←Every Frontend Architecture Pattern Explained in 23 Minutes · 模組邊界從架構圖變成實際判準:邊界清楚,agent 改一次才省 token
相關 —Frontend System Design Explained w/ Senior Engineer (Microfrontends, Monorepo, MCP UI, Reactjs) · 共用 Core Web Vitals 與 critical rendering path:一站談架構怎麼降驗證成本,一站談哪些判斷 AI 取代不了
相關 —15 Frontend Concepts Every Senior Dev Has Mastered · 共用 essential state 與單一事實來源:一站當效能地基,一站當 AI 判準
相關 —Rails World 2026 Opening Keynote - DHH · 同一問題的兩種答案:哪些技能被塗灰,哪些留下
相關 —Ruby, Rails, and the future of programming - Matz, DHH & Jeremy Daer · 都在問 AI 時代人還剩什麼:一邊是品味與驗收,一邊是前端的三項技能
接著看 →Real Senior Frontend System Design Interview 2026 (AI Coding Included) · AI 取代不了的判斷力,在這站落成穩定錨點產物:設計系統、狀態圖、循序圖
接著看 →Lauren Tan grokbot workshop 中文字幕 · 那站的 code smell 與靜態分析靠人判斷,這站把判斷交給 CI 硬性執行
相關 —GitHub Copilot 一次只給一種答案?Orca 讓你召喚 AI 大軍同時寫 Code,優劣立判! · 共用 Code Review:一站談 AI 時代哪些判斷留給人,一站示範人如何當多個 agent 的裁判
接著看 →How a Cloudflare Engineer Ships Production Code He Didn't Write | Dillon Mulroy · 那站說 AI 取代不了邊界與架構判斷;這站說 agent 差的正是抽象設計,所以 spec 用型別與 interface 定形狀
開啟文字解析 →

確定錯誤/已過時見仁見智(取決於版本或情境)

段落原話(transcript 逐字)說明
2. AI 給你漂亮介面,不給你邊界
0:27
「most of these models, including the latest Oppo models, have been heavily optimized for the "prompt- to-interface" principle」 「模型被刻意優化成 prompt 直接產介面」是對訓練目標的推測,各家實驗室並未公開這樣的目標函式。他觀察到的現象(agent 傾向產出視覺完成度高、結構鬆散的程式碼)確實常見,但成因更可能是評測與使用者偏好回饋偏向可見成果,而不是有一條叫 prompt-to-interface 的最佳化原則。
依據: 各主要模型的訓練目標未公開;此處為作者的推論而非引用文件
4. design into code:受衝擊最大的那一塊
3:10
「which used to account for 80% of our frontend work, it's almost disappeared」 八成這個比例是作者的個人估計,沒有資料來源,而且高度取決於團隊型態:以產品互動、狀態管理或資料視覺化為主的團隊,切版本來就佔不到這麼高。說它「幾乎消失」也偏強——複雜互動、動畫、極端內容與可及性細節仍需要人手調整。
依據: 影片中未提供任何調查或統計來源
Top 15 Frontend Interview Questions for 2026 (wa/ Senior Engineer) 50m40s

Top 15 Frontend Interview Questions for 2026 (wa/ Senior Engineer)

theSeniorDev
3 個月前 · 17 段 · YouTube
10/10十個階段都做完了
2026 年資深前端面試:15 題背後的同一套推理方式
  • 用「先分類再回答」的結構答題,是資深訊號最快的來源
  • 看懂 AI 產出的系統性壞習慣:硬寫像素、重複 state、假覆蓋率
  • reflow、box-sizing、specificity、event loop 的實際除錯用法
  • 用「改動量」而不是「提示詞技巧」來壓低 AI 的成本
  • 依變動頻率切 bundle,以及用資料流形狀選即時協定
術語:reflow compositor thread main thread CSS transform layer promotion plan mode MCP single record principle …共 65 個
相關 —Message Queues in System Design Interviews w/ Meta Staff Engineer · 解耦與最終一致性的取捨,在前端 edge 擴展與即時協定選擇上重演一次
接著看 ←15 Frontend Concepts Every Senior Dev Has Mastered · 同一批模型換成 15 道面試題,示範怎麼在口頭作答時組織它們
相關 —How Senior Frontend Engineers Think in System Design Interviews · 同為前端面試準備,共用 WebSocket/polling:一支給決策方法,一支給答題清單
相關 —15 Fullstack Concepts Every Frontend Should Know · 共用 SSE/WebSocket/max-age:一站解釋機制,一站是面試速答清單
接著看 ←You Wouldn't Believe These Developer Interview Mistakes... · 這站只說「基本功一直把人考倒」,那站直接給 15 題的答法
相關 —Core Web Vitals Explained: LCP, INP & CLS · main thread 與 reflow 在面試題裡以問答形式再出現一次
接著看 ←JavaScript Visualized - Event Loop, Web APIs, (Micro)task Queue · 面試題直接考 event loop 的執行順序,先在這站把規則推熟
相關 —Embrace Reactive Programming in React and Vue with RxJS - Fahad Ibnay Heylaal · event loop、re-render 成本與記憶體回收,是把 props 當 stream 的前提
接著看 →3 Frontend Skills AI Can't Replace (become AI-proof) · 面試站點到的「AI 壞習慣:硬寫像素、重複 state」,在這站被展開成 code smell 與靜態分析
接著看 →Every Frontend Architecture Pattern Explained in 23 Minutes · 面試題只點到 monolith 與 micro-frontend,這站把整條架構演化與六軸取捨攤開
接著看 →Real Senior Frontend System Design Interview 2026 (AI Coding Included) · 面試題的分類式答法與即時協定判準(SSE/WebSocket/Polling),在這站變成一整場完整設計
接著看 →Frontend System Design Explained w/ Senior Engineer (Microfrontends, Monorepo, MCP UI, Reactjs) · 面試題點到的 bundle 切分、即時協定、Core Web Vitals,在這站各自展開成機制與判準
接著看 →9 JavaScript Concepts That Got Me To Senior Dev · 面試題只點到 event loop 與記憶體回收,這站把 call stack、兩個佇列與 GC 的機制整條攤開
相關 —Real Frontend System Design (from a Senior Engineer) · 共用 CAP、CDN、edge computing、read replica:一站是分題速答,一站是一條完整推理線
相關 —Senior Frontend Interview 2026 🎉 | Javascript 🎯 (Mock) [Most Asked Questions] · 同樣是面試題:一邊是整理好的標準答案,一邊是真實臨場的卡關與修正
相關 —How Frontend Engineers can master the Full-stack · 共用 CAP、最終一致性、唯讀副本、max-age 與即時協定選型
接著看 →Frontend System Design: Performance API, Chrome, React Profiler · 面試題點到 main thread 阻塞與 code splitting,這站給證明改動有沒有用的量法
相關 —Reactivity in Vue 3 - How does it work? · 那邊考 Map、WeakMap 與 GC,這站拿它們當依賴的儲存結構
接著看 →JavaScript Visualized - Promise Execution · 面試題站點到 microtask queue 就停;這站補上 handler 何時被排進去
開啟文字解析 →

確定錯誤/已過時見仁見智(取決於版本或情境)

段落原話(transcript 逐字)說明
2. Q1 hover 放大:reflow 還是 compositor
1:36
「Because CSS transitions they bypass the reflow and they go straight to what we call the compositor thread.」 繞過 reflow 的是特定屬性,不是 transition 這個機制本身。只有可合成的屬性(實務上主要是 transform 與 opacity,以及 filter)能直接交給 compositor;`transition: width` 或 `transition: top` 一樣會每格觸發 layout 與 paint。他後面舉的例子(scale)剛好是對的,但把理由歸給「transitions」會讓人誤以為只要寫成 transition 就便宜。
依據: CSS Triggers / Chrome 渲染管線文件:layout → paint → composite,僅 transform、opacity 等屬性可跳到 composite
8. Q7 CSS box model 與 box-sizing
23:02
「However, the default of the browser is extrinsic width.」 說反了。瀏覽器的預設是 box-sizing: content-box,而尺寸來源的預設是 intrinsic(由內容或可用空間決定),不是 extrinsic。extrinsic 指的正是你自己寫死 width 的那種情況。他後面描述的行為(瀏覽器先算內容寬、再把 padding 加上去)其實就是 content-box 的行為,講法與用詞在這裡對不上。
依據: CSS Box Sizing Level 3:初始值 box-sizing: content-box;intrinsic sizing 指 max-content / fit-content 等由內容決定的尺寸
10. Q9 響應式設計的三根支柱
28:50
「So, you never want to use pixels, for example.」 太絕對。該用相對單位的是會隨使用者字級設定或容器變動的尺寸(字級、間距、元素寬度);border 寬度、細線、某些圖示尺寸用 px 反而正確,因為它們不該跟著字級放大。真正的問題不是 px 本身,而是把應該跟著容器或字級走的尺寸寫死。
依據: WCAG 1.4.4 要求文字可縮放至 200%,指向字級用相對單位;但並未要求所有長度都用相對單位
11. Q10 event loop 的完整運作
32:55
「And we don't immediately pick the microtask.」 他描述成「執行一個 microtask 後就停下來去做 rendering,下一輪才取下一個」。實際規格是:每個 macrotask 結束後,microtask queue 會被**整個排乾**(包含執行過程中新增的),然後才輪到 rendering。這個差別有實際後果——不斷產生 microtask 的迴圈會讓畫面永遠不更新,而同樣的工作排成 macrotask 則不會。
依據: HTML Living Standard, event loop processing model:perform a microtask checkpoint 在每個 task 之後、update the rendering 之前
Embrace Reactive Programming in React and Vue with RxJS - Fahad Ibnay Heylaal 26m44s

Embrace Reactive Programming in React and Vue with RxJS - Fahad Ibnay Heylaal

JavaScript Conferences by GitNation
8 年前 · 13 段 · YouTube
10/10十個階段都做完了
RxJS 與元件層:把 props 當成一條 stream
  • 用 marble diagram 讀懂 stream,之後查 RxJS 文件不再卡住
  • 從多值、lazy、可取消三點說清楚 Observable 與 Promise 的差別
  • 知道 Subject 為什麼存在:它是事件世界送值進 stream 的唯一入口
  • 把 props 當成 stream,元件就能永遠 stateless、邏輯全留在 RxJS 那側
  • 判斷什麼時候不該用 Rx:沒有非同步協調需求就是負擔
術語:Reactive programming Data stream Marble diagram Observable Promise TC39 Observer subscribe …共 30 個
相關 —Message Queues in System Design Interviews w/ Meta Staff Engineer · 同為 producer/consumer 的非同步資料流:一個跨服務、一個在瀏覽器內
相關 —Top 15 Frontend Interview Questions for 2026 (wa/ Senior Engineer) · event loop、re-render 成本與記憶體回收,是把 props 當 stream 的前提
相關 —9 JavaScript Concepts That Got Me To Senior Dev · Promise 只決議一次,Observable 可持續推送:同一個非同步問題的兩種模型
相關 —Reactivity in Vue 3 - How does it work? · 同樣講值改變怎麼傳播:一個靠依賴追蹤,一個靠 stream
相關 —JavaScript Visualized - Promise Execution · Promise 一次一個值,RxJS 把同一個非同步問題換成多值的 stream
接著看 →Map, switchMap, mergeMap, flatMap, concatMap, exhaustMap in RxJS - what is the difference? · 前站建立 Observable/pipe/operator,本站專攻 map 系列的併發取捨
開啟文字解析 →

確定錯誤/已過時見仁見智(取決於版本或情境)

段落原話(transcript 逐字)說明
3. Observable:和 Promise 差在哪
4:00
「it's a new type in JavaScript currently it's being standardized by the tc39」 這句在 2018 年說得過去,今天已經不成立:TC39 的 proposal-observable 長年停在早期階段、實質停擺,Observable 至今沒有進入 ECMAScript 標準。後來真正有進展的是另一條路——WHATWG 把 Observable 寫進 DOM 規格(搭配 EventTarget 的 when()),走的是瀏覽器 API 而不是語言核心。實務結論不變:今天要用 Observable,還是得靠 RxJS。
依據: tc39/proposal-observable 自 2018 年後未再推進;WHATWG DOM 於 2024 年納入 Observable 規格
7. operator 實例與 pipe:順便瘦身 bundle
11:40
「so your bundle size from let's say a few hundred kilobytes becomes like only three or four kilobytes」 數字要打折看。省下來的是「沒用到的 operator」,不是整個 RxJS——Observable、Subject、Subscription 這些核心結構仍然在 bundle 裡,實際大小取決於用了哪些 operator,一般落在數十 KB 等級(gzip 後約十幾 KB)。「幾百 KB 掉到三四 KB」是把最壞情況和最好情況放在一起比的說法。
依據: RxJS 6+ 只 import 少量 operator 的實測 bundle 一般在 10–40 KB(min)之譜,非 3–4 KB
10. interval 範例,與今天手接的痛
19:10
「you also need to be able to like cancel that subscription so that there is no memory leak」 痛點仍在,但今天的樣板小得多。這是 2018 年 class component 與 Vue 2 Options API 的寫法;現在 React 用 useEffect 訂閱並在回傳的清理函式裡 unsubscribe(或直接用 useSyncExternalStore),Vue 3 用 onScopeDispose 或 VueUse 的 useObservable,都只需要幾行。取消訂閱這件事本身沒有消失,只是不再散在三個生命週期方法裡。
依據: React 16.8(2019)hooks、Vue 3(2020)Composition API 之後的慣用寫法
12. proppy:attach、withObservable、withStream
25:08
「so this package also takes care of like generating some static props on the server site」 功能敘述沒問題,但採用建議需要更新:proppy 是 2018 年前後的專案,之後幾乎沒有新版本,社群使用者也很少。今天要達成同樣目的,較常見的做法是直接在 React 用 useSyncExternalStore 或 useObservable(observable-hooks),Vue 3 用 VueUse 的 useObservable / from。真正該帶走的是這一段的設計想法,而不是這個套件本身。
依據: proppy 自 2018–2019 年後未再有明顯發布;React 18 提供 useSyncExternalStore(2022)、VueUse 提供 RxJS 整合
Content Security Policy explained | how to protect against Cross Site Scripting (XSS) 8m53s

Content Security Policy explained | how to protect against Cross Site Scripting (XSS)

Jan Goebel
5 年前 · 9 段 · YouTube
10/10十個階段都做完了
Content Security Policy:讓瀏覽器在你犯錯時擋下 XSS
  • 用 YouTube 留言的例子理解 stored XSS 怎麼發生、為什麼 innerHTML 是漏洞根源
  • CSP 的核心想法:告訴瀏覽器每類資源只能從哪些 origin 載入,當開發者犯錯時的最後一道防線
  • CSP 的語法:Content-Security-Policy header 或 meta http-equiv,directive 空格 value 分號
  • default-src 與 'self' 的意思,以及怎麼讀 MDN 的範例逐步建立自己的政策
  • 不管 SSR 或 SPA 都該加 CSP;搭配 https 限制與 HSTS
術語:Content Security Policy (CSP) Cross-site scripting (XSS) User-generated content External script innerHTML Stored XSS Reflected XSS DOM-based XSS …共 21 個
接著看 ←Authorization vs Authentication - Whats the Difference? | Developer Concepts Explained · 這站發出的 access token,正是 XSS 要偷的東西
接著看 ←Cross-Site Request Forgery (CSRF) Explained · 同源政策擋讀不擋送;XSS 補上「在同源內執行」的另一半,CSP 是防線
開啟文字解析 →

確定錯誤/已過時見仁見智(取決於版本或情境)

段落原話(transcript 逐字)說明
8. 附帶:只允許 https、搭配 HSTS
7:56
「the content security policy also protects against against packet sniffing so that means if someone accesses like their page over http so unencrypted uh then you can say hey look uh i only allow traffic like from https」 CSP 能限制的是「頁面內子資源」的協定(default-src https: 或 upgrade-insecure-requests);使用者「用 http 打開頁面」這件事本身 CSP 擋不了,因為 CSP 是隨那個 http 回應一起送來的。真正讓瀏覽器拒絕 http 連線的是 HSTS 與 server 端轉址。作者接著提到要搭配 HSTS,所以結論方向對,但把它歸為「CSP 防 packet sniffing」是簡化。
依據: MDN CSP「Mitigating packet sniffing attacks」一節;MDN Strict-Transport-Security
9. 收尾
4:07
「as long as your server has like this header you're pretty well protected against like most types of cross-site scripting」 只在政策夠嚴時成立。若 script-src 含 'unsafe-inline'、或白名單放了攻擊者能上傳檔案的 CDN/JSONP 端點,CSP 幾乎不提供保護;Google 2016 年的研究發現絕大多數白名單型 CSP 可被繞過,因此現在建議用 nonce/hash + 'strict-dynamic'。「有 header」不等於「有保護」。
依據: Weichselbaum et al., "CSP Is Dead, Long Live CSP!" (CCS 2016);MDN CSP Level 3 strict-dynamic
Message Queues in System Design Interviews w/ Meta Staff Engineer 26m46s

Message Queues in System Design Interviews w/ Meta Staff Engineer

Hello Interview
7 個月前 · 13 段 · YouTube
10/10十個階段都做完了
Message Queue:從為什麼需要,到面試官的四個追問
  • 從同步處理的三個痛點推出為什麼需要 message queue
  • producer / consumer / decoupling 的正式定義與 ack 機制
  • at-least-once + 冪等 consumer 為何是面試與生產的標準答案
  • 四個該用 queue 的訊號,以及同步低延遲工作流不該用的反例
  • 面試四個追問:partition 與 partition key、back pressure、DLQ、durability 與 replay
術語:Message queue Synchronous processing Latency Bursty traffic Worker pool Redelivery Producer Consumer …共 44 個
接著看 ←How to scale WebSockets to millions of connections · backplane 用的 message broker 在這站只點到,MQ 站把 broker、replication 講完整
接著看 ←WebSockets Aren’t as Reliable as You Think.. Here's Why · 這站把 RabbitMQ 當黑盒子做跨 server 廣播,那站解釋 queue 為什麼存在、怎麼選
接著看 →What Is Apache Pulsar? The Cloud-Native Messaging & Streaming Platform · Pulsar 站直接使用 producer/consumer、ack、partition、Kafka 這些在 MQ 站建立的概念
相關 —Embrace Reactive Programming in React and Vue with RxJS - Fahad Ibnay Heylaal · 同為 producer/consumer 的非同步資料流:一個跨服務、一個在瀏覽器內
相關 —Top 15 Frontend Interview Questions for 2026 (wa/ Senior Engineer) · 解耦與最終一致性的取捨,在前端 edge 擴展與即時協定選擇上重演一次
開啟文字解析 →

確定錯誤/已過時見仁見智(取決於版本或情境)

段落原話(transcript 逐字)說明
5. 底層機制:ack 與防止重複消費
8:16
「They just assign each partition, we'll talk about what those are in a second, to exactly one consumer in a group, so that there's no even competition in the first place.」 這是 Kafka 傳統 consumer group 的行為。Kafka 4.0(2025-03)新增 share group(「Queues for Kafka」),允許多個 consumer 同時消費同一個 partition、逐則 ack,行為變得跟 SQS/RabbitMQ 類似;4.1 起正式可用。所以「Kafka 只靠獨占 partition 避免競爭」已不再是唯一模式。
依據: KIP-932 Queues for Kafka;Kafka 4.0 early access、4.1(2025-09)GA
8. Partition、consumer group、partition key
16:26
「You can't have more consumers than you have partitions.」 對傳統 consumer group 成立;使用 Kafka 4.x 的 share group 時,同一 partition 可以被多個 consumer 同時消費,這個天花板就不存在(代價是失去 partition 內順序)。面試裡講傳統模型仍是安全答案,但要知道例外。
依據: KIP-932 share groups
12. 常見技術:Kafka、SQS、RabbitMQ
24:48
「FIFO cues which give you strict ordering but at a lower throughput.」 SQS FIFO 早期每秒 300 則的限制已被 high throughput mode 大幅放寬(啟用後每個 API action 每秒數萬則、搭配 batching 更高),與 standard 的差距不如以往;仍然是「同一 message group 內序列處理」,所以吞吐取決於 message group 的數量與分佈。
依據: AWS SQS FIFO high throughput mode(2021 推出,配額後續多次調高)
What Is Apache Pulsar? The Cloud-Native Messaging & Streaming Platform 10m04s

What Is Apache Pulsar? The Cloud-Native Messaging & Streaming Platform

The Data and AI Guy
4 個月前 · 9 段 · YouTube
10/10十個階段都做完了
Apache Pulsar:用計算/儲存分離統一 messaging 與 streaming
  • Pulsar 為何要把 compute 與 storage 分離,以及 Kafka 耦合架構的 rebalancing 痛點
  • stateless broker、BookKeeper bookie、ZooKeeper 三個角色各管什麼
  • ledger 分段如何讓擴展不需搬資料、並讓 tiered storage 成為可能
  • 分離架構換來的五個能力:多租戶、geo-replication、百萬 topic、兩種 ack、Functions
  • 四類實際用途與大公司採用 Pulsar 的理由
術語:Apache Kafka Apache Pulsar Message broker / streaming platform Message queuing Streaming Acknowledge (ack) Cloud-native Multi-tenant(多租戶) …共 29 個
接著看 ←Message Queues in System Design Interviews w/ Meta Staff Engineer · Pulsar 站直接使用 producer/consumer、ack、partition、Kafka 這些在 MQ 站建立的概念
開啟文字解析 →

確定錯誤/已過時見仁見智(取決於版本或情境)

段落原話(transcript 逐字)說明
4. 基本詞彙與核心想法:計算與儲存分離
4:04
「Kafka has to physically copy huge amounts of existing data over, just called rebalancing. And then on a big cluster, this can take hours and hurt performance while it's happening.」 對「本機磁碟存全部資料」的傳統 Kafka 成立;但 Kafka 3.9(2024)起 tiered storage 已可正式使用,歷史資料放在物件儲存,partition 搬遷只需搬本機的熱資料段,「數小時」的情況已大幅縮小。另外 KRaft 模式不影響資料搬遷,作者沒有混淆這點。
依據: KIP-405 Tiered Storage,Kafka 3.6 early access、3.9 production-ready(2024-11)
5. 兩層架構:無狀態 broker + BookKeeper
4:52
「stores it durably and replicates it across multiple bookies, three copies by default」 Pulsar broker.conf 的預設是 managedLedgerDefaultEnsembleSize=2 / WriteQuorum=2 / AckQuorum=2,也就是預設兩份;三份是官方文件與多數生產部署的建議值,不是「預設」。standalone 模式更只有一份。
依據: apache/pulsar conf/broker.conf 預設值;Pulsar 文件 BookKeeper persistence policies
7. 架構帶來的五個優勢
6:57
「this was a Yahoo requirement from the start, and something that Kafka just doesn't do natively」 Kafka 沒有 tenant/namespace 這種一等結構是事實,但它原生有 ACL、quota(per client/user 的頻寬與請求配額)與 topic 命名前綴慣例,可以拼出多租戶隔離;說「完全不做」偏重,說「沒有一等公民的多租戶抽象」較準確。
依據: Kafka 文件 Security/Authorization 與 Quotas 章節

    要往下做到哪裡?

    選一個 → 複製 prompt → 貼到 Claude Code 執行