關(guān)注若川視野, 回復(fù)"pdf" 領(lǐng)取資料，回復(fù)"加群"，可加群長(zhǎng)期交流

前言

最近一個(gè)星期面了幾家公司，最后收獲了心儀的網(wǎng)易有道offer，于是推掉了其他的面試，至于一些其他大廠，并沒(méi)有投簡(jiǎn)歷，由于種種原因（就是菜），準(zhǔn)備目前先踏實(shí)的學(xué)吧。

希望大家秋招順利，成為offer收割機(jī)。

最有意思的就是網(wǎng)易有道第三輪技術(shù)面試，因?yàn)檫@個(gè)沒(méi)有具體的答案，有興趣的可以看看，我就先把這個(gè)第三輪面試場(chǎng)景題拿出來(lái)吧，其他的一些基礎(chǔ)的話，自己可以過(guò)一遍。

網(wǎng)易有道

三面

第三輪面試的是一個(gè)小哥哥，面試全程大概70分鐘，本來(lái)是遠(yuǎn)程面試的，但是因?yàn)槁曇舻膯?wèn)題，所以選擇的就是電話面試了，小哥哥也挺好的，給我感覺(jué)就是很厲害的感覺(jué)，確實(shí)，接下來(lái)的問(wèn)題，我就知道不簡(jiǎn)單了。

第一個(gè)場(chǎng)景問(wèn)題

比如直播的場(chǎng)景，你應(yīng)該知道吧，你需要實(shí)現(xiàn)一個(gè)這樣子的場(chǎng)景，比如某個(gè)老師點(diǎn)擊某個(gè)地方，比如U盤(pán)，你這個(gè)時(shí)候需要展示U盤(pán)的動(dòng)畫(huà)效果，比如這個(gè)時(shí)候，老師點(diǎn)擊這個(gè)電腦屏幕，你需要展示一個(gè)小電腦的動(dòng)畫(huà)效果，向上述這樣子，「需要在特定的時(shí)間點(diǎn)，完成特定的動(dòng)畫(huà)效果」。

• 嗯，這個(gè)問(wèn)題，我的想法是，動(dòng)畫(huà)是例外加上去的，如果說(shuō)是直接后期處理的話，那應(yīng)該跟我們前端的關(guān)系不大了，所以我們接下來(lái)的問(wèn)題，就是如何去處理，時(shí)間同步的問(wèn)題，怎么在具體的時(shí)間點(diǎn)，開(kāi)始展示動(dòng)畫(huà)呢

• 第二個(gè)問(wèn)題，假設(shè)我們可以獲取到某個(gè)時(shí)間點(diǎn)的動(dòng)畫(huà)，那么接下來(lái)，小哥哥，給我們提出了一個(gè)新的問(wèn)題，就是當(dāng)你的網(wǎng)絡(luò)擁塞時(shí)，比如有延遲的時(shí)候，這個(gè)時(shí)候，出現(xiàn)卡頓的效果，原本需要5秒播放完的，可能需要7秒，那么你是如何去解決動(dòng)畫(huà)同步的？

嗯，我沒(méi)有做過(guò)這種類似的問(wèn)題，所以回答起來(lái)感覺(jué)很吃力，有了解的小伙伴可以評(píng)論留下你們的答案，我虛心學(xué)習(xí)。

第二個(gè)場(chǎng)景問(wèn)題

有一個(gè)場(chǎng)景，在一個(gè)輸入框輸入內(nèi)容，怎么更加高效的去提示用戶你輸入的信息，舉個(gè)例子，你輸入天貓，那么對(duì)應(yīng)的提示信息是天貓商城，天貓集團(tuán)，這個(gè)信息如何最快的獲取，有沒(méi)有不需要發(fā)請(qǐng)求的方式來(lái)實(shí)現(xiàn)？

• 比如數(shù)據(jù)請(qǐng)求的時(shí)候，盡量發(fā)的請(qǐng)求少，那么可以做防抖和節(jié)流處理

• 接下來(lái)的小哥哥，給了新的場(chǎng)景，當(dāng)你的服務(wù)器掛了，數(shù)據(jù)取不到，那如何設(shè)計(jì)一個(gè)小型的本地?cái)?shù)據(jù)庫(kù)

• 接下來(lái)問(wèn)題就是如何設(shè)計(jì)一個(gè)本地的數(shù)據(jù)，優(yōu)化的點(diǎn)，就是盡可能的快，每次查詢數(shù)據(jù)盡可能的快

• 我的第一個(gè)思路，是key-value這樣子去設(shè)計(jì)，但是隨后就被小哥哥給質(zhì)疑出問(wèn)題了，舉個(gè)例子，如果按照你的想法，如果關(guān)鍵字為 天，天貓，這樣子設(shè)計(jì)數(shù)據(jù)的話，就會(huì)存在被數(shù)據(jù)重復(fù)，這樣子顯然是不合理的。

• 想了很久，這個(gè)時(shí)候，既然有前綴重合的情況，那么是不是有一種數(shù)據(jù)結(jié)構(gòu)可以解決這個(gè)問(wèn)題呢？?

• 字典樹(shù)，我們可以在本地建立一個(gè)預(yù)讀的字典樹(shù)，這樣子的話，根據(jù)用戶輸入的內(nèi)容，查字典樹(shù)，這個(gè)時(shí)間復(fù)雜度大概就是O(m+n)，所以很大程度上加快了查找效率。

當(dāng)然了，有更好的解決辦法的話，可以留下你們的答案，看看你們是如何解決問(wèn)題的。

第三個(gè)場(chǎng)景問(wèn)題

Git版本工具你使用過(guò)吧，那你能不能實(shí)現(xiàn)一個(gè)這樣子的效果，完成Git Diff算法，比較兩個(gè)文件的不同，然后說(shuō)一說(shuō)具體的思路，這個(gè)過(guò)程怎么去比較的？兩個(gè)文件不同的位置如何標(biāo)注出來(lái)，如何找出這個(gè)不同，具體說(shuō)一說(shuō)思路。

• 一開(kāi)始我想的是diff算法，比如是vue中的虛擬dom算法，但是感覺(jué)不對(duì)啊，diff是做了優(yōu)化的，這里很明顯不合理，于是這個(gè)方法就不合理了。

• 那么兩個(gè)文件，該如何快速的找到對(duì)應(yīng)的兩者文件的差別呢？這個(gè)問(wèn)題想了好久，嗯，當(dāng)時(shí)自己好像是口胡了一些思路，比如去逐行逐行的比較，這樣子的話，其實(shí)也不是很合理的，仔細(xì)想一想不行

• 小哥哥提示了我，我們是不是要去找最長(zhǎng)的公共子串，這個(gè)是時(shí)候，我應(yīng)該想起來(lái)這個(gè)是兩個(gè)串的LCS,應(yīng)該就是經(jīng)典的動(dòng)態(tài)規(guī)劃問(wèn)題,最后一個(gè)問(wèn)題，確實(shí)沒(méi)有想到這個(gè)，可能就是很久沒(méi)有接觸這類動(dòng)態(tài)規(guī)劃問(wèn)題了。

• 核心應(yīng)該是動(dòng)態(tài)規(guī)劃解決LCS，以及后續(xù)的處理，可以去看看有些文章，寫(xiě)的很不錯(cuò)，我這里就不張開(kāi)啦。

Git是怎樣生成diff的：Myers算法

嗯,三面的話，考察的是你思考問(wèn)題，以及結(jié)合問(wèn)題是如何分析，可能也考了算法吧，嗯，害，挺難的。

一面

面試流程50分鐘，基本上自我介紹，我花了一分鐘介紹完自己在校經(jīng)歷，接下來(lái)就是提問(wèn)環(huán)節(jié)。

全程下來(lái)小哥哥耐心指點(diǎn)，非常溫柔，這就是我現(xiàn)象中的面試官應(yīng)該有的樣子，還會(huì)耐心去提示你，有問(wèn)題的話，也就幫助你，引導(dǎo)你怎么去回答。

H5新特性

簡(jiǎn)歷上面寫(xiě)了這個(gè)內(nèi)容，所以被問(wèn)到了，害，當(dāng)時(shí)腦子一蒙，都完全沒(méi)有答好，這里在好好的梳理一遍?

本地存儲(chǔ)特性

設(shè)備兼容特性 HTML5提供了前所未有的數(shù)據(jù)與應(yīng)用接入開(kāi)放接口

連接特性 WebSockets

網(wǎng)頁(yè)多媒體特性 支持Audio Video SVG Canvas WebGL CSS3

CSS3特性

增加拖放API、地理定位、SVG繪圖、canvas繪圖、Web Worker、WebSocket

然后我答了本地存儲(chǔ)，接下來(lái)就問(wèn)我這方便的問(wèn)題啦?

localstroge sessionstoge 區(qū)別 應(yīng)用場(chǎng)景

vue組件間通信

好幾次面試都問(wèn)了這個(gè)問(wèn)題，這個(gè)問(wèn)題我是這么看待的，取決于你平時(shí)項(xiàng)目中經(jīng)常使用的方式是哪些，所以我每次都會(huì)答三種方式，反而網(wǎng)上8種組件間通信的方式，我記不住，也覺(jué)得了解一下即可，跟面試官交流一下，你在項(xiàng)目種是如何使用的即可。

遍歷對(duì)象方法

• for in ?遍歷的也可以，不過(guò)對(duì)于非繼承的屬性名稱也會(huì)獲取到，通過(guò)hasOwnproperty判斷

• Object.keys() ?可枚舉屬性和方法名

• Object.getOwnPropertyNames() 可以獲取數(shù)組內(nèi)包括自身?yè)碛械拿杜e或不可枚舉屬性名稱字符串，如果是數(shù)組的話，還有可能獲取到length屬性

編程題?

數(shù)組去重

常規(guī)題，講清楚思路，最后小哥哥提示能不能使用O(n)，我給出了兩者方案

• Set

• 用對(duì)象特性，我覺(jué)得他就是想考這個(gè)，給你們貼一個(gè)代碼吧?

let unique = arr => {let obj = {}return arr.filter((ele) => {return obj.hasOwnProperty(typeof ele + ele) ? false : (obj[typeof ele + ele] = true)})}

數(shù)組的扁平化

let flatArr = (arr) => {return arr.reduce((res, ele) => {if(Object.prototype.toString.call(ele).slice(8,-1) === 'Array') {return [...res, ...flatArr(ele)]}else{return [...res, ele]}},[])}let arr = [1,2,3,[2,3,4,5]];console.log(flatArr(arr))

當(dāng)然了，實(shí)現(xiàn)的方式有很多種，看你自己怎么去實(shí)現(xiàn)它了，最簡(jiǎn)單的就是去遞歸對(duì)象。

深度遍歷

const tree = {name: 'root',children: [{name: 'c1',children: [{name: 'c11',children: [] },{name: 'c12',children: [] }]},{name: 'c2',children: [{name: 'c21',children: [] },{name: 'c22',children: [] }]}] }// 深度優(yōu)先的方式遍歷 打印 name // ['root', 'c1','c11', 'c12', 'c2', 'c21', 'c22']

這題，我一開(kāi)始想到的就是遞歸的寫(xiě)法，寫(xiě)完之后，然后小哥哥問(wèn)了我遞歸的缺點(diǎn)，以及如何去優(yōu)化，不用遞歸的方法該怎么去實(shí)現(xiàn)？

面試的時(shí)候，沒(méi)有寫(xiě)出來(lái)，太緊張了，不在狀態(tài)，復(fù)盤(pán)的時(shí)候，寫(xiě)了一下用「棧」的實(shí)現(xiàn)方式?

function solve(root) {let stack = [],result = [];if(!root) return [];stack.push(root)while(stack.length) {let node = stack.pop()if(node == null ) continueresult.push(node.name)for(let i = node.children.length-1; i >= 0; i--) {// 這里就是面試的重點(diǎn),應(yīng)該從后面的節(jié)點(diǎn)壓入棧中stack.push(node.children[i])}}return result}

鏈表的相加問(wèn)題?

這個(gè)是LeetCode上面的題目，我好像還寫(xiě)過(guò)，面試的最后一題的時(shí)候，我以及蒙了，完全不知道自己在干嘛，其實(shí)「鏈表題都是套路」，我連套路都沒(méi)有掌握，

這個(gè)我寫(xiě)了一個(gè)專題，把題目刷完之后，應(yīng)該遇到鏈表問(wèn)題，可以輕松解決了。

「算法與數(shù)據(jù)結(jié)構(gòu)」鏈表的9個(gè)基本操作

二面

大概的時(shí)間上的安排，算了一下，大致上是花了50分鐘吧，是個(gè)小姐姐，小姐姐好溫柔，我印象中小姐姐很nice，我記得我筆試做Promise的時(shí)候，我做錯(cuò)了，她還特意問(wèn)了我一遍，當(dāng)時(shí)我大概知道錯(cuò)了，不過(guò)呢，這個(gè)過(guò)程小姐姐是微笑的，緩解了尷尬，而且還耐心的去指導(dǎo)我，給她點(diǎn)贊呀。

ES6語(yǔ)法，Promise了解嗎

const promise = new Promise((resolve, reject) => {console.log(1);resolve();reject()console.log(2);})promise.then(() => {console.log(3);},() => {console.log("失敗的狀態(tài)")})console.log(4);

我看到以后，就直接說(shuō)答案了，這點(diǎn)不好，因?yàn)橐话愣?#xff0c;面試官出的題目肯定有點(diǎn)小坑，下次要注意了，最后面試官小姐姐還是微笑的告訴我，應(yīng)該這么去做，然后怎么怎么樣。

聊一聊map和set

這個(gè)我是跟她說(shuō)了用法，以及它們之間的區(qū)別，也就是它們經(jīng)常使用的場(chǎng)景是哪些。

順便的話，就聊了一下Weakmap，然后這里的難點(diǎn)也不是很多，就是你的明白它們兩者數(shù)據(jù)結(jié)構(gòu)的區(qū)別是啥，舉個(gè)例子說(shuō)明情況即可。

前端性能優(yōu)化

這個(gè)問(wèn)題太大了，而且對(duì)于一個(gè)實(shí)際開(kāi)發(fā)經(jīng)驗(yàn)為0的而言，這個(gè)問(wèn)題就很置命，所以呢，我就準(zhǔn)備了從URL到頁(yè)面渲染這個(gè)一塊去說(shuō)，里面的優(yōu)化點(diǎn)挺多的，可以自行去了解。

• 構(gòu)建請(qǐng)求行

• 查緩存 （重點(diǎn)說(shuō)一說(shuō)）

• dns解析（如何優(yōu)化）

• tcp http （比如減少請(qǐng)求次數(shù)，嗯，應(yīng)該還有其他優(yōu)化吧，cdn？）

• 瀏覽器渲染過(guò)程 （這里面就有優(yōu)化了，比如常見(jiàn)的如何避免回流和重繪）

• 防抖和節(jié)流處理

• webpack打包優(yōu)化也可以說(shuō)一說(shuō)，前提你得有自信

其他問(wèn)題

這場(chǎng)面試的話，給我的感覺(jué)就是，并不是跟面經(jīng)一樣，問(wèn)一些標(biāo)準(zhǔn)的答案，反而更多是跟你交流技術(shù)上的問(wèn)題，比如，你遇到的問(wèn)題，是如何去解決的。小姐姐還提到了，如果需要你做技術(shù)上的分享，你覺(jué)得你有哪些技術(shù)上的分享是可以跟團(tuán)隊(duì)分享的。

好尷尬，我一個(gè)實(shí)習(xí)生，我感覺(jué)我最近研究的是webpack打包上面的問(wèn)題，以及會(huì)的都是寫(xiě)基礎(chǔ)的內(nèi)容，所以多多少少的話，我也把我的觀點(diǎn)表達(dá)清楚了，表示我愿意去學(xué)習(xí)，愿意去分享這個(gè)技術(shù)。

---

其他面經(jīng)

這里面就是其他一些公司的問(wèn)題了，比如有贊，涂鴉等，問(wèn)題很基礎(chǔ)，所以我?guī)н^(guò)了，主要是覺(jué)得簡(jiǎn)單，所以就掉過(guò)啦。

你說(shuō)你最近在研究webpack，說(shuō)一說(shuō)

這個(gè)問(wèn)題，我介紹的時(shí)候，就直接說(shuō)了，最近在寫(xiě)博客以及研究webpack，講一講webpack一些配置，比如loader，plugins，常見(jiàn)的loader，自己配過(guò)loader的話，答起來(lái)就很流暢。

然后順便叫我說(shuō)一說(shuō)原理，這我暫時(shí)就不清楚了。

ES6了解嗎，說(shuō)一說(shuō)

嗯，就按照你平常的來(lái)說(shuō)，比如箭頭函數(shù)，展開(kāi)運(yùn)算符，Promise，然后好像就說(shuō)了這三個(gè)….太緊張了

其實(shí)還有很多都用過(guò)，這里記錄一下

• ES6類 Class

• for...of 和 for...in

• 對(duì)象的解構(gòu)

• rest操作符 / Spread操作符

• 模板字符串

• const let

閉包

嗯，這個(gè)問(wèn)題，老生常談的問(wèn)題了，就過(guò)吧，不同的人，對(duì)這個(gè)有不一樣的理解。

某知音科技

面試長(zhǎng)達(dá)80分鐘，我覺(jué)得我都快要被問(wèn)倒了，真的，這個(gè)過(guò)程太長(zhǎng)了呀，不過(guò)呢，這個(gè)小哥哥也非常nice，過(guò)程中有非常認(rèn)真聽(tīng)我講，嗯，聽(tīng)我一個(gè)人在那么巴拉巴拉半天。

• 原型

• 閉包

• 作用域

• 輸入url過(guò)程整個(gè)過(guò)程

• https區(qū)別，TLS握手

• 瀏覽器緩存

• https如何保證安全，TLS握手的過(guò)程聊一聊

• vue通信方式

• vue數(shù)據(jù)響應(yīng)式的原理，數(shù)組是怎么重寫(xiě)的

以上的答案，就不梳理了，我之前的寫(xiě)的博客都有涉及了，所以，好好準(zhǔn)備的話，其實(shí)是沒(méi)有多大的問(wèn)題的。

可以看看我之前梳理的，基本上真的全部覆蓋了?

推薦閱讀

我在阿里招前端，我該怎么幫你？（文末有福利）
如何拿下阿里巴巴 P6 的前端 Offer
如何準(zhǔn)備阿里P6/P7前端面試--項(xiàng)目經(jīng)歷準(zhǔn)備篇
大廠面試官常問(wèn)的亮點(diǎn)，該如何做出？
如何從初級(jí)到專家(P4-P7)打破成長(zhǎng)瓶頸和有效突破
若川知乎問(wèn)答：2年前端經(jīng)驗(yàn)，做的項(xiàng)目沒(méi)什么技術(shù)含量，怎么辦？
若川知乎高贊：有哪些必看的 JS庫(kù)？

末尾

你好，我是若川，江湖人稱菜如若川，歷時(shí)一年只寫(xiě)了一個(gè)學(xué)習(xí)源碼整體架構(gòu)系列~(點(diǎn)擊藍(lán)字了解我)

關(guān)注若川視野，回復(fù)"pdf" 領(lǐng)取優(yōu)質(zhì)前端書(shū)籍pdf，回復(fù)"加群"，可加群長(zhǎng)期交流學(xué)習(xí)

我的博客地址：https://lxchuan12.gitee.io?歡迎收藏

覺(jué)得文章不錯(cuò)，可以點(diǎn)個(gè)在看呀^_^另外歡迎留言交流～

小提醒：若川視野公眾號(hào)面試、源碼等文章合集在菜單欄中間【源碼精選】按鈕，歡迎點(diǎn)擊閱讀，也可以星標(biāo)我的公眾號(hào)，便于查找

總結(jié)

以上是生活随笔為你收集整理的你可能需要的网易前端三轮面经的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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