面试精选-前端

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/702919.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

idea集成git(实用篇)

0.Git常用命令 Git常用命令-CSDN博客 1.下载git Git - Downloads 一路傻瓜式安装即可(NEXT) 2.软件测试 在Windows桌面空白处,点击鼠标右键,弹出右键菜单 Git软件安装后,会在右键菜单中增加两个菜单 Git GUI He…

Go编译到linux运行出现 cannot execute binary file

1.初学Go就在windows上写了个"Hello,World!",在windown上编译了一下,生成了可执行文件。运行无问题 go build text.go .\text.exe Hello,World!2.但是按照网上的教程进行生成linux的可执行文件时出现报错 set CGO_ENABLED0 set GOOSlinux set GOARCHam…

程序媛的mac修炼手册-- 2024如何彻底卸载Python

啊,前段时间因为想尝试chatgpt的API,需要先创建一个python虚拟环境来安装OpenAI Python library. 结果,不出意外的出意外了,安装好OpenAI Python library后,因为身份认证问题,根本就没有获取API key的权限…

Git命令操作

什么是Git? Git是⼀个免费的,开源的分布式版本控制软件系统 git区域 存储区域:Git软件⽤于存储资源得区域。⼀般指得就是.git⽂件夹 ⼯作区域:Git软件对外提供资源得区域,此区域可⼈⼯对资源进⾏处理。 暂存区&am…

Escalate_Linux(3)--通过读取密码文件shadow来破解root用户的口令实现提权

通过读取密码文件shadow来破解root用户的口令实现提权 通过读取密码文件/etc/shadow来破解root用户的口令 ls -l /etc/shadow 普通用户无查看shadow权限 echo "cat /etc/shadow" >/tmp/ls ​ chmod 755 /tmp/ls ​ export PATH/tmp:$PATH ​ /home/user5/script…

Ubuntu中Python包的寻找路径

文章目录 一、Pyhon包的查找位置二、某个Python特定包的查找位置参考 一、Pyhon包的查找位置 ▶ [~]$ python -m site sys.path [/home/wangji,/usr/lib/python310.zip,/usr/lib/python3.10,/usr/lib/python3.10/lib-dynload,/home/wangji/.local/lib/python3.10/site-packag…

[C++]c++冒泡排序示例

冒泡排序是一种计算机科学领域的较简单的排序算法,这篇文章主要介绍了c冒泡排序示例,需要的朋友可以参考下 冒泡排序(Bubble Sort),是一种计算机科学领域的较简单的排序算法。它重复地走访过要排序的数列,一次比较两个…

019 Spring Boot+Vue 电影院会员管理系统(源代码+数据库+文档)

部分代码地址: https://github.com/XinChennn/xc019-cinema 一、系统介绍 cinema项目是一套电影院会员管理系统,使用前后端分离架构开发包含管理员、会员管理、会员卡管理、电影票、消费记录、数据统计等模块 二、所用技术 后端技术栈: …

RabbitMQ-消息队列:优先级队列、惰性队列

20、优先级队列 在我们系统中有一个订单催付的场景,我们的客户在天猫下的订单,淘宝会及时将订单推送给我们,如果在用户设定的时间内未付款那么就会给用户推送一条短信提醒,很简单的一个功能对吧。 但是,天猫商家对我…

Apache Flume:分布式日志收集系统

什么是Apache Flume? Apache Flume 是一个分布式、可靠、高可用的服务,用于高效收集、聚合和移动大量日志数据。它的主要目标是将日志数据从源头传输到中央数据存储,如Hadoop的HDFS。Flume 是为了可靠地处理日志数据而设计的,它有…

【数据结构】周末作业

1.new(struct list_head*)malloc(sizeof(struct list_head*)); if(newNULL) { printf("失败\n"); return; } new->nextprev->next; prev->nextnew; return; 2.struct list_head* pprev->next; prev->nextp->next; p->next->prevpr…

【Java程序员面试专栏 算法思维】一 高频面试算法题:排序算法

一轮的算法训练完成后,对相关的题目有了一个初步理解了,接下来进行专题训练,以下这些题目就是汇总的高频题目,本篇主要聊聊排序算法,包括手撕排序算法,经典的TOPK问题以及区间合并,所以放到一篇Blog中集中练习 题目关键字解题思路时间空间快速排序双指针+递归+基准值分…

一种基于道路分类特性的超快速车道检测算法

摘要: 本文介绍了一种新颖、简单但有效的车道检测公式。 车道检测是自动驾驶和高级驾驶员辅助系统 (ADAS) 的基本组成部分,在实际高阶驾驶辅助应用中,考虑车道保持、转向、限速等相关的控制问题,这种方式通常是通过受限的车辆计算…

MATLAB环境下基于图像处理的视网膜图像血管分割

预防糖尿病对每个人的健康至关重要,而糖尿病的早期症状在眼底视网膜血管会有所体现,如静脉血管扩张、轻度弯曲等。高血压作为常见疾病,在中国有多达2.45亿的患者。高血压的病情也会在眼底视网膜血管上有所体现,如交叉压迫征等反映…

鸿蒙开发【WebGL】简单了解

WebGL的全称为Web Graphic Library(网页图形库),主要用于交互式渲染2D图形和3D图形。目前HarmonyOS中使用的WebGL是基于OpenGL裁剪的OpenGL ES,可以在HTML5的canvas元素对象中使用,无需使用插件,支持跨平台。WebGL程序是由JavaScr…

UE5 C++ TPS开发 学习记录(六)

这节课学习了如何创建插件,在Build.cs内使用模块和创建OnlineSubsystem // Fill out your copyright notice in the Description page of Project Settings. #pragma once #include "CoreMinimal.h" #include "Subsystems/GameInstanceSubsystem.h" #incl…

前端页面可视化大屏适配方案

无论窗口缩放&#xff0c;屏幕放大缩小&#xff0c;我们的可视化界面都可以按照设计图比例正常展示&#xff0c;不会出现字体模块爆出&#xff0c;或者拉伸问题。这就是我想要的适配方案。 html <div id"appRef"><div>html页面</div> </div&g…

iOS高级理论:Block的应用

Block 是 Objective-C 和 Swift 中的一种语言特性&#xff0c;可以用来封装一段代码并在需要时执行。在 iOS 开发中&#xff0c;Block 被广泛应用于以下场景&#xff1a; 一、异步任务处理 Block 可以用于异步任务的处理&#xff0c;例如网络请求、文件读写等。通过在 Block …

基础复习(IDA调试器)

1.选择IDA调试后端 在顶部有一个下拉菜单&#xff0c;选择调试器后端位置 很多用户实际上使用的是Windows版本的IDA&#xff0c;该IDA可以直接调试Windows下32bit和64bit的程序 2.本地调试启动方法 载入IDA后&#xff0c;程序实际上在对程序内置的一个字符串进行base64解码…

ARM Cortex-X5 传言表现不佳,高功率浪涌和低多核分数影响即将推出的核心设计

ARM 的新 Cortex-X5 设计似乎遇到了问题&#xff0c;有新的传言称&#xff0c;超级核心在提高时钟速度时会经历严重的高功耗&#xff0c;并且当最大功率限制降低时&#xff0c;多核性能会下降。虽然这对高通来说可能不是问题&#xff0c;因为据说其 Snapdragon 8 Gen 4 采用定制…