一面
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); }