關注若川視野, 回復"pdf" 領取資料，回復"加群"，可加群長期交流

前言

最近一個星期面了幾家公司，最后收獲了心儀的網易有道offer，于是推掉了其他的面試，至于一些其他大廠，并沒有投簡歷，由于種種原因（就是菜），準備目前先踏實的學吧。

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

最有意思的就是網易有道第三輪技術面試，因為這個沒有具體的答案，有興趣的可以看看，我就先把這個第三輪面試場景題拿出來吧，其他的一些基礎的話，自己可以過一遍。

網易有道

三面

第三輪面試的是一個小哥哥，面試全程大概70分鐘，本來是遠程面試的，但是因為聲音的問題，所以選擇的就是電話面試了，小哥哥也挺好的，給我感覺就是很厲害的感覺，確實，接下來的問題，我就知道不簡單了。

第一個場景問題

比如直播的場景，你應該知道吧，你需要實現一個這樣子的場景，比如某個老師點擊某個地方，比如U盤，你這個時候需要展示U盤的動畫效果，比如這個時候，老師點擊這個電腦屏幕，你需要展示一個小電腦的動畫效果，向上述這樣子，「需要在特定的時間點，完成特定的動畫效果」。

• 嗯，這個問題，我的想法是，動畫是例外加上去的，如果說是直接后期處理的話，那應該跟我們前端的關系不大了，所以我們接下來的問題，就是如何去處理，時間同步的問題，怎么在具體的時間點，開始展示動畫呢

• 第二個問題，假設我們可以獲取到某個時間點的動畫，那么接下來，小哥哥，給我們提出了一個新的問題，就是當你的網絡擁塞時，比如有延遲的時候，這個時候，出現卡頓的效果，原本需要5秒播放完的，可能需要7秒，那么你是如何去解決動畫同步的？

嗯，我沒有做過這種類似的問題，所以回答起來感覺很吃力，有了解的小伙伴可以評論留下你們的答案，我虛心學習。

第二個場景問題

有一個場景，在一個輸入框輸入內容，怎么更加高效的去提示用戶你輸入的信息，舉個例子，你輸入天貓，那么對應的提示信息是天貓商城，天貓集團，這個信息如何最快的獲取，有沒有不需要發請求的方式來實現？

• 比如數據請求的時候，盡量發的請求少，那么可以做防抖和節流處理

• 接下來的小哥哥，給了新的場景，當你的服務器掛了，數據取不到，那如何設計一個小型的本地數據庫

• 接下來問題就是如何設計一個本地的數據，優化的點，就是盡可能的快，每次查詢數據盡可能的快

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

• 想了很久，這個時候，既然有前綴重合的情況，那么是不是有一種數據結構可以解決這個問題呢？?

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

當然了，有更好的解決辦法的話，可以留下你們的答案，看看你們是如何解決問題的。

第三個場景問題

Git版本工具你使用過吧，那你能不能實現一個這樣子的效果，完成Git Diff算法，比較兩個文件的不同，然后說一說具體的思路，這個過程怎么去比較的？兩個文件不同的位置如何標注出來，如何找出這個不同，具體說一說思路。

• 一開始我想的是diff算法，比如是vue中的虛擬dom算法，但是感覺不對啊，diff是做了優化的，這里很明顯不合理，于是這個方法就不合理了。

• 那么兩個文件，該如何快速的找到對應的兩者文件的差別呢？這個問題想了好久，嗯，當時自己好像是口胡了一些思路，比如去逐行逐行的比較，這樣子的話，其實也不是很合理的，仔細想一想不行

• 小哥哥提示了我，我們是不是要去找最長的公共子串，這個是時候，我應該想起來這個是兩個串的LCS,應該就是經典的動態規劃問題,最后一個問題，確實沒有想到這個，可能就是很久沒有接觸這類動態規劃問題了。

• 核心應該是動態規劃解決LCS，以及后續的處理，可以去看看有些文章，寫的很不錯，我這里就不張開啦。

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

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

一面

面試流程50分鐘，基本上自我介紹，我花了一分鐘介紹完自己在校經歷，接下來就是提問環節。

全程下來小哥哥耐心指點，非常溫柔，這就是我現象中的面試官應該有的樣子，還會耐心去提示你，有問題的話，也就幫助你，引導你怎么去回答。

H5新特性

簡歷上面寫了這個內容，所以被問到了，害，當時腦子一蒙，都完全沒有答好，這里在好好的梳理一遍?

本地存儲特性

設備兼容特性 HTML5提供了前所未有的數據與應用接入開放接口

連接特性 WebSockets

網頁多媒體特性 支持Audio Video SVG Canvas WebGL CSS3

CSS3特性

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

然后我答了本地存儲，接下來就問我這方便的問題啦?

localstroge sessionstoge 區別 應用場景

vue組件間通信

好幾次面試都問了這個問題，這個問題我是這么看待的，取決于你平時項目中經常使用的方式是哪些，所以我每次都會答三種方式，反而網上8種組件間通信的方式，我記不住，也覺得了解一下即可，跟面試官交流一下，你在項目種是如何使用的即可。

遍歷對象方法

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

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

• Object.getOwnPropertyNames() 可以獲取數組內包括自身擁有的枚舉或不可枚舉屬性名稱字符串，如果是數組的話，還有可能獲取到length屬性

編程題?

數組去重

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

• Set

• 用對象特性，我覺得他就是想考這個，給你們貼一個代碼吧?

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

數組的扁平化

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))

當然了，實現的方式有很多種，看你自己怎么去實現它了，最簡單的就是去遞歸對象。

深度遍歷

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

這題，我一開始想到的就是遞歸的寫法，寫完之后，然后小哥哥問了我遞歸的缺點，以及如何去優化，不用遞歸的方法該怎么去實現？

面試的時候，沒有寫出來，太緊張了，不在狀態，復盤的時候，寫了一下用「棧」的實現方式?

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--) {// 這里就是面試的重點,應該從后面的節點壓入棧中stack.push(node.children[i])}}return result}

鏈表的相加問題?

這個是LeetCode上面的題目，我好像還寫過，面試的最后一題的時候，我以及蒙了，完全不知道自己在干嘛，其實「鏈表題都是套路」，我連套路都沒有掌握，

這個我寫了一個專題，把題目刷完之后，應該遇到鏈表問題，可以輕松解決了。

「算法與數據結構」鏈表的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("失敗的狀態")})console.log(4);

我看到以后，就直接說答案了，這點不好，因為一般而言，面試官出的題目肯定有點小坑，下次要注意了，最后面試官小姐姐還是微笑的告訴我，應該這么去做，然后怎么怎么樣。

聊一聊map和set

這個我是跟她說了用法，以及它們之間的區別，也就是它們經常使用的場景是哪些。

順便的話，就聊了一下Weakmap，然后這里的難點也不是很多，就是你的明白它們兩者數據結構的區別是啥，舉個例子說明情況即可。

前端性能優化

這個問題太大了，而且對于一個實際開發經驗為0的而言，這個問題就很置命，所以呢，我就準備了從URL到頁面渲染這個一塊去說，里面的優化點挺多的，可以自行去了解。

• 構建請求行

• 查緩存 （重點說一說）

• dns解析（如何優化）

• tcp http （比如減少請求次數，嗯，應該還有其他優化吧，cdn？）

• 瀏覽器渲染過程 （這里面就有優化了，比如常見的如何避免回流和重繪）

• 防抖和節流處理

• webpack打包優化也可以說一說，前提你得有自信

其他問題

這場面試的話，給我的感覺就是，并不是跟面經一樣，問一些標準的答案，反而更多是跟你交流技術上的問題，比如，你遇到的問題，是如何去解決的。小姐姐還提到了，如果需要你做技術上的分享，你覺得你有哪些技術上的分享是可以跟團隊分享的。

好尷尬，我一個實習生，我感覺我最近研究的是webpack打包上面的問題，以及會的都是寫基礎的內容，所以多多少少的話，我也把我的觀點表達清楚了，表示我愿意去學習，愿意去分享這個技術。

---

其他面經

這里面就是其他一些公司的問題了，比如有贊，涂鴉等，問題很基礎，所以我帶過了，主要是覺得簡單，所以就掉過啦。

你說你最近在研究webpack，說一說

這個問題，我介紹的時候，就直接說了，最近在寫博客以及研究webpack，講一講webpack一些配置，比如loader，plugins，常見的loader，自己配過loader的話，答起來就很流暢。

然后順便叫我說一說原理，這我暫時就不清楚了。

ES6了解嗎，說一說

嗯，就按照你平常的來說，比如箭頭函數，展開運算符，Promise，然后好像就說了這三個….太緊張了

其實還有很多都用過，這里記錄一下

• ES6類 Class

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

• 對象的解構

• rest操作符 / Spread操作符

• 模板字符串

• const let

閉包

嗯，這個問題，老生常談的問題了，就過吧，不同的人，對這個有不一樣的理解。

某知音科技

面試長達80分鐘，我覺得我都快要被問倒了，真的，這個過程太長了呀，不過呢，這個小哥哥也非常nice，過程中有非常認真聽我講，嗯，聽我一個人在那么巴拉巴拉半天。

• 原型

• 閉包

• 作用域

• 輸入url過程整個過程

• https區別，TLS握手

• 瀏覽器緩存

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

• vue通信方式

• vue數據響應式的原理，數組是怎么重寫的

以上的答案，就不梳理了，我之前的寫的博客都有涉及了，所以，好好準備的話，其實是沒有多大的問題的。

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

推薦閱讀

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

末尾

你好，我是若川，江湖人稱菜如若川，歷時一年只寫了一個學習源碼整體架構系列~(點擊藍字了解我)

關注若川視野，回復"pdf" 領取優質前端書籍pdf，回復"加群"，可加群長期交流學習

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

覺得文章不錯，可以點個在看呀^_^另外歡迎留言交流～

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。