寫給初級前端的面試經驗

 

最近到了金三銀四的跳槽季，不少人都會面臨跳槽找工做，而且再過幾個月又會到畢業季，愈來愈多的畢業生會面臨這個問題。

一樣，咱們組由於業務須要（咱們今年卻是尚未人員離職，感動╭(╯^╰)╮）須要進行社招，我最近看了很多簡歷，而且對一些小夥伴進行了電話溝通（電面），對面試找工做有一些本身淺薄的觀點

由於我的認爲本人的技術仍是很菜的，而且工做經驗也沒有特別豐富，因此文章內容都是本身一些淺薄的見解觀點，如有不對之處，歡迎你們指出，不喜勿噴啊~~~

本篇文章可能只是適用於初級前端，也就是剛畢業的大學生或者畢業 2 年以內的小夥伴，你們酌情閱讀~~~

(更新：最後的面試題只是本身總結的一些偏基礎的知識~~~ 剛畢業的小夥伴看着也不要有什麼壓力，不是表明初級前端必須掌握的技能，只是總結出前端面試中比較常見的問題~~~做爲面試者，多準備一些有益無害嘛ヾ(=･ω･=)o)

若是你們喜歡，能夠點贊或留言我再繼續更新面試題~~~~，謝謝你們~~~

簡歷的格式

簡歷最好在 1-2 頁，最好不超過 2 頁。簡歷真的不是字寫的多就好，無論是技術仍是 hr 都很難一個字一個字看你的簡歷。因此簡歷上寫的必定是精華，須要寫你的優點。

我的不太喜歡花裏胡哨的簡歷，排版整齊就好，可是也要注意不要有錯別字，雖然都知道是無意的，可是給人的印象確實不怎麼好，最起碼能夠說明你沒有仔細看過你本身的簡歷，同時最好區分大小寫，數字/英文和漢字以前要有空格，這個真的是一個好習慣，以前在掘金翻譯的時候養成的習慣，如今就算是微信聊天基本上也都會遵循，極大的提升了閱讀效率。

最好不要使用在招聘網站上使用模板生成的簡歷，同時要記得使用 PPT 模板的時候要把沒必要要的東西刪除啊= =，（收到過簡歷上第一行是 chapter，也沒有姓名，就問他爲何沒有名字，而後給我回答 chapter 是英文名= = ）

對於已經畢業 2 年以上的，學生時期的經歷（學生會主席、拿過什麼什麼獎學金）就能夠不用寫了。

簡歷的內容

前端這塊的簡歷基本上就基本介紹、技術棧、工做經驗、項目經驗就能夠。

基本介紹寫明 姓名、電話和郵箱、畢業時間、學歷、出生年月就能夠（照片有沒有都行、政治面貌、籍貫無所謂），電話必定要真實能夠打通的電話（真的遇到過到的簡歷電話和郵箱中間四位是 **** (ಥ_ಥ)），也遇到過打電話打幾回打不通的（工做日和非工做日都聯繫過），即便您再優秀，聯繫不上也白搭啊(/□＼*)

項目經驗和投遞的 title 相匹配

我的以爲 9102 年了，會用 JQ 基本就能夠不用寫在簡歷上了，若是你研究過（不等於看過）JQ 源碼能夠酌情寫上。

同時，你的簡歷要和你投遞的崗位相匹配，好比 title 是資深前端工程師，那麼你可以使用 div + css 寫頁面就能夠不用寫在簡歷上了，由於這應該是最最基本的要求。

簡歷上是要突出你的優點，同時也是自我總結能力的一個體現

簡歷上寫的內容要是你擅長的

面試的題目很大部分都是從你簡歷裏面問的。因此，對於那種本身只是找了篇文章而後實現了下的項目或者只是寫過 demo 的，就不要寫在簡歷裏面了。

簡歷裏面寫的必定是你所有了解的，由於前端的技術棧或者各類各樣的框架層出不窮，面試者基本不會問一個你沒據說過的框架，那怎麼知道你會什麼呢，就從你的簡歷裏面看嘍～

我就遇到過不少簡歷寫的很好，可是一問就不知道了。好比有個簡歷上寫的「對面向對象編程有深入的理解」，我問：「面向對象的三大要素是什麼」，回答：「這個概念性的記不清了。」，好吧，那我換一個：「你平時怎麼實現封裝和繼承」回答：「平時項目中基本用不到」 ，「那面向對象和麪向過程編程有什麼區別呢？」 回答的思路不清晰，磕磕巴巴。對於這種狀況，我的以爲你最好就不要把「對面向對象編程有深入的理解」寫在簡歷上了，由於若是你不寫，我可能還不會問，可是你掌握的水平和「有深入理解」差距仍是蠻大的，這就是一個減分項了。

還有一個是簡歷中在我的技能和項目的第一個都寫的是「用 node 開發我的博客」，恰好我本人最近也在作這塊內容，想着問下。而後回答「其實我是在網上找了篇博客跟着實現了下，如今忘記了」

因此說簡歷上真的要寫你很是瞭解的領域啊！只是聽過名次和寫寫 demo 的話寫在簡歷上反而是減分項。

注意用詞

簡歷中對某項技術的描述通常有如下幾個詞語：

瞭解：理解基本概念，有過簡單的使用經驗 —— 「用過」 熟悉：基本操做很熟練，有過密集的使用經驗 ——「用得很多」 精通：深刻理解其底層原理及各類實現方式，並有豐富的項目經驗——「有研究」

切記準確用詞，慎用「精通」！！

電面

收到簡歷以後咱們通常都會先進行一輪電話面試（每一個公司的流程不同），由於成本比較低嘛，問一些基礎問題大概就能夠知道面試者的水平在哪一個範圍了，和咱們招聘的崗位的匹配程度如何。

同時，我建議面試者被邀現場面試以前最好也進行下電話溝通，若是直接現場面的話最少你要請半天假吧，若是說雙方的匹配程度比較低就不用白跑一趟了。

咱們這邊電面以基礎爲主，若是基本可以符合咱們的招聘要求，再約現場面。

我我的認爲，基礎比較好（不只僅是 js 基礎，還有計算機體系基礎和編程基礎），三大框架熟悉其一併略懂原理 這兩點是最起碼的，本身用 webpack 配置過項目懂得 webpack 打包原理、學習過框架源碼、對性能優化有過實踐、對新技術的瞭解程度 這些都是加分項（由於咱們項目中沒有用到 node，node 基本不會問，除非你在簡歷中寫有）。

而且也會考慮面試者的綜合素質，主要是表達能力（溝通無礙就好）、性格是否十份內向、回答問題是否條理清晰。

我我的的話會有一個常問的面試題庫，而後在電面前根據面試者的簡歷篩選要問的問題，好比前面說到的，你簡歷中寫有「對面向對象有深入的理解」，那麼我就會準備幾個面向對象的問題。

總體來講，電面以後就基本能夠肯定了面試者和咱們招聘崗位的匹配程度，在面試的過程當中會記錄下面試者的回答狀況，對於有明確答案的問題看其是否回答正確，對於開放性問題，看其思路是否清晰。

我我的的話問框架 api 都是一些比較經常使用基礎的 api，考察下你使用到什麼程度，比較會問一些原理，好比 vue 的雙向綁定原理（vue 2.0 和 vue 3.0，兩種實現的優缺點）、vue 的 nexttick 原理、diff 算法等。

咱們在電面完以後一般都會問面試者有什麼問題想要問咱們的，大部分面試者會問咱們組所作的業務，也會被問到技術方面的問題= =，通常這個環節都是看下面試者有什麼訴求的，就是你若是有什麼強烈的訴求能夠問下。

電面完以後通常不會直接說是否經過，都會說「後續可能還會有其餘同事聯繫您」，可是根據點面的過程，應該本身內心都會有個大概吧= =

關於爲何不直接給答案，一方面是處於禮貌:)，一方面是可能當時並不能及時給出結果。

一個比較好的方法就是面試完須要考慮下才能給出答覆，而且通常就算面試沒有過也不會再給你說沒有過。因此默認一週以內若是沒有 hr 再聯繫你，基本就能夠認爲是面試沒有過了。

現場面

通常電面以後咱們會找 hr 小姐姐約現場面試，對於現場面試我並無太多的經驗，這裏只是給出參考意見。

現場面就看各個面試官的習慣了，有的會繼續問一些技術，有的會重視項目經驗，咱們這是現場技術面以後要給一個定級，看是否達到招聘要求。

通常狀況下是第一輪面試以後若是能給定級那麼就找咱們技術 leader 來聊下，把把關，沒啥問題再找 hr 小姐姐來聊下。

給剛畢業大學生的一點建議

剛畢業找工做並非全看技術

在剛畢業的時候我會認爲找工做是隻看技術的，畢竟咱們是技術崗位。

可是如今自身的感受包括也和其餘小夥伴聊過以後發現技術有的時候佔比也沒有想象那麼高。

由於其實咱們畢業以後 1 -2 年內並非特別能拉開差距，你們的水平相差都不是特別大。

這個時候可能一些其餘的品質更重要，好比你的溝通能力、你的性格、是否踏實。

同時，找工做這個事情，運氣和緣分也是很重要的，好比當時的崗位是不是急缺崗位，若是是新增的部門或者恰好有人離職須要補位，這些特殊狀況下，可能要求會稍微下降些（絕對不會下降太多）。

因此最好是找團隊人員內推，這樣對團隊的狀況會更加了解。

可是我的以爲，3 年以後技術水平的差距就會愈來愈大了，而且想要縮短差距也會愈來愈難。

剛畢業儘可能去大公司

其實就和你上大學選擇名校仍是通常學校，有些人說不想當大公司的螺絲釘的時候能夠先問下本身能不可以進入大公司，不要尚未進入就開始酸。

有能力去而選擇不去和去不了是兩個概念。

從自身以及周圍人的經驗而談，大公司你能學到的東西從各方面都是比小公司強一點的（這裏說的小公司不表明某些小而精的公司）。

我的經驗而言，大公司並非每一個人都是螺絲釘，作重複的勞動，由於你所對接的部門有不少，你須要和各類各樣的前端、後端、產品、設計、QA 接觸，每一個人的習慣都不盡相同，也會遇到跨部門合做，不一樣部門的技術棧可能會不同，因此，你所接觸的東西是多元化的；

相反，小公司所接觸的前端、後端、設計和 QA 基本都比較固定，基本上也不會有跨部門合做的需求，而且技術棧相對而言比較固定，使用了一套技術棧基本也不會換，因此你的技術提高視野可能會稍微窄一點。

而且大公司的業務複雜程度和用戶數量也是小公司所不能提供的。

說句實在話，簡歷中有知名互聯網公司的工做經驗是很加分的，基本都能有個面試資格，由於從某種程度下降了成本，由於既然可以去知名互聯網公司，說明確定是有優點的。

不要只會 API，要了解其原理

咱們老大常常給咱們說過的一句話是：「不要只會一些 API 的東西」，如今前端的一個現象是，不少人使用了一些 API，就以爲掌握了某些知識。

要注重一些底層知識，一些原理，這纔是長遠發展的必備技能。

好比在電面的時候問：「一句話概述下什麼是 promise」，不少人都回答 promise 的使用方法。

找工做是雙向選擇的過程，一個好的團隊很重要

找工做真的是雙向選擇的過程，不只僅是公司選擇你，也是你選擇公司的過程，有能力的話最好找一個好的團隊，作的業務是本身喜歡的，最起碼不能太反感不是。

其實從面試官你基本也能夠判斷出該團隊的水平，我的的一點見解是，若是你自己還處於成長階段，若是面試時候問的問題你均可以順利的回答出，那麼該工做你就要慎重考慮下，可能成長空間會小一點。

減小跳槽的頻率

關於跳槽頻率，這個無論是技術 leader 和 hr 都是考慮的一個問題。

由於前幾年，我的感受漲薪的最便捷途徑就是跳槽，漲薪幅度會比較高，在一家公司等加薪比較慢。

可是若是你跳槽過於頻繁實際上是不利的，我的認爲，一年跳槽一次這個頻率就有些高了。

京東也是將這點明確有要求的，一票否決制度，五二原則（五年內以內最多在兩家公司）

關於學歷

如今不少公司的門檻都是本科相關專業畢業，而且之後的要求確定會愈來愈高。

每一個公司要求不同。

以爲面試中有些問題工做中用不到

不少人都會有這樣的一個問題：以爲面試中問的不少問題在實際工做中根本用不到。

我以爲你會有這樣的問題多是你和這個公司的崗位並不相匹配。

由於當時我面試餓了麼的時候，問我了一些簡單的算法的問題和一些底層原理，可是面試的時候還有些吐槽。

入職以後，發現面試問的問題在工做中確實用到了，而且在本身準備面試題的過程當中，也是根據平時的工做經驗總結的。

本身當時以爲用不到是由於以前的業務場景不夠複雜，用戶量不夠大，因此有些知識點用不到，不少產品需求都是須要本身實現的，現有的組件不能知足有些問題。

好比本身須要實現一個組織架構樹，對每個節點進行不一樣的操做，有的時候還須要 table 和 tree 相結合，一些比較複雜的節點數據可能比較多，因此還須要考慮性能優化的問題。

因此面試的時候就會問: 如何遍歷一個樹，並對其進行優化。

注重底層原理和概念的學習

有的人會問 底層知識，原理有沒有用？？ 答案確定是有用的！！

對於一我的的技能，我以爲最重要的是解決問題的能力，由於咱們的工做其實就是解決一個又一個的問題，無論是從產品層面仍是從技術層面，都是將這個問題解決。

而你瞭解更多的底層知識，更多的原理知識，都是提升你解決問題的能力，若是你知道 api 背後的原理就能更好的選擇使用哪一個 api。

而且瞭解底層知識和原理也會提升你排查問題的能力，由於你工做中總會遇到：「明明就是這樣的啊，爲何報錯啊，爲何不能用啊，爲何和預期不對啊」，你若是隻是知道 api 是怎麼使用的，有的時候是沒辦法很好的排查問題的。

最好從官方文檔學習

不知道你們學習知識的時候都是從何種渠道學習的呢？

我的的建議是最好從官方文檔學習，遇到問題最好去看下源碼。

學習知識最好從一手的內容學習，只看別人的寫的博客之類的是不行的，就像吃別人嚼過的饃同樣，包括我這篇文章，我都不能保證全部的觀點和知識點的正確性，固然了，當你對某個知識點理解不清楚的去看下其餘人的觀點也是對你有幫助的。

---

下面是我我的的面試題

部分面試題（答案僅供參考，不保證其正確性）

CSS

Q1：怎麼實現三列布局（左側和右側寬度固定，中間自適應）

常見 CSS 佈局

該問題主要想了解面試者的思惟是否有侷限性，實現該佈局是一個比較常見而且方法不少的一種佈局方式，而且能夠引導面試者一步一步回答 CSS 相關的基礎問題。

• 絕對定位 + 中間版塊不給寬度
• 兩側浮動 + 中間自動撐開（使用 calc 動態計算寬度，設置對應寬度的 margin）
• flex，左右設置 flex-basis，中間設置 flex-grow

基本上最多見的答案是這三種佈局方式，可是不少人都只說一個 flex，其餘兩種佈局方式稍微考慮下就能夠想到（o´ﾟ□ﾟ`o），該問題不是想讓面試者回答出什麼奇淫技巧，只是對 CSS 基礎知識的一個考察。

Q 1-1: flex 具體是怎麼實現三列布局的（左側和右側的寬度是怎麼設置的，中間自適應使用的是哪一個屬性）

flex 設置寬度和寬度自適應應該算是 flex 的最基本用法，在面試中，問到 flex 的設置寬度和中間自適應具體是哪一個屬性，不少面試者都回答「不記得了，平時都是自動填充的」

Q 1-2: 設爲 flex 屬性以後，子元素的哪些屬性會失效

float、clear 和 vertical-align

Q 1-3 float/絕對定位 怎麼實現中間寬度自適應

Q2: 移動端開發 rem 佈局的原理（rem 單位換算）

Q3: 有沒有本身寫過組件

Q 3-1: 怎麼實現樣式的繼承和複用

Q 3-2: 你平時都是怎麼管理本身的 CSS

• base.css、common.css、page.css（對應都存放哪些內容）

Q 3-3: 你平時都是使用 sass/lass/styles 的哪些功能，sass 的計算屬性對頁面性能有影響嗎？

Q4: 如何在頁面上畫一個圓

• SVG
• CANVAS
• css border-radius
• background
• map + area
• 直接放一張圓形圖片

Q 4-1: 如何在頁面上畫一個橢圓

<style>
  .sector {
    width: 0;
    height: 0;
    border-width: 50px;
    border-style: solid;
    border-color: #f00 transparent transparent; border-radius: 50px; } </style> 複製代碼

Q 4-2: 若是圓邊界模糊，有什麼辦法去鋸齒

這幾個問題基本上能夠了解到面試者平時都是怎麼使用 CSS 的了，對於 CSS，我以爲夠用就好，由於咱們如今基本急太處理兼容性問題（有 babel 而且咱們的項目不要求兼容 ie6 等古老的瀏覽器）

JS

Q1: JS 基本數據類型

cherryblog.site/deepcopy.ht…

Q 1-1 JS 數據類型有哪些，其中基本數據類型有哪些

• Boolean
• Null
• Undefined
• Number
• String
• Symbol (ECMAScript 6 新定義)
• Object

(ES6以前)其中5種爲基本類型:string,number,boolean,null,undefined,ES6出來的Symbol也是原始數據類型 ，表示獨一無二的值。Object 爲引用類型(範圍挺大),也包括數組、函數

Q: 1-2 原始數據類型和引用類型的區別

在內存中的存儲方式不一樣，原始數據類型在內存中是棧存儲，引用類型是堆存儲 棧（stack）爲自動分配的內存空間，它由系統自動釋放；而堆（heap）則是動態分配的內存，大小不定也不會自動釋放。

在內存中存儲方式的不一樣致使了原始數據類型不可變 原始數據類型和引用數據類型作賦值操做一個是傳值一個是傳址

Q: 1-3 深拷貝 和 淺拷貝 的區別

cherryblog.site/deepcopy.ht…

Q: 1-4 怎麼實現淺拷貝

• ES6：object.assign()
• 展開運算符…
• 本身封裝函數實現

Q: 1-5 怎麼實現一個深拷貝

• JSON.parse() (可是若是裏面有 function 和 undefined 不可用)
• lodash
• 本身封裝

Q: 1-6 null和undefined的差別

相同點:

• 在 if判斷語句中,值都默認爲 false
• 大致上二者都是表明無,具體看差別 差別:
• null轉爲數字類型值爲0,而undefined轉爲數字類型爲 NaN(Not a Number)
• undefined是表明調用一個值而該值卻沒有賦值,這時候默認則爲undefined
• null是一個很特殊的對象,最爲常見的一個用法就是做爲參數傳入(說明該參數不是對象)
• 設置爲null的變量或者對象會被內存收集器回收

這個問題是一個 JS 基礎相關的問題，能夠考察面試者 JS 基本功

Q2: 實現給數字添加千分位符的方法

• 正則表達式："12345678".replace(/(\d)(?=(?:\d{3})+$)/g,'$1,')
• 字符串分析， 循環，而後3位加','
• 數字分析， 取到整數部分， %1000 操做， 而後加逗號 拼接字符串 (12345678).toLocaleString("en-US") => "12,345,678"

Q3: 面向對象三大要素

cherryblog.site/javascript-…

• 封裝、繼承、多態

Q3-1: 可以簡單的說明面向對象和麪向過程的區別嗎

• 面向過程就是分析出解決問題所須要的步驟，而後用函數把這些步驟一步一步實現，使用的時候一個一個依次調用就能夠了。
• 面向對象是把構成問題事務分解成各個對象，創建對象的目的不是爲了完成一個步驟，而是爲了描敘某個事物在整個解決問題的步驟中的行爲。
• 面向對象： 狗.吃(屎)
• 面向過程： 吃.(狗,屎)

Q3-4: 怎麼實現封裝和繼承

Q3-5: 一句話概述什麼是閉包

Q4: 一句話概述什麼是 promise

The Promise object is used for asynchronous computations. A Promise represents a single asynchronous operation that hasn't completed yet, but is expected in the future.

譯文：Promise對象用於異步操做，它表示一個還沒有完成且預計在將來完成的異步操做。

Q 4-1: promise 解決了哪些問題

Q 4-2: 在沒有 promise 以前，怎麼解決異步回調

JS 異步回調的 4 種解決方案

Q 4-3: 本身如何實現一個 promise（blog.csdn.net/chaunceyw/a…

• new Promise(fn) 返回一個promise對象
• 在fn 中指定異步等處理
  • 處理結果正常的話，調用resolve(處理結果值)
  • 處理結果錯誤的話，調用reject(Error對象)

promise 也是一道常見的面試題，在開始問什麼是 promise 的時候，不多有人可以用一個話說出什麼是 promise，都只是說 promise 的 api 怎麼使用，包括閉包，也不多有人可以用一句話歸納什麼是閉包。我的感受不能用一句話歸納都是理解的不夠深刻或者沒有從更高的層面理解

Q5: eventloop

在一個事件循環中，異步事件返回結果後會被放到一個任務隊列中。然而，根據這個異步事件的類型，這個事件實際上會被對應的宏任務隊列或者微任務隊列中去，當執行棧爲空的時候，主線程會首先查看微任務中的事件，若是微任務不是空的那麼執行微任務中的事件，若是沒有在宏任務中取出最前面的一個事件。把對應的回調加入當前執行棧...如此反覆，進入循環。

• macro-task(宏任務)
  • setTimeout
  • setInterval
  • setImmediate
• micro-task(微任務)
  • Promise
  • process.nextTick

eventloop 也是一個很常見的面試題，也是回答出來比較高的一個問題，能夠寫一個函數，讓面試者回答輸出

計算機相關

Q1 :比較 HTML XML XHTML 和 JSON

• 咱們最熟悉的就是 HTML（HyperText Markup Language / 超文本標記語言），用來描述和定義 網絡內容的標記語言，超文本的意思是說，除了能標記本文，還能標記 圖片，視頻，連接 等其餘內容

• XML（Extensible Markup Language / 可擴展標記語言），表現就是給一堆文檔加上標籤，說明裏面的數據是什麼意思，方便存儲、傳輸、分享數據。和 HTML 的區別是 HTML 的標籤就預約義的，XML 是可擴展的 XHTML: Extensible Hypertext Markup Language / 可擴展超文本標記語，其實就是 HTML 的嚴格語法形式，約定了 屬性名必需小寫，空元素必需關閉，元素名小寫，屬性名必需加引號，布爾類型必需加屬性值

• JSON（Javascript Object Notation）比較輕量級的數據交換格式，由鍵值對組成，數據格式比較簡單, 易於讀寫, 格式都是壓縮的, 佔用帶寬小

這個問題確實是一個很基礎的計算機先關的問題，可是不少的面試者仍然不能準確的說出 HTML 的含義（超文本標記語言），在說 XML 和 JSON 的區別的時候只能回答出 XML 經常使用做配置文件，JSON 用於 AJAX 傳輸數據

Q2: 概述輸入一個url到網頁呈現的過程

Q 2-1: DNS 解析的詳細過程

Q 2-2: 概述 http 的緩存控制（http2 與相關緩存控制）

Q 2-3: 簡述三次握手

Q 2-4: 頁面加載白屏的緣由有哪些，以及如何監控白屏時間，如何優化

Q 2-5：script 標籤的屬性有哪些

Q 2-6: script 標籤的 defer 和 async 標籤的做用與區別

Q 2-7: script intergrity的做用

這個問題真的是前端面試必問問題，由於能全方面考察面試者的能力，能根據面試者的回答層層層深刻，引伸出好多問題

Q3: 你所接觸的前端領域的通信有哪些（github.com/rainjay/blo…

• 前端和後端
• 前端和移動端
• 前端 父頁面 和 iframe 之間
• 瀏覽器各個 tab 之間
• web workers 線程通訊
• 路由間的通訊
• vue 父子組件

Q 3-1: 通訊的要點和目的

要點：1. 發送者和接收者 2. 傳輸媒介 3. 傳輸的數據 4. 傳輸格式（協議）

目的：1. 同步數據 2. 傳遞指令(執行的方法)

框架

Q1: 三大框架解決了傳統 JQ 開發的哪些問題

使前端不用再操縱 DOM,數據驅動，經過數據的改變直接改變 DOM

Q 1-1: Vue2.0 怎麼實現雙向綁定的

Q 1-2: Vue3.0 怎麼實現雙向綁定的

Q 1-3: Object.defineProperty() 和 proxy 的區別

Q2: 你使用過哪些 Vue/React 全家桶，分別解決了什麼問題

Q3: Vue/React 的 diff 算法

Q4: Vue hash 路由和 history 路由的區別

Q5: Vue 計算屬性和 watch 在什麼場景下使用

Q6: Vue 的 nexttick 實現的原理

對於 Vue/React/Angular 三大框架會使用哪些 api 是次要的，主要是要了解框架解決的問題和實現原理。

打包工具

Q1: webpack 相關，是否本身配置過

Q1-1: webpack 和其餘自動化構建工具（gulp、grunt、rollup）有哪些區別（juejin.im/post/5b10c6…

• webpack 是 module bundle
• gulp 是 tast runner
• Rollup 是在 Webpack 流行後出現的替代品。Rollup 在用於打包 JavaScript 庫時比 Webpack 更加有優點，由於其打包出來的代碼更小更快。 但功能不夠完善，不少場景都找不到現成的解決方案。

Q1-2: 模塊化解決了前端的哪些痛點

• 命名衝突
• 文件依賴
• 代碼複用

Q1-3: webpack 的 loader 和 plugin 區別，舉幾個經常使用的 loader 和 plugin 並說出做用

• loader 用於對模塊的源代碼進行轉換。loader 可使你在 import 或"加載"模塊時預處理文件。所以，loader 相似於其餘構建工具中「任務(task)」，並提供了處理前端構建步驟的強大方法。loader 能夠將文件從不一樣的語言（如 TypeScript）轉換爲 JavaScript，或將內聯圖像轉換爲 data URL。loader 甚至容許你直接在 JavaScript 模塊中 import CSS文件！ 由於 webpack 自己只能處理 JavaScript，若是要處理其餘類型的文件，就須要使用 loader 進行轉換，loader 自己就是一個函數，接受源文件爲參數，返回轉換的結果。
• Plugin 是用來擴展 Webpack 功能的，經過在構建流程裏注入鉤子實現，它給 Webpack 帶來了很大的靈活性。 經過plugin（插件）webpack能夠實 loader 所不能完成的複雜功能，使用 plugin 豐富的自定義 API 以及生命週期事件，能夠控制 webpack 打包流程的每一個環節，實現對 webpack 的自定義功能擴展。

Q1-4: webpack 打包的過程

• 讀取文件，分析模塊依賴
• 對模塊進行解析執行（深度遍歷）
• 針對不一樣的模塊使用不一樣的 loader
• 編譯模塊，生成抽象語法樹（AST）
• 遍歷 AST，輸出 JS

Q1-5: webpack 打包以後生成哪些文件

Q2: webpack 打包出來的文件體積過大怎麼辦

Q3: webpack 熱部署的原理

Q4: webpack 打包速度過慢怎麼辦？

關於 webpack ，對於初級前端，基本上只須要能夠 cli 將項目起來，知道 loader 和 plugin 的區別以及經常使用的 loader、plugin 我的以爲就差很少了，可是對於 高級前端及以上，最好仍是瞭解下 webpack 相關的原理

GIT 相關

Q1: git rebase

Q2: git cherrypick

做者：sunshine小小倩 連接：https://juejin.im/post/5c8bb79e6fb9a04a006fe79a