面试精选-前端

1、防抖

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

应用场景:

js 复制代码
// 1.搜索框搜索输入
// 2.文本编辑器实时保存

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

js 复制代码
// 如
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事件,如果每次触发都去计算滚动距离,会造成浏览器性能下降。此时就可以使用节流技术,将一定时间内的多次触发限制为一次操作,只计算一次滚动距离,提高了浏览器性能和用户体验。

应用场景:

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

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

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

相关推荐
AverageJoe199127 分钟前
一次vite热更新不生效问题排查
前端·debug·vite
努力只为躺平29 分钟前
🔥 油猴脚本开发指南:从基础API到发布全流程
前端·javascript
bitbitDown31 分钟前
我用Playwright爬了掘金热榜,发现了这些有趣的秘密... 🕵️‍♂️
前端·javascript·vue.js
陈随易35 分钟前
VSCode v1.102发布,AI体验大幅提升
前端·后端·程序员
ma7739 分钟前
JavaScript 获取短链接原始地址的解决方案
前端
该用户已不存在39 分钟前
关于我把Mac Mini托管到机房,后续来了,还有更多玩法
服务器·前端·mac
tianchang42 分钟前
SSR 深度解析:从原理到实践的完整指南
前端·vue.js·设计模式
闲蛋小超人笑嘻嘻44 分钟前
前端面试十一之TS
前端
摆烂为不摆烂44 分钟前
😁深入JS(四): 一文让你完全了解Iterator+Generator 实现async await
前端
DoraBigHead1 小时前
🧠 别急着传!大文件上传里,藏着 Promise 的高级用法
前端·javascript·面试