前言
大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，根底是进阶的前提是我的初心。
明天给大家分享一个大厂的面经——网易灵犀
题目
一面
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: '十一月的萧邦'// }// };结语
我是林三心，一个热心的前端菜鸟程序员。如果你上进，喜爱前端，想学习前端，那咱们能够交朋友，一起摸鱼哈哈，摸鱼群，加我请备注【思否】