最近一個月，為了給團隊補充新鮮血液，我密集面試了差不多20位前端候選人，從剛畢業的新人到有三五年經驗的都有。
面試得多了，我發現一個很有意思，甚至有點反常識的現象：現在很多候選人的知識結構，好像是個倒三角形。
這是什麼意思呢？
就是他們對上層的框架（React/Vue）、甚至元框架（Next.js/Nuxt）的各種API和所謂的最佳實踐了如指掌，能跟你聊半小時的伺服器端組件和狀態管理選型。
但當我往下問，問到一些瀏覽器底層、原生JavaScript、或者純CSS基礎時，他們反而會卡住，回答得模稜兩可。
這個現象讓我陷入了沉思。這篇文章，不 critique 任何候選人，只想聊聊我觀察到的這個倒三角形現象，以及它背後，我們作為前端工程師，值得思考的一些事。
幾個讓我印象深刻的面試瞬間
為了不讓大家覺得我空口白說，我分享幾個最近面試中，讓我印象很深的真實場景（已做脫敏處理）。
精通Tailwind CSS，但寫不出三欄佈局
有位候選人，履歷上寫著“精通Tailwind CSS，對原子化CSS有深入理解”，這很吸引我。
面試時，我讓他手寫一個經典的三欄佈局，左右兩欄固定寬度，中間一欄自適應。
他的第一反應是在腦海裡搜索Tailwind的class，比如flex, w-48, flex-1。我說：“如果現在我們不能用任何CSS框架，就用原生CSS，你會怎麼實現？”
他思考了很久，最後給出的Flexbox方案，在flex-shrink的理解上還有點問題。對於Grid佈局的方案，則完全沒有提及。
深謀React Hooks，但忘了事件冒泡
另一位候選人，對React Hooks的理解非常深，useEffect的依賴陷阱、useCallback的優化都說得頭頭是道，一看就是官方文檔讀得很熟。
我接著問了個原生JS的問題：“在一個父元素和一個子元素上，都綁定了點擊事件，當我點擊子元素時，這兩個事件的觸發順序是怎樣的？如果我希望點擊子元素後，父元素的事件不觸發，該怎麼做？”
他回答得有點猶豫，對“事件捕獲”和“事件冒泡”的完整流程，以及stopPropagation()和stopImmediatePropagation()的區別，概念比較模糊。
能聊Next.js緩存，但不熟HTTP緩存
一位對Next.js的App Router和數據獲取策略（fetch的緩存、revalidate）講得非常好的同學，這在當下是非常加分的。
我問他：“拋開Next.js，瀏覽器原生的HTTP緩存機制（比如強緩存、協商緩存）是怎樣的？Cache-Control這個回應頭裡的max-age和s-maxage有什麼區別？”
他坦誠地表示，這塊沒怎麼深入了解過，平時主要還是依賴框架的封裝。
為什麼會出現這種“倒三角形”現象？
我反思了一下，覺得這不完全是候選人的問題，而是我們現在學習前端的路徑，已經發生了根本性的變化。
1. “框架先行”的學習模式
現在幾乎所有的教程、訓練營，都是“框架先行”。你學前端，第一天可能就是npx create-react-app或者npm create vite@latest。
你還沒寫過原生的addEventListener，就已經在用<div onClick={...}>了。
你還沒理解過Flexbox的軸和對齊方式，就已經在用flex justify-center items-center了。
2. “過於強大”的抽象工具
現代前端工具和框架的抽象能力太強了。Vite的熱更新、Next.js的伺服器端渲染、React的Hooks範式……這些強大的抽象，在極大提升我們開發效率的同時，也讓我們離底層越來越遠。
工具把一切都封裝好了，以至於我們大部分時間，都可以在這個舒適的抽象層裡工作，而無需關心底下的實現原理。
所以，這有什麼問題？😫
你可能會說：“既然工具都封裝好了，我直接用就行了，了解底層幹嘛？能完成業務不就行了？”
在一切順利的時候，確實沒問題。
但最大的问题在於排查未知問題的能力。
當框架的抽象層出現——比如一個詭異的CSS渲染問題、一個非預期的事件行為、一個奇怪的緩存問題——如果你的知識體系裡只有框架，沒有底層，你就會束手無策，只能去GitHub的Issue區裡搜或者問GPT，祈禱有人遇到過和你一樣的問題。
技術一直在變。今天你精通React，明天Svelte火了，後天可能又出來一個新的範式。但瀏覽器、HTTP、JavaScript語言本身，這些基礎的變化是非常緩慢的。
地基打得牢，上層建築怎麼換，你都不會慌。
給候選人，也給我自己的一些建議
聊這個現象，不是為了在面試中秀優越感，而是希望能引起大家的共鳴和思考。
對候選人的建議：刻意地向下學習
當你熟練使用一個框架的API後，多問自己一個問題：
“如果沒有這個框架/庫，用原生JS/CSS，這個問題該怎麼解決？”
當你用React.memo，那你知道瀏覽器原生的渲染和繪製流程是怎樣的嗎？當你用Axios，那你知道一個原生的XMLHttpRequest對象是如何工作的嗎？
需要花更多的時間去加固你的基礎。
對我自己的反思🤔
我也在反思我的面試方式。我不能再只滿足於候選人能熟練使用我們團隊的技術棧。
我現在會更側重於考察候選人解決未知問題的能力和對基礎原理的理解。比如，我會出一個在框架裡很少見，但需要用原生JS邏輯才能解決的場景題，看候選人如何思考和分解問題。
最後，我想說👇
上層建築決定了你的開發效率，而地基決定了你能走多遠。在2025年的今天，做一個優秀的前端工程師，兩者缺一不可。
你們看呢？🙂
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式