前端面试大全
文章平均质量分 74
殿君不是殿军
这个作者很懒,什么都没留下…
展开
-
token的主动介入和失效的被动是怎么处理的?(token失效/超时处理)
主要在请求拦截器中操作:主要在响应拦截器中操作:原创 2022-07-10 21:11:02 · 1226 阅读 · 1 评论 -
前端面试题大全(二)持续更新中
什么情况下,数组或者对象的数据产生变动, 视图不更新? 解决方案是什么?(2种)虚拟DOM是什么?diff算法如何比较新旧虚拟DOM(从根元素说起)?v-for的key值有什么讲究?作用是什么?key用index可能会造成数据错乱v-model的本质是什么?[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PJwXSSyr-1657205243563)(C:\Users\lenovo\Desktop\课堂面试题\assets\1657192193193.png)]原创 2022-07-07 22:49:47 · 615 阅读 · 3 评论 -
前端主流面试官必问超详细面试题(整理完以秃头)持续更新中
CDN利用最靠近每位用户的服务器,更快、更可靠地将音乐、图片、视频、应用程序及其他文件发送给用户,来提供高性能、可扩展性及低成本的网络内容传递给用户。CDN的作用:(1)在性能方面,引入CDN的作用在于:(2)在安全方面,CDN有助于防御DDoS网络攻击:懒加载也叫做延迟加载、按需加载,指的是在长网页中延迟加载图片数据,是一种较好的网页性能优化的方式。 比如:在较长的网页中。如果有很多图片,所有的图片都被加载出来,而用户只能看到可视窗口的那一部分图片数据,这样就浪费了性能。如果我们使用图片的懒加载就可以解决原创 2022-07-07 23:03:46 · 3766 阅读 · 1 评论 -
HTTP协议常问的面试题(吐血整理)
2、GET和POST有什么区别?3、什么是无状态协议,HTTP 是无状态协议吗,怎么解决4、UDP 和 TCP 的区别5、说一下Http协议中302状态?6、Http协议有什么组成?7、cookies机制和session机制的区别是什么?8、HTTP协议有什么特点?9、http和https有什么区别?10、为什么有了HTTP为什么还要HTTPS?11、HTTP的keep-alive是干什么的?12、http的请求报文是什么样的?13、http的响应报文是什么样的原创 2022-07-07 15:36:22 · 12982 阅读 · 2 评论 -
前端面试题二(持续更新)
前端面试题原创 2022-07-05 20:52:50 · 290 阅读 · 0 评论 -
前端综合面试题一(持续更新)
Set具有以下方法:创建了一个新数组,新数组中是符合条件的所有元素查询数组中元素是否都满足要求,都满足则返回true,否则返回false查询数组中是否有元素满足要求,有满足则返回true并且不再往下执行,否则返回false扁平化数组,例如将二维数组转换成一维数组,三维数组转成一维二维数组。接受一个参数,不传入默认是1,表示拉平的层数。let关键字用来声明变量,使用 let声明的变量有几个特点:const 关键字用来声明常量, const声明有以下特点:ES6允许按照一定模式,从数组和对象中提取值,对变量进行原创 2022-07-01 20:21:36 · 1308 阅读 · 0 评论 -
JavaScript的执行机制是什么,事件循环是什么?
上面代码执行结果为:解析一下原因为什么执行循序是这样的?这是因为异步任务又分为宏任务和微任务重复以上2步骤,结合event loop(1) event loop(2) ,就是更为准确的JS执行机制了。所以执行结果为:...原创 2022-06-28 14:27:06 · 361 阅读 · 0 评论 -
Vue双向数据绑定的原理(前端面试必问)
Vue实现双向数据绑定是采用数据劫持和发布者-订阅者模式。数据劫持是利用ES5的方法来劫持每个属性的getter和setter,在数据变动时发布消息给订阅者,从而触发相应的回调来更新视图总之就是,在创建Vue实例的时候给传入的data进行数据劫持,同时视图编译的时候,对于使用到data中数据的地方进行创建Watcher对象,然后在数据劫持的getter中添加到发布者对象中,当劫持到数据发生变化的时候,就通过发布订阅模式以回调函数的方式通知所有观察者操作DOM进行更新,从而实现数据的双向绑定。通过直接调用o原创 2022-06-26 15:27:39 · 5972 阅读 · 0 评论 -
vue中的的diff算法(详解)
算法是一种通过同层的树节点进行比较的高效算法其有两个特点: 算法在很多场景下都有应用,在 中,作用于虚拟 渲染成真实 的新旧 节点比较整体策略为:深度优先,同层比较下面举个通过算法更新的例子:新旧节点如下图所示:第一次循环后,发现旧节点D与新节点D相同,直接复用旧节点D作为后的第一个真实节点,同时旧节点移动到C,新节点的 移动到了 C第二次循环后,同样是旧节点的末尾和新节点的开头(都是 C)相同,同理, 后创建了 C 的真实节点插入到第一次创建的 D 节点后面。同时旧节点的 移动到了 B,新节点原创 2022-06-24 11:12:32 · 743 阅读 · 0 评论 -
对Vue中插槽-slot的详细解读
在HTML中 元素 ,作为 技术套件的一部分,是Web组件内的一个占位符该占位符可以在后期使用自己的标记语言填充举个栗子不会展示到页面中,需要用先获取它的引用,然后添加到中,在中的概念也是如此 艺名插槽,花名“占坑”,我们可以理解为在组件模板中占好了位置,当使用该组件标签时候,组件标签里面的内容就会自动填坑(替换组件模板中位置),作为承载分发内容的出口可以将其类比为插卡式的FC游戏机,游戏机暴露卡槽(插槽)让用户插入不同的游戏磁条(自定义内容)放张图感受一下通过插槽可以让用户可以拓展组件,去更好地原创 2022-06-18 16:38:42 · 223 阅读 · 0 评论 -
在Vue中我们怎么去使用长token(refresh_token)?
当用户发请求时,如果后端返回401,就说明token过期 这时我们要统一监测后端返回的401代码我们需要添加响应拦截器,在拦截器里的报错函数中监测判断token是否过期,代码如下:监测到401报错,就拿长token 发请求获取最新的token注意点:不能用request发,,因为request设置了请求拦截器,会注入老token (前提是自己封装了request)代码示例如下:接着用新token存到vuex中,存到本地存储,在js文件中不能用辅助函数 ,利用解构赋值覆盖旧token ,原创 2022-06-17 14:25:35 · 550 阅读 · 0 评论 -
Vue项目中你是如何解决跨域的呢?
开始之前,我们把组件间通信这个词进行拆分都知道组件是最强大的功能之一,中每一个我们都可以视之为一个组件通信指的是发送者通过某种媒体以某种格式来传递信息到收信者以达到某个目的。广义上,任何信息的交通都是通信组件间通信即指组件()通过某种方式来传递信息以达到某个目的举个栗子我们在使用框架中的组件,可能会往组件中传入某些数据,这个本质就形成了组件之间的通信在古代,人们通过驿站、飞鸽传书、烽火报警、符号、语言、眼神、触碰等方式进行信息传递,到了今天,随着科技水平的飞速发展,通信基本完全利用有线或无线电完成,相继出现原创 2022-06-16 21:56:28 · 342 阅读 · 0 评论 -
Vue组件之间的通信方式都有哪些?
开始之前,我们把组件间通信这个词进行拆分都知道组件是最强大的功能之一,中每一个我们都可以视之为一个组件通信指的是发送者通过某种媒体以某种格式来传递信息到收信者以达到某个目的。广义上,任何信息的交通都是通信组件间通信即指组件()通过某种方式来传递信息以达到某个目的举个栗子我们在使用框架中的组件,可能会往组件中传入某些数据,这个本质就形成了组件之间的通信在古代,人们通过驿站、飞鸽传书、烽火报警、符号、语言、眼神、触碰等方式进行信息传递,到了今天,随着科技水平的飞速发展,通信基本完全利用有线或无线电完成,相继出现原创 2022-06-15 17:50:32 · 341 阅读 · 2 评论 -
你是怎么理解ES6中 Promise的?使用场景?
实例化一个实例,定义属性和方法点击按钮,发现结果不及预期,数据虽然更新了(打印出了新属性),但页面并没有更新为什么产生上面的情况呢?下面来分析一下是用过实现数据响应式当我们访问属性或者设置值的时候都能够触发与但是我们为添加新属性的时候,却无法触发事件属性的拦截原因是一开始的属性被设成了响应式数据,而是后面新增的属性,并没有通过设置成响应式数据 不允许在已经创建的实例上动态添...原创 2022-06-14 14:21:53 · 224 阅读 · 0 评论 -
动态给vue的data添加一个新的属性时会发生什么?怎样解决?
我们从一个例子开始定义一个标签,通过指令进行遍历然后给标签绑定点击事件,我们预期点击按钮时,数据新增一个属性,界面也 新增一行实例化一个实例,定义属性和方法点击按钮,发现结果不及预期,数据虽然更新了(打印出了新属性),但页面并没有更新为什么产生上面的情况呢?下面来分析一下是用过实现数据响应式当我们访问属性或者设置值的时候都能够触发与但是我们为添加新属性的时候,却无法触发事件属性的拦截原因是一开始的属性被设成了响应式数据,而是后面新增的属性,并没有通过设置成响应式数据 不允许在已经创建的实例上动态添原创 2022-06-13 14:06:17 · 1294 阅读 · 0 评论 -
vue中实现路由跳转的三种方式(超详细整理)
步骤 (7步法 ):下载模块到当前工程在main.js中引入VueRouter函数添加到Vue.use()身上 – 注册全局RouterLink和RouterView组件创建路由规则数组 – 路径和组件名对应关系用规则生成路由对象把路由对象注入到new Vue实例中用作为挂载点, 切换不同的路由页面代码如下:2.在跳转路由时, 可以给路由对应的组件内传值在router-link上的to属性传值, 语法格式如下 :(方式一)对应页面组件接收传递过来的值(方式二)对应页原创 2022-06-12 10:33:36 · 85355 阅读 · 6 评论 -
路由跳转方式name 、 path 和传参方式params 、query的区别
$ router操作路由跳转$route读取 路由参数接收二、路由跳转方式name 、 path 和传参方式params 、query的区别通过params传参另一个页面接收:通过query传参另一个页面接收query相当于GET请求,页面跳转的时候,可以在地址栏看到请求参数params相当于POST请求,参数不会在地址栏中显示...原创 2022-06-12 08:37:19 · 3270 阅读 · 0 评论 -
简单且棘手的前端面试题(JS)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RrxJ8E9X-1654909465478)(简单且棘手的前端面试题.assets/1654909282846.png)]b 是一个值为 0 的全局变量,所以 b 的类型的值为 ‘number’......原创 2022-06-11 09:05:08 · 86 阅读 · 0 评论 -
前端面试题之Vue中data为什么必须是个函数?
vue中data必须是函数是为了保证组件的独立性和可复用性,data是一个函数,组件实例化的时候这个函数将会被调用,返回一个对象,计算机会给这个对象分配一个内存地址,你实例化几次,就分配几个内存地址,他们的地址都不一样,所以每个组件中的数据不会相互干扰,改变其中一个组件的状态,其它组件不变。...原创 2022-06-10 21:24:38 · 240 阅读 · 0 评论 -
什么是Vue,你对Vue的理解?
Web是World Wide Web的简称,中文译为万维网我们可以将它规划成如下的几个时代来进行理解石器时代指的就是我们的静态网页,可以欣赏一下1997的Apple官网最早的网页是没有数据库的,可以理解成就是一张可以在网络上浏览的报纸,直到CGI技术的出现通过 CGI Perl 运行一小段代码与数据库或文件系统进行交互,如当时的Google(1998年)ASP,JSP大家应该都不会太陌生,最早出现于 2005 年左右,先后出现了微软的 ASP 和 Java Server Pages [JSP] 等技术,取代原创 2022-06-10 13:58:29 · 1372 阅读 · 1 评论 -
你了解axios的原理吗?有看过它的源码吗?
关于的基本使用,上篇文章已经有所涉及,这里再稍微回顾下:发送请求请求拦截器响应拦截器取消请求二、实现一个简易版axios构建一个构造函数,核心代码为导出实例上述就已经能够实现这种方式的请求下面是来实现下这种形式的请求将上的方法搬运到上首先实现个工具类,实现将方法混入到,并且修改指向修改导出的方法构建拦截器的构造函数实现和执行语句和的时候,实现获取实例上的对象,然后再获取或拦截器,再执行对应的拦截器的方法把上的方法和属性搬到过去现在也有了对象,在发送请求的时候,会先获取拦截器的的方法原创 2022-06-02 19:16:02 · 179 阅读 · 0 评论 -
Vue项目中有封装过axios吗?主要是封装哪方面的?
面试官:Vue项目中有封装过axios吗?主要是封装哪方面的?一、axios是什么axios 是一个轻量的 HTTP客户端基于 XMLHttpRequest 服务来执行 HTTP 请求,支持丰富的配置,支持 Promise,支持浏览器端和 Node.js 端。自Vue2.0起,尤大宣布取消对 vue-resource 的官方推荐,转而推荐 axios。现在 axios 已经成为大部分 Vue 开发者的首选特性从浏览器中创建 XMLHttpRequests从 node.js 创建 http请求原创 2022-05-28 20:28:38 · 128 阅读 · 0 评论 -
数组常用的方法(详细版)
数组中长用到的方法push()::向数组后面添加元素 语法: 数组.push(你要添加的数据) 直接改变原始数组 添加的数据是放在数组的最后一个 返回值:添加过后数组的长度 var arr = [1, 2, 3, 4, 5] //示例数组 var res = arr.push(6) console.log(arr) 打印结果: [1, 2, 3, 4, 5, 6] //直接改变原始数组 console.原创 2022-05-25 20:40:36 · 547 阅读 · 0 评论 -
说说 HTTP1.0/1.1/2.0 的区别?
面试官:说说 HTTP1.0/1.1/2.0 的区别?一、HTTP1.0HTTP协议的第二个版本,第一个在通讯中指定版本号的HTTP协议版本HTTP 1.0 浏览器与服务器只保持短暂的连接,每次请求都需要与服务器建立一个TCP连接服务器完成请求处理后立即断开TCP连接,服务器不跟踪每个客户也不记录过去的请求简单来讲,每次与服务器交互,都需要新开一个连接例如,解析html文件,当发现文件中存在资源文件的时候,这时候又创建单独的链接最终导致,一个html文件的访问包含了多次的请求和响应,每次请原创 2022-05-24 19:44:12 · 83 阅读 · 0 评论 -
什么是JSON
什么是JSONjson是一种数据交换格式,它采用的是key-value的数据格式(键值对)比如:{"name" : "张三"} 注意:必须是双引号它经常用于数据传输,比如前端向服务器请求用户信息接口,那么服务端返回的数据结构是:{"name" : "张三","sex" : "男"}前端收到这个数据后,就可以把name取出来,然后把用户名称显示在界面上。...原创 2022-05-24 19:38:24 · 151 阅读 · 0 评论 -
宏任务和微任务
什么是宏任务和微任务JavaScript 把异步任务又做了进一步的划分,异步任务又分为两类,分别是:宏任务(macrotask)异步Ajax请求setTimeout、setInterval文件操作。。。微任务(microtask)Promise.then、.catch 和 .finallyprocess.nextTick如下图:宏任务和微任务的执行顺序每一个宏任务执行完之后,都会检查是否存在待执行的微任务, 如果有,则执行完所有微任务之后,再继续执行下一个宏任务原创 2022-05-22 19:45:53 · 83 阅读 · 0 评论 -
同步任务和异步任务的执行过程
同步任务和异步任务为了防止某个耗时任务导致程序假死的问题,JavaScript 把待执行的任务分为了两类:同步任务(synchronous)又叫做非耗时任务,指的是在主线程上排队执行的那些任务只有前一个任务执行完毕,才能执行后一个任务异步任务(asynchronous)当异步任务执行完成后,会通知 JavaScript 主线程执行异步任务的回调函数当异步任务执行完成后,会通知JavaScript主线程执行异步任务的回调函数同步任务和异步任务的执行过程同步任务由 Ja原创 2022-05-22 18:26:29 · 310 阅读 · 0 评论 -
什么是回调地狱?怎么解决回调地狱
什么是回到地狱?回调函数?怎么解决回调地狱原创 2022-05-22 14:24:53 · 2379 阅读 · 0 评论 -
cookie、session、token 的执行原理
cookiecookie 是身份证的一种手段cookie在服务器端生成的(意味着浏览器第一次访问服务器的时候是没有cookie值的)服务器端开始生成cookie:res.cookie('username', 'dfg', { maxAge: 1000 * 60 * 60})设置好了之后 会自动的向浏览器返回cookie值浏览器收到服务器端的cookie值 会自动保存在cookie里面当浏览器访问服务器的时候会默认的携带cookie值 放在请求头上发给服务器服务器端获取原创 2022-05-19 19:13:35 · 313 阅读 · 0 评论 -
数组的常用方法有哪些?
面试官:数组的常用方法有哪些?一、操作方法数组基本操作可以归纳为 增、删、改、查,需要留意的是哪些方法会对原数组产生影响,哪些方法不会下面对数组常用的操作方法做一个归纳增下面前三种是对原数组产生影响的增添方法,第四种则不会对原数组产生影响push()unshift()splice()concat()push()push()方法接收任意数量的参数,并将它们添加到数组末尾,返回数组的最新长度let colors = []; // 创建一个数组let count = colors.原创 2022-05-15 19:02:50 · 71 阅读 · 0 评论