中級前端工程師面試 我想問的幾個問題

我把我認為的中級前端應該能答的一些較開放的面試題列出來，並且要求回答者必須要答的有深度。(當然基礎都得會且紮實，一面就會篩掉基礎不好的。我這相當於二面題)

收藏前請先點贊。

問題

1. 你覺得你最大的優勢(可以多個)是什麼？你為什麼選擇前端？
2. 你碰到過的最難的編程問題，以及怎麼解決的？
3. 前後端分離的原理及意義？
4. node 非同步模型簡單概述一下，node 在性能上的優缺點，以及為什麼？
5. koa 和 express 有什麼不同？koa 解決了什麼問題？有什麼意義？koa1 基於 generator 的實現的 同步風格寫非同步代碼 的原理是什麼?（對這個問題有興趣的同學可以看我寫的這個 koa 學習心得及核心源碼分析 - 知乎專欄）
6. 你對非同步模型有哪些理解？
7. 你對 react 有什麼理解？基於 react 的開發模式比起傳統 jqurey 開發模式的最大優勢(可以有幾個)是什麼？
8. 你對頁面進行性能優化的思路和思想是什麼？
9. 你寫代碼有過哪些設計和思想？你怎麼看 oop 和函數式？（代碼設計的思想可以看我這一篇文章 編程的幾個思想 - 知乎專欄）

掌握原理和思想

大家對於這些問題，其實只要有兩三個回答的很出彩、有深度、並且能回答出面試官的進一步的追問就基本能合格了(這個要求真不低，這相當於二面、三面題目，它難倒了90%的過了一面的應屆優秀畢業生，bat去年校招總共也就招了一百多個前端，一年全國大學生中基礎好的前端至少有1千以上)。

對於沒聽說過的問題，假如平常開發用到過，那現在就可以針對的思考學習 原理、思想，用不到的可以暫且先放著（以後如果要用到那就再深入學習吧）

總之，對於知識不要滿足在 知道 這個程度，一定要掌握原理和思想 我的另一篇文章有提到過 編程成長之道--通過思考來升華自己 - 知乎專欄

================= 正文與 ahonn 的回答 的分割線===============

ahonn 的回答

@Ahonn 回答了上面問題中的五個，在他的博客上 答前端面試題 · Ahonn

下面給出他的回答以及我的評分與建議(文章最後給了 網頁性能優化的我的一個比較全的回答)。

評分和建議

我最大的優勢以及為什麼選擇前端

• 我最大的優勢是自學能力與理解能力強，並且不給自己套上『我是前端程序員』的枷鎖，對於所有技術保持好奇心，不畏懼舒適圈外的事物並敢於嘗試。
• 選擇前端的理由是，前端能夠迅速的把想法實現，可選技術棧廣泛（Web，移動端，桌面客戶端），也是前端的優點之一

優勢給80分，選擇前端的理由 70分。

• 其實我還想聽到 喜歡思考這個優勢，，其實可以答自己2到3個優點，當然面試官也會通過你的 項目和後面題目的回答來 判斷你說的優勢是不是真的。

• 「前端能夠迅速的把想法實現」，這個說法可以升華一下的，創造 or 改變世界 or 做產品(這個產品不是指 pm，而是創造優雅、有價值的軟體 or 網頁or app)的心。
• 玉伯在我們組做分享的時候提到過選擇前端，前端的核心競爭力，詳情看看我的文章 SimplyY 的博客:玉伯交流筆記

前後端分離的原理及意義

後端提供數據介面，前端獲取數據並呈現。

前後端分離的意義

• 後端無須套模版，前後端解耦。
• 提高工作效率，前後端同步開發。

給65分。。答的太淺，

• 你只是說了純前端渲染的開發方式，通過 ajax 來向後端交互，但是這樣的話首屏性能和 seo 就完全都沒了，並且介面層在瀏覽器端其實會有性能問題（無法緩存等）。
• 其實前後端分離實際上是有多個階段的， 圖解基於node.js實現前後端分離 // 亞里士朱德的博客

• 當下處於使用 node 來前後端分離，node 接管了路由、渲染、數據格式轉換的任務，我這篇文章提到了一些 淺談中間層 - 知乎專欄

對 react 的理解與相對於 jQuery 開發的優勢

對 React 的理解

• 通過 Virtual DOM 和 Diff 演算法隔離 DOM 操作。
• 採用單向數據流，數據流動方向單一，可跟蹤。
• 組件化，JSX 自定義標籤，便於抽象化。

對比 jQuery 開發的優勢

• 無需直接操作 DOM，事件通過改變 state 間接操作 DOM。

80分。這個問題可以追問不少細節原理的，最後給分，細節原理佔比較大。ps，我 jqurey 也不太會233，當然 jq 不是重點。

你對頁面進行性能優化的思路和思想是什麼？

頁面生成過程

• HTML代碼轉化為DOM
• CSS代碼轉化成CSSOM
• 結合DOM和CSSOM，生成一棵渲染樹
• 生成布局（layout），即將所有渲染樹的所有節點進行平面合成
• 將布局繪製（paint）在屏幕上

• 減少 HTTP 請求（合併 CSS/JS，小於 10k 的圖片 base64）
• 減少 DOM 操作（可使用 DocumentFragment）
• 避免不必要的重繪與重排（重排必定導致重繪）
• 優化 CSS 選擇器（從右向左匹配）
• CSS/JS minify，減少文件體積
• 開啟 Gzip 壓縮
• 將 CSS 放到頂部，JavaScript 放到尾部（JavaScript 會阻塞頁面）
• 壓縮圖片以及使用 CSS Sprite
• 使用 CDN 加速，適當進行文件緩存
• 合理控制 cookie 大小（每次請求都會包含 cookie）

65分。你只寫了具體的常規方法，原理不夠，思想幾乎看不到。方法是基礎，原理和思想是體現深度的地方。我給點提示:

• 思想： 性能優化先優化性能瓶頸，具體問題具體分析(作性能分析) 等
• 原理： 你只寫了頁面生成過程，你知道瀏覽器訪問 url 這個問題的答案其實就是做性能優化的原理之一嗎。。
• 性能優化最關鍵的點：首屏
• 用戶交互時也會出現性能瓶頸：大量 dom 更新(react性能優勢在這，vdom 可以減少不必要的 dom 更新)，頻繁的頁面的重排，動畫(動畫寫的不好性能會很差，比如頻繁的頁面的重排)。

性能優化資料(下面資料加上上面我說的內容，就是可以給90分的回答)

時間都去哪了-移動Web首屏優化實踐（1）-慕課網

主要是上面視頻中出現的下面四張圖，想知道詳細內容用1.5x 速度看視頻非常不錯。。

漸進式的用戶感知時間

網頁優化端到端的全鏈路分析

具體的幾個目標

最後才是你說的那些方法

減少 HTTP 請求（合併 CSS/JS，小於 10k 的圖片 base64）

減少 DOM 操作（可使用 DocumentFragment）

避免不必要的重繪與重排（重排必定導致重繪）

優化 CSS 選擇器（從右向左匹配）

CSS/JS minify，減少文件體積

開啟 Gzip 壓縮

將 CSS 放到頂部，JavaScript 放到尾部（JavaScript 會阻塞頁面）

壓縮圖片以及使用 CSS Sprite

使用 CDN 加速，適當進行文件緩存

合理控制 cookie 大小（每次請求都會包含 cookie）

其實你說的這些方法，只是前面幾張圖推出來子集，是被推導出來的東西，並不是核心原理和思想。

推薦閱讀：