www.欧美精品,91探花视频在线观看,最新亚洲视频在线观看,亚洲精品成a在线,wycla忘忧草网站,国产精品久久久久久久毛片明星,欧美成人黄网站,激情五月图片亚洲婷婷

在掘金上當(dāng)了幾年的伸手黨，最近也準(zhǔn)備輸出一些自己的東西。

關(guān)于我

首先介紹一下我自己，17 年畢業(yè)于一所 211 學(xué)校，但是由于大學(xué)四年馳騁在召喚師峽谷，畢業(yè)時(shí)也沒(méi)有找到一份大廠(chǎng)的工作，隨便找了一家創(chuàng)業(yè)公司簽了三方就去了。好在這家公司也挺給力，我這一呆就是三年，996 當(dāng)著「全干工程師」，從前端到服務(wù)端，從 JavaScript 到 Java，這幾年下來(lái)都積累了一些經(jīng)驗(yàn)，不說(shuō)精通，也算是比較熟悉了。

今年 7 月份的時(shí)候，瞅著已經(jīng)畢業(yè)三年，是時(shí)候該考慮一下職業(yè)生涯的下一站了，開(kāi)始準(zhǔn)備面試的事情。

這里建議大家，每一份工作度需要慎重考慮，不要頻繁跳槽。文章后面也會(huì)給出我的理由和建議。

在職準(zhǔn)備了 2 個(gè)月的面試，開(kāi)始試著投了一些簡(jiǎn)歷，幸運(yùn)的是都收到了面試邀請(qǐng)，有的公司也拿到了 offer。也嘗試投了幾家大廠(chǎng)，阿里、字節(jié)、快手目前還在流程中。

也已經(jīng)向 TL 提了離職，最近在工作交接，事情比較少，寫(xiě)個(gè)文章記錄一下最近的經(jīng)歷。第一次在掘金寫(xiě)文章，希望能有人看。

工作三年

一晃時(shí)間就過(guò)去了三年，從畢業(yè)時(shí)候?qū)η岸艘桓[不通到如今在公司獨(dú)當(dāng)一面，也算是成長(zhǎng)了挺多。嗯，畢業(yè)三年的我有4年經(jīng)驗(yàn)（手動(dòng)狗頭）。

記個(gè)流水賬吧，大家能夠比較直觀(guān)地感受到我畢業(yè)三年以來(lái)每個(gè)階段做了什么事：

2017年1月左右。比較早搞定了畢業(yè)設(shè)計(jì)，開(kāi)始早開(kāi)始籌備找工作的事。由于是計(jì)算機(jī)專(zhuān)業(yè)畢業(yè)，第一想法當(dāng)然還是找編程相關(guān)的工作，就開(kāi)始了解目前的前端工程師、后端工程師都在做什么，找了幾個(gè)大廠(chǎng)的 JD 就開(kāi)始研究，并且聽(tīng)同學(xué)說(shuō)現(xiàn)在牛客上招聘和面經(jīng)比較多，就去翻了翻牛客。看了牛客之后，TM 被打擊了。。。這面經(jīng)也太難了吧，真的是「面試造火箭」
2017年1月底過(guò)年。過(guò)年期間回老家同學(xué)聚會(huì)，剛好也有朋友是計(jì)算機(jī)專(zhuān)業(yè)，建議我可以自學(xué)一下前端，找一份前端開(kāi)發(fā)的工作。大二大三的時(shí)候幫學(xué)長(zhǎng)做項(xiàng)目也寫(xiě)過(guò)一些前端的代碼，想想也挺有趣的，也不糾結(jié)了就找前端吧
2017年4月左右。體系化地學(xué)習(xí)了一下前端相關(guān)的知識(shí)，發(fā)現(xiàn)不對(duì)勁，沒(méi)有實(shí)習(xí)過(guò)的我對(duì)于整體的工程經(jīng)驗(yàn)太欠缺了，而且光是寫(xiě) Demo 根本無(wú)法深入學(xué)習(xí)，但是由于時(shí)間比較少需要看的內(nèi)容比較多，又只能淺嘗則止
2017年5月。投了幾份簡(jiǎn)歷，面了幾家公司，offer 有，但也都是小公司，對(duì)，就是那種只有 20 個(gè)人左右的小公司，想想還是放棄了
2017年6月。機(jī)緣巧合在 V2ex 上了解到一個(gè)創(chuàng)業(yè)公司，人不多，但是待遇還不錯(cuò)，就去試了試。面試官很 Nice，聊得挺不錯(cuò)，雖然我沒(méi)有實(shí)習(xí)經(jīng)驗(yàn)也沒(méi)關(guān)系，他覺(jué)得應(yīng)屆生基礎(chǔ)好，學(xué)習(xí)能力強(qiáng)就沒(méi)問(wèn)題（?? 我信了。。）
2017年6月。簽了三方，畢業(yè)旅行去了。美滋滋。
2017年7月。從學(xué)校畢業(yè)，進(jìn)入這家創(chuàng)業(yè)公司開(kāi)始了我的前端生涯
2017年7月 - 12月。因?yàn)檫@家創(chuàng)業(yè)公司已經(jīng)有一定規(guī)模了，除我之外還有 3 個(gè)前端，所以我剛來(lái)之后活還比較輕，主要就是寫(xiě)一些無(wú)關(guān)經(jīng)驗(yàn)的后臺(tái)頁(yè)面和 toC 的移動(dòng)端頁(yè)面，主要技術(shù)棧是 Vue。Vue 也是我來(lái)了公司之后才開(kāi)始學(xué)的，看了一遍文檔之后就直接開(kāi)干，啥不會(huì)的就 CV 大法，還不會(huì)的就厚臉皮請(qǐng)教公司的前輩，就這樣過(guò)了差不多半年吧
2018年1月-6月。TL 看我已經(jīng)逐漸掌握了前端技術(shù)棧的開(kāi)發(fā)，也開(kāi)始給我安排一些比較有挑戰(zhàn)性的活，負(fù)責(zé)一些日活比較高的項(xiàng)目日常維護(hù)和迭代。在這半年時(shí)間里，更多時(shí)間還是在跟業(yè)務(wù)，沒(méi)有太多技術(shù)上的思考。當(dāng)然，我的手還是非常快的，5天工作量的頁(yè)面我3天就能搞定，而且提測(cè)基本 0 bug。當(dāng)然，這里的手快不是敲鍵盤(pán)快，更多的是對(duì)于項(xiàng)目的理解和功能模塊的拆分，以及頁(yè)面組件、模塊的設(shè)計(jì)，保證復(fù)用度。這里我的建議是：拿到一個(gè)業(yè)務(wù)需求，先理解透徹再動(dòng)手編碼。理解包括對(duì)業(yè)務(wù)的理解和對(duì)需求的理解，將產(chǎn)品給到的 PRD 進(jìn)行拆解分析，派出優(yōu)先級(jí)和每項(xiàng)的排期，這樣對(duì)于整體項(xiàng)目都能有一個(gè)把控
2018年7月-12月。業(yè)務(wù)已經(jīng)穩(wěn)定，團(tuán)隊(duì)也有了差不多差不多 8 個(gè)人，開(kāi)始接手一些團(tuán)隊(duì)基礎(chǔ)設(shè)施建設(shè)的事情，比如統(tǒng)一腳手架、統(tǒng)一 UI 組件庫(kù)以及統(tǒng)一技術(shù)棧的前期工作
2019年1月-6月。和 TL 一起推動(dòng)統(tǒng)一了 React 作為前端統(tǒng)一技術(shù)棧，剛好拿到一個(gè)比較重要的業(yè)務(wù)，借這個(gè)項(xiàng)目沉淀了項(xiàng)目腳手架（包括中后臺(tái)和 mobile），以及UI 組件庫(kù)（基于 antd 進(jìn)行定制、封裝），在 3 月份的時(shí)候我也順利完成晉升（其實(shí)就是調(diào)了薪資）。從 18 年 7 月到 19 年 6 月這一年時(shí)間真的痛并快樂(lè)著，每天肝到最后一個(gè)下班，之前沒(méi)接觸過(guò)前端工程化體系，就沒(méi)日沒(méi)夜地學(xué)習(xí)。而且推動(dòng)技術(shù)棧統(tǒng)一其實(shí)是一個(gè)很艱難的事情，這得拿出足夠的理由和證據(jù)讓團(tuán)隊(duì)成員信服，并且得要有足夠的技術(shù)支撐（腳手架、組件庫(kù)、工程化能力、知識(shí)體系支撐），幸好 TL 也一直很支持這個(gè)事情，總算在肝了一年后順利建設(shè)了目前團(tuán)隊(duì)的技術(shù)底座（當(dāng)然還是比較 low 的，后面也一直在迭代
2019年7月-12月。基本做的就是腳手架、組件庫(kù)、工程化的完善的，以及 CI/CD 的一些事情
2020年1月-2020年6月。團(tuán)隊(duì)的開(kāi)發(fā)模式基本已經(jīng)成型，只需要投入 2人日/周基本就可以。我們也開(kāi)始沉淀團(tuán)隊(duì)統(tǒng)一的埋點(diǎn)、監(jiān)控方案，打造了統(tǒng)一的前端埋點(diǎn)管理系統(tǒng)、前端埋點(diǎn)工具、前端監(jiān)控平臺(tái)
2020年7月。雖然可能你覺(jué)得我三年來(lái)干了很多事情，但是如果深入細(xì)節(jié)看，很多事情都是小打小鬧不成體系，業(yè)務(wù)量大了之后未必可以 cover。所以決定再次尋找自己新的定位，進(jìn)入一個(gè)大廠(chǎng)，體系化地了解整個(gè)前端研發(fā)生命周期中大廠(chǎng)是如何思考和沉淀的

工作三年，學(xué)到很多。很多人可能會(huì)說(shuō)：還是因?yàn)檫@家創(chuàng)業(yè)公司給力而且 TL 比較給力，所以可以待到三年。是的，這話(huà)沒(méi)毛病，我也很感謝我的 TL，感謝公司給了這樣一個(gè)平臺(tái)讓我成長(zhǎng)。

但是，我想說(shuō)的是，除了外界客觀(guān)因素之外，自身的主觀(guān)因素也很重要。在上面的個(gè)人經(jīng)歷中，我寫(xiě)出來(lái)的可能都是讓你感覺(jué)很爽的事情，很多不爽的事情我沒(méi)寫(xiě)出來(lái)而已。。

經(jīng)常肝到半夜
被 TL 批評(píng)過(guò)，也經(jīng)常懷疑過(guò)自我
暗地里說(shuō)過(guò)業(yè)務(wù)方（這人也太xx了，還天天摸魚(yú)）、罵過(guò)公司（公司也太xx了，遲早完蛋）
無(wú)數(shù)次想要離職的經(jīng)歷，懂的人都懂，隨時(shí)都想砸了電腦走人
...

太多了，如果要寫(xiě)，我可以寫(xiě)出 100 條「我為什么曾經(jīng)無(wú)數(shù)次想要離職」。

人生就是這么有意思，無(wú)數(shù)次想要離職都沒(méi)走，這次確是主動(dòng)想要換個(gè)環(huán)境，并且需要放棄一些東西。

復(fù)習(xí)準(zhǔn)備

掘金上關(guān)于面試的文章很多，這也是社區(qū)一個(gè)現(xiàn)狀，所以就挑了幾篇個(gè)人覺(jué)得比較好的著重看了一下：

2020年前端面試復(fù)習(xí)必讀文章：這個(gè)大佬的思維導(dǎo)圖整理的非常好，整個(gè)復(fù)習(xí)流程都是跟著這個(gè)導(dǎo)圖來(lái)的，而且也不用自己到處搜索文章了，相當(dāng)方便
在阿里我是如何當(dāng)面試官的：這篇文章主要是了解一下阿里的面試是怎么樣的，面試官關(guān)心什么
面試分享：兩年工作經(jīng)驗(yàn)成功面試阿里P6總結(jié) ：實(shí)戰(zhàn)篇，真實(shí)的阿里大佬面試經(jīng)驗(yàn)
字節(jié)跳動(dòng)今日頭條前端面經(jīng)（4輪技術(shù)面+hr面）：實(shí)戰(zhàn)篇，真實(shí)的字節(jié)大佬面試經(jīng)驗(yàn)

以上文章個(gè)人覺(jué)得就夠了，能花時(shí)間把這些知識(shí)啃下來(lái)，一般面試就沒(méi)什么問(wèn)題了。

簡(jiǎn)歷準(zhǔn)備

簡(jiǎn)歷真的非常重要，校招的時(shí)候就有這樣的感覺(jué)，那時(shí)候有實(shí)習(xí)經(jīng)歷和沒(méi)實(shí)習(xí)經(jīng)歷簡(jiǎn)直就是一個(gè)天一個(gè)地。這次也準(zhǔn)備認(rèn)真準(zhǔn)備一下自己的簡(jiǎn)歷。

對(duì)于簡(jiǎn)歷，個(gè)人認(rèn)為大廠(chǎng)面試官和 HR 最看重的是兩點(diǎn)：

項(xiàng)目經(jīng)歷：做了什么
工作經(jīng)歷：穩(wěn)定性

這里就不展開(kāi)說(shuō)了，社區(qū)里也很多優(yōu)秀的文章。在這個(gè)過(guò)程中，我主要參考了以下幾篇文章，推薦一下：

《大廠(chǎng)面試》面試官看了直呼想要的簡(jiǎn)歷
面試官到底想看什么樣的簡(jiǎn)歷？
教你如何寫(xiě)初/高級(jí)前端簡(jiǎn)歷【贈(zèng)簡(jiǎn)歷導(dǎo)圖】

面試題整理

這里整理一下我這段時(shí)間面試遇到的面試題，按類(lèi)型分一下，這里只整理了我記錄的問(wèn)題，來(lái)不及寫(xiě)答案。。

JavaScript

1. 說(shuō)說(shuō) JavaScript 的數(shù)據(jù)類(lèi)型

算是面試官拿一個(gè)簡(jiǎn)單的題給面試者熱熱身找找感覺(jué)吧。

基本數(shù)據(jù)類(lèi)型：String、Boolean、Number、Symbol、null、undefined
引用數(shù)據(jù)類(lèi)型：Object，如果要細(xì)分的話(huà)有 Object、Array、Date、RegExp 和 Function

2. 基本數(shù)據(jù)類(lèi)型和引用數(shù)據(jù)類(lèi)型有什么區(qū)別？

很自然地就引出這個(gè)題，基本數(shù)據(jù)類(lèi)型在被創(chuàng)建時(shí)，在棧上給其劃分一塊內(nèi)存，將數(shù)值直接存儲(chǔ)在棧上；引用數(shù)據(jù)類(lèi)型在被創(chuàng)建時(shí)，首先在棧上創(chuàng)建一個(gè)引用，而對(duì)象的具體內(nèi)容都存儲(chǔ)在堆內(nèi)存上，然后由棧上面的引用指向堆中對(duì)象的地址。

3. 那基本數(shù)據(jù)類(lèi)型和引用數(shù)據(jù)類(lèi)型拷貝的時(shí)候有什么區(qū)別？

由于存儲(chǔ)的位置不一樣，直接拷貝的時(shí)候就會(huì)有兩種情況：拷貝了值和拷貝了引用，也就是我們常說(shuō)的深淺拷貝。

對(duì)于基本數(shù)據(jù)類(lèi)型而言，沒(méi)有深淺拷貝的概念，都是在棧上新開(kāi)辟了一塊內(nèi)存給新的值。而對(duì)于引用數(shù)據(jù)類(lèi)型而言，區(qū)別簡(jiǎn)單來(lái)說(shuō)就是會(huì)不會(huì)共享堆內(nèi)存里的值。具體不說(shuō)了，文章很多，隨便看兩篇基本都沒(méi)啥問(wèn)題。

深拷貝的終極探索（90%的人都不知道）
JavaScript 專(zhuān)題之深淺拷貝

目前 JavaScript 的 API 中，哪些是淺拷貝，哪些是深拷貝？

可以看看這篇文章，雖然文章里有一些小問(wèn)題，不影響整體閱讀

JavaScript 基礎(chǔ)心法——深淺拷貝

4. 如何實(shí)現(xiàn)一個(gè)深拷貝？

無(wú)非就是 JSON.stringify 和 遞歸 兩種方法，大概說(shuō)說(shuō)思路就 OK

5. 通過(guò) JSON.stringify 的方式實(shí)現(xiàn)深拷貝，會(huì)有什么問(wèn)題？

如果值是 undefined、function 等，在轉(zhuǎn)換的時(shí)候會(huì)丟失，所以還是要比較謹(jǐn)慎使用 JSON.stringify 來(lái)做深拷貝

6. 通過(guò)遞歸的方式實(shí)現(xiàn)深拷貝，會(huì)有什么問(wèn)題？

循環(huán)引用和重復(fù)引用

數(shù)據(jù)類(lèi)型和深淺拷貝的問(wèn)題問(wèn)到這里基本差不多了。這里說(shuō)個(gè)小技巧：如果面試官問(wèn)了第一題，面試官應(yīng)該心里已經(jīng)有打算問(wèn)你深淺拷貝的問(wèn)題，如果你比較熟悉，也可以嘗試主動(dòng)點(diǎn)往這方面引。

7. 數(shù)組去重的方式有哪些（手寫(xiě)）

花里胡哨的也就那幾種，主要考察對(duì)JavaScript API 是否熟悉，我寫(xiě)了兩種：Set 和 Hash，面試官也沒(méi)有多問(wèn)。

Hash:

function unique(arr = []) {
  if (arr.length === 0 || arr.length === 1) {
    return arr;
  }
  const newArray = [];
  const hash = {};
  for (let i = 0; i < arr.length; i++) {
    if (!hash[arr[i]]) {
      hash[arr[i]] = 1;
      newArray.push(arr[i]);
    }
  }
  return newArray;
}

Set:

function unique(arr = []) {
  if (arr.length === 0 || arr.length === 1) {
    return arr;
  }
  return [...new Set(arr)];
}

8. 找出數(shù)組中最大的數(shù)（手寫(xiě)）

我就只寫(xiě)了一種

function getArrayMax(arr = []) {
  if (!arr.length) return;
  if (arr.length === 1) {
    return arr[0];
  }
  return Math.max(...arr);
}

9. 說(shuō)一下事件循環(huán)的理解

宏任務(wù)微任務(wù)那些，隨便搜都是，只推薦一篇經(jīng)典文章：Tasks, microtasks, queues and schedules

10. 快排是如何實(shí)現(xiàn)的，講一下思路和復(fù)雜度

放兩張圖，感受一下，更多的動(dòng)畫(huà)可以看 https://visualgo.net/zh/sorting

11. 如何實(shí)現(xiàn)一個(gè)觀(guān)察者模式（手寫(xiě)）

12. 如何實(shí)現(xiàn)一個(gè)單例模式（手寫(xiě)）

13. 如何解析一個(gè) URL，獲取 query 和 hash 的參數(shù)（手寫(xiě)）

14. TypeScript 和 JavaScript 最大的區(qū)別在哪

CSS

1. flex 如何實(shí)現(xiàn)九宮格

設(shè) width，變 flex-wrap

2. 除了 flex 之外，還能如何實(shí)現(xiàn)九宮格

比較老的 float，比較新的 grid，然后展開(kāi)說(shuō)下 grid

3. flex: 1 是什么意思

我就說(shuō)了一下 flex: 1 的作用，然后說(shuō)了一下 flex 其實(shí)有三個(gè)值，分別簡(jiǎn)單說(shuō)了一下各自的作用，就過(guò)了

4. 移動(dòng)端適配怎么做的，rem 原理是什么，vw 有沒(méi)有了解

細(xì)說(shuō)移動(dòng)端經(jīng)典的REM布局與新秀VW布局

5. 移動(dòng)端 1px 如何解決

移動(dòng)端1px解決方案
Retina屏的移動(dòng)設(shè)備如何實(shí)現(xiàn)真正1px的線(xiàn)？

React/Vue

1. 看你的簡(jiǎn)歷，Vue 和 React 都寫(xiě)的比較多，可以說(shuō)說(shuō) Vue 和 React 的區(qū)別嗎？

通過(guò)自己的理解，從編譯、生命周期、數(shù)據(jù)流、核心思想等方向都介紹了一下吧，這個(gè)問(wèn)題還是需要認(rèn)真準(zhǔn)備一下，我說(shuō)的時(shí)候感覺(jué)有點(diǎn)亂，回頭我看看寫(xiě)一篇文章專(zhuān)門(mén)回答一下這個(gè)問(wèn)題吧

2. 新項(xiàng)目的技術(shù)選型，你會(huì)從哪些方面來(lái)考慮選用 Vue 還是 React？

這個(gè)問(wèn)題我聽(tīng)到就感覺(jué)比較謹(jǐn)慎，因?yàn)楸旧砭褪窃趧?chuàng)業(yè)公司，面臨過(guò)很多次的技術(shù)選型。從 jQuery 到 Vue 和 React，我們也經(jīng)歷了技術(shù)棧的更新?lián)Q代。我們當(dāng)時(shí)在考慮技術(shù)選型的時(shí)候，我們考慮的不是一個(gè)新項(xiàng)目，而是一個(gè)未來(lái) 2 - 3 年甚至更久的一個(gè)長(zhǎng)遠(yuǎn)技術(shù)選型，主要看了一下 React 和 Vue 的一個(gè)整體生態(tài)和完整度，當(dāng)然這也包括社區(qū)的活躍度。因?yàn)槲覀儾](méi)有太多人力做一些框架底層的工作以及一些生態(tài)周邊配套解決方案，更多的時(shí)候是拿一些現(xiàn)有的解決方案來(lái)解決我們的業(yè)務(wù)問(wèn)題。

我在回答這個(gè)問(wèn)題的時(shí)候，更多的時(shí)候是通過(guò)本身的業(yè)務(wù)出發(fā)回答的，沒(méi)有過(guò)多地回答 React 和 Vue 框架上的區(qū)別對(duì)技術(shù)選型帶來(lái)的影響。

3. 說(shuō)說(shuō)對(duì)虛擬 DOM 的理解

虛擬 DOM 本質(zhì)上是一個(gè)真實(shí) DOM 的抽象 JavaScript 對(duì)象。然后展開(kāi)說(shuō)了一下虛擬 DOM 的好處，操作 DOM 簡(jiǎn)單、輕量、跨平臺(tái)，我特別提了一下跨平臺(tái)，Vue 2.x 之后引入的虛擬 DOM，也有一部分是為了解決未來(lái)跨平臺(tái)的問(wèn)題，后來(lái)也結(jié)合 WEEX 了。

4. 講講 React 的生命周期

這個(gè)沒(méi)啥好說(shuō)的，根據(jù)自己的理解說(shuō)一下那幾個(gè)生命周期了。也說(shuō)了一下即將廢棄的生命周期以及為什么廢棄，就過(guò)了。

5. React 函數(shù)式組件和類(lèi)組件有什么區(qū)別

6. React 的 diff 和 Vue 的有什么區(qū)別

單向雙向的區(qū)別

7. 列表中的 key 有什么作用

給 VirtualDOM diff用

8. 說(shuō)說(shuō) React Hooks 的理解，它有什么優(yōu)點(diǎn)

一篇看懂 React Hooks

9. React Hooks 不能出現(xiàn)在條件判斷語(yǔ)句中

可以確保每次渲染組件時(shí)都以相同的順序調(diào)用 Hook

10. 什么是高階組件？

高階組件(HOC)應(yīng)該是無(wú)副作用的純函數(shù)，且不應(yīng)該修改原組件
高階組件(HOC)不關(guān)心你傳遞的數(shù)據(jù)(props)是什么，并且被包裝組件不關(guān)心數(shù)據(jù)來(lái)源
高階組件(HOC)接收到的 props 應(yīng)該透?jìng)鹘o被包裝組件

11. React 的高階組件和 Vue 的 mixins 是一個(gè)類(lèi)型的東西嗎？Vue 中是否可以實(shí)現(xiàn)類(lèi)似 React 的高階組件

高階組件本質(zhì)就是高階函數(shù)，React 的組件是一個(gè)純粹的函數(shù)，所以高階函數(shù)對(duì)React來(lái)說(shuō)非常簡(jiǎn)單。

而 Vue 更像是高度封裝的函數(shù)，在更高的層面 Vue能夠讓你輕松的完成一些事情，但與高度的封裝相對(duì)的就是損失一定的靈活，你需要按照一定規(guī)則才能使系統(tǒng)更好的運(yùn)行。

12. Vue 的雙向綁定是如何實(shí)現(xiàn)的

數(shù)據(jù)劫持和發(fā)布訂閱

13. Vue 如何收集依賴(lài)

14. Vue 的父子組件掛載順序是怎么樣的

父created -> 子created -> 子mounted -> 父mounted

15. Vue 的 computed 和 watch 是怎么實(shí)現(xiàn)的

16. Vue 的 template 是如何編譯的

vue-loader 里有然后專(zhuān)門(mén)處理 template 的 loader，最終本質(zhì)上還是 createElement

17. Vue 3.0 和 2.x 有什么區(qū)別

defineProperty、proxy，更開(kāi)放的 API，ts 等等...

18. defineProperty 有什么缺點(diǎn)，為什么 Vue 3.0 之后改用 proxy

數(shù)組、對(duì)象的監(jiān)聽(tīng)

19. 我不是前端，你如何向我介紹 Vue，讓我能夠盡可能多的了解它

工程化

1. webpack 和 rollup 的區(qū)別

webpack 適用于大型復(fù)雜的前端站點(diǎn)構(gòu)建，rollup 適用于基礎(chǔ)庫(kù)的打包

2. 說(shuō)說(shuō) webpack 的 loader 和 plugin

loader 解析模塊，plugin 擴(kuò)展功能

3. esbuild 有沒(méi)有了解

下一代構(gòu)建工具，是使用 go編寫(xiě)的，未來(lái)的趨勢(shì)會(huì)更多使用非 JavaScript 語(yǔ)言來(lái)編寫(xiě)前端工具，優(yōu)點(diǎn)是快。

4. CommonJS 和 ESM 有什么區(qū)別

這個(gè)就不展開(kāi)說(shuō)了，找兩篇關(guān)于 JavaScript 模塊的文章看看就 OK

5. vite 和 snowpack 有了解嗎，unbundle 有什么好處

個(gè)人理解會(huì)是未來(lái)構(gòu)建工具的一種趨勢(shì)，在構(gòu)建速度/熱更新速度上都比目前 webpack 的方案快非常多，大幅度提高前端開(kāi)發(fā)效率。

6. webpack 的熱更新原理大概介紹一下

本地起服務(wù)，通過(guò)文件內(nèi)容 hash 來(lái)判斷是否更新，客戶(hù)端收到更新消息后會(huì)取拉取最新代碼進(jìn)行更新

7. vue-loader 做了哪些事情

webpack 用于處理 .vue 文件的 loader，解析代碼，分別處理其中的 template/style/script...

8. tree sharking 是什么

ESM，代碼體積優(yōu)化，CommonJS 不支持

9. webpack4 相對(duì)于之前做了哪些優(yōu)化

10. 項(xiàng)目中，你使用 webpack 做了哪些優(yōu)化

使用 happypack 加速構(gòu)建
通過(guò) analyze 插件分析構(gòu)建產(chǎn)物大小，優(yōu)化體積
chunk
dll
...

11. 如何發(fā)布一個(gè) npm 包，如何發(fā)布一個(gè) beta 包，如何修改一個(gè)正式包為 beta 包

npm publish
npm publish --tag beta
npm dist-tag add [email protected] beta

12. npm 包的版本號(hào)是如何規(guī)范的

參考 https://semver.org/lang/zh-CN/，這里提了一下 break change 以及不規(guī)范的 npm版本號(hào)會(huì)帶來(lái)什么影響

13. DefinePlugin 的作用是什么

定義全局變量，可以用于不同環(huán)境的代碼刪除

14. 你們團(tuán)隊(duì)的項(xiàng)目腳手架是如何實(shí)現(xiàn)的

使用 Yeoman 開(kāi)發(fā)的腳手架，介紹了一下 Yeoman 的能力，以及為什么要用它而不是直接用現(xiàn)成的 cra 和 vue-cli

15. Babel 的原理是什么

編譯器。分為三個(gè)階段：

parse：詞法分析語(yǔ)法分析
transform：轉(zhuǎn)換ast
generate：生成代碼

后端

1. Koa 和 Express 有什么區(qū)別

異步：callback 和 promise
中間件：線(xiàn)性模型和洋蔥模型

2. 說(shuō)說(shuō) Koa 的中間件原理

3. 常用的 Node API 有哪些

4. SSR 是如何實(shí)現(xiàn)的

5. serverless 有了解嗎

6. 說(shuō)說(shuō) node 的執(zhí)行機(jī)制（單線(xiàn)程）

7. 為什么說(shuō) node 是高性能的

8. node 為什么支持高并發(fā)

執(zhí)行速度快：運(yùn)行在 Chrome V8 引擎上
異步：libuv 事件循環(huán)
適用 I/O 密集的網(wǎng)絡(luò)應(yīng)用開(kāi)發(fā)：解決網(wǎng)絡(luò)應(yīng)用開(kāi)發(fā) I/O 的性能瓶頸

9. 說(shuō)說(shuō) MVC 的思想

Model–view–controller

10. 說(shuō)說(shuō) ORM 的優(yōu)點(diǎn)

本質(zhì)上是對(duì) SQL 語(yǔ)句的一種抽象，方便（語(yǔ)句清晰），安全（一定程度防注入）

11. MySQL 和 MongoDB 有什么區(qū)別

關(guān)系型數(shù)據(jù)庫(kù)和非關(guān)系數(shù)據(jù)庫(kù)

12. 依賴(lài)注入是什么

網(wǎng)絡(luò)

1. 從輸入 URL 到頁(yè)面渲染，其中發(fā)生了什么

這個(gè)問(wèn)題真的很大，可以說(shuō)很多東西，因?yàn)樵趩?wèn)這個(gè)問(wèn)題之前面試官在聊網(wǎng)絡(luò)，所以這個(gè)問(wèn)題我也就回答了網(wǎng)絡(luò)方面相關(guān)的，至于瀏覽器渲染相關(guān)的我就隨便帶了一下就過(guò)了

2. HTTP 和 HTTPS 有什么區(qū)別

從安全的角度說(shuō)唄

3. 說(shuō)說(shuō) HTTP 的狀態(tài)碼

隨便說(shuō)了幾個(gè)常見(jiàn)的狀態(tài)碼，一般面試官問(wèn)這個(gè)，其實(shí)是準(zhǔn)備找?guī)讉€(gè)常見(jiàn)的狀態(tài)碼問(wèn)你具體什么意思，所以你就說(shuō)自己比較了解的幾個(gè)就好了，如果完全沒(méi)了解過(guò)的，就別給自己挖坑了

4. 304 狀態(tài)碼是什么意思

緩存

5. 瀏覽器的三級(jí)緩存策略了解嗎

先在內(nèi)存中查找，如果有就加載
如果內(nèi)存中不存在，則在硬盤(pán)中查找，如果有就加載
如果硬盤(pán)中也沒(méi)有，那么就進(jìn)行網(wǎng)絡(luò)請(qǐng)求
請(qǐng)求獲取的資源緩存到硬盤(pán)和內(nèi)存

6. 說(shuō)說(shuō)瀏覽器的緩存，強(qiáng)緩存是什么

7. websocket 是怎么建立鏈接的

8. HTTPS 是如何保證網(wǎng)絡(luò)安全的

9. HTTP 如何實(shí)現(xiàn)長(zhǎng)連接

keep-alive

算法（手寫(xiě)）

1. 回形打印矩陣

2. 找出最長(zhǎng)子字符串

3. 數(shù)組中的第 K 個(gè)最大元素

4. 用 JavaScript 實(shí)現(xiàn)一個(gè)鏈表

5. 從上到下打印二叉樹(shù)

其它

1. 介紹一個(gè)你覺(jué)得比較有亮點(diǎn)的項(xiàng)目

說(shuō)了一個(gè)從 0 到 1 的項(xiàng)目，并且在這個(gè)項(xiàng)目中，我沉淀了一套目前公司統(tǒng)一使用的腳手架工具以及一個(gè) UI 組件庫(kù)。由于是 0 到 1 的項(xiàng)目，項(xiàng)目周期中遇到了一些協(xié)作的問(wèn)題，我也主動(dòng)承擔(dān)了一些 PM 的角色，去推動(dòng)項(xiàng)目正常運(yùn)行，保證了項(xiàng)目正常上線(xiàn)，獲得業(yè)務(wù)上下游團(tuán)隊(duì)的好評(píng)。

2. 在創(chuàng)業(yè)公司，一個(gè)前端項(xiàng)目的生命周期是怎么樣的

在網(wǎng)上也看到了一些大廠(chǎng)的工作流程，相比來(lái)說(shuō)，我們這邊的流程相對(duì)來(lái)說(shuō)，大的骨干都有，但是小的地方就顯得不夠規(guī)范。比如 Code Review、發(fā)布管控、灰度回滾能力等，目前在我們的研發(fā)生命周期中，這些能力都只是 “能用” 的階段，目前我們也在加強(qiáng)規(guī)范建設(shè)。

3. 在團(tuán)隊(duì)中，你是如何制定編碼規(guī)范的，如何推動(dòng)規(guī)范落地的

根據(jù)目前業(yè)界常用的編碼規(guī)范，制定了編碼規(guī)范，以及一套 ESLint/StyleLint/CommitLintd 靜態(tài)檢查工具，當(dāng)然還有 Prettier ，然后就是推廣大家用，用的過(guò)程中再迭代這套編碼規(guī)范。

4. 你還有什么問(wèn)題想問(wèn)我的

不要頻繁跳槽

文章開(kāi)始的時(shí)候有提到「不要頻繁跳槽」，這里談?wù)剛€(gè)人的看法。

對(duì)于面試官和 HR 來(lái)說(shuō)，「頻繁跳槽」意味著兩點(diǎn)：

你的穩(wěn)定性不足，得承擔(dān)給你發(fā)了 offer 之后你來(lái)到公司過(guò)了一段時(shí)間又跑路的風(fēng)險(xiǎn)，所以會(huì)是減分項(xiàng)
你沒(méi)有足夠的沉淀，技術(shù)和業(yè)務(wù)的沉淀是要時(shí)間的，對(duì)業(yè)務(wù)有深入的理解才能思考如何通過(guò)技術(shù)手段來(lái)解決業(yè)務(wù)上的問(wèn)題

對(duì)于個(gè)人來(lái)說(shuō)，「頻繁跳槽」意味著：