前言

大家好，我是林三心，用最通俗易懂的话讲最难的知识点 是我的座右铭，根底是进阶的前提 是我的初心。

明天给大家分享一个大厂的面经——网易灵犀

题目

一面

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

结语

我是林三心，一个热心的前端菜鸟程序员。如果你上进，喜爱前端，想学习前端，那咱们能够交朋友，一起摸鱼哈哈，摸鱼群，加我请备注【思否】