「面經(jīng)」你可能需要的三輪網(wǎng)易面經(jīng)
前言
最近一個星期面了幾家公司，最后收獲了心儀的網(wǎng)易有道offer，于是推掉了其他的面試，至于一些其他大廠，并沒有投簡歷，由于種種原因（就是菜），準備目前先踏實的學吧。
希望大家秋招順利，成為offer收割機。
最有意思的就是網(wǎng)易有道第三輪技術面試，因為這個沒有具體的答案，有興趣的可以看看，我就先把這個第三輪面試場景題拿出來吧，其他的一些基礎的話，自己可以過一遍。
網(wǎng)易有道
三面
第三輪面試的是一個小哥哥，面試全程大概70分鐘，本來是遠程面試的，但是因為聲音的問題，所以選擇的就是電話面試了，小哥哥也挺好的，給我感覺就是很厲害的感覺，確實，接下來的問題，我就知道不簡單了。
第一個場景問題
比如直播的場景，你應該知道吧，你需要實現(xiàn)一個這樣子的場景，比如某個老師點擊某個地方，比如U盤，你這個時候需要展示U盤的動畫效果，比如這個時候，老師點擊這個電腦屏幕，你需要展示一個小電腦的動畫效果，向上述這樣子，「需要在特定的時間點，完成特定的動畫效果」。
嗯，這個問題，我的想法是，動畫是例外加上去的，如果說是直接后期處理的話，那應該跟我們前端的關系不大了，所以我們接下來的問題，就是如何去處理，時間同步的問題，怎么在具體的時間點，開始展示動畫呢 第二個問題，假設我們可以獲取到某個時間點的動畫，那么接下來，小哥哥，給我們提出了一個新的問題，就是當你的網(wǎng)絡擁塞時，比如有延遲的時候，這個時候，出現(xiàn)卡頓的效果，原本需要5秒播放完的，可能需要7秒，那么你是如何去解決動畫同步的？
嗯，我沒有做過這種類似的問題，所以回答起來感覺很吃力，有了解的小伙伴可以評論留下你們的答案，我虛心學習。
第二個場景問題
有一個場景，在一個輸入框輸入內(nèi)容，怎么更加高效的去提示用戶你輸入的信息，舉個例子，你輸入天貓，那么對應的提示信息是天貓商城，天貓集團，這個信息如何最快的獲取，有沒有不需要發(fā)請求的方式來實現(xiàn)？
比如數(shù)據(jù)請求的時候，盡量發(fā)的請求少，那么可以做防抖和節(jié)流處理 接下來的小哥哥，給了新的場景，當你的服務器掛了，數(shù)據(jù)取不到，那如何設計一個小型的本地數(shù)據(jù)庫 接下來問題就是如何設計一個本地的數(shù)據(jù)，優(yōu)化的點，就是盡可能的快，每次查詢數(shù)據(jù)盡可能的快 我的第一個思路，是key-value這樣子去設計，但是隨后就被小哥哥給質(zhì)疑出問題了，舉個例子，如果按照你的想法，如果關鍵字為 天，天貓，這樣子設計數(shù)據(jù)的話，就會存在被數(shù)據(jù)重復，這樣子顯然是不合理的。想了很久，這個時候，既然有 前綴重合的情況，那么是不是有一種數(shù)據(jù)結(jié)構可以解決這個問題呢？?字典樹，我們可以在本地建立一個預讀的字典樹，這樣子的話，根據(jù)用戶輸入的內(nèi)容，查字典樹，這個時間復雜度大概就是O(m+n)，所以很大程度上加快了查找效率。
當然了，有更好的解決辦法的話，可以留下你們的答案，看看你們是如何解決問題的。
第三個場景問題
Git版本工具你使用過吧，那你能不能實現(xiàn)一個這樣子的效果，完成Git Diff算法，比較兩個文件的不同，然后說一說具體的思路，這個過程怎么去比較的？兩個文件不同的位置如何標注出來，如何找出這個不同，具體說一說思路。
一開始我想的是diff算法，比如是vue中的虛擬dom算法，但是感覺不對啊，diff是做了優(yōu)化的，這里很明顯不合理，于是這個方法就不合理了。 那么兩個文件，該如何快速的找到對應的兩者文件的差別呢？這個問題想了好久，嗯，當時自己好像是口胡了一些思路，比如去逐行逐行的比較，這樣子的話，其實也不是很合理的，仔細想一想不行 小哥哥提示了我，我們是不是要去找 最長的公共子串，這個是時候，我應該想起來這個是兩個串的LCS,應該就是經(jīng)典的動態(tài)規(guī)劃問題,最后一個問題，確實沒有想到這個，可能就是很久沒有接觸這類動態(tài)規(guī)劃問題了。核心應該是動態(tài)規(guī)劃解決LCS，以及后續(xù)的處理，可以去看看有些文章，寫的很不錯，我這里就不張開啦。
Git是怎樣生成diff的：Myers算法
嗯,三面的話，考察的是你思考問題，以及結(jié)合問題是如何分析，可能也考了算法吧，嗯，害，挺難的。
一面
面試流程50分鐘，基本上自我介紹，我花了一分鐘介紹完自己在校經(jīng)歷，接下來就是提問環(huán)節(jié)。
全程下來小哥哥耐心指點，非常溫柔，這就是我現(xiàn)象中的面試官應該有的樣子，還會耐心去提示你，有問題的話，也就幫助你，引導你怎么去回答。
H5新特性
簡歷上面寫了這個內(nèi)容，所以被問到了，害，當時腦子一蒙，都完全沒有答好，這里在好好的梳理一遍?
本地存儲特性 設備兼容特性 HTML5提供了前所未有的數(shù)據(jù)與應用接入開放接口 連接特性 WebSockets 網(wǎng)頁多媒體特性 支持Audio Video SVG Canvas WebGL CSS3 CSS3特性
增加拖放API、地理定位、SVG繪圖、canvas繪圖、Web Worker、WebSocket
然后我答了本地存儲，接下來就問我這方便的問題啦?
localstroge sessionstoge 區(qū)別 應用場景
vue組件間通信
好幾次面試都問了這個問題，這個問題我是這么看待的，取決于你平時項目中經(jīng)常使用的方式是哪些，所以我每次都會答三種方式，反而網(wǎng)上8種組件間通信的方式，我記不住，也覺得了解一下即可，跟面試官交流一下，你在項目種是如何使用的即可。
遍歷對象方法
for in ?遍歷的也可以，不過對于非繼承的屬性名稱也會獲取到，通過hasOwnproperty判斷 Object.keys() ?可枚舉屬性和方法名 Object.getOwnPropertyNames() 可以獲取數(shù)組內(nèi)包括自身擁有的枚舉或不可枚舉屬性名稱字符串，如果是數(shù)組的話，還有可能獲取到 length屬性
編程題?
數(shù)組去重
常規(guī)題，講清楚思路，最后小哥哥提示能不能使用O(n)，我給出了兩者方案
Set 用對象特性，我覺得他就是想考這個，給你們貼一個代碼吧?
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))
當然了，實現(xiàn)的方式有很多種，看你自己怎么去實現(xiàn)它了，最簡單的就是去遞歸對象。
深度遍歷
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']
這題，我一開始想到的就是遞歸的寫法，寫完之后，然后小哥哥問了我遞歸的缺點，以及如何去優(yōu)化，不用遞歸的方法該怎么去實現(xiàn)？
面試的時候，沒有寫出來，太緊張了，不在狀態(tài)，復盤的時候，寫了一下用「?！?/strong>的實現(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--) {// 這里就是面試的重點,應該從后面的節(jié)點壓入棧中stack.push(node.children[i])}}return result}
鏈表的相加問題?
這個是LeetCode上面的題目，我好像還寫過，面試的最后一題的時候，我以及蒙了，完全不知道自己在干嘛，其實「鏈表題都是套路」，我連套路都沒有掌握，
這個我寫了一個專題，把題目刷完之后，應該遇到鏈表問題，可以輕松解決了。
「算法與數(shù)據(jù)結(jié)構」鏈表的9個基本操作
二面
大概的時間上的安排，算了一下，大致上是花了50分鐘吧，是個小姐姐，小姐姐好溫柔，我印象中小姐姐很nice，我記得我筆試做Promise的時候，我做錯了，她還特意問了我一遍，當時我大概知道錯了，不過呢，這個過程小姐姐是微笑的，緩解了尷尬，而且還耐心的去指導我，給她點贊呀。
ES6語法，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);
我看到以后，就直接說答案了，這點不好，因為一般而言，面試官出的題目肯定有點小坑，下次要注意了，最后面試官小姐姐還是微笑的告訴我，應該這么去做，然后怎么怎么樣。
聊一聊map和set
這個我是跟她說了用法，以及它們之間的區(qū)別，也就是它們經(jīng)常使用的場景是哪些。
順便的話，就聊了一下Weakmap，然后這里的難點也不是很多，就是你的明白它們兩者數(shù)據(jù)結(jié)構的區(qū)別是啥，舉個例子說明情況即可。
前端性能優(yōu)化
這個問題太大了，而且對于一個實際開發(fā)經(jīng)驗為0的而言，這個問題就很置命，所以呢，我就準備了從URL到頁面渲染這個一塊去說，里面的優(yōu)化點挺多的，可以自行去了解。
構建請求行 查緩存 （重點說一說） dns解析（如何優(yōu)化） tcp http （比如減少請求次數(shù)，嗯，應該還有其他優(yōu)化吧，cdn？） 瀏覽器渲染過程 （這里面就有優(yōu)化了，比如常見的如何避免回流和重繪） 防抖和節(jié)流處理 webpack打包優(yōu)化也可以說一說，前提你得有自信
其他問題
這場面試的話，給我的感覺就是，并不是跟面經(jīng)一樣，問一些標準的答案，反而更多是跟你交流技術上的問題，比如，你遇到的問題，是如何去解決的。小姐姐還提到了，如果需要你做技術上的分享，你覺得你有哪些技術上的分享是可以跟團隊分享的。
好尷尬，我一個實習生，我感覺我最近研究的是webpack打包上面的問題，以及會的都是寫基礎的內(nèi)容，所以多多少少的話，我也把我的觀點表達清楚了，表示我愿意去學習，愿意去分享這個技術。
其他面經(jīng)
這里面就是其他一些公司的問題了，比如有贊，涂鴉等，問題很基礎，所以我?guī)н^了，主要是覺得簡單，所以就掉過啦。
你說你最近在研究webpack，說一說
這個問題，我介紹的時候，就直接說了，最近在寫博客以及研究webpack，講一講webpack一些配置，比如loader，plugins，常見的loader，自己配過loader的話，答起來就很流暢。
然后順便叫我說一說原理，這我暫時就不清楚了。
ES6了解嗎，說一說
嗯，就按照你平常的來說，比如箭頭函數(shù)，展開運算符，Promise，然后好像就說了這三個….太緊張了
其實還有很多都用過，這里記錄一下
ES6類 Class for...of 和 for...in 對象的解構 rest操作符 / Spread操作符 模板字符串 const let
閉包
嗯，這個問題，老生常談的問題了，就過吧，不同的人，對這個有不一樣的理解。
某知音科技
面試長達80分鐘，我覺得我都快要被問倒了，真的，這個過程太長了呀，不過呢，這個小哥哥也非常nice，過程中有非常認真聽我講，嗯，聽我一個人在那么巴拉巴拉半天。
原型 閉包 作用域 輸入url過程整個過程 https區(qū)別，TLS握手 瀏覽器緩存 https如何保證安全，TLS握手的過程聊一聊 vue通信方式 vue數(shù)據(jù)響應式的原理，數(shù)組是怎么重寫的
以上的答案，就不梳理了，我之前的寫的博客都有涉及了，所以，好好準備的話，其實是沒有多大的問題的。
可以看看我之前梳理的，基本上真的全部覆蓋了?
分享前端好文，點亮?在看?