前言
前段面試平安科技的前端開發(fā)，四輪技術(shù)面一輪hr面，成功拿到了offer，下面總結(jié)了技術(shù)面被問到的一些題目，大家可以參考一下～
一面
一面比較順利，問的都是比較基礎(chǔ)的東西
類型檢測
列舉日常使用識別對象與基本類型的方法？
- typeof
- instanceof
- object.prototype.toString.call()
- constructor.toString()
this指向
列舉不同情境下的this指向？
- 直接調(diào)用，this指向window
- 在函數(shù)里調(diào)用，this指向window
- new 調(diào)用構(gòu)造函數(shù)，this指向創(chuàng)建的新對象
- 在對象的方法里調(diào)用，this指向該對象
列舉日常使用改變this的方法？
- new
- call
- apply
- bind
閉包
什么是閉包？
- 函數(shù)嵌套函數(shù)
- 可以引用外部變量
- 參數(shù)和變量不會被回收
閉包使用場景？
- 保護(hù)變量，只有閉包函數(shù)才可以訪問
- 在內(nèi)存中維持一個(gè)變量
EventLoop
描述事件隊(duì)列的過程？
- js是單線程的，會出現(xiàn)阻塞問題，因此有了異步隊(duì)列的出現(xiàn)
- 主進(jìn)程同步執(zhí)行任務(wù)，異步操作將添加到異步隊(duì)列中
- 等候主進(jìn)程執(zhí)行完畢后再執(zhí)行異步隊(duì)列中的操作
什么是宏任務(wù)什么是微任務(wù)？
- 異步隊(duì)列中有宏任務(wù)微任務(wù)之分
- 一次事件循環(huán)：先運(yùn)行宏任務(wù)隊(duì)列中的一個(gè)，然后運(yùn)行微任務(wù)隊(duì)列中的所有任務(wù)。接著開始下一次循環(huán)
哪些是宏任務(wù)哪些是微任務(wù)？
- 宏任務(wù)
- setTimeout
- setImmediate
- setIntarval
- requestAnimationFrame
- I/O
- UI rendering
- 微任務(wù)
- process.nextTick
- Promise.then
- Object.observe
- MutationObserver
http緩存
了解http緩存嗎？
談?wù)効刂苃ttp緩存的頭部字段？
- 強(qiáng)緩存
- cache-control
- Expires
- Pragma
- 協(xié)商緩存
- last-modified
- Etag
走不同緩存策略的狀態(tài)碼了解過嗎？
- 304
- 200
對象深拷貝
平時(shí)如何處理對象深拷貝？他們之間的區(qū)別？
- JQ
- $.extend(true, {}, xxx)
- lodash.cloneDeep()
- 解決ES6一些新的內(nèi)置對象的拷貝情況
- 解決環(huán)對象的情況
- JSON
- 只能處理能夠被JSON直接表示的數(shù)據(jù)結(jié)構(gòu)
- messagechannel
- 利用postMessage(obj)
- history API
- history.replaceState(obj, document.title)
- notification API
- new Notification(‘’, {data: obj, silent: true}).data
自己實(shí)現(xiàn)一個(gè)對象深拷貝方法的話要注意哪些問題？
- 對正則對象，日期對象，函數(shù)的特殊處理
- 對環(huán)形引用對象的特殊處理
vue
了解過vue插件的調(diào)用方式嗎？自己寫過vue插件嗎？
vue.use()
插件提供公開方法install
-
插件出現(xiàn)的形式
添加全局方法或者屬性
添加全局資源：指令/過濾器/過渡等
通過全局 mixin 方法添加一些組件選項(xiàng)
添加 Vue 實(shí)例方法，通過把它們添加到 Vue.prototype 上實(shí)現(xiàn)
vue的數(shù)據(jù)綁定原理了解過嗎？
Object.defineProperty()
依賴集Dep
觀察者watcher
webpack
描述一下項(xiàng)目中使用過的webpack的一些優(yōu)化配置和相關(guān)插件？
- happypack
- dllplugin
- commons-chunk-plugin
- html-webpack-plugin
- extract-text-webpack-plugin
- optimize-css-assets-webpack-plugin
- uglifyjs-webpack-plugin
- imagemin-webapack-plugin
- copy-webpack-plugin
二面
二面也是問基礎(chǔ)，也考察了項(xiàng)目經(jīng)歷和個(gè)人軟實(shí)力
項(xiàng)目經(jīng)歷考察
做過的項(xiàng)目？有亮點(diǎn)？遇到了什么困難？如何解決的？你在里面是什么角色？
- 略
個(gè)人軟實(shí)力考察
你平時(shí)的學(xué)習(xí)途徑是什么？看過什么書？有木有自己造過輪子？
- 筆者看的書不算多，知識更多的是從網(wǎng)絡(luò)上而來，而且平時(shí)也有寫博客總結(jié)啥的。。馬馬虎虎算是蒙騙過關(guān)了-.-
你們團(tuán)隊(duì)有什么提高效率的方法和措施？有什么代碼規(guī)范約定？
- 略
網(wǎng)絡(luò)基礎(chǔ)
說說Etag的缺點(diǎn)？
服務(wù)器需要計(jì)算Etag，會有性能損失
不同操作系統(tǒng)，web服務(wù)器對于ETag的計(jì)算方法也不同，當(dāng)使用不同操作系統(tǒng)，不同類型的web服務(wù)器做負(fù)載均衡的時(shí)候，如果用ETag作為判斷條件，在被負(fù)載均衡到不同服務(wù)器后，則很容易導(dǎo)致緩存失效。
協(xié)商緩存304發(fā)生了什么事情？
- 緩存過期后向服務(wù)器發(fā)起請求驗(yàn)證緩存是否有效，有效的話則返回304，不包含任何主體部分，直接使用緩存資源。
了解https的原理和過程嗎？
- SSL
- CA證書
- 非對稱密鑰對對稱密鑰加密，對稱密鑰加密對話內(nèi)容
情景：公司的網(wǎng)站遇到劫持，頁面在上面?出現(xiàn)一些未知的內(nèi)容，原因會是啥？
運(yùn)營商劫持？不是
做https了嗎？做了
做CSP了嗎？做了
跨域了解過嗎？為什么會存在跨域問題？為什么瀏覽器會有同源策略？跨域的方式有哪些？
同源策略限制了從同一個(gè)源加載的文檔或腳本如何與來自另一個(gè)源的資源進(jìn)行交互。這是一個(gè)用于隔離潛在惡意文件的重要安全機(jī)制。
CORS
JSONP
-
iframe
- document.domain
- window.name
- location.hash
- postMessage
vue
vue的異步隊(duì)列更新機(jī)制了解過嗎？
- 基于JS的EventLoop
vuex怎么做到全局共享的？原理是什么？為什么要使用vuex？
全局注入vuex
內(nèi)部使用vue進(jìn)行數(shù)據(jù)綁定
獲取options中的store，假如是根組件，則賦值給store；假如是子組件則獲取父組件的store，這樣就保證所有組件引用同一份store實(shí)例啦。
JSBridge
項(xiàng)目中JSBridge是如何實(shí)現(xiàn)的？有哪幾種方法？利弊是什么？
全局注入API
偽協(xié)議URL scheme-使用iframe
監(jiān)聽prompt/alert/console
事件
事件捕捉和冒泡了解是嗎？事件委托呢？
移動(dòng)端的點(diǎn)擊事件有300ms的延遲，了解過嗎？原因是什么？有采取過什么解決方法嗎？
- fastClick使用原理
三面
三面應(yīng)該是前端leader了，考察項(xiàng)目經(jīng)歷和一些實(shí)際場景的解決方案。
設(shè)計(jì)模式的了解
- 嘩嘩嘩說了一大堆設(shè)計(jì)模式名字，，
閉包
閉包的使用情景？寫一個(gè)你剛提到的單例模式，里面使用閉包實(shí)現(xiàn)
- 經(jīng)過引導(dǎo)了一下，寫出來了
promise
情景： 發(fā)起一個(gè)請求，若請求在1秒內(nèi)成功返回，則顯示loading菊花圖直到1秒結(jié)束，若請求超過1秒返回，返回成功后loading菊花圖直接消失
new Date() 計(jì)時(shí)，計(jì)算時(shí)間差來判斷菊花圖是否關(guān)閉（這是我回答的也是最蠢的答案）
使用setTimeout優(yōu)化一下（這是引導(dǎo)后的做法）
// 菊花圖
let loading = true
// 請求標(biāo)志
let pending = true
// 定時(shí)標(biāo)志
let timer = true
setTimeout(() => {
// 定時(shí)結(jié)束
timer = false
// 若請求已結(jié)束，則關(guān)閉菊花圖
if (!pending) {
loading = false
}
}, 1000)
p.then(() => {
// 請求結(jié)束
pending = false
// 若定時(shí)已結(jié)束，則關(guān)閉菊花圖
if (!timer) {
loading = false
}
})
- 使用promise.all（經(jīng)過引導(dǎo)后，原來面試官是想我從這個(gè)角度出發(fā)）
// 菊花圖
let loading = true
let p1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve()
}, 1000)
})
let p2 = function (resolve, reject) {
return fetch(...).then((res) => {
return res
})
}
Promise.all([p1, p2]).then(() => {
loading = false
})
四面
我猜應(yīng)該是web端leader，，問了好多網(wǎng)絡(luò)基礎(chǔ)的知識，有部分和前面三輪重復(fù)的知識就不再贅述了。
網(wǎng)絡(luò)基礎(chǔ)
DNS協(xié)議了解過嗎？DNS劫持了解過嗎？
DNS服務(wù)器通過多層查詢將解析域名為IP地址
域名劫持是指在劫持的網(wǎng)絡(luò)范圍內(nèi)攔截域名解析的請求，分析請求的域名，把審查范圍以外的請求放行，否則返回假的IP地址或者什么都不做使請求失去響應(yīng)，其效果就是對特定的網(wǎng)絡(luò)不能訪問或訪問的是假網(wǎng)址。
TCP握手過程了解過嗎？說說TCP握手滑動(dòng)窗口？
三次握手原理
-
滑動(dòng)窗口真的不熟悉。。大家可以根據(jù)以下方面回答一下
滑動(dòng)窗口機(jī)制提供的功能，解決的問題
發(fā)送方窗口分為4類，接收方窗口分為3類
窗口縮放原理
談?wù)凾CP/IP？網(wǎng)絡(luò)層了解過嗎？數(shù)據(jù)鏈路層了解過嗎？從傳輸層拿到IP地址后發(fā)生了什么？
- 網(wǎng)絡(luò)層的協(xié)議
- IP
- ICMP
- ARP 與 RARP
職業(yè)規(guī)劃
- 略
最后
hr面沒啥分享的，就是討論一下職業(yè)規(guī)劃，跳槽原因和期望薪酬，大家不要撒謊就行啦～
在hr面試通過后拿到了offer，整個(gè)過程下來還是比較順利的，考察了很多基礎(chǔ)知識，特別是網(wǎng)絡(luò)方面的；有一點(diǎn)就是，全程沒有問到數(shù)據(jù)結(jié)構(gòu)和算法。
最后提醒一下大家一定要注重web基礎(chǔ)知識和數(shù)據(jù)結(jié)構(gòu)算法，這些幾乎是每個(gè)公司每場面試的考察點(diǎn)噢～！
完。
