![](https://img-blog.csdnimg.cn/direct/393e97151d8148b6b267903ddb81818d.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
WEB前端最新面试题 - 又全又卷
文章平均质量分 77
有最新高频前端面试题,有解析,有思考,有举一反三的题目
经海路大白狗
js-tool-big-box工具库开发者;简历优化师
展开
-
【网络安全】一文带你了解前端开发应该关注的【数据安全】
需要注意的是,这些措施主要是增加爬虫的抓取难度,并不能完全阻止专业爬虫。因此,综合考虑后端的安全措施和反爬虫策略,以及运营层面的法律和道德约束,是保护网站和应用程序免受恶意爬虫侵害的有效手段。在反爬虫方面,前端开发者可以采取一些措施来增加网站或应用程序的抗爬虫能力,尽管绝对防止爬虫是不可能的,但可以增加爬虫的难度和成本。以下是一些简单的代码片段,演示如何实现这些反爬虫措施的一部分。实际应用中,需要根据具体场景和需求进行更复杂的实现,同时结合后端的安全措施来提高整体的反爬虫效果。原创 2024-07-17 11:52:16 · 522 阅读 · 3 评论 -
【网络安全】一文带你了解什么是【sql注入】
SQL 注入(SQL Injection)是一种代码注入技术,。其主要目的是绕过应用程序的安全措施,访问或操纵数据库中的数据。这种攻击方法可能导致严重的安全漏洞,包括数据泄露数据篡改数据删除。原创 2024-07-12 14:41:31 · 533 阅读 · 6 评论 -
【网络安全】一文带你了解什么是【网络劫持】
(Network Hijacking)是一种网络攻击,攻击者通过非法手段劫持网络通信,导致合法用户的数据流被拦截、篡改或重定向到攻击者控制的系统。这种攻击可以在各种网络层面上进行,包括(DNS)劫持、劫持、劫持等。原创 2024-07-08 16:05:33 · 1132 阅读 · 22 评论 -
【网络安全】一文带你了解什么是【CSRF攻击】
CSRF(Cross-Site Request Forgery,跨站请求伪造)是一种网络攻击方式,它利用已认证用户在受信任网站上的身份,诱使用户在不知情的情况下执行恶意操作。具体来说,攻击者通过各种方式(如发送恶意链接、在第三方网站上嵌入恶意代码等)诱导用户的浏览器发送未经授权的请求到受信任的网站。这些请求会携带用户的认证信息(如Cookie、Session),从而让受信任的网站误以为是用户本人发起的合法请求。原创 2024-07-01 14:35:02 · 1332 阅读 · 46 评论 -
【网络安全】一文带你了解什么是【中间人攻击】
中间人攻击(Man-in-the-Middle Attack,简称MITM)是一种网络攻击方式,攻击者在通信的双方之间插入自己,并充当中间人,能够拦截、篡改或伪造通信内容。具体来说,中间人攻击通常包括以下几个步骤拦截通信:攻击者通过各种手段(如Wi-Fi嗅探、DNS篡改等)截获通信双方之间的数据流。伪装身份:攻击者伪装成通信的一方,与另一方建立连接,使得双方都认为自己是在与合法的通信对象进行交流。篡改或窃取数据:一旦成功插入通信链路,攻击者可以读取、修改、删除或伪造传输的数据。原创 2024-06-28 16:22:58 · 1858 阅读 · 28 评论 -
【网络安全】 一文带你了解什么是【点击劫持】
意思就是你点击网页的时候,有人劫持你,对没错,劫持你的信息,甚至劫持你的马内,劫持你的理想,劫持你的肉体,劫持你的灵魂。就是这么可怕。原创 2024-06-27 16:01:19 · 1633 阅读 · 94 评论 -
一下出来4个面试官,这是要舌战群儒啊
老张昨天下午请假了,我猜他就是面试去了。果不其然,今天来了,问老张:昨天面试如何?很惊讶的问:你怎么知道我面试去了?迫不及待的说:赶紧说说昨天面试的场景,给我分享分享经验。喝口水说,别提了,我一进屋,坐了4位面试官,场景很激烈啊,大有诸葛亮舌战群儒的感觉。原创 2024-06-24 15:45:55 · 1185 阅读 · 22 评论 -
Vuex遇到浏览器刷新,store里存的数据还在吗?
我们在做Vue前端项目的时候,很可能会使用Vuex来做一些状态或者数据管理,希望在一定程度上,不发送网络请求,不经过密集的组件数据传输,也可以达到数据共享的目的。但如果浏览器页面刷新了,Vuex中store里存的数据还存在吗?原创 2024-06-17 17:57:12 · 700 阅读 · 10 评论 -
Javascript - 请问可以new一个箭头函数吗?
操作符在创建对象的过程中,主要负责设置对象的原型链、执行构造函数以及返回新对象。绑定到这个新对象上,并执行构造函数,传递给构造函数的参数也会传递到此函数中。如果构造函数返回一个对象,则返回该对象;否则,返回新创建的对象。如果构造函数显式地返回一个对象,那么这个对象将作为。属性,从而实现新对象继承构造函数的原型方法和属性。否则,返回步骤1中创建的新对象。操作符的实现有助于深入理解它的工作原理。绑定到新创建的对象上,并传递参数给构造函数。创建一个新的空对象,且这个对象的。属性会被设置为构造函数的。原创 2024-06-15 10:30:00 · 1045 阅读 · 19 评论 -
vue组件destory阶段,我们应该手动销毁哪些东西?
在 Vue.js 中,当组件进入销毁(destroy)阶段时,框架会自动处理很多清理工作。然而,有些资源和事件需要我们手动处理,以避免内存泄漏或其他潜在问题。原创 2024-06-12 16:13:25 · 556 阅读 · 16 评论 -
一文带你搞懂前端实现动画的7种实现方式们
前端项目开发绕不开动画这个话题,随着场景与开发者的不同,我们可以总结以下7种实现动画的方式而在说7种方式前,我们其实可以总结一下,基本也就是4种,分别是和。原创 2024-06-07 16:01:04 · 1597 阅读 · 12 评论 -
CSS - 说一说什么是脱离文档流
说脱离文档流之前呢,我们得知道什么是文档流吧。人们常说你脱离组织了,脱离大部队了,你连大部队都没有加入,还脱离个啥呀,是吧。原创 2024-06-09 14:30:00 · 412 阅读 · 4 评论 -
前端多人项目开发中,如何保证CSS样式不冲突?
在前端项目开发中,例如突然来了一个大项目,很可能就需要多人一起开发,领导说了,要快,要快,要快,你们给我快。然后下面大伙就一拥而上,干着干着发现,一更新代码,哎,我写的样式怎么没了?最后一排查发现,张三跟李四的CSS命名一样,有的级别高,有的级别低,然后就有的被覆盖掉了。那么,我们该如何做一些控制,保证CSS样式尽量少一些冲突呢?原创 2024-06-08 13:30:00 · 838 阅读 · 6 评论 -
CSS - 文字内容溢出的省略如何实现?
我们在前端项目开发中,常常会遇到这种场景,文字显示不下了,内容超出了,但为了有个良好的用户体验,需要把文本内容结尾显示...。原创 2024-06-08 08:45:00 · 390 阅读 · 5 评论 -
同事仅靠着自己写的npm包跳槽去了大厂,羡慕了一整天
比如你是一名测试,你说自己有5年的电商行业经验,那你从公司离职了,项目你是带不走的,你离职了也不可能在天天给他们点了,给他们提bug了。那你离职了,一定是可以带走一些东西的吧。你说你有几年经验,这恐怕不具有杀伤力。你得去了公司直接上手,直接能够给公司带来的东西。比如,你总结了具有行业性标准的测试用例文档,内容清晰,流程全面,期待值准确而丰富。不管去了哪个公司,业务千变万化,但我这套是具有行业标准的,可以直接用于公司做为标准化的东西。原创 2024-06-06 11:37:22 · 1793 阅读 · 74 评论 -
CSS - 元素竖向百分比的基准值是什么?
例如有一个外层DIV元素,设定width为500px,height为300px。然后在其内部添加一个DIV元素,这个时候,内部的DIV元素,如果设定height margin-top padding-top 百分比之后,他们的百分比基准值是什么呢?宽 OR 高 ?比如我们子DIV元素,height设定为30%的话,看一下效果:结论:可以看出,子DIV元素,宽度设定百分比,基准值就是父元素的宽度,高度设定百分比,基准值就是父元素的高度。原创 2024-06-04 11:11:45 · 489 阅读 · 5 评论 -
我的前端封装之路
最近有粉丝提问了我一个面试中遇到的问题,他说面试的时候,面试官问我:你在以前的项目中封装过组件吗?或者做过npm公共库吗?遇到过什么问题吗?当时自己突然觉得好像没什么可回答的啊,但面试结束想起来,自己在前端开发工作中貌似又在不停的封装东西。但因为没有提前准备这类问题,所以回答的不是很理想。原创 2024-05-20 19:30:38 · 2097 阅读 · 26 评论 -
你能说一些HTML5的drag都有哪些常用的API吗?
很多面试官喜欢问这个问题,感觉就像他们公司的拖拽都是自己实现的一样,哈哈,话是这么说,但面试人家要问,我们就掌握一下呗。HTML5 提供了一些原生的拖放(drag and drop)功能,使得开发者可以轻松实现元素的拖动和放置。这些功能主要通过一系列的事件和属性来实现。原创 2024-05-19 10:00:00 · 234 阅读 · 15 评论 -
你能说一说对Iconfont的认识吗?
说起iconfont,你能想到什么?原创 2024-05-18 10:00:00 · 890 阅读 · 6 评论 -
你写HTML的时候,会注重语义化吗?
什么是HTML,其实慢慢的,相信很多人天天用HTML,但你让他背概念,还真不一定能背下来。我曾经就被问到过这个问题,瞬间让人摸不着头脑,面试题千千万,总有意想不到的问题啊。他是一种超文本标记语言,是构建网站的基石。如果一段好的前端代码,下一个接手代码的人,可以通过HTML标签大概看出来,前任开发者大概是什么意图,做出来的页面是要展现一个大概什么样子的东西。虽然各个浏览器的内核可能不同,但大家支持HTML语义化上,标准还是非常相同的。原创 2024-05-15 17:03:37 · 897 阅读 · 5 评论 -
你写代码,会关注时间复杂度吗?
虽然面试的时候总是被问到这个问题,但你写代码的时候,真的会想到这个问题吗?时间复杂度,说的当然不是你写的代码执行用了多长时间,而是代码执行语句的次数。原创 2024-05-13 15:37:35 · 548 阅读 · 8 评论 -
你了解手机设备的dpr吗?它和CSS又有什么联系?
现在许多设备,特别是高分辨率的移动设备(如智能手机、平板电脑和笔记本电脑),都具有高像素密度的屏幕。这种高像素密度意味着相同物理尺寸的屏幕上包含了更多的像素,使得显示更加细腻和清晰。时,我们实际上在谈论屏幕像素密度,即每英寸的像素数。这个属性告诉我们在一个设备上的一个CSS像素对应多少物理像素。还可以帮助我们优化网页性能,例如减少在高分辨率屏幕上不必要的图形渲染,从而提高用户体验。的值通常是一个浮点数,表示设备上的物理像素与CSS像素的比率。属性,从而在运行时获取设备的像素比率。在响应式网页设计中,了解。原创 2024-05-13 14:49:29 · 655 阅读 · 2 评论 -
一文搞懂前端跨页面通信的那些方案们
前端开发逃避不开跨页面通信这项工作,,就好比A页面要和B页面说话,可能只是说一句话,不需要回话,可能是要给一些东西,希望得到回复,并频繁进行沟通,接下来我们说说这些跨页面通信的方案们,希望对你有所帮助。原创 2024-05-08 13:29:48 · 4684 阅读 · 68 评论 -
ES6 - 你知道Map和Set和Array哪个执行查找的效率最高吗?
let mySet = new Set([1, 2, 3, 1, 3, "我们", "nimen", "我们"]);console.log('定义的mySet长什么样?', mySet);原创 2024-05-01 09:00:00 · 513 阅读 · 13 评论 -
请你实现一个JavaScript休眠等待的代码程序
问题:请你实现一个等待函数,例如先打印“吃早饭”,休眠2秒钟,再打印“吃午饭”,再休眠2秒钟,打印“吃晚饭”的代码。原创 2024-05-02 09:15:00 · 512 阅读 · 22 评论 -
你知道JSON.stringify()实现拷贝有什么问题吗?
在说 JSON.stringify() 深拷贝之前,我们先说一说深拷贝和浅拷贝的事情吧。原创 2024-05-03 08:30:00 · 379 阅读 · 26 评论 -
你知道什么是防抖和节流吗?
更像是坐电梯,早上眼看9点了,都着急坐电梯上去打卡,但眼看电梯要关了,进来一个人,等几秒,这几秒钟进来人他不关,几秒后他就关。眼看电梯要上去了,要关了,又有人按了一下,又等几秒。要不老有人着急按下那个“—>原创 2024-05-04 11:00:00 · 357 阅读 · 10 评论 -
Vue3跟Vue2比,性能真的有所提升吗?
说起Vue3的改进,很多人都会说出响应式的改变,与Vue2相比,Vue3采用了的方式对响应式做了重写,而Vue2则是采用的方式将对象的属性进行深度遍历,而这种方式想要实现响应式的前与后,就需要给每个属性添加和。但Vue3做了改进,通过使用proxy的方式,则不需要深度遍历了,他实现了删除属性的监听数组索引的监听以及动态属性添加的监听。这些我发现很多人都是可以回答出来的,但这些回答远远是不够的,下面我们说一些在面试中需要更丰富的回答。1 源码体积有所减少。原创 2024-04-09 12:04:22 · 1056 阅读 · 48 评论 -
ES6 - 你知道Promise和后来的async/await有什么关系吗
Promise最早考的是ES6的知识点,到后来,ES7的async/await了,到后来ES8了,很多面试官估计也快要吐了,都按ES6来问吧。一直到现在的面试,越来越疯狂了,前几年还问,ES6啥啥啥的,现在都快ESX了,真是像某家手机厂商一样,编号一年增长好几个数字。如果你想在一个方法内使用await,让上一步走完,这一步的代码再执行,那么你就需要在方法定义的时候加上async,否则会报错。可以的,不会报错,直接运行,但这样也就失去了await,一步一卡的效果。而await的返回,原创 2024-04-10 15:54:26 · 100 阅读 · 0 评论 -
性能优化 - 你知道webpack都可以帮我们做哪些性能优化吗
webpack打包优化主要的思想就是合理利用浏览器缓存、减小代码体积以及减少HTTP请求数量。尽管我们在开发阶段已经做了大量的优化工作,但开发阶段难免存在疏忽,而且源代码也不能直接部署到服务器。可以说开发阶段与webpack打包阶段的优化都很重要,相辅相成。接下来我们看一下webpack都可以帮我们做哪些性能优化相关的工作。原创 2024-04-08 11:17:26 · 610 阅读 · 4 评论 -
性能优化 - 你知道dns-prefetch有什么用吗
而在下载之前,就需要知道文件部署的服务器在哪里,几乎所有的Javascript文件地址都是采用网络协议加域名的形式,而非网络协议加IP地址的形式,所以浏览器下载Javascript文件之前非常重要的一件事就是,对域名做DNS解析,从而获得域名对应的IP地址。不过需要注意的是,dns-prefetch预解析针对的是跨域Javascript文件,也就是说Javascript文件的域名与当前网站访问的域名是不同的,才会有效果。如果你已经掌握了本小节的知识点,那么面试官很可能还会提出以下问题,例如你。原创 2024-04-08 11:11:23 · 442 阅读 · 0 评论 -
性能优化 - 你能说一说,为什么做了骨架屏,FCP的指标还是没有提升吗
骨架屏就是采用DIV+CSS的方式,模拟首屏整体元素结构的轮廓,将这些内容提前放置于id为app的DIV元素中,在用户真正看到首屏内容之前,可以更快的看到骨架屏,所以可以把骨架屏更通俗的理解为非白屏等待页。不过虽然解决了长时间的白屏问题,而且骨架屏也是早于真正用户所需网页元素被渲染的,但其实FCP这个指标并没有得到提升。需要注意的是,不管在日常工作中做了多少有关性能优化的工作,最终都需要落地到性能指标的提升上,如果没有指标数据的支撑,那么很可能所做的一些工作是徒劳的而自己却不知道。原创 2024-04-08 11:03:08 · 140 阅读 · 0 评论 -
性能优化 - 你能说一说,Javascript文件为什么要放到HTML文档底部加载吗
因为浏览器加载HTML文档有一个从上到下的过程,尽管我们知道这个过程中在遇到script标签的时候,浏览器会去下载Javascript文件,而下载的过程也必然是异步的,但浏览器解析script标签,找到src的属性值并发送请求,这也是需要时间的。当浏览器开始加载HTML文档的时候,会有一个从上到下的过程,意思就是浏览器会先加载head标签内的所有内容,这样就需要先执行script标签代码,再从服务器下载Javascript文件,下载完成之后,要等到浏览器解析并执行完成,浏览器才能继续向下加载执行。原创 2024-04-08 11:01:07 · 112 阅读 · 0 评论 -
性能优化 - 你知道开发React项目中,可以做哪些性能优化吗
在React项目开发中,面临着比较大的问题就是组件更新以及重复渲染的问题,基于这两点,我们可以在日常开发工作中,可以通过以下几点,来提升React的性能,加快组件更新对比,避免过多的重复渲染问题。原创 2024-04-08 10:58:48 · 312 阅读 · 0 评论 -
性能优化 - 你知道CSS有哪些优化方案吗
CSS是前端开发工作中必不可少的技能之一,同时也是网页开发中必不可少的重要元素之一。但很多人所开发的项目本身对性能要求并不高,再加上项目周期紧张,久而久之,也就容易养成不考虑细节的习惯,觉得CSS无非就是做一些布局性的工作。那么如果从性能优化的角度考虑,有哪些细节和方案需要注意呢,一起来看一下吧。原创 2024-04-08 10:43:21 · 1234 阅读 · 1 评论 -
性能优化 - 你知道都有哪些错误的代码习惯,会导致内存泄漏吗
我们所开发的代码在程序运行的过程中,会产生栈内存和堆内存。栈内存主要用来存储基本数据变量、局部变量等,栈内存由系统分配存储空间,后进先出,访问效率高;而堆内存主要用于存储全局变量和引用数据类型的变量,堆内存会被动态分配存储空间,总存储空间比较大,所以访问效率会比较低。正常情况下,程序在运行时占用了内存,这段程序执行完按说所占用的内存也应该被回收。原创 2024-04-08 10:38:57 · 96 阅读 · 0 评论 -
React - 你能说一说React中,函数组件是如何转换为真实DOM的吗
createElement方法接收三个参数,第一个参数是type,可以通过这个参数来判断出当前需要转换的内容是否是函数组件,如果函数组件,type值就会是函数名;整体转换过程关键代码如下。以上代码中,我们故意省略了一些逻辑,例如判断除函数组件节点以外的逻辑,例如将属性添加到对应节点上逻辑,例如遍历子节点的逻辑等。首先,我们在编写JSX代码的时候,约定原生标签采用首字母小写的形式,例如div、span、img这些,而如果遇到自定义组件呢,就会采用首字母大写的形式,例如MyList、Detail这样。原创 2024-04-08 10:23:32 · 68 阅读 · 0 评论 -
React - 你能说一说,在React项目中如何保存列表页的状态吗
但其实这个方案也有一定的弊端,比如用户在详情页停留时间过长,列表页已经新增或是删除了一些数据的时候,用户返回列表页很可能看到的还是老的列表页数据,这就又需要做额外的更新操作,即便如此,这种方式也已经在很大程度上提升了开发效率,而且使后期维护成本也降低了很多。是链接带参数的形式,从列表页跳转到详情页的时候,提前把筛选项和页码以参数的形式拼到详情页的链接上,到了详情页获取到这些参数,保存起来,等跳转回列表页,再把这些参数带回来。例如一个列表页,顶部有检索区域,用户已经做了一定的筛选,并且查询出列表数据。原创 2024-04-08 10:18:46 · 142 阅读 · 0 评论 -
React - 请你说一说setState是同步的还是异步的
这里需要单独说一下合成事件,比如我们点击页面某个元素的时候,会调用click事件,React可以根据事件找到对应的元素,并以此元素开始向上冒泡查找所有同类型的事件,再将同类型的事件复用同一个合成事件的实例对象,并且对preventDefault和stopPropagation做了一定的重写工作,这样就可以在很大程度上节省创建事件实例对象的开销了。另外,很多求职者会单纯的说setState是异步的,又或者仅仅只是描述出哪些场景下是异步的,哪些场景下是同步的,这是远远不够的。原创 2024-04-08 10:16:35 · 287 阅读 · 0 评论 -
React - 你知道useffect函数内如何模拟生命周期吗
但是当使用Hooks做业务开发的时候,看见一个个useEffect函数,却显得有些迷茫,因为在useEffect中,不需要定义那些生命周期的钩子函数了,那么怎么知道组件走到哪一个周期了呢?例如要实现componentDidMount,我们知道componentDidMount是在组件初始化阶段才会被调用,在组件后续的更新和卸载阶段并不会执行,可以通过给useEffect函数的第二个参数传递空数组的方式模拟componentDidMount阶段。这个时候如果求职者意识不到这句话只是一个引子,就大错特错了。原创 2024-04-08 10:13:38 · 345 阅读 · 0 评论