腾讯ieg-前端面经
一面
1.项目经历
其中问到以下内容
pdf签名实现过程
pdf与图片的区别
图表之间进行多级联动的实现方式
2.宏微任务的区别，哪些是宏任务，哪些是微任务，浏览器是如何执行的
3.vue异步实现原理（考察nexttick的了解程度）
4.vue响应式实现原理（主要考察对于defineReactive方法的理解以及Watcher和Dep的具体作用）
5.vue和react的diff算法的实现以及key的作用（可以去看看snabbdom算法的实现）
6.vue是如何子虚拟节点的（这里主要涉及组件管理钩子的触发时机）
二面（问的全是性能优化，凉凉）
1.大数据量下如何保证页面不卡顿
2.MD5和sha256的区别
3.vue的diff在大数据量下做了哪些优化
4.服务端渲染如何减少服务器压力
5.webpack中plugin可以在哪些生命周期执行
6.柯里化sum函数
sum(1,3)(1).sumOf() // 5
sum(1)(2)(3).sumOf() // 6
function sum (...args) {
const nums = [];
function computed (...args) {
nums.push(...args);
return computed
}
computed.sumOf = function () { console.log(nums.reduce((res, cur) => res + cur)) }
return computed(...args);
}
二面（复面）
一个标签实现开关
<div class="switch"></div>
.switch {
width: 3rem;
height: 1.6rem;
border-radius: 10px;
background: red;
overflow: hidden;
}
.switch:active::before {
left: 100%;
margin-left: -1.6rem;
}
.switch::before {
content: '';
display: block;
position: relative;
transition: all .3s;
left: 0;
margin-left: 1px;
height: calc(1.6rem - 2px);
width: calc(1.6rem - 2px);
border-radius: 100%;
margin-top: 1px;
background: black;
}
异步定时器队列
function Schehler {
list = [];
count = 0;
constructor(num) {
this.num = num;
}
async add (fn) {
this.count >= this.num ? await new Promise(resolve => this.list.push(resolve)) : '';
++this.count;
const result = await fn();
--this.count;
if (this.list.length > 0) this.list.shift()();
return result;
}
}
请求拦截
const send = XMLHttpRequest.prototype.send;
XMLHttpRequest.prototype.send = function (...args) { console.log(args); send(...args); }
