前言
这次是上一次的复试，废话不说直接看题吧
面试题
Echarts图表本身针对大数据渲染的优化配置
这个属于项目中性能优化话题里的一个问题，当时并没有考虑到Echarts本身的优化，后面查了一下可以通过sampling: average、large: true以及取消dataZoom的实时刷新这几个方法来实现优化的效果
数组方法的排序
给定一个数组对象，里面提供了a和b两个属性进行排序，如果a属性相等，则采用b属性，否则使用a属性
- 使用
sort方法
const arr = [{ a: 1, b: 3 }, { a: 2, b: 4 }, { a: 3, b: 2 }, { a: 1, b: 5 }];
arr.sort((prev, curr) => {
if (prev.a === curr.a) {
return prev.b - curr.b;
}
return prev.b - curr.a
})
console.log(arr);
- 封装一个排序方法
过滤数组里面的某一项
过滤出数组中a不等于1的项
不会改变原数组的方法：
- 使用
filter方法进行过滤
const result = arr.filter(item => item.a !== 1);
需要在原数组上做更改的方法：
- 使用
delete关键字 - 使用
Reflect.deleteProperty()
缺点是过滤完的数据会出现特殊的empty属性，需要再过滤一遍
const arr = [{ a: 1, b: 3 }, { a: 2, b: 4 }, { a: 3, b: 2 }, { a: 1, b: 5 }];
for (let i = 0; i < arr.length; i++) {
if (arr[i].a === 1) {
Reflect.deleteProperty(arr, i);
// or
delete arr[i]
}
}
// 去除empty属性
console.log(arr.filter(Boolean));
移动端适配方案
移动端适配方案都有哪些？
- 采用rem进行适配
- 采用vw/vh进行适配
场景题
给定一个性能监控的对象数组，里面包括了函数开始时间，执行时间，子函数的关系等等，他们的关系是通过深度优先搜索来决定，要求实现一个性能火焰图
整体应该是为了考察你的思路，面对新需求是否会主动提问等等，这里罗列一下面试官问的问题：
- 如何确定父函数和子函数之间的调用关系
- 确定了调用关系，如何在页面中绘制出来？使用原生DOM？canvas？还是第三方插件
- 假如这个时候你绘制出来了，canvas中每个函数的执行时间要如何换算成像素在页面上展示出来？
- 你刚刚提到了使用
clientWidth获取屏幕宽度，那你还知道有其它哪些属性吗？他们的区别是什么？
你有做过哪些有难度的项目
回答了一个简历中没有写的浏览器插件项目
总结
复试给我的个人感觉不是很顺利，尤其是那个场景题基本上没有回答出来，总之再接再厉吧！
