2年經驗面試網易靈犀！太注重工程化了！

Sunshine_Lin發表於2022-02-12
面試

前言

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

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

題目

一面

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的區別，打包出來的產物有什麼區別？

  • webpack：程式碼拆分，按需載入，適用於應用的打包，webpack2後已支援 tree-shaking
  • rollup：所有資源打包到同一個地方，一次性載入，適用於庫的打包，支援 tree-shaking

3、postcss的原理？

  • 第一步：呼叫postcss相關的loader並傳入引數
  • 第二步：將css檔案轉成AST
  • 第三步：根據第一步的引數，對AST進行修改枝葉
  • 第四步：將修改後的AST轉化為正常程式碼
  • 第五步：輸出程式碼，交給下一個loader處理

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

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

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

後面會單獨出一篇文章

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

  • 1、esbuild預構建依賴：程式碼分為 依賴 和 原始碼 ， 依賴 就是那些npm包，一般不會變，快取起來； 原始碼 是會頻繁更改的那一部分程式碼
  • 2、利用瀏覽器可以執行 ES Module ，將程式碼轉成 ES Module 後交給瀏覽器，把壓力放在瀏覽器那邊，從而提高專案啟動速度
  • 3、按需載入：瀏覽器根據 ES Module 去使用http請求，按需載入所需頁面
  • 4、利用協商快取，快取檔案，無變化的檔案不需要重新載入

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。

缺點是：

  • 1、沒有對陣列進行攔截get和set，而是修改原型方法。
  • 2、沒有兼顧物件新增屬性的響應式處理
  • 3、費效能，畢竟是通過遞迴攔截

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: '十一月的蕭邦'
//     }
// };

結語

我是林三心，一個熱心的前端菜鳥程式設計師。如果你上進，喜歡前端，想學習前端，那我們們可以交朋友，一起摸魚哈哈，摸魚群，加我請備註【思否】

image.png

相關文章