面试精选-前端

1、防抖

防抖 (Debouncing) 的含义是指在一定时间内，多次触发同一个事件，只执行最后一次操作。例如，当我们在搜索框中输入关键词时，输入框会不断触发oninput事件，如果每次输入都去请求服务器获取数据，会造成不必要的请求浪费。此时就可以使用防抖技术，将一定时间内的多次触发合并为一次操作，只请求一次服务器数据，减少了请求次数和服务器负载。

应用场景：

// 1.搜索框搜索输入 // 2.文本编辑器实时保存

• 1
• 2

代码实现思路：使用定时器实现。

// 如 let timerId = null; document.querySelector('.input').onkeyup = function () { if (timerId !== null) { clearTimeout(timerId); } timerId = setTimeout(() => { // 实现查询或实时保存业务 console.log("开始搜索"); console.log("开始保存") }, 1000); } // 使用lodash插件实现 let input = document.querySelector("input"); input.oninput = _.debounce(function() { console.log("用户输入了" + input.value); }, 1000);

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18

2、节流

节流 (Throttling) 的含义是指在一定时间内，多次触发同一个事件，只执行第一次操作。例如，当我们拖动网页上的滚动条时，会不断触发 onscroll事件，如果每次触发都去计算滚动距离，会造成浏览器性能下降。此时就可以使用节流技术，将一定时间内的多次触发限制为一次操作，只计算一次滚动距离，提高了浏览器性能和用户体验。

应用场景：

// 1.高频事件，例如快速点击、鼠标滑动、resize事件、scroll事件 // 2.下拉加载 // 3.视频播放记录时间等

• 1
• 2
• 3

代码实现思路：使用定时器实现。

// 如 function throttle(fn, delay) { let timer = null; return function(...args) { if (!timer) { timer = setTimeout(() => { fn.apply(this, args); timer = null; }, delay); } }; } // 使用lodash插件实现（把频繁触发变为少量触发） let button = document.querySelector("button"); // 一秒触发一次 button.onclick = _.throttle(function() { console.log("run function"); }, 1000);

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20

3、js事件循环

1、事件循环又称消息循环，是浏览器渲染主线程的工作方式。

2、 Chrome 源码中，开启了一个不会结束的 for 循环，每次循环从消息队列中取出第一个任务执行，而其他线程只需要在合适的时候将任务加入到队列末尾。

3、过去把消息队列简单分为宏队列和微队列，这种说法目前已无法满足复杂的浏览器环境，取而代之的是一种更加灵活多变的处理方式。

4、根据W3C官方的解释，每个任务有不同的类型，同类型的任务必须在同一个队列，不同的任务可以属于不同队列，不同任务队列有不同的优先级，在一次事件循环中，由浏览器自行决定取哪一个队列的任务，但是浏览器必须有一个微队列，微队列的任务一定是具有最高的优先级，必须优先调度执行。

4、如何理解js的异步？

1、JS是一门单线程的语言，这是因为它运行在浏览器的渲染主线程中，而渲染主线程只有一个。而渲染主线程承担着诸多工作如渲染页面、执行js等，如果使用同步的方式，就极有可能导致主线程产生阻塞，从而导致消息队列中的很多其他任务无法得到执行，这样一来，一方面会导致繁忙的主线程白白的消耗时间，另一方面导致页面无法及时更新，给用户造成卡死现象。

2、所以浏览器采用异步的方式来避免主线程阻塞。具体做法是当某些任务发生时如计时器、网络、事件监听等主线程将任务交给其他线程去处理，自身立即结束任务的执行，转而执行后续代码，当其他线程完成时，将事先传递的回调函数包装成任务，加入到消息队列的末尾排队，等主线程调度执行，在这种模式下，浏览器永不阻塞，从而最大限度的保证了单线程的流畅运行。