前端面试0906

news2024/11/24 19:49:20

// 请给出输出结果
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;

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

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

相关文章

CocosCreator3.8研究笔记(七)CocosCreator 节点和组件的介绍

相信很多新手朋友&#xff0c;肯定会问&#xff0c;CocosCreator 中什么是节点&#xff1f;什么是组件&#xff1f; 一、什么是组件&#xff08;Component&#xff09;&#xff1f; Cocos Creator 3.8 的工作流程是以组件式开发为核心&#xff0c;即以组合而非继承的方式进行游…

安卓手机记事本数据转移到苹果手机上怎么操作?

国内有不少网友使用的手机都是小米、荣耀、OPPO、vivo等安卓手机&#xff0c;而再次更换手机时&#xff0c;就想要尝试一下不同的操作系统&#xff0c;例如更换一台苹果手机。不过在换手机之前&#xff0c;还有一件重要的事情需要去做&#xff0c;这就是安卓手机记事本数据转移…

RS485转0_20mA输出模块设计

文章目录 1. 简介2. 功能实现3. 测试4. 开源地址 1. 简介 结合以前发的文章&#xff0c;我们知道&#xff0c;模拟量输出有两种&#xff0c;一种是共地型&#xff0c;一种是共源型。 今天开源一款rs485隔离的转0-20ma输出模块的设计。 我设计模块的原因是为了测试公司的一款…

redis实战-redis实现分布式锁redisson快速入门

前言 集群环境下的并发问题 分布式锁 定义 需要满足的条件 常见的分布式锁 redis实现分布式锁 核心思路 代码实现 误删情况 逻辑说明 解决方案 代码实现 更为极端的误删情况 Lua脚本解决原子性问题 分布式锁-redission redisson的概念 快速入门 总结 前言 在…

Python之数值和内建函数

Python之数值和内建函数 内建常用数据类型 分类 数值型 int、float、complex、bool 序列sequence 字符串str、字节序列bytes、bytearray列表list、元组tuple 键值对 集合set、字典dict 取整 取整 int // round math.floor math.ceil说明&#xff1a;两条//斜杠是整除&…

(云HIS)云医院管理系统源码 SaaS模式 B/S架构 基于云计算技术

通过提供“一个中心多个医院”平台&#xff0c;为集团连锁化的医院和区域医疗提供最前沿的医疗信息化云解决方案。 一、概述 云HIS系统源码是一款满足基层医院各类业务需要的健康云产品。该系统能帮助基层医院完成日常各类业务&#xff0c;提供病患预约挂号支持、收费管理、病…

快速掌握高效批量分割长视频技巧,让你的视频制作更轻松

对于需要处理大量长视频的影视制作人员来说&#xff0c;视频分割是一项必不可少的任务。传统的视频分割方法需要手动进行&#xff0c;费时费力。今天&#xff0c;笔者将介绍一种快速批量分割长视频的方法&#xff0c;使用固乔智剪软件&#xff0c;提高视频制作效率。 1. 下载并…

C/C++内存布局——代码区、常量区、静态区(BSS段、Data段)

C/C内存分区 在C/C这种高级语言的层面看&#xff0c;一个程序的内存分区可以被分为&#xff1a;&#xff08;从低地址到高地址&#xff09;代码区、常量区、静态区&#xff08;已初始化&#xff08;BSS段&#xff09;、未初始化&#xff08;Data段&#xff09;&#xff09;、堆…

景区AR虚拟三维场景沉浸式体验成为新兴的营销手段

科技的迅速崛起正在改变我们的世界&#xff0c;旅游业也在这股浪潮中掀起了一场全新的变革。增强现实(AR)技术正成为旅行中的一股强大力量&#xff0c;通过增添趣味和交互性&#xff0c;为旅程注入了前所未有的活力。本文将带您深入了解AR如何为旅游带来全新的体验&#xff0c;…

Hystrix和Sentinel熔断降级设计理念

目录 1 基本介绍2 Hystrix信号量和线程池区别2.1 信号量模式2.2 线程池模式2.3 注意 3 Sentinel介绍 1 基本介绍 Sentinel 和 Hystrix 的原则是一致的: 当检测到调用链路中某个资源出现不稳定的表现&#xff0c;例如请求响应时间长或异常比例升高的时候&#xff0c;则对这个资源…

Qt开发_调用OpenCV(3.4.7)设计完成人脸检测系统

一、前言 近年来,人脸识别技术得到了广泛的应用,它可以在各种场景中实现自动化的人脸检测和识别,例如安防监控、人脸解锁、人脸支付等。 该项目的目标是设计一个简单易用但功能强大的人脸检测系统,可以实时从摄像头采集视频,并对视频中的人脸进行准确的检测和框选。通过…

【论文阅读】WATSON:通过聚合上下文语义从审计日志中抽象出行为(NDSS-2021)

Zeng J, Chua Z L, Chen Y, et al. WATSON: Abstracting Behaviors from Audit Logs via Aggregation of Contextual Semantics[C]//NDSS. 2021. TC_e3 trace、攻击调查、TransE、 以信息流为边界提取子图&#xff0c;为子图提取行为表示&#xff0c;进一步聚类&#xff0c;分析…

leetcode 655. 输出二叉树(java)

输出二叉树 题目描述代码演示 题目描述 难度 - 中等 leetcode 655. 输出二叉树 给你一棵二叉树的根节点 root &#xff0c;请你构造一个下标从 0 开始、大小为 m x n 的字符串矩阵 res &#xff0c;用以表示树的 格式化布局 。构造此格式化布局矩阵需要遵循以下规则&#xff1a…

【报错】 Cannot create property ‘showColumn‘ on number ‘-1‘

1、报错原因&#xff1a; 代码如下&#xff1a; 报错是因为&#xff1a;this.findObject(this.option.column, "thirdId")是一个number &#xff0c;没有.showColumn属性 2、修改代码 将其变成object属性就行了

智慧工厂的未来:数字孪生的多重应用

数字孪生技术在智慧工厂项目中具有广泛的应用&#xff0c;为生产制造提供了前所未有的机会和优势。下面将探讨数字孪生技术在智慧工厂项目中的多个应用场景。 数字孪生技术的首要应用之一是生产流程优化。通过将现实世界的工厂映射到数字孪生模型中&#xff0c;制造商可以模拟…

apex应用程序创建和对比

创建一个应用程序290&#xff0c;功能全不选展现出来的效果&#xff1a; 对比勾选了功能的应用程序少了很多内容 那看来该勾选还得勾选&#xff0c;删除之前的之后重新创建了一个应用程序290 自己跟着做应用 搜索栏下拉选择部门 在数据库使用sql语句查询&#xff0c;在数据库中…

文字转语音TTS bark SpeechT5 mms

bark GitHub - suno-ai/bark: &#x1f50a; Text-Prompted Generative Audio Model microsoft SpeechT5 https://github.com/microsoft/SpeechT5 使用 SpeechT5 进行语音合成、识别和更多功能 - 掘金 Facebook mms https://github.com/facebookresearch/fairseq/tree/mai…

vue使用百度地图实现地点查询

效果 代码 首先在index.html中引入script&#xff1a; <head><meta charset"utf-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdevice-width,initial-scal…

DC电源模块过压保护功能介绍

BOSHIDA DC电源模块过压保护功能介绍 DC电源模块&#xff08;也叫直流电源模块&#xff09;是一种常见的设备&#xff0c;它可以将交流电转换为直流电&#xff0c;用于供电给各种电子设备。DC电源模块通常具有多种保护功能&#xff0c;其中过压保护是其中一项重要的保护功能。…

Spring boot +Thymeleaf 本地图片加载失败(图片路径)的问题及解决方法

文章底部有个人公众号&#xff1a;热爱技术的小郑。主要分享开发知识、有兴趣的可以关注一下。为何分享&#xff1f; 踩过的坑没必要让别人在再踩&#xff0c;自己复盘也能加深记忆。利己利人、所谓双赢。 前言 在Spring Boot应用程序中&#xff0c;有时候我们会遇到本地图片不…