前端面试题整理

** 前端面试题**

var：函数作用域，存在变量提升，可以被重新赋值。
let：块级作用域（包括for-in和for-of循环），不存在变量提升，可以被重新赋值。
const：块级作用域，不存在变量提升，不能被重新赋值。

1、jsonp原理:动态创建-个 script 标签。利用 script 标签的 src 属性不受同源策略限制。因为所有 的 src 属性和 href 属性都不受同源策略限制。可以请求第三方服务器数据内容。
2、CORS:跨域资源共享原理:服务器设置 Access-Control-Alow-OriginHTTP 响应头之后，浏览器将会允许跨域请求
3、反向代理
4、window+iframe

线上环境的跨域问题
1、cors >> 后端加响应头 access-control-allow-origin: ‘*’ 允许所有的页面请求
2、代理(主流方案)
开发环境 ：webpack的devServer进行代理，本地请求转发到接口 vue.config.js > devServer > proxy {}
线上环境： 服务器端使用 nginx 反向代理，拦截请求转发到线上接口, 解决跨域问题

vue3多 2个生命周期onRenderTracked() onRenderTriggered()
vue3用setup取代了beforeCreate和created

1.后端返回过期时间，前端每次请求就判断token的过期时间，如果快到过期时间，就去调用刷新token接口。!缺点:
需要后端额外提供一个 token过期时间的字段;使用了本地时间判断，若本地时间被篡改，特别是本地时间比服务器时间慢时，拦截会失败。
2.写个定时器，然后定时刷新token接口。
!缺点:
浪费资源，消耗性能，不建议采用，
3.在请求响应拦截器中拦截，判断token 返回过期后，调用刷新token接囗。
综合上面的三个方法，最好的是第三个，因为它不需要占用额外的资源。接下来，我们看一下使用axios进行网络请求，然后响应service.interceptors.response 的拦截。

forEach 和map 的相同点相同点 都是循环遍历数组中的每一项
forEach 和map 方法里每次执行匿名函数都支持 3 个参数，参数分别是 item(当前每一项),
index(索引值)，arr(原数组)匿名函数中的 this 都是指向 window 只能遍历数组 都不会改变原数组 区别 map 方法
1.map 方法返回一个新的数组，数组中的元素为原始数组调用函数处理后的值
2.map 方法不会对空数组进行检测，map 方法不会改变原始数组。3.浏览器支持:chrome、Safari1.5+、opera 都支持，IE9+,若 arr 头空数组，则 map 方法返
回的也是一个空数组。
forEach 方法
1.forEach 方法用来调用数组的每个元素，将元素传给回调函数2.forEach 对于空数组是不会调用回调函数的。 无论 arr 是不是空数组，forEach 返回的
都是 undefined。这个方法只是将数组中的每一项作为 callback 的参数执行一次
13、for in 和 for of 的区别(必会)
1、推荐在循环对象属性的时候使用 for…in，在遍历数组的时候的时候使用 for…of
2、for…in 循环出的是 key，for…of 循环出的是 value3、注意，for…of 是 ES6新引入的特性。修复了 ES5 引入的 for…in的不足
4、for…of 不能循环普通的对象，需要通过和 Object.keys()搭配使用

例如，一个搜索框，我们希望用户停止输入一段时间后，再去执行搜索操作，而不是用户每输入一个字符就执行一次搜索。使用防抖技术，我们可以设定一个延迟，比如200毫秒，只有当用户停止输入200毫秒后，才会执行搜索操作。

节流（Throttle）
节流技术用于限制函数在特定时间内只能执行一次，即使这个函数在很短的时间内被多次触发也只会执行一次。与防抖不同，节流是保证函数在一定时间内的执行次数不超过一次。

例如，在窗口调整（resize）、滚动（scroll）等事件中，如果我们希望在每次事件触发时都执行一些操作，但由于这些事件可能非常频繁，会导致性能问题。这时，我们可以使用节流技术，确保在指定的时间窗口内，事件处理函数只执行一次。

防抖
1、概念
防抖策略(debounce):当事件被触发后，延迟 n秒后再执行回调，;若在n秒内又被触发，则重新计时。
2、理解
多次触发只执行一次，比如王者荣耀回城，只有经过8秒才能触发回城，8秒途中再次触发回城或中断，都需要重新等待8秒才能回城
3、应用场景登录、发短信等按钮避免用户点击太快，导致发送了多次请求，需要防抖。
二、节流
1、概念
在规定的时间范围内不会重复触发回调，只有大于这个时间间隔才会触发，把频繁触发变为少量触发。
2、理解
一个周期只执行一次，比如王者荣耀技能，只有经过技能冷却时间，,才能再次使用
3、应用场景
① 鼠标连续不断地触发某事件(如点击)，只在单位时间内只触发一次;
2)懒加载时要监听计算滚动条的位置，但不必每次滑动都触发，可以降低计算的频率，而不必去浪费 CPU 资源;
③ 浏览器input搜索框展示下拉列表，需要节流，也可以使用防抖

防抖是触发间隔大于 timer才会触发，所以每次在小于间隔time要清除定时器;jppue时间才会触发
节流是不管 time内触发多少次，只会每间隔time时间才会触发-次，所以

用return总结:防抖是限制操作，节流是减少操作

重绘:当元素的一部分属性发生改变，如外观、背景、颜色等不会引起布局变化，只需要浏览器根据元素的新属性重新绘制，使元素呈现新的外观叫做重绘，
重排(回流):当 render 树中的一部分或者全部因为大小边距等问题发生改变而需要 DOM 树重新计算的过程
重绘不一定需要重排(比如颜色的改变)，重排必然导致重绘(比如改
变网页位置)
方法:
1、需要要对元素进行复杂的操作时，可以先隐藏(display:“none”)操作完成后再显示
2、需要创建多个 DOM 节点时，使用 DocumentFragment 创建完后一次性的加入 document
缓存 Layout 属性值，如:var left=elem.offsetLeft;这样，多次使
用 left 只产生一次回流
3、尽量避免用 table 布局(table 元素一旦触发回流就会导致 table里所有的其它元素回流)
4、避免使用 css 表达式(expression)，因为每次调用都会重新计算
值(包括加载页面)
5、尽量使用 css 属性简写，如:用 border 代替 border-width
border-style, border-color
6、批量修改元素样式:elem.className和 elem.style.cssText 代替 elem.style.xxX

什么是闭包?(必会)定义:
一个作用域可以访问另外一个函数内部的局部变量,或者说一个函数(子函数)访问另一个函数(父函数)中的变量。此时就会有闭包产生 ,那么这个变量所在的函数我们就称之为闭包函数。
优缺点:闭包的主要作用: 延伸了变量的作用范围,因为闭包函数中的局部变量不会等着闭包函数执行完就销毁,因为还有别的函数要调用它，只有等着所有的函数都调用完了他才会销毁 闭包会造成内存泄漏，如何解决:用完之后手动释放详解:
闭包不仅仅可以实现函数内部的作用域访问这个函数中的局部变量还可以实现全局作用域或者是别的地方的作用域也可以访问到函数内部的局部变量,实现方法就是 return 了一个函数所以 return 函数也是我们实现闭包的一个主要原理，因为返回的这个函数本身就是我们fn 函数内部的一个子函数,所以子函数是可以访问父函数里面的局部变量的，所以返回完毕之后,外面的函数一调用,就会回头调用返回的这个函数,所以就可以拿到这个子函数对应的父函数里面的局部变量

2。原型链： 多个__proto__组成的集合成为原型链（概念类似于作用域链）
instanceof 就是判断某对象是否位于某构造方法的原型链上。

• 封装具有高度复用性的模块
• 拆分高度复用性的组件
• 组件可配置性强

3.路由懒加载（首屏加快渲染）
vue在项目打包/构建(一般是npm run build 具体看package.json文件)之后，会生成一个dist文件夹。在dist文件夹里面又有一个js/app.js文件，这里主要存放的是整个项目的业务逻辑代码。随着项目不断的开发迭代，业务逻辑越来越多，app.js文件也会越来越大。在线上就会容易出现进入首页时所需时间过长或者出现白屏的问题
这会是影响加载时间的重要因数。当构建的项目比较大的时候，懒加载可以分割代码块，提高页面的初始加载效率解决白屏问题。

• ES6推荐方式imprort ()
• webpack提供的require.ensure()实现懒加载
• 使用vue异步组件resolve

4.productionSourceMap --需设置false 如果设置成true会生成map文件 定位源码
5.productionGzip --需设置true 启用gzip压缩功能，打包体积更小
按引入情况加载，只需添加注释即可
代码分割注释：/webpackChunkName: ‘mp-supports’/
prefetch注释：/* webpackPrefetch: true */

6.keep-alive 缓存组件 -eg.个人信息页面 不活动状态
include exclude activated() deactivated()
7.插件CDN 静态 引入html（放七牛 腾讯云 阿里云 自己的cdn）
8.图片cdn 图片懒加载 vue-lazyload 图标使用css图标 iconfont
9.组件按需导入

思路：
webpack-bundle-analyzer 分析包的大小
有些包可以外链cdn rel=‘preload’|‘prefetch’
先加载js首页-路由懒加载
es6 module动态加载js doStuff() default()

v-if 和v-show

使用Object.freeze()方式冻结data中的属性，从而阻止数据劫持

组件销毁的时候会断开所有与实例联系，但是除了addEventListener，所以当一个组件销毁的时候需要手动去removeEventListener

图片懒加载

路由懒加载

state
存储数据的
获取数据最好推荐使用getters
硬要使用的话可以用MapState， 先引用，放在compute中…mapState([‘方法名’,‘方法名’])
getters
获取数据的
this.$store.getters.xxx也可使用mapGetters先引用，放在compute中，...mapGetters({[}^{\prime }方法{名}^{\prime }{,}^{\prime }方法{名}^{\prime }])mutations同步操作数据的this.$store.commit(“方法名”,数据)
也可使用mapMutations ，使用方法和以上一样
actions
异步操作数据的
this.$store.dispatch(“方法名”,数据)

简述
Less 和 SCSS 都是 CSS 预处理器，它们可以让开发人员编写更高效的 CSS 代码来实现快速样式化页面。

下面是一些它们之间的区别：
1、语法差异 Less 和 SCSS 有不同的语法。Less 更像是 CSS，使用大括号 {} 来定义代码块，而且没有必要输入分号 ;。相反，SCSS 借鉴了其他编程语言（如JavaScript）的语法，使用的是类似于Sass的语法。，使用大括号 {} 来定义代码块，必须要以分号 ; 结尾。

2、变量和常量 Less 和 SCSS 都允许使用变量和常量，但它们对这些特性的支持略有不同。Less 的变量使用 @ 符号，而 SCSS 的变量使用 $ 符号。

3、Mixin（混合） Less 和 SCSS 的 Mixin（混合）方式不同。Less 使用 @mixin 关键字来定义多个 CSS 规则，并使用带有 @apply 的选择器来应用混合后的样式；而 SCSS 使用 @mixin 关键字来定义样式，但是使用 @include 将混合样式应用到选择器中。混合可以让开发人员将一组 CSS 规则定义一次并在任何时间引用它们。

4、继承和实现 在 Less 中，通过 extend 关键字来扩展样式，而 SCSS 使用 @extend 关键字来实现样式的扩展。 在 Less 中，可以通过 import 关键字将另一个 Less 文件的样式导入到当前文件中。而在 SCSS 中，使用了 @import 指令。

5、注释：在Less中，注释使用//或者/* /的方式，而在SCSS中，注释只能使用/ */的方式。

6、导入其他文件：在Less和SCSS中，都可以使用@import关键字来导入其他文件中的CSS代码。但是，在Less中，导入的文件必须是以.less为后缀名的文件，而在SCSS中，导入的文件可以是以.scss或者.sass为后缀名的文件。

7、运算符的使用：在Less中，可以使用加减乘除等运算符来进行数值的计算，例如：@width: 100px; @height: @width / 2; 在SCSS中也可以使用加减乘除等运算符来进行数值的计算，但是需要使用#{}语法来将变量插入到计算表达式中，例如：$width: 100px; KaTeX parse error: Expected ‘EOF’, got ‘#’ at position 9: height: #̲{width / 2};

slot 插槽，分为默认插槽、具名插槽和作用域插槽。是子组件提供给父组件使用的一个占位符，父组件可以在这个占位符中填充任何模板代码。主要作用就是更好的拓展和定制化组件，例如弹窗组件、表格组件等。
其中前两个都是渲染在父级，本质上就是替换，父组件渲染完毕之后替换对应的 slot；区别在于具名插槽就是给插槽取了名字；
而作用域插槽在组件内部渲染。本质上会把父组件的内容渲染成函数，子组件调用函数，并且将数据传递给它。当需要将子组件的数据交给父组件展示，此时就可以使用作用域插槽。给数据一个新的作用域，因此叫做作用域插槽。

为什么要语义化？
代码结构: 使页面没有css的情况下，也能够呈现出很好的内容结构
有利于SEO(搜索引擎优化): 爬虫依赖标签来确定关键字的权重，因此可以和搜索引擎建立良好的沟通，帮助爬虫抓取更多的有效信息
提升用户体验： 例如title、alt可以用于解释名称或者解释图片信息，以及label标签的灵活运用。
便于团队开发和维护: 语义化使得代码更具有可读性，让其他开发人员更加理解你的html结构，减少差异化。
方便其他设备解析: 如屏幕阅读器、盲人阅读器、移动设备等，以有意义的方式来渲染网页。

flex-wrap 如果一条轴线排不下，定义换行规则
flex-wrap: nowrap | wrap | wrap-reverse;

flex-flow flex-direction和flex-wrap的简写形式
flex-flow: flex-direction||flex-wrap;

justify-content 定义容器在主轴上的对齐方式
justify-content: flex-start | flex-end | center | space-between | space-around;

align-items 定义容器在交叉轴上的对齐方式
align-items: flex-start | flex-end | center | baseline | stretch;

align-content 定义多根轴线的对齐方式，如果容器只有一根轴线，该属性不起作用
align-content: flex-start | flex-end | center | space-between | space-around

水平垂直居中：

  display: flex;
  align-items: center;
  justify-content: center;

computed
计算属性，依赖其他属性，当其他属性改变的时候下一次获取computed值时也会改变，computed的值会有缓存
watch
类似于数据改变后的回调
如果想深度监听的话，后面加一个deep:true

1.beforeEach
参数有
to(Route路由对象)
from(Route路由对象)
next(function函数) 一定要调用才能进行下一步

2.afterEach
3.beforeRouterLeave

同一个BFC下margin会重叠
计算BFC高度时会算上浮动元素
BFC不会影响到外部元素
BFC内部元素是垂直排列的
BFC区域不会与float元素重叠

如何创建BFC
position设为absolute或者fixed
float不为none
overflow设置为hidden
display设置为inline-block或者inline-table或flex

答：

宏任务：script、setTimeOut、setInterval、setImmediate
微任务:promise.then,process.nextTick、Object.observe、MutationObserver
注意：Promise是同步任务
面试官：宏任务和微任务都是怎样执行的⭐⭐⭐⭐⭐

答：
执行宏任务script，
进入script后，所有的同步任务主线程执行
所有宏任务放入宏任务执行队列
所有微任务放入微任务执行队列
先清空微任务队列，
再取一个宏任务，执行，再清空微任务队列
依次循环

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 。
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用。

2.钩子函数参数(即 el、binding、vnode 和 oldVnode)
el：指令所绑定的元素，可以用来直接操作 DOM。
binding：一个对象，包含以下 property：
name：指令名，不包括 v- 前缀。
value：指令的绑定值。
oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression：字符串形式的指令表达式。
arg：传给指令的参数。
modifiers：一个包含修饰符的对象。
vnode：Vue 编译生成的虚拟节点。
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

3.应用场景
防抖
图片懒加载
一键复制功能

.prevent ：等同于 JavaScript 中的 event.preventDefault() ，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）；

.capture ：与事件冒泡的方向相反，事件捕获由外到内；

.self ：只会触发自己范围内的事件，不包含子元素；

.once ：只会触发一次。

1vue项目中循环嵌入多个iframe 解决跨域问题
在Vue项目中循环嵌入多个iframe可能会导致跨域问题以及页面加载过慢的问题。要解决这个问题，您可以考虑以下方法：

1.使用 iframe的src属性：将iframe的src属性设置为需要嵌入的页面的URL。这样，浏览器会自动处理跨域问题。但是，这种方式可能会导致页面加载过慢，因为每次都需要加载新的页面。
2.使用iframe的sandbox属性：将iframe的sandbox属性设置为allow-scripts，以允许执行脚本。这样，您可以使用JavaScript来处理跨域问题。例如，您可以使用window.postMessage()方法来实现跨域通信。
3.使用iframe的seamless属性：将iframe的seamless属性设置为true，以使iframe的内容与父页面无缝融合。这样，可以提高页面加载速度。但是，这种方式可能会导致跨域问题。
4.使用iframe的frameborder属性：将iframe的frameborder属性设置为0，以去除iframe的边框。这样，可以使页面更加美观。但是，这种方式不会解决跨域问题。
总之，要解决跨域问题以及页面加载过慢的问题，您可以结合使用上述方法。例如，可以使用iframe的sandbox属性来解决跨域问题，同时使用iframe的seamless属性来提高页面加载速度。

// Child component
<template>
  <iframe :src="url" :sandbox="'allow-scripts'" @load="onIframeLoad" frameborder="0"></iframe>
</template>

<script>
export default {
  methods: {
    onIframeLoad() {
      const iframe = window.top.document.querySelector('iframe');
      iframe.contentWindow.postMessage({ type: 'hello', from: 'parent' }, '*');
    },
  },
};
</script>

强行修改第三方组件的数据和显示
合理运用缓存