面试精选-前端

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