前端面试总结

1、js数据类型

原始数据类型：null、undefined、number、string、boolean、symbol、bigint

引用数据类型：对象objects

2、undefined

undefined是全局对象上的一个属性,并不是一个关键字

 console.log(window.undefined);//undefined
 //如果要声明一个变量初始值为undefined
 var a= undefined//这样是错误的
 var a=void 0//正确

3、 Ajax 、Axios 、Fetch。如何使用 AJAX 实现数据交互？

Ajax, Axios 和 Fetch 都是用于在浏览器中进行异步 HTTP 请求的工具。

• Ajax 是一种基于 JavaScript 的技术，可以在浏览器与服务器之间进行异步交互。它本身不是一个完整的工具，而是一组技术的总称，通常需要配合其它工具（如 jQuery）来使用。
• Axios 是一个基于 Promise 封装的网络请求库，可以在浏览器和 node.js 中使用。它支持请求拦截、响应拦截、超时、自动转换 JSON 数据等功能。
• Fetch 是一个基于 Promise 的 Web API，可以在浏览器中进行异步 HTTP 请求。它是浏览器原生支持的，不需要额外的库或插件，但是有些功能需要配合 polyfill 使用。

总的来说，Ajax 更多的是对底层的封装，需要配合其它工具来使用，Fetch 是浏览器原生支持的一个Web API。而Axios则是对Fetch的封装加上一些扩展，更好用。
ajax：

    function ajax(url) {
      const xhr = new XMLHttpRequest();
      xhr.open("get", url, false);
      xhr.onreadystatechange = function () {
        // 异步回调函数
        if (xhr.readyState === 4) {
          if (xhr.status === 200) {
            console.info("响应结果", xhr.response)
          }
        }
      }
      xhr.send(null);
    }
    ajax('https://smallpig.site/api/category/getCategory')

链接: 你知道Ajax、Fetch、Axios三者的区别吗？

键盘事件包含：

keydown：当任意按键被按下时触发；
keypress: 它仅在产生字符值的键被按下时触发。举例来说，如果你按下键 a，此事件将会触发，因为 a 键产生了字符值 97 。当你按下 shift 键时不会触发此事件，因为它不会产生任何字符值；
keyup：当任意按键被松开时触发。

如果所有三个事件都绑定到到一个 DOM 元素，则触发顺序为：

首先，keydown；
接着，keypress（视上方条件而触发）；
最后，keyup。

获取元素的方式

通过ID获取（getElementById）
通过name属性（getElementsByName）
通过标签名（getElementsByTagName）
通过类名（getElementsByClassName）
获取html的方法（document.documentElement）
获取body的方法（document.body）
通过选择器获取一个元素（querySelector）
通过选择器获取一组元素（querySelectorAll）

vue的data为什么是一个函数

我们知道，在JS当中，实例是通过构造函数来创建的，每个构造函数可以有多个实例。每个实例也都会继承原型上的方法或属性。那么在vue当中，当一个组件被多次使用，就会创建多个实例。如果data是对象，那么被多次复用的这个组件在某一处更改了data数据，就会影响到其他处复用这个组件的方法。因为对象它是引用数据类型,是对于内存地址的引用。如果data是一个函数的话，那么我们每次创建一个新的实例之后，就会调用这个新的date函数返回一个新的对象,也就是给每一个data数据定义了一个新的内存地址，自己维护自己的数据。所以为了保证每个组件data的独立性，或者说是组件的可复用性，data就必须是一个函数

html是什么？

是一种用于创建网页的超文本标记语言。可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

CSS 是什么？有哪些常见的样式属性？

CSS 层叠样式表，是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。

HTML5 新增了哪些标签？

相比较之前的html版本，html5在网页制作中加入更多如下具有语义性的标签，帮助前端人员更高效地开发一个网页。

• < header >头部标签
• < nav >导航标签
• < article >内容标签
• < section >定义文档某个区域
• < aside >侧边栏标签
• < footer >尾部标签

多媒体标签主要新增了以下两个标签

• < audio > 音频
• < video > 视频

CSS3 新增了哪些样式属性？

链接: css3新增属性有哪些？css3中常用的新增属性

如何使用 CSS 实现布局？CSS 盒模型、浮动等

链接: CSS页面布局（超详解）

JavaScript 是什么？

JavaScript 是一种脚本，一门编程语言，它可以在网页上实现复杂的功能，网页展现给你的不再是简单的静态信息，而是实时的内容更新，交互式的地图，2D/3D 动画，滚动播放的视频等等。
JavaScript简称JS，是一种解释型或即时编译型的高级编程语言，虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格

Node.js是什么？它有什么优点和应用场景？

Node.js是基于V8引擎的一个javascript运行环境。它让js可以开发后端程序，实现几乎其他后端语言实现的所有功能，可以与PHP、Java、Python、.NET、Ruby等后端语言平起平坐。
优点：
1.是JS运行环境，让JS也可以开发后端程序。
2.事件驱动。通过单线程维护事件循环队列，没有多线程的资源占用和上下文切换，高效可扩展性强，能充分利用系统资源。
3.非阻塞I/0，能处理高并发。
4.单线程（主线程为单线程）。
5.可伸缩。
6.跨平台。可以应用在 pc Web端、PC客户端nwjs/electron、移动端cordova、HIML5 reactnatiyeweex，硬件mufio等。
7.npm 上的各种包模块。
8.配合前端做接口转发、合并请求 、消减JSON大小，可以独立控制路由让前端更有主动性，可以独立部署上线。

npm是什么

npm是node.js的包管理和分发工具，已经成为非官方的发布node模块的标准

面试题1：路由传递参数（对象写法）path是否可以结合params参数一起使用?

  答：路由跳转传参的时候，对象的写法可以是name、path形式，但是需要注意的是，path这种写法不能与params参数

2：如何指定params参数可传可不传?

比如：配置路由的时候，占位了（params参数），但是路由跳转的时候就不传递。路径会出现问题
在配置路由的时候，在展位的后面加上？，表示params参数可传可不传

3：params参数可以传递也可以不传递，但是如果传递是空串，如何解决？

路径会出现问题
解决方法：

this.$router.push({
	name:'search',
	params:{
	k:''||undefined
)

4：路由组件能不能传递props数据?可以

6.1 为什么需要进行二次封装axios?

请求拦截器、响应拦截器：请求拦截器，可以在发请求之前可以处理一些业务、响应拦截器，当服务器数据返回以后，可以处理一些事情

实战问题，父子传值页面不刷新

父组件第一次传给子组件的值，在子组件内可以正常接收并显示。后面父组件中的值发生变化后，子组件的值却没有同步更新，这是一个比较常见的问题。

• 原来子组件里定义了变量childrenlist去接收，父组件传过来的parentlist，只会在第一次初始化子组件的时候拿到值并赋值。后面从父组件传过来的值改变了，却没有重新给子组件中的变量赋值。所以我们这个时候可以通过watch动态监听父组件传过来的值的变化，并给子组件定义的值重新赋值。
• 解决方案二就是我们刚说的子组件的那个值变量只在组件初始化时为复制，那如果每当父组件的值发生变化时，我们就重新渲染一下子组件。基于这个想法，我们就可以在父组件中的子组件动态绑定一个Key作为组件的唯一标识。Key只要改变，子组件就会被重新加载，子组件的变量就可以被重新赋值。所以我们只要在传给子组件的值的改变的地方。把Key的值也给改变一下就行了。我们使用时间戳来保证Key的唯一值。

说一下 http 和 https

http: 超文本传输协议，是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器端请求和应答的标准（TCP）。以明文方式发送信息的，如果有不法分子截取了浏览器和服务器之间的传输报文，就可以直接获得信息，可想而知这样是不安全的。
而HTTPS可以认为是HTTp的安全版，是在HTTP的基础上加入了SSL协议，HTTPS中的S指的就是SsL协议。这一层协议加在了传输层和应用层之间，它可以对通信数据进行加密，并且能够验证身份，使得通信更加的安全，当然也不是绝对的安全，只是会增加破坏分子的破坏成本
区别：

• 二者的连接方式不同，而且HTTPS的端口是443，而HTTP的端口是80
• HTTP传输是明文的，HTTPS是使用SsL进行加密的，安全性更高
• 第三，HTTPs是需要申请CA证书的。HTTP是不需要的
• HTTP协议传输速度比HTtpS更快

浏览器渲染机制

浏览器的渲染机制可以分为四步

• 第一步，解析HTML，生成dom树，
• 第二步，解析CSS，生成CSSOM树。
• 第三步，合并dom树和CSS规则树，生成render渲染树，渲染树只会包括需要显示的节点和这些节点的样式信息。如果某个节点的样式是display：none的话，那么它就不会构建到渲染树中
• 第四步，根据render渲染树进行重排与重绘。这里就涉及两个概念，重排与重汇。重排是说当元素的属性发生改变，但是影响布局的时候，比如说改变它的宽度、高度、内外边距等就会产生重排，相当于刷新页面这么一个操作。重绘是说当元素的属性发生改变时，但是却不影响布局的时候，比如说背景颜色、透明度、字体的样式等就会产生重绘，相当于不刷新页面，动态更新内容。所以就会有这么一句话，重绘不一定会引起重排，而重排必将引起重绘

GET 和 POST 的区别

（1）get 参数通过 url 传递，post 放在 request body 中。
（2）get 请求在 url 中传递的参数是有长度限制的，而 post 没有。
（3）get 比 post 更不安全，因为参数直接暴露在 url 中，所以不能用来传递敏感信息。
（4）get 请求只能进行 url 编码，而 post 支持多种编码方式
（5）get 请求参数会被完整保留在浏览历史记录里，而 post 中的参数不会被保留。
（6）GET 产生一个 TCP 数据包；POST 产生两个 TCP 数据包。
（7）GET 和 POST 本质上就是 TCP 链接。由于 HTTP 的规定和浏览器/服务器的限制，导致他们在应用过程中体现出一些不同。
（8）GET - 从指定的资源请求数据。 POST - 向指定的资源提交要被处理的数据。
（9）对于 GET 方式的请求，浏览器会把 http header 和 data 一并发送出去，服务器响应 200 ；
而对于 POST，浏览器先发送 header，服务器响应 100 continue，浏览器再发送 data，服务器响应 200 ok。
（10）get 请求类似于查找的过程，用户获取数据，可以不用每次都与数据库连接，所以可以使用缓存。
post 不同，post 做的一般是修改和删除的工作，所以必须与数据库交互，所以不能使用缓存。因此 get 请求适合于请求缓存。

在地址栏里输入一个 URL,到这个页面呈现出来，中间会发生什么？

• 输入 url 后，首先需要找到这个 url 域名的服务器 ip,为了寻找这个 ip，浏览器首先会寻找缓存，查看缓存中是否有记录，缓存的查找记录为：浏览器缓存->系统缓存->路由器缓存。缓存中没有则查找系统的 hosts 文件中是否有记录，如果没有则查询 DNS 服务器。
• 得到服务器的 ip 地址后，浏览器根据这个 ip 以及相应的端口号，构造一个 http 请求，这个请求报文会包括这次请求的信息，主要是请求方法，请求说明和请求附带的数据，并将这个 http 请求封装在一个 tcp 包中。这个 tcp 包会依次经过传输层，网络层，数据链路层，物理层到达服务器。服务器解析这个请求来作出响应，返回相应的 html给浏览器。
• 因为 html 是一个树形结构，浏览器根据这个 html 来构建 DOM 树，在 dom 树的构建过程中如果遇到 JS 脚本和外部 JS 连接，则会停止构建 DOM 树来执行和下载相应的代码，这会造成阻塞，这就是为什么推荐 JS 代码应该放在 html 代码的后面，之后根据外部样式，内部样式，内联样式构建一个 CSS 对象模型树，构建完成后和 DOM 树合并为渲染树。这里主要做的是排除非视觉节点，比如 script，meta 标签和排除 display 为 none 的节点，之后进行布局，布局主要是确定各个元素的位置和尺寸，之后是渲染页面，因为 html 文件中会含有图片，视频，音频等资源，在解析 DOM 的过程中，遇到这些都会进行并行下载，浏览器对每个域的并行下载数量有一定的限制，一般是 4-6 个，当然在这些所有的请求中我们还需要关注的就是缓存，缓存一般通过Cache-Control、Last-Modify、Expires 等首部字段控制。

页面刷新方式

• 第一个原生js方式，Location.reload()。我们只需要在需要刷新的地方加这么一行代码即可以做到刷新。
• 第二，借助vue中的路由跳转方式，如果需要刷新，那么就写入this.$router.go(0)
• 第三种，provide/inject组合方式。前两个介绍的方式都是强制刷新，页面儿会出现短暂的空白，而这个方式是普通刷新，不会使页面出现空白。这个方法允许一个祖先组件通过provide向其所有子孙后代提供数据，不论组件的层次有多深，子组件都可以通过inject来注入接收这个数据。具体实现的话，我们可以在项目的app.vue文件中定义一个布尔类型的数据。通过v-if来控制router-view是否展示，同时定一个刷新函数，刷新函数做的事情就是结合了v-if的作用，将组件是否展示先设为False，让组件先销毁。然后再将是否展示这个数据设置为true，然后组件再创建。写好刷新函数后，我们需要在刷新的组件中。通过inject注入刚刚app.vue中provide提供的依赖，也就是那个刷新函数，然后在子组件中直接调用这个函数就可以实现刷新。
• this.$forceUpdate等刷新方式

前端登录流程

• 第一，我们在登录页点击登录的时候，前端会带着用户名和密码去调用后端的登录接口，
• 第二，后端接收到请求后，会去验证用户名和密码。如果验证失败，会返回错误信息，前端提示相应的错误信息即可。如果验证成功，后端就会给前端返回一个token。
• 第三，前端拿到token后，将这个token存储到vuex或者localstorage当中，并跳转页面即登录成功。
• 第四，前端每一次跳转到需要具备登录状态的页面时，都需要判断当前token是否存在，如果不存在则跳转到登录页，存在则进行正常跳转。通常我们把这个逻辑封装在路由守卫当中。另外，再向后端发送其他请求时，需要在请求头中带上token，我们把这块的逻辑封装在请求拦截器当中。后端判断请求头中有无token，有则验证token，验证成功就会返回正常的数据，如果验证失败，比如token已经过期了，那么就会返回相应的错误码。前端拿到错误码信息，清除token并回退至登录页。以上就是一个通用的登录流程

token

Token的意思是令牌，是用户第一次登录时服务器生成的一段加密字符串，然后返回给客户端，后面客户端每次向服务端请求资源的时候，只需要带上token，不用再带着用户名和密码去请求。所以为什么要带token呢？是因为用户登录成功后，后续需要反复到服务器获取数据，服务器对每次请求都要去验证是哪位用户发送的，用户是否合法，这样反复查询数据库，会对数据库造成过大的压力。当后续请求都带上token后，服务器直接解密token就可以知道用户的相关信息，省去了查询数据库的操作，能够减轻数据库的压力，这就是token的作用。又由于基本所有请求都需要携带token。不能每次都需要手动配置吧？所以我们可以在请求拦截器中统一封装，让每个请求都能够带上token。

mixin

将组件的公共逻辑或者配置提取出来，哪个组件需要用到时，直接将提取的这部分混入到组件内部即可。
这样既可以减少代码冗余度，也可以让后期维护起来更加容易。
这里需要注意的是：提取的是逻辑或配置，而不是HTML代码和CSS代码。
其实大家也可以换一种想法，mixin就是组件中的组件，Vue组件化让我们的代码复用性更高，
那么组件与组件之间还有重复部分，我们使用Mixin在抽离一遍。

Mixin和Vuex的区别？

上面一点说Mixin就是一个抽离公共部分的作用。在Vue中，Vuex状态管理似乎也是做的这一件事，它也是将组件之间可能共享的数据抽离出来。两者看似一样，实则还是有细微的区别，区别如下：

Vuex公共状态管理，如果在一个组件中更改了Vuex中的某个数据，那么其它所有引用了Vuex中该数据的组件也会跟着变化。
Mixin中的数据和方法都是独立的，组件之间使用后是互相不影响的。

hash模式与history的区别

hash 模式的路由中带有 # 号。hash通过 window.onhashchange 方法监听路由的变化
hash 模式在页面刷新的时候，发送的请求 url 是不带 # 后面的内容的
hash 模式可以兼容部分低版本的浏览器
hash 模式打包后，直接在浏览器中打开 /dist/index.html 可以正常的访问（原因是第 3 条指出的原因）
history模式
history 模式是使用正常的 url 路径显示
history 模式通过 pushState 和 replaceState 方式修改路由改变
history 模式在页面刷新的时候，会请求当前地址栏中完成的 url，这时需要服务器对这个 url 有处理，如果没有对应的文件，需要返回 index.html
history 模式因为是使用的 HTML5 的新规范，所以不能兼容低版本的浏览器
history 模式打包后，直接在浏览器中打开 /dist/index.html 会报错（原因是第 3 条指出的原因）