我最近面試前端，發現一個很有意思的現象..

最近一個月，為了給團隊補充新鮮血液，我密集面試了差不多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範式……這些強大的抽象，在極大提升我們開發效率的同時，也讓我們離底層越來越遠。
工具把一切都封裝好了，以至於我們大部分時間，都可以在這個舒適的抽象層裡工作，而無需關心底下的實現原理。