当前位置: 首页 > news >正文

前端面试0906

// 请给出输出结果
function foo(){
console.log(a);
}

function bar(){
var a = 3;
console.log(this.a);
foo();
}

var a = 2;
bar();
2 2

// 请从下面的问题中挑选3道进行回答

1. 防抖和节流分别是什么,一般用在什么场景?

防抖(Debounce)和节流(Throttle)都是用来控制某个函数在一定时间内的触发次数.
作用:减少触发频率,提高性能或者说避免资源浪费。
区别:

防抖 (多次触发 只执行最后一次)
节流 (规定时间内 只触发一次)

防抖:

登录、短信验证等按钮避免用户点击太快,发行多次请求;调整浏览器窗口大小时,resize 次数过于频繁,计算过多,造成页面卡顿的情况;文本编辑器实时保存;搜索框等。

节流:

鼠标连续不断地触发某事件(如点击事件),单位时间内只触发一次;监听滚动事件,例如:懒加载;每隔多少秒计算一次相关数据。

2. 如何理解同步和异步,浏览器是如何处理异步任务的?

同步与异步是指访问数据的机制,同步一般指主动请求并等待IO操作完成的方式。
异步则指主动请求数据后便可以继续处理其它任务,随后等待IO操作完毕的通知。
同步和异步最大的区别就在于:同步需要等待,异步不需要等待。
1.1 同步请求
对于同步请求而言,浏览器在发送一个请求之后,需要等待服务器响应返回,才能够发送下一个请求,这一过程的示意图如下所示:
同步请求

同步请求存在着两个明显的缺陷:

① 请求发出后必须要等待响应

比如当遇到请求阻塞,网络延迟等情况时,用户需要进行等待,这样会导致用户体验效果差。

② 每次请求都需要重新加载整个页面

比如在访问某个页面时,有的时候用户可能只需要请求获取页面某一部分内容的响应,但是当用户发送请求后,整个页面的所有内容都需要重新加载后再响应给用户,这样同样会导致用户的体验较差。

1.2 异步请求
与同步请求相对,发送异步请求不需要等待服务器响应,随时可以发送下一次的请求,减少了用户遇到请求阻塞、网络延迟时需要等待的时间。

同样以用户访问某个页面为例,用户需要请求获取页面某一部分内容的响应,如果用户发送的是异步请求,那么服务器会根据请求对页面进行局部的刷新,而不用每次请求都刷新整个页面,异步请求可以提升用户的体验。
原文链接:https://blog.csdn.net/weixin_48016395/article/details/123859626
浏览器通过setTimeout、setInterval、Promise、async/await、Ajax等实现异步

3. 响应式布局是什么,如何实现响应式布局?

响应式布局

4. 什么是AJAX以及它是如何工作的?

ajax

5. 什么是sessionStorage,localStorage和cookie,以及他们之间的区别是什么?


// 输入一个递增排序的数组和一个数字s,在数组中查找两个数,使得它们的和正好是s
// 如果有多对数字的和等于s,则输出任意一对即可。
// 输入:nums = [2,7,11,15], target = 9,输出:[2,7] 或者 [7,2]
// 输入:nums = [10,26,30,31,47,60], target = 40,输出:[10,30] 或者 [30,10]
TypeScipt:
function twoSum(nums: number[], target: number): number[] {

};

JavaScipt:
var twoSum = function(nums, target) {
let left,right;
for(let i=0;i<nums.length;i++){
for(let j=i+1;j<num.length;j++){
if(nums[i]+nums[j]===target){
left=i;
right=j;
console.log(‘[’+num[i]+‘,’+num[j]+‘]’);
break;
}
}}

};


// 用VUE或者React编写一个倒计时组件
// 组件接收的参数为秒,展示效果为“剩余:HH:MM:SS”
// 100 剩余:00:01:40
// 100 剩余:00:01:39
// 100 剩余:00:01:38
// …
let param=100;
let s,m,h;
s=param%60;
m=param/60;
h=param/3600;

相关文章:

前端面试0906

// 请给出输出结果 function foo(){ console.log(a); } function bar(){ var a 3; console.log(this.a); foo(); } var a 2; bar(); 2 2 // 请从下面的问题中挑选3道进行回答 1. 防抖和节流分别是什么&#xff0c;一般用在什么场景&#xff1f; 防抖&#xff08;Debounc…...

OceanBase社区版4.x核心技术解密

数字化时代&#xff0c;各行各业的数据量呈现爆发式增长&#xff0c;对于海量数据价值的挖掘和应用&#xff0c;正成为推动创新的主要力量&#xff0c;与此同时&#xff0c;数据计算复杂度正在提升。在此背景下&#xff0c;对于数据处理的基石数据库而言&#xff0c;正面临市场…...

快速安装k8s

RKE安装方式 官方文章资源地址 https://rke.docs.rancher.com/installation rke工具下载地址&#xff08;arm,amd,windows都有&#xff09; https://github.com/rancher/rke/releases x86的用amd64下载rke工具 https://github.com/rancher/rke/releases/download/v1.4.8/rke_li…...

[FFmpeg] 常用ffmpeg命令

去水印 ffmpeg -i water.jpeg -strict -2 -vf delogox300:y250:w56:h18:show0 no_water.jpeg 打时间戳 ffmpeg -i perf_60Hz_Raw.mp4 -vf "drawtextfontsize160:fontcolorred:text%{pts\:hms}" -c:v libx264 -an -f mp4 perf_output.mp4 -y ffmpeg -i perf_8k.mp4 -v…...

代码随想录训练营第五十七天|647. 回文子串、516.最长回文子序列

647. 回文子串 题目链接/文章讲解/视频讲解&#xff1a;代码随想录 1.代码展示 //647.回文子串 int countSubstrings(string s) {//step1 构建dp数组&#xff0c;明确dp数组的含义&#xff0c;dp[i][j]的含义是在下标为i和j区间内的字串是否为回文串vector<vector<bool&…...

对线程池设置做压测

线程池代码 Configuration public class ThreadPoolConfig {// 核心线程池大小private int corePoolSize 24;// 最大可创建的线程数private int maxPoolSize 25;// 队列最大长度private int queueCapacity 100;// 线程池维护线程所允许的空闲时间private int keepAliveSeco…...

【网络通信 -- WebRTC】项目实战记录 -- mediasoup android 适配 webrtc m94

【网络通信 -- WebRTC】项目实战记录 -- mediasoup android 适配 webrtc m94 【1】下载并配置 depot_tools 下载 depot_tools git clone https://chromium.googlesource.com/chromium/tools/depot_tools.git编辑 ~/.bashrc 将 depot_tools 添加到路径中 vim ~/.bashrc export…...

【力扣周赛】第 357 场周赛(⭐反悔贪心)

文章目录 竞赛链接Q1&#xff1a;6925. 故障键盘解法1——直接模拟解法2——双端队列 Q2&#xff1a;6953. 判断是否能拆分数组&#xff08;贪心&#xff09;Q3&#xff1a;2812. 找出最安全路径⭐解法1——多源BFS瓶颈路模型&#xff1f;解法2——多源BFS 倒序枚举答案 并查…...

css重置

css 重置 CSS 重置的主要目标是确保浏览器之间的一致性&#xff0c;并撤消所有默认样式&#xff0c;创建一个空白板。 如今&#xff0c;主流浏览器都实现了css规范&#xff0c;在布局或间距方面没有太大差异。但是通过自定义 CSS 重置&#xff0c;也可以改善用户体验和提高开…...

tcpdump相关

Linux内核角度分析tcpdump原理&#xff08;一&#xff09;Linux内核角度分析tcpdump原理&#xff08;二&#xff09;...

MFC新建内部消息

提示&#xff1a;记录一下MFC新建内部消息的成功过程 文章目录 前言一、pandas是什么&#xff1f;二、使用步骤 1.引入库2.读入数据总结 前言 先说一下基本情况&#xff0c;因为要在mapview上增加一个显示加载时间的功能。然后发现是要等加载完再显示时间&#xff0c;显示在主…...

linux查找目录

要在Linux中查找目录&#xff0c;可以使用find命令。下面是查询目录的几个示例&#xff1a; 1,查找当前目录下所有子目录&#xff1a; find . -type d 2,在指定路径下查找目录&#xff1a; find /path/to/directory -type d 3,查找以特定名称开头的目录&#xff1a; find . -t…...

机器学习:可解释学习

文章目录 可解释学习为什么需要可解释机器学习可解释还是强模型可解释学习的目标可解释机器学习Local ExplanationGlobal Explanation 可解释学习 神马汉斯&#xff0c;只有在有人看的时候能够答对。 为什么需要可解释机器学习 贷款&#xff0c;医疗需要给出理由&#xff0c;让…...

UE5- c++ websocket里实现调用player里的方法

# UGameInstance里直接调用 获取到引用了&#xff0c;就可以自然的调用。忽略 # UGameInstance里间接调用&#xff0c;通过代理调用 前置已经添加了websocket,具体步骤参考&#xff0c;链接在UWebSocketGameInstance.h里新增代理&#xff0c;并在链接成功后进行绑定。 #pragma…...

线性代数的学习和整理18:什么是维度,什么是秩?秩的各种定理秩的计算 (计算部分未完成)

目录 0 问题引出&#xff1a;什么是秩&#xff1f; 概念备注&#xff1a; 1 先厘清&#xff1a;什么是维数&#xff1f; 1.1 真实世界的维度数 1.2 向量空间的维数 1.2.1 向量空间&#xff0c;就是一组最大线性无关的向量组/基张成的空间 1.3 向量α的维数 1.3.1 向量的…...

Centos 6.5 升级到Centos7指导手册

一、背景 某业务系统因建设较早&#xff0c;使用的OS比较过时&#xff0c;还是centos6.5的系统&#xff0c;因国产化需要&#xff0c;需将该系统升级到BClinux 8.6&#xff0c;但官方显示不支持centos 6.x升级到8&#xff0c;需先将centos6.5升级到centos7的最新版&#xff0c…...

详解python中的映射类型---字典

概述 映射类型是“键-值”数据项的组合&#xff0c;每个元素是一个键值对&#xff0c;即元素是&#xff08;key&#xff0c;value&#xff09;&#xff0c;元素之间是无序的。键值对&#xff08;key&#xff0c;value&#xff09;是一种二元关系&#xff0c;源于属性和值的映射…...

gdal求矢量图形的形心

gdal求矢量图形的形心 #include "gdal_priv.h" #include "ogrsf_frmts.h"int main() {OGRRegisterAll();OGRPolygon* square_1 new OGRPolygon();OGRLinearRing* ring_1 new OGRLinearRing();// 添加 square_1 的点ring_1->addPoint(0, 0);ring_1-&g…...

<深度学习基础> Batch Normalization

Batch Normalization批归一化 BN优点 减少了人为选择参数。在某些情况下可以取消dropout和L2正则项参数&#xff0c;或者采取更小的L2正则项约束参数&#xff1b;减少了对学习率的要求。现在我们可以使用初始很大的学习率或者选择了较小的学习率&#xff0c;算法也能够快速训…...

Ubuntu yolov5 环境配置

查看Ubuntu版本 $ cat /proc/version Linux version 5.4.0-150-generic (builddbos03-amd64-012) (gcc version 7.5.0 (Ubuntu 7.5.0-3ubuntu1~18.04)) #167~18.04.1-Ubuntu SMP Wed May 24 00:51:42 UTC 2023虚拟机磁盘扩容 因为在环境搭建过程中遇到了磁盘空间不足的问题&a…...

如何高效解决Calibre中文路径翻译问题:完整实用指南

如何高效解决Calibre中文路径翻译问题&#xff1a;完整实用指南 【免费下载链接】calibre-do-not-translate-my-path Switch my calibre library from ascii path to plain Unicode path. 将我的书库从拼音目录切换至非纯英文&#xff08;中文&#xff09;命名 项目地址: htt…...

从零到一:彻底搞懂Anaconda,打造完美的Python开发环境

别再为Python环境搞得焦头烂额了&#xff0c;这篇教程带你一次性解决所有烦恼。 作为Python开发者&#xff0c;你是否曾经遇到过这样的场景&#xff1a;项目A需要Python 3.6和旧版本的TensorFlow&#xff0c;而项目B却要求Python 3.12和最新的PyTorch。如果只在系统里装一个Pyt…...

Mist:macOS固件与安装程序下载管理终极指南

Mist&#xff1a;macOS固件与安装程序下载管理终极指南 【免费下载链接】Mist A Mac utility that automatically downloads macOS Firmwares / Installers. 项目地址: https://gitcode.com/GitHub_Trending/mis/Mist Mist是一款专为macOS设计的自动化工具&#xff0c;能…...

3步实现视频转PPT:extract-video-ppt工具让内容提取效率提升80%

3步实现视频转PPT&#xff1a;extract-video-ppt工具让内容提取效率提升80% 【免费下载链接】extract-video-ppt extract the ppt in the video 项目地址: https://gitcode.com/gh_mirrors/ex/extract-video-ppt 在数字化办公日益普及的今天&#xff0c;视频转PPT工具已…...

仅需6GB显存!GPT-SoVITS部署指南:低成本实现高质量语音合成

仅需6GB显存&#xff01;GPT-SoVITS部署指南&#xff1a;低成本实现高质量语音合成 1. 项目介绍与核心优势 GPT-SoVITS 是一个革命性的开源语音合成工具&#xff0c;它巧妙结合了GPT的语言生成能力和SoVITS的语音转换技术。这个项目最大的亮点在于&#xff0c;它能够用极少的…...

5分钟搞定!Cesium/Leaflet/OpenLayers调用免费瓦片地图资源全攻略

三大地图框架快速调用免费瓦片资源实战指南 第一次接触GIS开发时&#xff0c;最让人头疼的莫过于地图底图资源的获取。作为项目的基础支撑&#xff0c;地图瓦片的质量和稳定性直接影响最终用户体验。但商业地图API往往价格不菲&#xff0c;对个人开发者和小型项目来说成本压力较…...

Python实战:从零掌握标准正态分布及其可视化

1. 什么是标准正态分布&#xff1f; 我第一次接触标准正态分布是在大学统计课上&#xff0c;当时教授画了一个完美的钟形曲线&#xff0c;说这是自然界最常见的分布。后来做数据分析才发现&#xff0c;这个看似简单的曲线真的无处不在——从人的身高体重到考试分数&#xff0c;…...

别再乱用Freemarker了!从Jeecg-Boot的CVE-2023-4450漏洞,聊聊SQL解析中的代码注入风险

从CVE-2023-4450看动态SQL解析的安全陷阱&#xff1a;Freemarker模板引擎的致命误用 在快速迭代的企业级开发中&#xff0c;报表功能往往被视为"非核心模块"而被草率实现。2023年曝光的Jeecg-Boot漏洞(CVE-2023-4450)给我们上了一课——一个未授权接口中的Freemarker…...

人工智能入门全景图:Nanbeige 4.1-3B带你梳理AI核心概念与技术栈

人工智能入门全景图&#xff1a;Nanbeige 4.1-3B带你梳理AI核心概念与技术栈 你是不是也对人工智能充满好奇&#xff0c;但一看到那些复杂的术语和庞大的技术栈就感到无从下手&#xff1f;机器学习、深度学习、神经网络、NLP、CV……这些词听起来很酷&#xff0c;但它们到底是…...

深入解析CAN总线通信原理与CANoe实战开发指南

1. CAN总线通信原理深度剖析 CAN总线&#xff08;Controller Area Network&#xff09;是现代汽车电子系统中不可或缺的神经脉络。我第一次接触CAN总线是在2013年参与某新能源车项目时&#xff0c;当时就被它精巧的设计所震撼。与常见的串口通信不同&#xff0c;CAN采用差分信号…...