三年经验前端社招——朴朴科技
大家好，我是若川，祝大家中秋節(jié)快樂。最近組織了源碼共讀活動《1個月，200+人，一起讀了4周源碼》，已經(jīng)有超50+人提交了筆記，群里已經(jīng)有超1200人，感興趣的可以點此鏈接掃碼加我微信?ruochuan12?參與。
本文經(jīng)作者@lxcan 授權(quán)轉(zhuǎn)載，未經(jīng)授權(quán)請勿直接轉(zhuǎn)載。
原文標(biāo)題：《三年經(jīng)驗前端社招——樸樸科技》
原文鏈接：https://zhuanlan.zhihu.com/p/405785932
文末點擊閱讀原文直達(dá)
前言
本人畢業(yè)學(xué)校是雙非二本，非計算機科班出身，大學(xué)時自學(xué)的前端相關(guān)技能。截止2021年8月，有3年前端開發(fā)經(jīng)驗，技術(shù)棧為 vue 全家桶，求職意向城市是深圳。想著找一個更大的平臺尋求發(fā)展（技術(shù)沉淀、漲薪），所以出來接受社會的毒打了。。。
本文的目的是記錄自己的面試經(jīng)歷，各位路過的兄dei也可以參考一下，也讓自己有個回顧和反思。路漫漫其修遠(yuǎn)兮，吾將上下而求索
下面的題目，都會標(biāo)明每一題的性質(zhì)，部分題目也會給出一些參考思路和參考回答，希望各位大佬不吝賜教~
描述：對概念、過程的描述，純理論性問答題為主
舉例：說出應(yīng)用場景，或者是自己團(tuán)隊實踐的情況
偽代碼：寫代碼，但不需要跑起來，甚至可以隨便寫偽代碼，主要目的是描述思路
編程：真正的寫代碼，需要跑起來，有測試用例，要看到效果
HR面的話，是一些日常、項目回顧（少說技術(shù)細(xì)節(jié)）、職業(yè)規(guī)劃、你的優(yōu)勢和缺點、為什么跑路、為什么選擇這邊、目前薪資和職級、期望薪資，HR面基本離不開這些問題。
一面
1、項目問題，深挖細(xì)節(jié)，說幾個做過的項目中，你覺得比較復(fù)雜的功能【描述】
2、h5 首頁為什么做成了服務(wù)端渲染？【描述】
3、打包結(jié)果優(yōu)化，具體做了哪些優(yōu)化【描述】【舉例】
4、vue 中 beforeCreate 和 created 的區(qū)別【描述】
5、vue 中用過哪些修飾器？【舉例】
事件修飾符
.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 一般用于簡化模板中變量的調(diào)用
watch 一般用于監(jiān)聽數(shù)據(jù)的變化，做一些邏輯處理或者異步處理，可以深度監(jiān)聽、立即執(zhí)行
computed 和 watch 在源碼里都是通過 Watcher 類創(chuàng)建出來的
初始化時，先創(chuàng)建 computed 再創(chuàng)建 watch 。數(shù)據(jù)改變時，先執(zhí)行 computed 再執(zhí)行 watch
7、vue 中 key 的作用是什么？【描述】
Key 的作用：
主要用來在虛擬 DOM 的 diff 算法中，在新舊節(jié)點的對比時辨別 vnode ，使用 key 時，Vue 會基于 key 的變化重新排列元素順序，盡可能的復(fù)用頁面元素，只找出必須更新的DOM，最終可以減少DOM操作。常見的列子是結(jié)合 v-for 來進(jìn)行列表渲染，或者用于強制替換元素/組件。
設(shè)置 Key 的好處：
（1）數(shù)據(jù)更新時，可以盡可能的減少DOM操作；
（2）列表渲染時，可以提高列表渲染的效率，提高頁面的性能；
8、比如，在 v-for 時寫了 key ，將第二個元素和第三個元素交換了順序，實際的 diff 算法怎樣的【描述】
9、有沒有做過組件的抽離和組件庫的開發(fā)？具體做了什么工作【描述】
10、內(nèi)部組件庫，怎么本地開發(fā)和調(diào)試？怎么上線？本地調(diào)試有哪些方式【描述】【舉例】
11、聊一聊瀏覽器的渲染機制，瀏覽器是怎么解析和渲染html的？【描述】
12、js 異步加載的方式？defer 和 async 的區(qū)別？【描述】
（1）defer 是在HTML解析完之后才會執(zhí)行，如果是多個，按照加載的順序依次執(zhí)行
（2）async 是在加載完之后立即執(zhí)行，如果是多個，執(zhí)行順序和加載順序無關(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é)議，是一個客戶端和服務(wù)器端請求和應(yīng)答的標(biāo)準(zhǔn)（TCP），它是一個在計算機世界里專門在兩點之間傳輸文字、圖片、音頻、視頻等超文本數(shù)據(jù)的約定和規(guī)范。
https 的全稱是 Hypertext Transfer Protocol Secure , 它用來在計算機網(wǎng)絡(luò)上的兩個端系統(tǒng)之間進(jìn)行安全的交換信息(secure communication). HTTPS 是 HTTP 協(xié)議的一種擴(kuò)展，它本身并不保證傳輸?shù)陌踩?#xff0c;那么誰來保證安全性呢？在 HTTPS 中，使用傳輸層安全性(TLS)或安全套接字層(SSL)對通信協(xié)議進(jìn)行加密。也就是 HTTP + SSL(TLS) = HTTPS。
（TLS(Transport Layer Security) 是 SSL(Secure Socket Layer) 的后續(xù)版本，它們是用于在互聯(lián)網(wǎng)兩臺計算機之間用于身份驗證和加密的一種協(xié)議。）
http 和 https 的區(qū)別
https 協(xié)議需要 ca 證書，費用較高
http 數(shù)據(jù)信息是明文傳輸，https 則是具有安全性的 ssl 加密傳輸協(xié)議。
使用不同的鏈接方式，端口也不同，一般而言，http 協(xié)議的端口為 80 , https 的端口為 443
http 的連接很簡單，是無狀態(tài)的；https 協(xié)議是由 http + ssl 協(xié)議構(gòu)建的可進(jìn)行加密傳輸、身份認(rèn)證的網(wǎng)絡(luò)協(xié)議，比 http 協(xié)議安全
15、https 證書的作用是什么？【描述】
CA 的全稱是 Certificate Authority，證書認(rèn)證機構(gòu)，你必須讓 CA 頒布具有認(rèn)證過的公鑰，才能解決公鑰的信任問題。
存在一個數(shù)字簽名的認(rèn)證問題。因為私鑰是自己的，公鑰是誰都可以發(fā)布，所以必須發(fā)布經(jīng)過認(rèn)證的公鑰，才能解決公鑰的信任問題。
16、講一下js原型鏈【描述】
17、由構(gòu)造函數(shù)創(chuàng)建的實例對象，和構(gòu)造函數(shù)本身，他們的原型鏈有什么區(qū)別？【描述】
18、講一下閉包？實際開發(fā)中有什么應(yīng)用？【描述】【舉例】
19、flex 布局相關(guān)都有哪些屬性？含義是什么？flex 屬性對應(yīng)哪幾個屬性【描述】
20、flex-grow 和 flex-shrink 代表什么含義【描述】
flex-grow 屬性定義項目的放大比例，默認(rèn)為0，即如果存在剩余空間，也不放大。
flex-shrink 屬性定義了項目的縮小比例，默認(rèn)為1，即如果空間不足，該項目將縮小。
21、CommonJS 與 ESModule 的區(qū)別【描述】
22、Tree-shaking 原理【描述】
23、ESModule 模塊化是怎么解決循環(huán)引用的問題的【描述】
參考 https://es6.ruanyifeng.com/#docs/module-loader#%E5%BE%AA%E7%8E%AF%E5%8A%A0%E8%BD%BD
24、你對 react 怎么看待？【描述】
25、你是通過什么手段去學(xué)習(xí)前端技術(shù)的？【描述】
二面
1、最近在學(xué)習(xí)什么新技術(shù)？Vue3.0做了哪些優(yōu)化【描述】
2、說一個你做過印象最深刻的項目【描述】
3、對于首屏加速，你有哪些方案【描述】
4、路由懶加載有哪些方式【描述】
5、說一下你對模塊化的理解，CommonJS 和 ESModule 有什么區(qū)別？【描述】
CommonJS 模塊輸出的是一個值的拷貝，ES6 模塊輸出的是值的引用。
CommonJS 模塊是運行時加載，ES6 模塊是編譯時輸出接口。
CommonJS 模塊的 require() 是同步加載模塊，ES6 模塊的 import 命令是異步加載，有一個獨立的模塊依賴的解析階段。
6、打包結(jié)果里面出現(xiàn)重復(fù)包的情況，怎么解決【描述】
7、有哪些手段可以加快 webpack 打包速度【描述】
使用高版本的webpack (使用webpack4)
多線程/多實例構(gòu)建：HappyPack(不維護(hù)了) thread-loader
縮小打包作用域
充分利用緩存提升二次構(gòu)建速度
DLLPlugin 提前打包、分包，避免反復(fù)編譯浪費時間
8、移動端開發(fā)，是怎么適配的？有沒有辦法在打包時將 px 轉(zhuǎn)換為 rem【描述】
9、描述一下 Vue 中 template 模板編譯的過程【描述】
10、說下 vue-router 的實現(xiàn)原理【描述】
11、有沒有方案，當(dāng) history.pushState 改變了瀏覽器地址欄后，監(jiān)聽到地址改變【描述】
- 利用觀察者模式
- 重寫 history 方法，并添加 window.addHistoryListener 事件機制
12、你覺得怎樣才算是一個高標(biāo)準(zhǔn)的組件庫【描述】
13、組件庫的文檔是怎么開發(fā)的？【描述】
手工維護(hù)方案：建工程手動引用組件，書寫示例和說明
elementUI 方案：示例和說明按照一定規(guī)則寫在md文件中，調(diào)用md-loader將md文件轉(zhuǎn)成相應(yīng)的頁面
Storybook 方案：Storybook是UI組件的開發(fā)環(huán)境。它允許您瀏覽組件庫，查看每個組件的不同狀態(tài)，以及交互式開發(fā)和測試組件。
14、組件庫怎么進(jìn)行本地開發(fā)調(diào)試？【描述】
（1）本地寫demo
（2）本地編譯，拷貝到業(yè)務(wù)系統(tǒng)，替換 node_module 下的靜態(tài)資源進(jìn)行測試
15、求實現(xiàn)：有個請求，10秒內(nèi)可以重試3次，如果3次都失敗，就拋出異常【偽代碼】
利用 setTimeout 和 Promise.race 實現(xiàn)
16、說一下你的職業(yè)規(guī)劃【描述】
最后
樸樸科技致力于研發(fā)新零售即時電商領(lǐng)域的標(biāo)桿系統(tǒng)，樸樸超市定位于一站式移動端30分鐘即時配送購物平臺。公司技術(shù)棧主要是 React+TS，兩輪技術(shù)面試官挺強的，問的問題覆蓋前端各方面，專業(yè)，準(zhǔn)備約HR面談薪資的，因為有其他更合適的offer了，被我委婉拒絕了。
往期回顧：
三年經(jīng)驗前端社招——Shopee
三年經(jīng)驗前端社招——騰訊微保
三年經(jīng)驗前端社招——豐巢科技
三年經(jīng)驗前端社招——眾安保險
三年經(jīng)驗前端社招——有贊
天生我材必有用，千金散盡還復(fù)來
最近組建了一個湖南人的前端交流群，如果你是湖南人可以加我微信?ruochuan12?私信?湖南?拉你進(jìn)群。
推薦閱讀
1個月，200+人，一起讀了4周源碼
我讀源碼的經(jīng)歷
老姚淺談：怎么學(xué)JavaScript？
我在阿里招前端，該怎么幫你（可進(jìn)面試群）
·················?若川簡介?·················
你好，我是若川，畢業(yè)于江西高校。現(xiàn)在是一名前端開發(fā)“工程師”。寫有《學(xué)習(xí)源碼整體架構(gòu)系列》10余篇，在知乎、掘金收獲超百萬閱讀。
從2014年起，每年都會寫一篇年度總結(jié)，已經(jīng)寫了7篇，點擊查看年度總結(jié)。
同時，最近組織了源碼共讀活動，幫助1000+前端人學(xué)會看源碼。公眾號愿景：幫助5年內(nèi)前端人走向前列。
識別上方二維碼加我微信、拉你進(jìn)源碼共讀群
今日話題
略。歡迎分享、收藏、點贊、在看我的公眾號文章~
總結(jié)
以上是生活随笔為你收集整理的三年经验前端社招——朴朴科技的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 前端学习（3201）：react插件
- 下一篇： 三年经验前端社招——丰巢科技