前端面试题

输入网址后，http的过程

1、使用DNS域名解析

2、发起TCP的3次握手

3、建立TCP连接后发起http请求；

4、服务器响应http请求，浏览器得到返回response；

5、浏览器解析response，并请求其它的资源（如js、css、图片等）；

6、浏览器对页面进行渲染。

vue路由模式

hash

模式是一种把前端路由的路径用井号 # 拼接在真实 url 后面的模式。当井号 # 后面的路径发生变化时，浏览器并不会重新发起请求，而是会触发 onhashchange 事件。

https://juejin.cn/post/6993840419041706014

hash 通过 window.onhashchange 的方式，来监听 hash 的改变，借此实现无刷新跳转的功能。

hash 永远不会提交到 server 端（可以理解为只在前端自生自灭）。

history 通过 pushState 、 replaceState 来实现无刷新跳转的功能

使用 history 模式时，在对当前的页面进行刷新时，此时浏览器会重新发起请求。如果 nginx 没有匹配得到当前的 url ，就会出现 404 的页面。

而对于 hash 模式来说，它虽然看着是改变了 url ，但不会被包括在 http 请求中。所以，它算是被用来指导浏览器的动作，并不影响服务器端。

因此，改变 hash 并没有真正地改变 url ，所以页面路径还是之前的路径， nginx 也就不会拦截。

to B 的系统推荐用 hash ，相对简单且容易使用，且因为 hash 对 url 规范不敏感；

to C 的系统，可以考虑选择 H5 history ，但是需要服务端支持；

能先用简单的，就别用复杂的，要考虑成本和收益。

Set 和 Map有什么区别？

1、Map是键值对，Set是值得集合，当然键和值可以是任何得值

2、Map可以通过get方法获取值，而set不能因为它只有值

3、都能通过迭代器进行for...of 遍历

4、Set的值是唯一的可以做数组去重，而Map由于没有格式限制，可以做数据存储

Vuex有哪些基本属性?为什么 Vuex 的 mutation 中不能做异步操作?

有五种，分别是 State、 Getter、Mutation 、Action、 Module

state => 基本数据(数据源存放地)

getters => 从基本数据派生出来的数据

mutations => 提交更改数据的方法，同步

actions => 像一个装饰器，包裹mutations，使之可以异步。

modules => 模块化Vuex

Vuex中所有的状态更新的唯一途径都是mutation，异步操作通过 Action 来提交 mutation实现，这样可以方便地跟踪每一个状态的变化，从而能够实现一些工具帮助更好地了解我们的应用。

每个mutation执行完成后都会对应到一个新的状态变更，这样devtools就可以打个快照存下来，然后就可以实现 time-travel 了。如果mutation支持异步操作，就没有办法知道状态是何时更新的，无法很好的进行状态的追踪，给调试带来困难。

Loader和Plugin 有什么区别

Loader：直译为"加载器"。Webpack将一切文件视为模块，但是webpack原生是只能解析js文件，如果想将其他文件也打包的话，就会用到loader。 所以Loader的作用是让webpack拥有了加载和解析非JavaScript文件的能力。 Plugin：直译为"插件"。Plugin可以扩展webpack的功能，让webpack具有更多的灵活性。 在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。

UDP和TCP有什么区别

image.png

什么是媒体查询？

媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。

Vue的首屏加载优化方案

1、 使用CDN资源，减少打包体积，提高速度。

2、 路由懒加载

3、 把静态资源也放在CDN

4、 第三方组件库UI框架，使用按需引入（Tree Shaking）

5、 nginx开启gzip打包压缩

浏览器的性能监控你是怎么做的

1. Lighthouse

Lighthouse 是 google 一个开源的自动化工具，运行 Lighthouse 的方式有两种：一种是作为 Chrome 扩展程序运行；另一种作为命令行工具运行。Chrome 扩展程序提供了一个对用户更友好的界面，方便读取报告。通过命令行工具可以将 Lighthouse 集成到持续集成系统。展示了白屏、首屏、可交互时间等性能指标和 SEO、PWA 等。

2. PageSpeed

https://developers.google.com/speed/pagespeed/insights/

不仅展示了一些主要的性能指标数据，还给出了部分性能优化建议。

什么是diff算法

diff算法就是进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方，最后用patch记录的消息去局部更新Dom。

简单来说Diff算法就是在虚拟DOM树从上至下进行同层比对，如果上层已经不同了，那么下面的DOM全部重新渲染。这样的好处是算法简单，减少比对次数，加快算法完成速度。

有两个特点：

比较只会在同层级进行, 不会跨层级比较

在diff比较的过程中，循环从两边向中间比较

防抖和节流

比如一个输入input 赋值给页面

防抖：一直输入，此时不赋值，等待停止输入一定的时间之后再赋值

节流：一直输入，每过一定的时间赋值一次

哪些情况会导致内存泄漏

1、 意外的全局变量：由于使用未声明的变量,而意外的创建了一个全局变量,而使这个变量一直留在内存中无法被回收

2、 被遗忘的计时器或回调函数：设置了 setInterval 定时器，而忘记取消它，如果循环函数有对外部变量的引用的话，那么这个变量会被一直留在内存中，而无法被回收。

3、 脱离 DOM 的引用：获取一个 DOM 元素的引用，而后面这个元素被删除，由于一直保留了对这个元素的引用，所以它也无法被回收。

4、 闭包：不合理的使用闭包，从而导致某些变量一直被留在内存当中。

说一下data为什么是一个函数而不是一个对象?

JavaScript中的对象是引用类型的数据，当多个实例引用同一个对象时，只要一个实例对这个对象进行操作，其他实例中的数据也会发生变化。而在Vue中，我们更多的是想要复用组件，那就需要每个组件都有自己的数据，这样组件之间才不会相互干扰。所以组件的数据不能写成对象的形式，而是要写成函数的形式。数据以函数返回值的形式定义，这样当我们每次复用组件的时候，就会返回一个新的data，也就是说每个组件都有自己的私有数据空间，它们各自维护自己的数据，不会干扰其他组件的正常运行。

说一下for...in 和 for...of的区别?

1、for...of遍历获取的是对象的键值, for...in获取的是对象的键名;

2、for...in会遍历对象的整个原型链, 性能非常差不推荐使用,而for...of只遍历当前对象不会遍历原型链;

3、对于数组的遍历,for...in会返回数组中所有可枚举的属性(包括原型链上可枚举的属性),for...of只返回数组的下标对应的属性值; 总结：for...in循环主要是为了遍历对象而生,不适用遍历数组; for....of循环可以用来遍历数组、类数组对象、字符串、Set、Map以及Generator对象

JSON.stringify有什么缺点

使用JSON.Stringify 转换的数据中，如果包含 function，undefined，Symbol，这几种类型，不可枚举属性， JSON.Stringify序列化后，这个键值对会消失。

转换的数据包含RegExp 引用类型序列化之后会变成空对象。

转换的数据中包含Date对象，JSON.Stringify序列化之后，会变成字符串。

转换的数据中包含 NaN，Infinity 值（含-Infinity），JSON序列化后的结果会是null。

无法序列化不可枚举属性。

无法序列化对象的循环引用，（例如: obj[key] = obj)。

无法序列化对象的原型链。

https://blog.csdn.net/weixin_44514665/article/details/115444273

AJAX中XMLHttpRequest有哪五大步骤

1. 创建XMLhttpRequest对象

2. 使用open方法设置和服务器的交互信息

3. 如果默认是json格式,那就可以不设置requestHeader,默认的发送的是json格式数据

4. 发送请求

5. 如果请求完成，并响应完成，获取到响应数据（onreadystatechange）

vue3.0

1、 响应式原理的改变 Vue3.x 使用Proxy取代 Vue2.x 版本的Object.defineProperty

2、 组件选项声明方式Vue3.x 使用Composition API setup 是Vue3.x新增的一个选项，他是组件内使用Composition API 的入口

3、 模板语法变化slot具名插槽语法 自定义指令 v-model 升级

4、 其它方面的更改Suspense支持Fragment(多个根节点) 和Protal (在dom其他部分渲染组建内容)组件 针对一些特殊的场景做了处理。基于treeshaking优化，提供了更多的内置功能。

说一下SPA单页面有什么优缺点？

优点：

1. 体验好，不刷新，减少 请求 数据ajax异步获取 页面流程；

2. 前后端分离

3. 减轻服务端压力

4. 共用一套后端程序代码，适配多端

缺点：

1. 首屏加载过慢；

2. SEO 不利于搜索引擎抓取

说一下proxy 它有什么优点

1. Object.defineProperty 拦截的是对象的属性，会改变原对象。proxy 是拦截整个对象，通过 new 生成一个新对象，不会改变原对象。

2. proxy 的拦截方式，除了上面的 get 和 set ，还有 11 种。选择的方式很多 Proxy，也可以监听一些 Object.defineProperty 监听不到的操作，比如监听数组，监听对象属性的新增，删除等。

说一下react和vue框架的区别

React与Vue的相同点

（1）都支持服务器渲染；

（2）都是数据驱动视图；

在以前，我们需要频繁操作DOM实现页面效果。而Vue和React就隐藏了DOM的频繁操作，采用数据驱动视图的方式，只需要关注数据的变化。

（3）都遵循组件化思想；

React和Vue都遵循组件化思想，它们把注意力放在UI层，将页面分成一一些细块，也就是组件，组件之间组合嵌套就形成最后的网页界面。

（4）都使用虚拟DOM；

（5）都有状态管理；

react有redux，vue有vuex。

不同点:

（1）框架本质不同；

Vue本质是MVVM框架，是由MVC发展来的；

React是前端组件框架，是由后端组件演化而来的。

（2）数据流不同；

Vue实现双向绑定，在vue1.0中有两种方法可以实现双向绑定，父子组件之间的props以及组件与DOM直接的v-model。vue2去掉了第一种双向绑定方法，通过v-model实现数据双向绑定。

React一直不支持双向绑定，提倡的是单向数据流（onChange/setState）。

（3）监听数据变化的实现原理不同；

Vue通过getter，setter以及一些函数的劫持，能精确知道数据的变化。

React是通过比较引用方式（diff）进行的，当应用的状态改变时，全部组件都会重新渲染。

（4）组件写法差异；

React推荐的做法是JSX + inline style, 也就是把 HTML 和 CSS 全都写进 JavaScript 中；

Vue 推荐的做法是 template 的单文件组件格式，即 html,css,JS 写在同一个文件(vue也支持JSX写法)

（5）渲染过程不同。

Vue可以更快地计算出Virtual DOM的差异，这是由于它在渲染过程中，会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树。

React在应用的状态被改变时，全部子组件都会重新渲染。通过shouldComponentUpdate这个生命周期方法可以进行控制。

（6）在state上的不同；

React中，state对象需要用setState方法更新状态；

在Vue中，state对象不是必须的，数据由data属性在vue对象中管理。

Vue作用域插槽

子组件：

image.png

父组件：

image.png
image.png

Var let const

为什么 Vue2 this 能够直接获取到 data 和 methods ?

通过this直接访问到methods里面的函数的原因是：

因为methods里的方法通过 bind 指定了this为 new Vue的实例(vm)。

通过 this 直接访问到 data 里面的数据的原因是：data里的属性最终会存储到new Vue的实例（vm）上的 _data对象中，访问 this.xxx，是访问Object.defineProperty代理后的 this._data.xxx。

Promise 如何解决回调地狱

首先，请你再回想一下什么是回调地狱，回调地狱有两个主要的问题：

1. 多层嵌套的问题；

2. 每种任务的处理结果存在两种可能性（成功或失败），那么需要在每种任务执行结束后分别处理这两种可能性。

这两种问题在“回调函数时代”尤为突出，Promise 的诞生就是为了解决这两个问题。Promise 利用了三大技术手段来解决回调地狱：回调函数延迟绑定、返回值穿透、错误冒泡。

说一说null 和 undefined 的区别，如何让一个属性变为null

null 是定义并赋值为null

undefined是定义未赋值

null = = undefined ==> ture null= = = undefined ==> false

如何实现可过期的localstorage数据？

一种是惰性删除：惰性删除是指获取数据的时候，拿到存储的时间和当前时间做对比，如果超过过期时间就清除Cookie。

另一种是定时删除：每隔一段时间执行一次删除操作，并通过限制删除操作执行的次数和频率，来减少删除操作对CPU的长期占用。 LocalStorage清空应用场景：token存储在LocalStorage中，要清空

Axios拦截器的原理和应用

场景：请求拦截器用于在接口请求之前做的处理，比如为每个请求带上相应的参数（token，时间戳等）。 返回拦截器用于在接口返回之后做的处理，比如对返回的状态进行判断（token是否过期）。

拦截器原理：创建一个chn数组，数组中保存了拦截器相应方法以及dispatchRequest（dispatchRequest这个函数调用才会真正的开始下发请求），把请求拦截器的方法放到chn数组中dispatchRequest的前面，把响应拦截器的方法放到chn数组中dispatchRequest的后面，把请求拦截器和相应拦截器forEach将它们分unshift,push到chn数组中，为了保证它们的执行顺序，需要使用promise，以出队列的方式对chn数组中的方法挨个执行。 加分回答 Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。从浏览器中创建 XMLHttpRequests,从 node.js 创建 http 请求,支持 Promise API,可拦截请求和响应，可转换请求数据和响应数据，可取消请求，可自动转换 JSON 数据，客户端支持防御 XSRF

什么方法可以保持前后端实时通信？

轮训(占带宽，适合小型游戏)，长轮训，websockect（实时通讯）,sse,iframe

说一说服务端渲染

服务器端生成HTML直接返回给浏览器、减少网络传输、首屏渲染快、对搜索引擎友好

SSR是Server Side Render简称；页面上的内容是通过服务端渲染生成的，浏览器直接显示服务端返回的html就可以了。

使用场景：一般不会用在公司项目内（涉及前后端分离开发问题），可以用户博客网站、官网、营销类网站等比较注重加载速度和渲染效率的时候。

说说你对单向数据流和双向数据流的理解

单向数据流是指数据只能从父级向子级传递数据，子级不能改变父级向子级传递的数据。

双向数据流是指数据从父级向子级传递数据，子级可以通过一些手段改变父级向子级传递的数据。

比如用v-model、.sync来实现双向数据流。

什么是虚拟DOM？

虚拟DOM是将状态映射成视图的众多解决方案中的一种，其是通过状态生成一个虚拟节点树，然后使用虚拟节点树进行渲染生成真实DOM，在渲染之前，会使用新生成的虚拟节点树和上一次虚拟节点树进行对比，只渲染不同的部分。

Vue中如何实现一个虚拟DOM？说说你的思路

首先要构建一个VNode的类，DOM元素上的所有属性在VNode类实例化出来的对象上都存在对应的属性。例如tag表示一个元素节点的名称，text表示一个文本节点的文本，chlidren表示子节点等。将VNode类实例化出来的对象进行分类，例如注释节点、文本节点、元素节点、组件节点、函数式节点、克隆节点。

然后通过编译将模板转成渲染函数render，执行渲染函数render，在其中创建不同类型的VNode类，最后整合就可以得到一个虚拟DOM（vnode）。

最后通过patch将vnode和oldVnode进行比较后，生成真实DOM。

image.png

Vue实例挂载的过程是什么？

第一步：确保vm.$options有render函数。

第二步： 在原始的$mount方法，先触发beforeMount钩子函数,然后创建一个Watcher实例，在第二参数传入一个函数vm._update。

Vue为什么要求组件模板只能有一个根元素

当前的virtualDOM差异和diff算法在很大程度上依赖于每个子组件总是只有一个根元素。

如果想扩展某个现有的Vue组件时，怎么做呢

用mixins混入

用extends，比mixins先触发

用高阶组件HOC封装

vue中mixins和extends有什么区别

1、mixins接收对象数组（可理解为多继承），extends接收的是对象或函数（可理解为单继承）

2、优先级>extends>mixins，继承钩子函数的时候，是不进行覆盖的，extends的钩子函数先触发，而后再是mixins的钩子函数触发，最后就是组件自身的钩子函数触发。

3、mixins类似于面向切面的编程（AOP），extends类似于面向对象的编程

vue-loader是什么？它有什么作用？

vue-loader是一个webpack的loader，是一个模块转换器，用于把模块原内容按照需求转换成新内容。

它允许你以一种名为单文件组件 (SFCs)的格式撰写 Vue 组件。可以解析和转换 .vue 文件，提取出其中的逻辑代码 script、样式代码 style、以及 HTML 模版 template，再分别把它们交给对应的loader去处理。

数据结构-栈的特性

1. 先进后出、后进先出

2. 栈帧永远指向的是顶部的数据结构

3. 处于栈顶的原数具备活跃权