面试精选-前端

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

相关推荐
柚子8168 分钟前
scroll-marker轮播组件不再难
前端·css
你的人类朋友1 小时前
🫏光速入门cURL
前端·后端·程序员
01传说1 小时前
vue3 配置安装 pnpm 报错 已解决
java·前端·vue.js·前端框架·npm·node.js
烛阴2 小时前
Python装饰器解除:如何让被装饰的函数重获自由?
前端·python
千鼎数字孪生-可视化3 小时前
Web技术栈重塑HMI开发:HTML5+WebGL的轻量化实践路径
前端·html5·webgl
凌辰揽月3 小时前
7月10号总结 (1)
前端·css·css3
天天扭码3 小时前
很全面的前端面试——CSS篇(上)
前端·css·面试
EndingCoder3 小时前
搜索算法在前端的实践
前端·算法·性能优化·状态模式·搜索算法
sunbyte3 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
Favor_Yang3 小时前
SQL Server通过存储过程实现HTML页面生成
前端·信息可视化·sqlserver·存储过程