前端面试基础面试题——9
1.js 延迟加载的方式有哪些?
2.js同步和异步的区别?
3.什么是浏览器的同源政策?
4.介绍一下 js 的节流与防抖?
5.js 中的深浅拷贝实现?
6.Js 动画与 CSS 动画区别及相应实现
7.观察者模式和发布订阅模式有什么不同?
8.js 中的命名规则
9.JavaScript怎么清空数组?
10.微任务和宏任务
1.js 延迟加载的方式有哪些?
一般有以下几种方式:
- defer 属性
- async 属性
- 动态创建 DOM 方式
- 使用 setTimeout 延迟方法
- 让 JS 最后加载
2.js同步和异步的区别?
同步,可以理解为在执行完一个函数或方法之后,一直等待系统返回值或消息,这时程序是处于阻塞的,只有接收到返回的值或消息后才往下执行其他的命令。
异步,执行完函数或方法后,不必阻塞性地等待返回值或消息,只需要向系统委托一个异步过程,那么当系统接收到返回值或消息时,系统会自动触发委托的异步过程,从而完成一个完整的流程。
3.什么是浏览器的同源政策?
我对浏览器的同源政策的理解是,一个域下的 js 脚本在未经允许的情况下,不能够访问另一个域的内容。这里的同源的指的是两个
域的协议、域名、端口号必须相同,否则则不属于同一个域。
同源政策主要限制了三个方面
第一个是当前域下的 js 脚本不能够访问其他域下的 cookie、localStorage 和 indexDB。
第二个是当前域下的 js 脚本不能够操作访问操作其他域下的 DOM。
第三个是当前域下 ajax 无法发送跨域请求。
同源政策的目的主要是为了保证用户的信息安全,它只是对 js 脚本的一种限制,并不是对浏览器的限制,对于一般的 img、或者
script 脚本请求都不会有跨域的限制,这是因为这些操作都不会通过响应结果来进行可能出现安全问题的操作。
4.介绍一下 js 的节流与防抖?
函数防抖: 在事件被触发 n 秒后再执行回调,如果在这 n 秒内事件又被触发,则重新计时。
函数节流: 规定一个单位时间,在这个单位时间内,只能有一次触发事件的回调函数执行,如果在同一个单位时间内某事件被触发多次,只有一次能生效。
5.js 中的深浅拷贝实现?
浅拷贝指的是将一个对象的属性值复制到另一个对象,如果有的属性的值为引用类型的话,那么会将这个引用的地址复制给对象,因此两个对象会有同一个引用类型的引用。浅拷贝可以使用 Object.assign 和展开运算符来实现。
深拷贝相对浅拷贝而言,如果遇到属性值为引用类型的时候,它新建一个引用类型并将对应的值复制给它,因此对象获得的一个新的引用类型而不是一个原有类型的引用。深拷贝对于一些对象可以使用 JSON 的两个函数来实现,但是由于 JSON 的对象格式比 js 的对象格式更加严格,所以如果属性值里边出现函数或者 Symbol 类型的值时,会转换失败。
6.Js 动画与 CSS 动画区别及相应实现
CSS3 的动画的优点
在性能上会稍微好一些,浏览器会对 CSS3 的动画做一些优化
代码相对简单
缺点
在动画控制上不够灵活
兼容性不好
JavaScript 的动画正好弥补了这两个缺点,控制能力很强,可以单帧的控制、变换,同时写得好完全可以兼容 IE6,并且功能强大。对于一些复杂控制的动画,使用 javascript 会比较靠谱。而在实现一些小的交互动效的时候,就多考虑考虑 CSS 吧
7.观察者模式和发布订阅模式有什么不同?
发布订阅模式其实属于广义上的观察者模式
在观察者模式中,观察者需要直接订阅目标事件。在目标发出内容改变的事件后,直接接收事件并作出响应。
而在发布订阅模式中,发布者和订阅者之间多了一个调度中心。调度中心一方面从发布者接收事件,另一方面向订阅者发布事件,订阅者需要在调度中心中订阅事件。通过调度中心实现了发布者和订阅者关系的解耦。使用发布订阅者模式更利于我们代码的可维护性。
8.js 中的命名规则
(1)第一个字符必须是字母、下划线(_)或美元符号($)
(2)余下的字符可以是下划线、美元符号或任何字母或数字字符
一般我们推荐使用驼峰法来对变量名进行命名,因为这样可以与 ECMAScript 内置的函数和对象命名格式保持一致。
9.JavaScript怎么清空数组?
方法1
arrayList = [];
直接改变arrayList所指向的对象,原对象并不改变。
方法2
arrayList.length = 0;
这种方法通过设置length=0 使原数组清除元素。
方法3
arrayList.splice(0, arrayList.length);
10.微任务和宏任务
事件循环是一个宏观的表述,其实异步任务之间并不完全相同,其执行时机有所区别。细分来说的话异步任务分为两种:microtask 与 macrotask
宏任务macrotask 主要有:script(整体代码)、setTimeout、setInterval、I/O、UI交互事件、postMessage、MessageChannel、setImmediate(Node.js 环境)
微任务microtask 主要有:process.nextTick,Promises【new Promise().then(回调)】,MutationObserver(html5 新特性)
相关文章:

前端面试基础面试题——9
1.js 延迟加载的方式有哪些? 2.js同步和异步的区别? 3.什么是浏览器的同源政策? 4.介绍一下 js 的节流与防抖? 5.js 中的深浅拷贝实现? 6.Js 动画与 CSS 动画区别及相应实现 7.观察者模式和发布订阅模式有什么不同…...

tomcat 问题
一、start up.bat 闪退 在命令窗口run 看看是缺少了哪个环境变量 二、控制台输出乱码 logging.properties 底部添加 java.util.logging.ConsoleHandler.encoding GBK 三、缓存不足 context.xml配置 <Resources cachingAllowed"false" cacheMaxSize"100…...

小程序首页如何进行装修设置
小程序首页是展示给用户的第一屏,它的装修直接影响到用户对小程序的第一印象。小程序首页的设置在小程序管理员后台->页面设置->首页,下图是小程序首页默认的设置。 下图,是小程序首页的具体表现形式。下面具体解释小程序首页各个设置项…...
npm安装依赖报错npm ERR! code ENOTFOUND npm ERR! errno ENOTFOUND、npm run dev报错记录
npm安装依赖报错npm ERR! code ENOTFOUND npm ERR! errno ENOTFOUND_得我所得,爱我所爱的博客-CSDN博客npm安装依赖报错今天在学习webpack的时候,在使用npm install来安装一个局部的webpack时候,报出一下错误:npm ERR! code ENOTFOUNDnpm ERR…...

堆叠注入([强网杯 2019]随便注1)
详解: 堆叠注入(Stack Injection)是一种计算机安全概念,涉及攻击者向程序的堆栈内存中插入恶意代码,以便在程序执行期间执行非预期的操作。 堆栈注入攻击通常利用程序在处理函数调用时使用的堆栈机制。当一个函数被调…...

零基础Linux_15(基础IO_文件)软硬链接+动静态库详解
目录 1. 软硬链接 1.1 创建软链接 1.2 创建硬链接 1.3 硬链接数和unlink 2. 动静态库 2.1 制作静态库 2.2 查看和打包静态库 2.3 使用静态库 2.3.1 安装在默认搜索路径 2.3.2 告知路径库路径库名 2.4 制作动态库 2.5 使用动态库 2.5.1 安装在默认搜索路径 2.5.2 …...

计算机毕业设计选什么题目好?springboot 健身房管理系统
✍✍计算机编程指导师 ⭐⭐个人介绍:自己非常喜欢研究技术问题!专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目:有源码或者技术上的问题欢迎在评论区一起讨论交流! ⚡⚡ Java实战 |…...

两台linux 之间传输文件 (详细+bash脚本)
两台linux设备文件直接传输,有很多应用场景 一、可能的方案 (一)先下载再上传 从linux通过ssh下载到windows下,然后再通过ssh上传到另一台linux。 1.优点:简单 2.缺点:效率低,需要额外的设备…...

嵌入式系统开发【深入浅出】 EXTI 与 NVIC
目录 CPU 感知外部事件变化的三种方式 中断分三个级别 中断控制器 STM32 的中断和异常 NVIC 中断控制器 NVIC 结构体成员 抢占优先级和响应优先级 简单配置NVIC中断控制器 EXTI 外部中断【中断源级】 STM32系列微控制器实际上最多有23根外部中断线(EXT…...

【Kali】简单记录
文章目录 信息收集DNS记录分析hostdigdnsenum 路由信息tcptraceroutetctrace 搜索引擎 目标识别arpingfping 识别操作系统p0f 服务枚举端口扫描nmap识别VPN服务器 漏洞映射exploitdbmsfconsole 提权arpspoofDsniff 信息收集 DNS记录分析 host host www.example.com host -a …...

【数据结构】:队列的实现
队列 队列的概念及结构 队列:只允许在一端进行插入数据操作,在另一端进行删除数据操作的特殊线性表,队列具有先进先出 FIFO(First In First Out) 入队列:进行插入操作的一端称为队尾 出队列:进行删除操作的一端称为队…...

415. 字符串相加
415. 字符串相加 class Solution { public:string addStrings(string num1, string num2){//i j分别指向当前字符串的最后一位int i num1.length() - 1;int j num2.length() - 1;int add 0;string s "";//不要忽略两个串都遍历完了 但是还有一个进位while (i …...

交通 | python网络爬虫:“多线程并行 + 多线程异步协程
推文作者:Amiee 编者按: 常规爬虫都是爬完一个网页接着爬下一个网页,不适应数据量大的网页,本文介绍了多线程处理同时爬取多个网页的内容,提升爬虫效率。 1.引言 一般而言,常规爬虫都是爬完一个网页接着…...

LeetCode:1488. 避免洪水泛滥(2023.10.13 C++)
目录 1488. 避免洪水泛滥 实现代码与解析: 贪心 原理思路: 1488. 避免洪水泛滥 题目描述: 你的国家有无数个湖泊,所有湖泊一开始都是空的。当第 n 个湖泊下雨前是空的,那么它就会装满水。如果第 n 个湖泊下雨前是…...

SpringBoot 时 jar 报错 没有主清单属性
SpringBoot 时 jar 报错 没有主清单属性 参考资料 使用阿里版 Spring Initializr 创建的项目。 springboot 2.6.13 JDK 1.8 这里自动开了skip。 注释后打的 jar 包就可以运行了。 <build><finalName>${name}</finalName><plugins><plugin><…...

C/S架构学习之多进程实现TCP并发服务器
多进程实现TCP并发服务器的实现流程:一、自定义信号处理函数(sig_func函数): void sig_func(int signum){wait(NULL);}wait函数: #include <sys/types.h>#include <sys/wait.h>pid_t wait(int *wstatus);/*功能&#…...

VSCode 快速移动光标至行尾
最近在用vscode进行C编程,经常需要把光标跳到行尾去添加符号。 手动到行尾太麻烦了。 一种快捷方式是:用键盘上的“END”快捷键。 但是用这个键也不是很方便,因为“end”键离主键盘区太远。 另一种便捷的方式是:给vscode设置自定义…...

ACP.复盘方法
复盘要怎么做的有水准,让领导满意,方式方法很重要。今天给你们安利5种复盘方法,保准你省事,领导还满意。 一、KPT复盘法 7月份年中一直在做和复盘相关的事,像公司的OKR复盘、年中战略规划,不过日常很多生…...

Springboot 订餐管理系统idea开发mysql数据库web结构java编程计算机网页源码maven项目
一、源码特点 springboot 订餐管理系统是一套完善的信息系统,结合springboot框架和bootstrap完成本系统,对理解JSP java编程开发语言有帮助系统采用springboot框架(MVC模式开发),系统具有 完整的源代码和数据库&…...

判断当前Activity是否有DialogFragment显示
DialogFragment一种情况是在当前Activity上启动,一种情况是在Fragment上启动,判断当前fragmentManager上是否有,以及遍历判断子fragment上是否有,即可确定是否有DialogFragment展示。 使用方式: // supportFragmentMa…...

开发一个npm组件包(2)
通过vueelement 原来后台 开发npm包的时候 会遇到一下几个问题 入口文件变化为package/index 需要再配置打包方法 package.json下 "scripts": {"package": "vue-cli-service build --target lib ./src/package/index.js --name managerpage --dest…...

迅为RK3568开发板Scharr滤波器算子边缘检测
本小节代码在配套资料“iTOP-3568 开发板\03_【iTOP-RK3568 开发板】指南教程\04_OpenCV 开发配套资料\33”目录下,如下图所示: 在 Sobel 算子算法函数中,如果设置 ksize-1 就会使用 3x3 的 Scharr 滤波器。Scharr 算子是 Soble 算子在 ksize…...

HJ86 求最大连续bit数
目录 一、题目 二、代码 一、题目 求最大连续bit数_牛客题霸_牛客网 二、代码 #include <iostream> #include<stack> #include<vector> using namespace std; void TEN_to_TWO(int x, vector<int>& data) { //10进制转换成二进制stack<int&…...

Grafana 10 新特性解读:体验与协作全面提升
作者:徽泠(苏墨馨) 为了庆祝 Grafana 的 10 年里程碑,Grafana Labs 推出了 Grafana 10,这个具有纪念意义的版本强调增强用户体验,使各种开发人员更容易使用。Grafana v10.0.x 为开发者与企业展示卓越的新功能、可视化与协作能力&…...

Django实现音乐网站 ⒆
使用Python Django框架做一个音乐网站, 本篇主要为排行榜功能及音乐播放器部分功能实现。 目录 推荐排行榜优化 设置歌手、单曲跳转链接 排行榜列表渲染优化 视图修改如下: 模板修改如下: 单曲详情修改 排行榜列表 设置路由 视图处理…...

20基于MATLAB的车牌识别算法,在环境较差的情景下,夜间识别度很差的车牌号码可以精确识别出具体结果,程序已调通,可直接替换自己的数据跑。
基于MATLAB的车牌识别算法,在环境较差的情景下,夜间识别度很差的车牌号码可以精确识别出具体结果,程序已调通,可直接替换自己的数据跑。 20matlab车牌识别 (xiaohongshu.com)...

vue音频制作
Vue 音频制作指的是使用 Vue.js 框架开发音频制作相关的 Web 应用程序。Vue.js 是一种现代化的 JavaScript 框架,它可以帮助开发者更快速、更高效地构建交互式的 Web 应用程序。 音频制作在 Vue.js 中的实现可以通过使用一些开源音频库和插件来实现,如 …...

好莱坞编剧大罢工终于结束;与OpenAI创始人共进早餐;使用DALL-E 3制作绘本分享;生成式AI的基础设施架构 | ShowMeAI日报
👀日报&周刊合集 | 🎡生产力工具与行业应用大全 | 🧡 点赞关注评论拜托啦! 🔥 好莱坞编剧大罢工终于结束:简单说就是AI妥协了 https://www.wgacontract2023.org/the-campaign/summary-of-the-2023-wga-…...

buuctf week2-web-ez_sql
闭合之后尝试判断字段数,存在WAF,使用大小写绕过(后面的sql语句也需要进行大小写绕过) ?id1 Order by 5-- 测出有5列 ?id1 Order by 6-- 查一下数据库名、版本、用户等信息 ?id1Union Select database(),version(),user(),4,…...

实验2.1.2 交换机的常用配置
项目2 交换技术的位置 活动2 交换机的常用配置 一、具体要求: (1)添加1台计算机,将标签名更改为PC1。 (2)添加1台S3700-26C-HI交换机,标签名为SWA,将交换机的名称设置为SWA。 &am…...