前端面试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;

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

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

相关文章

【MyBatis篇】MyBatis框架基础知识笔记

目录 ORM思想&#xff08;对象关系映射思想&#xff09; 初识MyBatis 什么是MyBatis呢&#xff1f; JDBC VS MyBatis代码 获取数据库连接对比 对表格查询操作&#xff1a; JDBC弊端 MyBatis&#xff0c;JDBC对比 MyBatis进一步介绍以及本质分析 JDBC编程的劣势&…

从C语言到C++_37(特殊类设计和C++类型转换)单例模式

目录 1. 特殊类设计 1.1 不能被拷贝的类 1.2 只能在堆上创建的类 1.3 只能在栈上创建的类 1.4 不能被继承的类 1.5 只能创建一个对象的类(单例模式)(重点) 1.5.1 饿汉模式 1.5.2 懒汉模式 2. 类型转换 2.1 static_cast 2.2 reinterpret_cast 2.3 const_cast 2.4 d…

微信小程序开发前准备

文章目录 一.注册微信小程序开发账号&#xff08;一&#xff09;访问微信公众平台官网&#xff08;二&#xff09;进入注册页面&#xff0c;完成注册信息&#xff08;三&#xff09;设置微信小程序信息 二.获取微信小程序的AppID(一) 什么是小程序AppID&#xff08;二&#xff…

leetcode 1002. 查找共用字符

2023.9.6 个人感觉这题难度不止简单&#xff0c;考察到的东西还是挺多的。 首先理解题意&#xff0c;可以将题意转化为&#xff1a;求字符串数组中 各字符串共同出现的字符的最小值。 分为三步做&#xff1a; 构造一个哈希表hash&#xff0c;初始化第一个字符串的字母出现频率…

leetcode 925. 长按键入

2023.9.7 我的基本思路是两数组字符逐一对比&#xff0c;遇到不同的字符&#xff0c;判断一下typed与上一字符是否相同&#xff0c;不相同返回false&#xff0c;相同则继续对比。 最后要分别判断name和typed分别先遍历完时的情况。直接看代码&#xff1a; class Solution { p…

星际争霸之小霸王之小蜜蜂(十一)--杀杀杀

系列文章目录 星际争霸之小霸王之小蜜蜂&#xff08;十&#xff09;--鼠道 星际争霸之小霸王之小蜜蜂&#xff08;九&#xff09;--狂鼠之灾 星际争霸之小霸王之小蜜蜂&#xff08;八&#xff09;--蓝皮鼠和大脸猫 星际争霸之小霸王之小蜜蜂&#xff08;七&#xff09;--消失…

数据结构|栈和队列以及实现

栈和队列 一、栈1.1栈的概念及结构1.2栈的实现 二、队列2.1队列的概念及结构2.2队列的实现 一、栈 1.1栈的概念及结构 栈&#xff1a;一种特殊的线性表&#xff0c;其只允许在固定的一端进行插入和删除元素操作。进行数据插入和数据删除的一端称为栈顶&#xff0c;另一端称为栈…

2023 年高教社杯全国大学生数学建模竞赛题目 B 题 多波束测线问题

B 题 多波束测线问题 单波束测深是利用声波在水中的传播特性来测量水体深度的技术。声波在均匀介质中作匀速直线传播&#xff0c;在不同界面上产生反射&#xff0c;利用这一原理&#xff0c;从测量船换能器垂直向海底发射声波信号&#xff0c;并记录从声波发射到信号接收的传播…

【Linux】- 一文秒懂shell编程

shell编程 1.1 Shell 是什么1.2 Shell 脚本的执行方式1.3 编写第一个 Shell 脚本2.1 Shell 的变量2.2 shell 变量的定义2.3 设置环境变量3.1 位置参数变量3.2 预定义变量4.1 运算符4.2 条件判断5.1 流程控制5.2 case 语句5.3 for 循环5.4 while 循环5.5 read基本语法6.1函数6.2…

API安全学习 - crAPI漏洞靶场与API测试思路

crAPI漏洞靶场与解题思路 1. 前置基础1.1 认识crAPI1.2 环境搭建1.3 API的分类与鉴别 2. 漏洞验证2.1 失效的对象级别授权挑战1&#xff1a;访问其它用户车辆的详细信息挑战2&#xff1a;访问其它用户的机械报告 2.2 失效的用户身份验证挑战3&#xff1a;重置其它用户的密码 2.…

CSS流光按钮-圆形

主要思路 仅保留一条边框 border-radius 50%drop-shadow动画 animation keyframes 代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, …

python基础爬虫反爬破解

文章目录 爬虫初识1. HTTP协议与WEB开发&#xff08;1&#xff09;简介&#xff08;2&#xff09;socket套接字&#xff08;3&#xff09;请求协议与响应协议 2. requests&反爬破解&#xff08;1&#xff09;UA反爬&#xff08;2&#xff09;referer反爬&#xff08;3&…