前言

大家好，我是林三心， 用最通俗易懂的話講最難的知識點 是我的座右銘， 基礎是進階的前提 是我的初心。

今天給大家分享一個大廠的面經—— 網易靈犀

題目

一面

1、聊計畫

2、webpack和rollup的區別，打包出來的產物有什麽區別？

3、postcss的原理

4、webpack babel vue都用到了AST，你是怎麽理解AST的？

5、如何提高webpack的構建速度？

6、用到了vite了麽？為什麽會快？

7、npm打包時需要註意哪些？如何利用webpack來更好的構建？

8、如何在vue計畫中實作按需載入？

9、webpack怎麽最佳化前端效能

10、是否寫過loader和plugin，大概思路是什麽樣的？

11、實作Array中的reduce方法？

二面

1、聊簡歷，聊計畫

2、vue中的nexttick的原理

3、vue的響應式原理

4、小程式的架構

5、小程式如何跟native層通訊的

6、演算法題

要求：

求字串公共字首，例如 ['abcaaa', 'abcddd', 'abcadad'] ==> 'abc'


7、演算法題

要求：

// 區間合並：
// 以陣列 intervals 表示若幹個區間的集合，其中單個區間為 intervals[i] = [starti, endi] 。
// 請你合並所有重疊的區間，並返回一個不重疊的區間陣列，該陣列需恰好覆蓋輸入中的所有區間。
// 範例 1：
// 輸入：intervals = [[1,3],[2,6],[8,10],[15,18]]
// 輸出：[[1,6],[8,10],[15,18]]
// 解釋：區間 [1,3] 和 [2,6] 重疊, 將它們合並為 [1,6].
// 範例 2：
// 輸入：intervals = [[1,4],[4,5]]
// 輸出：[[1,5]]
// 解釋：區間 [1,4] 和 [4,5] 可被視為重疊區間。


解答

一面

1、聊計畫

略

2、webpack和rollup的區別，打包出來的產物有什麽區別？

3、postcss的原理？

4、webpack babel vue都用到了AST，你是怎麽理解AST的？

現在的很多工具，例如webpack、vite、eslint、babel等等都離不開一個東西——AST。AST是正常程式碼，使用工具，根據不用的程式碼節點型別，轉化成的一個JSON格式的數據

5、如何提高webpack的構建速度？

後面會單獨出一篇文章

6、用到了vite了麽？為什麽會快？

7、npm打包時需要註意哪些？如何利用webpack來更好的構建？

後面會單獨出一篇文章

8、如何在vue計畫中實作按需載入？

箭頭函式 + import

9、webpack怎麽最佳化前端效能？

後面會單獨出一篇文章

10、是否寫過loader和plugin，大概思路是什麽樣的？

loader loader 的作用是用來處理 非js檔 ，它是一個函式，實作原理是：將所需處理的檔內容使用相應的轉換外掛程式轉成 AST(抽象語法樹) ，然後按照loader規則對於這個 AST 進行處理，處理之後再轉成原本的內容格式，然後輸出，達到了處理內容的效果

plugin plugin 的作用是拓展webpack的打包功能。它是一個類，使用方式是new Plugin(option)，這個類內部有一個 apply 方法，打包時會執行這個方法，且這個 apply 方法接收的參數中有一個 plugin 方法，此方法中有許多勾點函式，使用這些勾點函式可以在不同的打包階段做一些事，例如修改檔，新增檔，刪除檔等等

11、實作Array中的reduce方法？

Array.prototype.sx_reduce = function(cb, ...args) {
let pre, start = 0
if (args.length) {
pre = args[0]
} else {
pre = this[0]
start = 1
}
for (let i = start; i < this.length; i++) {
pre = cb(pre, this[i], i, this)
}
return pre
}


二面

1、聊簡歷，聊計畫

略

2、vue中的nexttick的原理？

nexttick首選微任務，然後才是宏任務。內部設定一個回呼佇列，將渲染watcher還有使用者自訂的nexttick事件放到這個佇列裏，並異步執行迴圈這個佇列，達到異步更新

3、vue的響應式原理

使用Object.defineProperty攔截物件內容的get和set，再透過dep收集依賴的Watcher，當內容更新時觸發set，並觸發notify函式通知dep中的watcher進行更新。watcher分為渲染watcher、使用者watcher、計算watcher。

缺點是：

4、小程式的架構

不懂

5、小程式如何跟native層通訊的

不懂

6、演算法題

要求：

求字串公共字首，例如 ['abcaaa', 'abcddd', 'abcadad'] ==> 'abc'


解題：

var longestCommonPrefix = function (strs) {
if (!strs.length) return''
if (strs.length === 1) return strs[0]
const start = strs[0]
let prefix = '',
pre = ''
for (let i = 0; i < start.length; i++) {
prefix += start[i]
if (strs.some(str => str.indexOf(prefix) !== 0)) return pre
pre = prefix
}
return pre
};


7、演算法題

要求：

// 區間合並：
// 以陣列 intervals 表示若幹個區間的集合，其中單個區間為 intervals[i] = [starti, endi] 。
// 請你合並所有重疊的區間，並返回一個不重疊的區間陣列，該陣列需恰好覆蓋輸入中的所有區間。
// 範例 1：
// 輸入：intervals = [[1,3],[2,6],[8,10],[15,18]]
// 輸出：[[1,6],[8,10],[15,18]]
// 解釋：區間 [1,3] 和 [2,6] 重疊, 將它們合並為 [1,6].
// 範例 2：
// 輸入：intervals = [[1,4],[4,5]]
// 輸出：[[1,5]]
// 解釋：區間 [1,4] 和 [4,5] 可被視為重疊區間。


解答：

const merge = function(intervals) {
if (intervals.length === 1) return intervals
intervals.sort((a, b) => a[0] - b[0])
const res = []
let i = 0, j = 1
while(j < intervals.length) {
const iArr = intervals[i]
const jArr = intervals[j]
if (iArr[1] >= jArr[0]) {
intervals[i] = [Math.min(iArr[0], jArr[0]), Math.max(iArr[1], jArr[1])]
j++
if (j === intervals.length) res.push(intervals[i])
} else {
res.push(iArr)
i = j++
if (j === intervals.length) res.push(jArr)
}
}
return res
};


8、演算法題

要求：

// 仿樣版字串處理功能，
// 如 "Title: ${ title }, MainArtist: ${ artist[0] }, Album: ${ album.name }",
// {
// title: '珊湖海',
// artist: ['周杰倫', '梁心頤'],
// album: {
// publishTime: '2006-11-1',
// name: '十一月的蕭邦'
// }
// };


結語

我是林三心

廣州的兄弟可以約飯哦，或者約球~我負責打鐵，你負責進球，謝謝~