大家好，我是若川，祝大家中秋節(jié)快樂(lè)。最近組織了源碼共讀活動(dòng)《1個(gè)月，200+人，一起讀了4周源碼》，已經(jīng)有超50+人提交了筆記，群里已經(jīng)有超1200人，感興趣的可以點(diǎn)此鏈接掃碼加我微信?ruochuan12?參與。

本文經(jīng)作者@lxcan 授權(quán)轉(zhuǎn)載，未經(jīng)授權(quán)請(qǐng)勿直接轉(zhuǎn)載。
原文標(biāo)題：《三年經(jīng)驗(yàn)前端社招——樸樸科技》
原文鏈接：https://zhuanlan.zhihu.com/p/405785932
文末點(diǎn)擊閱讀原文直達(dá)

前言

本人畢業(yè)學(xué)校是雙非二本，非計(jì)算機(jī)科班出身，大學(xué)時(shí)自學(xué)的前端相關(guān)技能。截止2021年8月，有3年前端開(kāi)發(fā)經(jīng)驗(yàn)，技術(shù)棧為 vue 全家桶，求職意向城市是深圳。想著找一個(gè)更大的平臺(tái)尋求發(fā)展（技術(shù)沉淀、漲薪），所以出來(lái)接受社會(huì)的毒打了。。。

本文的目的是記錄自己的面試經(jīng)歷，各位路過(guò)的兄dei也可以參考一下，也讓自己有個(gè)回顧和反思。路漫漫其修遠(yuǎn)兮，吾將上下而求索

下面的題目，都會(huì)標(biāo)明每一題的性質(zhì)，部分題目也會(huì)給出一些參考思路和參考回答，希望各位大佬不吝賜教~

• 描述：對(duì)概念、過(guò)程的描述，純理論性問(wèn)答題為主

• 舉例：說(shuō)出應(yīng)用場(chǎng)景，或者是自己團(tuán)隊(duì)實(shí)踐的情況

• 偽代碼：寫(xiě)代碼，但不需要跑起來(lái)，甚至可以隨便寫(xiě)偽代碼，主要目的是描述思路

• 編程：真正的寫(xiě)代碼，需要跑起來(lái)，有測(cè)試用例，要看到效果

HR面的話，是一些日常、項(xiàng)目回顧（少說(shuō)技術(shù)細(xì)節(jié)）、職業(yè)規(guī)劃、你的優(yōu)勢(shì)和缺點(diǎn)、為什么跑路、為什么選擇這邊、目前薪資和職級(jí)、期望薪資，HR面基本離不開(kāi)這些問(wèn)題。

一面

1、項(xiàng)目問(wèn)題，深挖細(xì)節(jié)，說(shuō)幾個(gè)做過(guò)的項(xiàng)目中，你覺(jué)得比較復(fù)雜的功能【描述】

2、h5 首頁(yè)為什么做成了服務(wù)端渲染？【描述】

3、打包結(jié)果優(yōu)化，具體做了哪些優(yōu)化【描述】【舉例】

4、vue 中 beforeCreate 和 created 的區(qū)別【描述】

5、vue 中用過(guò)哪些修飾器？【舉例】
事件修飾符
.stop
.prevent
.capture
.self
.once
.passive

按鍵修飾符
.enter
.tab
.delete (捕獲“刪除”和“退格”鍵)
.esc
.space
.up
.down
.left
.right

其他常用的修飾符
.trim
.number
.lazy
.sync

6、vue 中 computed 和 watch 的區(qū)別【描述】

• computed 一般用于簡(jiǎn)化模板中變量的調(diào)用

• watch 一般用于監(jiān)聽(tīng)數(shù)據(jù)的變化，做一些邏輯處理或者異步處理，可以深度監(jiān)聽(tīng)、立即執(zhí)行

• computed 和 watch 在源碼里都是通過(guò) Watcher 類創(chuàng)建出來(lái)的

• 初始化時(shí)，先創(chuàng)建 computed 再創(chuàng)建 watch 。數(shù)據(jù)改變時(shí)，先執(zhí)行 computed 再執(zhí)行 watch

7、vue 中 key 的作用是什么？【描述】
Key 的作用：
主要用來(lái)在虛擬 DOM 的 diff 算法中，在新舊節(jié)點(diǎn)的對(duì)比時(shí)辨別 vnode ，使用 key 時(shí)，Vue 會(huì)基于 key 的變化重新排列元素順序，盡可能的復(fù)用頁(yè)面元素，只找出必須更新的DOM，最終可以減少DOM操作。常見(jiàn)的列子是結(jié)合 v-for 來(lái)進(jìn)行列表渲染，或者用于強(qiáng)制替換元素/組件。
設(shè)置 Key 的好處：
（1）數(shù)據(jù)更新時(shí)，可以盡可能的減少DOM操作；
（2）列表渲染時(shí)，可以提高列表渲染的效率，提高頁(yè)面的性能；

8、比如，在 v-for 時(shí)寫(xiě)了 key ，將第二個(gè)元素和第三個(gè)元素交換了順序，實(shí)際的 diff 算法怎樣的【描述】

9、有沒(méi)有做過(guò)組件的抽離和組件庫(kù)的開(kāi)發(fā)？具體做了什么工作【描述】

10、內(nèi)部組件庫(kù)，怎么本地開(kāi)發(fā)和調(diào)試？怎么上線？本地調(diào)試有哪些方式【描述】【舉例】

11、聊一聊瀏覽器的渲染機(jī)制，瀏覽器是怎么解析和渲染html的？【描述】

12、js 異步加載的方式？defer 和 async 的區(qū)別？【描述】
（1）defer 是在HTML解析完之后才會(huì)執(zhí)行，如果是多個(gè)，按照加載的順序依次執(zhí)行
（2）async 是在加載完之后立即執(zhí)行，如果是多個(gè)，執(zhí)行順序和加載順序無(wú)關(guān)

13、重定向的狀態(tài)碼有哪些？它們的區(qū)別是什么？【描述】【舉例】

14、https 相較 http ，是怎么體現(xiàn)安全性的？【描述】
http: 超文本傳輸協(xié)議(Hypertext Transfer Protocol)，是互聯(lián)網(wǎng)上應(yīng)用最為廣泛的一種網(wǎng)絡(luò)協(xié)議，是一個(gè)客戶端和服務(wù)器端請(qǐng)求和應(yīng)答的標(biāo)準(zhǔn)（TCP），它是一個(gè)在計(jì)算機(jī)世界里專門(mén)在兩點(diǎn)之間傳輸文字、圖片、音頻、視頻等超文本數(shù)據(jù)的約定和規(guī)范。
https 的全稱是 Hypertext Transfer Protocol Secure , 它用來(lái)在計(jì)算機(jī)網(wǎng)絡(luò)上的兩個(gè)端系統(tǒng)之間進(jìn)行安全的交換信息(secure communication). HTTPS 是 HTTP 協(xié)議的一種擴(kuò)展，它本身并不保證傳輸?shù)陌踩?#xff0c;那么誰(shuí)來(lái)保證安全性呢？在 HTTPS 中，使用傳輸層安全性(TLS)或安全套接字層(SSL)對(duì)通信協(xié)議進(jìn)行加密。也就是 HTTP + SSL(TLS) = HTTPS。
（TLS(Transport Layer Security) 是 SSL(Secure Socket Layer) 的后續(xù)版本，它們是用于在互聯(lián)網(wǎng)兩臺(tái)計(jì)算機(jī)之間用于身份驗(yàn)證和加密的一種協(xié)議。）
http 和 https 的區(qū)別

• https 協(xié)議需要 ca 證書(shū)，費(fèi)用較高

• http 數(shù)據(jù)信息是明文傳輸，https 則是具有安全性的 ssl 加密傳輸協(xié)議。

• 使用不同的鏈接方式，端口也不同，一般而言，http 協(xié)議的端口為 80 , https 的端口為 443

• http 的連接很簡(jiǎn)單，是無(wú)狀態(tài)的；https 協(xié)議是由 http + ssl 協(xié)議構(gòu)建的可進(jìn)行加密傳輸、身份認(rèn)證的網(wǎng)絡(luò)協(xié)議，比 http 協(xié)議安全

15、https 證書(shū)的作用是什么？【描述】
CA 的全稱是 Certificate Authority，證書(shū)認(rèn)證機(jī)構(gòu)，你必須讓 CA 頒布具有認(rèn)證過(guò)的公鑰，才能解決公鑰的信任問(wèn)題。

存在一個(gè)數(shù)字簽名的認(rèn)證問(wèn)題。因?yàn)樗借€是自己的，公鑰是誰(shuí)都可以發(fā)布，所以必須發(fā)布經(jīng)過(guò)認(rèn)證的公鑰，才能解決公鑰的信任問(wèn)題。

16、講一下js原型鏈【描述】

17、由構(gòu)造函數(shù)創(chuàng)建的實(shí)例對(duì)象，和構(gòu)造函數(shù)本身，他們的原型鏈有什么區(qū)別？【描述】

18、講一下閉包？實(shí)際開(kāi)發(fā)中有什么應(yīng)用？【描述】【舉例】

19、flex 布局相關(guān)都有哪些屬性？含義是什么？flex 屬性對(duì)應(yīng)哪幾個(gè)屬性【描述】

20、flex-grow 和 flex-shrink 代表什么含義【描述】
flex-grow 屬性定義項(xiàng)目的放大比例，默認(rèn)為0，即如果存在剩余空間，也不放大。
flex-shrink 屬性定義了項(xiàng)目的縮小比例，默認(rèn)為1，即如果空間不足，該項(xiàng)目將縮小。

21、CommonJS 與 ESModule 的區(qū)別【描述】

22、Tree-shaking 原理【描述】

23、ESModule 模塊化是怎么解決循環(huán)引用的問(wèn)題的【描述】
參考 https://es6.ruanyifeng.com/#docs/module-loader#%E5%BE%AA%E7%8E%AF%E5%8A%A0%E8%BD%BD

24、你對(duì) react 怎么看待？【描述】

25、你是通過(guò)什么手段去學(xué)習(xí)前端技術(shù)的？【描述】

二面

1、最近在學(xué)習(xí)什么新技術(shù)？Vue3.0做了哪些優(yōu)化【描述】

2、說(shuō)一個(gè)你做過(guò)印象最深刻的項(xiàng)目【描述】

3、對(duì)于首屏加速，你有哪些方案【描述】

4、路由懶加載有哪些方式【描述】

5、說(shuō)一下你對(duì)模塊化的理解，CommonJS 和 ESModule 有什么區(qū)別？【描述】

• CommonJS 模塊輸出的是一個(gè)值的拷貝，ES6 模塊輸出的是值的引用。

• CommonJS 模塊是運(yùn)行時(shí)加載，ES6 模塊是編譯時(shí)輸出接口。

• CommonJS 模塊的 require() 是同步加載模塊，ES6 模塊的 import 命令是異步加載，有一個(gè)獨(dú)立的模塊依賴的解析階段。

6、打包結(jié)果里面出現(xiàn)重復(fù)包的情況，怎么解決【描述】

7、有哪些手段可以加快 webpack 打包速度【描述】

• 使用高版本的webpack (使用webpack4)

• 多線程/多實(shí)例構(gòu)建：HappyPack(不維護(hù)了) thread-loader

• 縮小打包作用域

• 充分利用緩存提升二次構(gòu)建速度

• DLLPlugin 提前打包、分包，避免反復(fù)編譯浪費(fèi)時(shí)間

8、移動(dòng)端開(kāi)發(fā)，是怎么適配的？有沒(méi)有辦法在打包時(shí)將 px 轉(zhuǎn)換為 rem【描述】

9、描述一下 Vue 中 template 模板編譯的過(guò)程【描述】

10、說(shuō)下 vue-router 的實(shí)現(xiàn)原理【描述】

11、有沒(méi)有方案，當(dāng) history.pushState 改變了瀏覽器地址欄后，監(jiān)聽(tīng)到地址改變【描述】
- 利用觀察者模式
- 重寫(xiě) history 方法，并添加 window.addHistoryListener 事件機(jī)制

12、你覺(jué)得怎樣才算是一個(gè)高標(biāo)準(zhǔn)的組件庫(kù)【描述】

13、組件庫(kù)的文檔是怎么開(kāi)發(fā)的？【描述】

• 手工維護(hù)方案：建工程手動(dòng)引用組件，書(shū)寫(xiě)示例和說(shuō)明

• elementUI 方案：示例和說(shuō)明按照一定規(guī)則寫(xiě)在md文件中，調(diào)用md-loader將md文件轉(zhuǎn)成相應(yīng)的頁(yè)面

• Storybook 方案：Storybook是UI組件的開(kāi)發(fā)環(huán)境。它允許您瀏覽組件庫(kù)，查看每個(gè)組件的不同狀態(tài)，以及交互式開(kāi)發(fā)和測(cè)試組件。

14、組件庫(kù)怎么進(jìn)行本地開(kāi)發(fā)調(diào)試？【描述】
（1）本地寫(xiě)demo
（2）本地編譯，拷貝到業(yè)務(wù)系統(tǒng)，替換 node_module 下的靜態(tài)資源進(jìn)行測(cè)試
15、求實(shí)現(xiàn)：有個(gè)請(qǐng)求，10秒內(nèi)可以重試3次，如果3次都失敗，就拋出異常【偽代碼】
利用 setTimeout 和 Promise.race 實(shí)現(xiàn)
16、說(shuō)一下你的職業(yè)規(guī)劃【描述】

最后

樸樸科技致力于研發(fā)新零售即時(shí)電商領(lǐng)域的標(biāo)桿系統(tǒng)，樸樸超市定位于一站式移動(dòng)端30分鐘即時(shí)配送購(gòu)物平臺(tái)。公司技術(shù)棧主要是 React+TS，兩輪技術(shù)面試官挺強(qiáng)的，問(wèn)的問(wèn)題覆蓋前端各方面，專業(yè)，準(zhǔn)備約HR面談薪資的，因?yàn)橛衅渌线m的offer了，被我委婉拒絕了。
往期回顧：

• 三年經(jīng)驗(yàn)前端社招——Shopee

• 三年經(jīng)驗(yàn)前端社招——騰訊微保

• 三年經(jīng)驗(yàn)前端社招——豐巢科技

• 三年經(jīng)驗(yàn)前端社招——眾安保險(xiǎn)

• 三年經(jīng)驗(yàn)前端社招——有贊

天生我材必有用，千金散盡還復(fù)來(lái)

---

最近組建了一個(gè)湖南人的前端交流群，如果你是湖南人可以加我微信?ruochuan12?私信?湖南?拉你進(jìn)群。

---

推薦閱讀

1個(gè)月，200+人，一起讀了4周源碼
我讀源碼的經(jīng)歷

老姚淺談：怎么學(xué)JavaScript？

我在阿里招前端，該怎么幫你（可進(jìn)面試群）

·················?若川簡(jiǎn)介?·················

你好，我是若川，畢業(yè)于江西高校。現(xiàn)在是一名前端開(kāi)發(fā)“工程師”。寫(xiě)有《學(xué)習(xí)源碼整體架構(gòu)系列》10余篇，在知乎、掘金收獲超百萬(wàn)閱讀。
從2014年起，每年都會(huì)寫(xiě)一篇年度總結(jié)，已經(jīng)寫(xiě)了7篇，點(diǎn)擊查看年度總結(jié)。
同時(shí)，最近組織了源碼共讀活動(dòng)，幫助1000+前端人學(xué)會(huì)看源碼。公眾號(hào)愿景：幫助5年內(nèi)前端人走向前列。

識(shí)別上方二維碼加我微信、拉你進(jìn)源碼共讀群

今日話題

略。歡迎分享、收藏、點(diǎn)贊、在看我的公眾號(hào)文章~

總結(jié)

以上是生活随笔為你收集整理的三年经验前端社招——朴朴科技的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。