2022年我的面试万字总结（Node、webpack、性能优化）

<script>
%20%20%20%20%20/*%20console.time('耗时')
%20 %20%20for%20(let%20i%20=%201;%20i%20<=%201000;%20i++)%20{
%20 %20 %20%20document.body.innerHTML%20=%20document.body.innerHTML%20+%20`<div>${i}</div>`
%20 %20%20}
%20 %20%20console.timeEnd('耗时')%20//%201586.053955078125%20ms%20*/
​
%20 %20 /*%20console.time('耗时')
%20 %20%20let%20str%20=%20''
%20 %20%20for%20(let%20i%20=%201;%20i%20<=%201000;%20i++)%20{
%20 %20 %20%20str%20+=%20`<div>${i}</div>`
%20 %20%20}
%20 %20%20document.body.innerHTML%20=%20str
%20 %20%20console.timeEnd('耗时')%20//%202.5810546875%20ms%20*/
​
%20 %20 /*%20console.time('耗时')
%20 %20%20const%20arr%20=%20[]
%20 %20%20for%20(let%20i%20=%201;%20i%20<=%201000;%20i++)%20{
%20 %20 %20%20arr.push(`<div>${i}</div>`)
%20 %20%20}
%20 %20%20document.body.innerHTML%20=%20arr.join('')
%20 %20%20console.timeEnd('耗时')%20//%202.883056640625%20ms%20*/
​
%20 %20 /*%20console.time('耗时')
%20 %20%20for%20(let%20i%20=%201;%20i%20<=%201000;%20i++)%20{
%20 %20 %20%20const%20oDiv%20=%20document.createElement('div')
%20 %20 %20%20//%20更灵活
%20 %20 %20%20oDiv.innerHTML%20=%20i
%20 %20 %20%20oDiv.onclick%20=%20function%20()%20{%20}
%20 %20 %20%20oDiv.style.backgroundColor%20=%20'red'
%20 %20 %20%20document.body.appendChild(oDiv)
%20 %20%20}
%20 %20%20console.timeEnd('耗时')%20//%207.409912109375%20ms%20*/%20
​
%20 %20 console.time('耗时')
%20 %20 //%20篮子，“文档碎片”
%20 %20 const%20oFrag%20=%20document.createDocumentFragment()
%20 %20 for%20(let%20i%20=%201;%20i%20<=%201000;%20i++)%20{
%20 %20 %20 const%20oDiv%20=%20document.createElement('div')
%20 %20 %20 oDiv.innerHTML%20=%20i
%20 %20 %20 oFrag.appendChild(oDiv)
%20 %20%20}
%20 %20 document.body.appendChild(oFrag)
%20 %20 console.timeEnd('耗时')%20//%2013.442138671875%20ms
</script>

//%20//防抖
function%20debounce(fn,%20date)%20{
%20 let%20timer%20 //声明接收定时器的变量
%20 return%20function%20(...arg)%20{%20 //%20获取参数
%20 %20 timer%20&&%20clearTimeout(timer)%20 //%20清空定时器
%20 %20 timer%20=%20setTimeout(()%20=>%20{%20 //%20%20生成新的定时器
%20 %20 %20 //因为箭头函数里的this指向上层作用域的this,所以这里可以直接用this，不需要声明其他的变量来接收
%20 %20 %20 fn.apply(this,%20arg)%20//%20fn()
%20 %20%20},%20date)
%20%20}
}
//--------------------------------
//%20节流
function%20debounce(fn,%20data)%20{
%20 let%20timer%20=%20+new%20Date()%20 //%20声明初始时间
%20 return%20function%20(...arg)%20{%20//%20获取参数
%20 %20 let%20newTimer%20=%20+new%20Date()%20 //%20获取触发事件的时间
%20 %20 if%20(newTimer%20-%20timer%20>=%20data)%20{%20 //%20时间判断,是否满足条件
%20 %20 %20 fn.apply(this,%20arg)%20 //%20调用需要执行的函数,修改this值,并且传入参数
%20 %20 %20 timer%20=%20+new%20Date()%20//%20重置初始时间
%20 %20%20}
%20%20}
}
//%20--------------------------------
box.addEventListener('click',%20debounce(function%20(e)%20{
%20 if%20(e.target.tagName%20===%20'BUTTON')%20{
%20 %20 console.log(111);
%20%20}
},%202000))

<div%20class="infinite-list-container">
%20 %20 <div%20class="infinite-list-phantom"></div>
%20 %20 <div%20class="infinite-list">
%20 %20 %20 <!--%20item-1%20-->
%20 %20 %20 <!--%20item-2%20-->
%20 %20 %20 <!--%20......%20-->
%20 %20 %20 <!--%20item-n%20-->
%20 %20 </div>
</div>

let%20a%20=%201%20+%201%20 %20 =>%20 var%20a%20=%202