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

同樣，我們組因為業務需要（我們今年倒是還沒有人員離職，感動╭(╯^╰)╮）需要進行社招，我最近看了不少簡歷，並且對一些小夥伴進行了電話溝通（電面），對面試找工作有一些自己淺薄的觀點

因為個人認為本人的技術還是很菜的，並且工作經驗也沒有特別豐富，所以文章內容都是自己一些淺薄的看法觀點，若有不對之處，歡迎大家指出，不喜勿噴啊~~~

本篇文章可能只是適用於初級前端，也就是剛畢業的大學生或者畢業 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