面试精选-前端

1、防抖

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

应用场景:

// 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);

2、节流

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

应用场景:

// 1.高频事件,例如快速点击、鼠标滑动、resize事件、scroll事件
// 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);

3、js事件循环

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

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

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

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

4、如何理解js的异步?

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

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

转载请说明出处内容投诉
CSS教程_站长资源网 » 面试精选-前端

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买