前端面试真题

解答仅供参考，部分解答很简略，嘴下留情奥…

 

高阶函数

接收函数作为参数或者返回一个函数作为结果的函数。

函数柯里化

函数柯里化（Currying）是指将一个接收多个参数的函数转换为一系列接收单个参数的函数，使得每个函数都可以独立地进行计算，并返回一个新函数，直到所有参数都被传递完毕后，最后一个函数返回计算结果。

作用域

作用域（Scope）是指在程序中定义变量时，变量所存在的有效范围。简单说就是变量可以被访问的范围。在不同的编程语言中，作用域的规则可能有所不同，但是通常都会存在以下几种作用域：


`全局作用域`：全局作用域是指在程序的整个生命周期中都可以访问的变量。在JS中，全局作用域可以通过在函数外部定义变量实现。

`局部作用域`：局部作用域是指变量只能在定义它的函数内部访问。在JS中，局部作用域可以通过在函数内部定义变量实现。

`块级作用域`：块级作用域是指变量只在当前代码块中有效。在ES6中新增了let和const关键字，可以用来定义块级作用域变量。

`函数作用域`：函数作用域是指变量只在定义它的函数内部有效。在ES6之前，JS只有全局作用域和函数作用域。
作用域的正确使用可以避免变量命名冲突和提高代码的可读性和可维护性。

执行上下文

执行上下文（Execution Context）是指JavaScript代码被解释和执行时所处的环境，它包含了当前代码执行所需的所有信息，比如变量、函数声明、作用域链等。

工程化

工程化是指将软件开发中的工程化思想和方法应用于前端开发中，通过使用各种工具和技术，来提升前端开发效率、降低开发成本、提高代码质量和可维护性等方面的目标。
前端工程化包括以下几个方面：


`模块化`：将代码拆分成不同的模块，每个模块独立开发、测试、维护和升级，提高代码的复用性和可维护性。

自动化构建：使用构建工具（如Webpack、Gulp、Grunt等）自动化执行代码的合并、压缩、打包、编译等操作，提高开发效率，减少手动操作的出错率。

自动化测试：使用自动化测试工具（如Jest、Mocha、Karma等）进行单元测试、集成测试、端到端测试等，保证代码质量和稳定性。

`版本控制`：使用版本控制工具（如Git、SVN等）管理代码的版本和变更历史，便于代码的协作开发、回滚和恢复。

`代码规范`：使用代码规范工具（如ESLint、Prettier等）强制统一代码的编写规范和风格，提高代码的可读性和可维护性。

`组件化`：将UI组件抽象成独立的组件，提高代码的复用性和可维护性。
通过前端工程化的实践，可以提高前端开发的效率和质量，减少出错率和维护成本，提高团队的协作能力和项目的成功率。

浏览器原理

用户输入URL，浏览器发起请求，请求经过DNS解析后找到对应的服务器；

服务器接收请求，返回HTML等资源文件；

浏览器接收到响应，开始渲染HTML页面，解析CSS样式，构建DOM树和渲染树；

浏览器解析JavaScript脚本，如果有异步请求则会并发请求，通过事件循环机制处理异步请求；

浏览器将渲染树绘制到屏幕上，完成网页的呈现

浏览器缓存

强制缓存，协商缓存

重绘和 回流

`重绘（Repaint）`
重绘是指当页面中的元素样式（如颜色、背景色、边框等）发生改变，但不影响它在页面中的位置和大小时，浏览器会重新绘制该元素的外观，但不会影响到布局，即不会导致其他元素的位置和大小发生改变。重绘的开销相对较小，因为只需要更新元素的外观即可。

`回流（Reflow）`
回流是指当页面中的元素布局（如位置、大小、文本内容等）发生改变时，浏览器会重新计算元素的位置和大小，然后重新绘制页面。回流会导致其他元素的位置和大小也发生改变，因此开销相对较大。 

this指向

在JavaScript中，this关键字用于引用当前执行上下文中的对象。它的值取决于它在代码中被使用的上下文。
this的值可以有以下几种情况：

在全局上下文中，this指向全局对象（浏览器中是window对象，Node.js中是global对象）。

在普通函数中，this指向调用该函数的对象。如果函数没有被任何对象调用，则this指向全局对象。

在对象方法中，this指向调用该方法的对象。

在构造函数中，this指向即将被创建的对象。

在事件处理函数中，this指向触发事件的元素。

在箭头函数中，this的值是在定义函数时确定的，与执行上下文无关。
需要注意的是，this的值可以通过调用call、apply、bind等函数来手动设置或绑定。

虚拟DOM

虚拟 DOM（Virtual DOM）是`指一个虚拟的 DOM 数据结构`，它通过 JavaScript 对象来描述真实的 DOM。在 React 和 Vue.js 等前端框架中，虚拟 DOM 扮演着重要的角色，用于优化 DOM 操作性能。
在使用虚拟 DOM 的框架中，当组件状态发生变化时，会先`生成一个新的虚拟 DOM`，然后将`新旧虚拟 DOM 进行比较`，找出`需要更新的部分`，最后只更新这些部分对应的真实 DOM，从而避免了大量的 DOM 操作，提高了页面的渲染效率。
虚拟 DOM 的优势在于：


减少 DOM 操作：虚拟 DOM 可以批量更新 DOM，减少了操作次数，从而提高了页面的渲染性能。

避免重复渲染：虚拟 DOM 可以通过比较新旧节点，只更新发生变化的节点，从而避免了重复渲染没有变化的节点，提高了渲染效率。
3333
提高跨平台兼容性：虚拟 DOM 不依赖于浏览器 DOM 实现，可以在多个平台上使用，提高了跨平台兼容性。
需要注意的是，虚拟 DOM 并不是解决性能问题的万能钥匙，它仅仅是一种优化手段，合理使用可以提高页面性能，但不合理使用也可能会降低性能。因此，在实际开发中需要根据具体情况灵活应用虚拟 DOM。

0.1+0.2

0.1 加上 0.2 的结果应该是 0.3，但是在 JavaScript 中，由于采用的是双精度浮点数表示法，0.1 和 0.2 都无法精确表示，因此计算结果可能会出现舍入误差。实际上，0.1+0.2 的计算结果在 JavaScript 中为 0.30000000000000004，这是由于浮点数的精度问题导致的。 
为了避免这种问题，可以使用 toFixed() 方法对计算结果进行格式化，将其保留指定的小数位数。例如，(0.1 + 0.2).toFixed(1) 的结果为 "0.3"，表示保留一位小数。

1. 对promise的理解

Promise（承诺）是JavaScript中一种用于处理`异步操作`的机制。它是一个对象，表示一个异步操作的最终完成（或失败）及其结果值。

Promise有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。

当一个Promise对象被创建时，它处于pending状态，表示异步操作还未完成。异步操作完成后，Promise对象的状态会变为fulfilled状态或rejected状态。如果异步操作成功完成，则Promise对象的状态为fulfilled状态，同时将操作的结果作为参数传递给该Promise对象的then方法。如果异步操作失败，则Promise对象的状态为rejected状态，同时将错误信息作为参数传递给该Promise对象的catch方法。
Promise的优点在于可以避免回调地狱（callback hell）的问题，使异步操作的代码更加易读和易维护。同时，Promise还可以通过链式调用的方式，使多个异步操作按照特定的顺序依次执行，使代码更加优雅。

2. 怎么检查内存泄露

内存泄漏是指程序中已经不再使用的内存没有被及时释放，导致内存占用不断增加，最终导致程序崩溃或者运行缓慢。检测内存泄漏可以采用以下几种方法：

1.使用浏览器的开发者工具：在浏览器的开发者工具中有一个Performance选项卡，可以使用它来捕获内存快照。使用这个工具可以检查内存泄漏的情况，同时也可以查看内存占用情况。

2.使用内存检测工具：比如Chrome DevTools中的Heap Profiler、Memory Timeline、Memory分析器等工具，可以帮助我们检测内存泄漏，并找到泄漏的原因。

3.手动检测：我们可以通过手动分析代码来检测内存泄漏。通常，内存泄漏的原因包括未释放的定时器、事件监听器、闭包、循环引用等。可以通过仔细检查代码来找到这些问题并解决它们。
总之，检查内存泄漏是一个非常重要的任务，可以帮助我们优化程序的性能和稳定性。通过使用工具和手动分析代码，可以有效地发现和解决内存泄漏问题。

3. 浏览器兼容性问题

浏览器兼容性问题是指在不同的浏览器中，同一份代码的表现可能存在差异或出现错误，这会导致网站或应用程序无法在所有浏览器中正常显示或运行。常见的浏览器兼容性问题包括：


`CSS盒模型`：不同浏览器对CSS盒模型的解释不同，导致页面在不同浏览器中的显示效果不一致；

`浮动`：不同浏览器对浮动的解释也不同，可能导致元素位置错乱或重叠；

`JavaScript API`：不同浏览器对JavaScript API的支持程度不同，可能导致代码在某些浏览器中无法正常运行；

`HTML5和CSS3特性`：HTML5和CSS3在旧版本浏览器中不被完全支持，需要使用特定的技术手段进行兼容；

`字体`：不同浏览器对字体的渲染方式不同，可能导致字体在不同浏览器中显示效果不一致。
为了解决浏览器兼容性问题，可以采用以下方法：

`使用CSS Reset`：CSS Reset可以将所有元素的默认样式重置为一致的样式，从而避免不同浏览器之间的差异；

`使用CSS Hack`：CSS Hack是指通过CSS样式规则的特定书写方式来解决浏览器兼容性问题；

`使用JavaScript Polyfill`：Polyfill是一种JavaScript库，可以在不支持某些特性的浏览器中模拟这些特性；

`使用现代化的Web技术`：使用HTML5和CSS3等现代化的Web技术，并采用渐进增强和优雅降级的方式来实现兼容性；

`测试和调试`：在开发过程中，需要对不同浏览器进行测试和调试，发现问题及时解决。
通过以上方法，可以解决浏览器兼容性问题，提高网站或应用程序的兼容性和可用性。

4. js垃圾回收机制

什么是垃圾回收机制：
解释：执行环境负责管理代码执行过程中使用的内存。JS的垃圾回收机制是为了以防内存泄漏，简单来说就是：间歇的不定期的寻找到不再使用的变量，并释放掉它们所指向的内存。
`标记清除，引用计数`
什么是内存泄漏：
解释：是指不再用的内存没有被垃圾回收机制及时释放出来，导致该段内存无法再使用，积少成多，导致系统越来越卡，直至崩溃。

5.你对keep-alive的理解，假如keep-alive缓存后的组件没有渲染怎么排查问题

keep-alive是Vue.js的一个内置组件，用于缓存已经渲染过的组件实例，从而避免重复渲染。keep-alive组件通过在组件的生命周期钩子函数中加入activated和deactivated两个钩子函数，来实现缓存和恢复组件状态的功能。

假如keep-alive缓存后的组件没有渲染，可以按照以下步骤来排查问题：

`确认组件是否被缓存`：在使用keep-alive组件时，需要将需要缓存的组件放在keep-alive标签中。如果组件没有被放在keep-alive标签中，就不会被缓存。

`确认组件的缓存是否生效`：在组件被缓存后，可以通过activated钩子函数来确认组件的缓存是否生效。activated钩子函数会在组件被激活后被调用，如果组件被缓存成功，activated钩子函数应该会被触发。

`检查组件状态`：如果组件没有渲染，可以先检查组件的状态。在组件的activated钩子函数中，可以输出组件的状态，检查是否符合预期。如果组件状态有问题，可以进一步排查问题。

`检查组件渲染条件`：如果组件状态正常，可以检查组件的渲染条件，例如是否满足某些条件才能渲染，或者是否需要异步加载数据才能渲染。如果组件没有渲染，可能是由于渲染条件没有满足。

`检查组件的模板和组件之间的交互`：如果组件状态和渲染条件都正常，可以检查组件的模板和组件之间的交互。可能是由于模板或交互的问题导致组件没有渲染。
通过以上步骤，可以排查keep-alive缓存后的组件没有渲染的问题，并找到问题的根源。

6.怎么封装一个loading组件

封装一个loading组件可以提高代码的复用性和可维护性，下面是一个简单的封装步骤：

1.创建一个loading组件的.vue文件，编写组件的模板和样式；

2.在组件中定义props属性，用于接收父组件传递的参数，例如loading的文字提示、loading的颜色、loading的大小等；

3.在data中定义一个loading变量，用于控制loading的显示和隐藏；

4.在methods中定义showLoading和hideLoading方法，用于显示和隐藏loading；

5.在mounted钩子函数中，根据传递的props属性设置loading的样式，例如颜色和大小；

6.在组件的模板中使用v-if指令根据loading变量来控制loading的显示和隐藏；

在全局注册该组件，以便在其他组件中可以直接使用。
以下是一个简单的loading组件的示例代码：

<!-- Loading.vue -->
<template>
  <div class="loading" v-if="loading">
    <div class="loading-content">
      <span class="loading-text">{
  { text }}</span>
      <div class="loading-spinner"></div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Loading',
  props: {
    text: { // loading文字提示
      type: String,
      default: 'Loading...'
    },
    color: { // loading颜色
      type: String,
      default: '#000000'
    },
    size: { // loading大小
      type: Number,
      default: 40
    }
  },
  data() {
    return {
      loading: false // 控制loading的显示和隐藏
    }
  },
  methods: {
    showLoading() {
      this.loading = true
    },
    hideLoading() {
      this.loading = false
    }
  },
  mounted() {
    const spinner = this.$el.querySelector('.loading-spinner')
    spinner.style.borderTopColor = this.color
    spinner.style.borderLeftColor = this.color
    spinner.style.width = `${this.size}px`
    spinner.style.height = `${this.size}px`
  }
}
</script>
<style scoped>
.loading {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 9999;
}
.loading-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.loading-text {
  display: inline-block;
  margin-right: 10px;
  font-size: 16px;
  color: #ffffff;
}
.loading-spinner {
  position: relative;
  width: 40px;
  height: 40px;
  border: 4px solid #ffffff;
  border-top-color: #000000;
  border-left-color: #000000;
  border-radius: 50%;
  animation: loading-spinner 0.8s infinite linear;
}
@keyframes loading-spinner {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>

在其他组件中使用该loading组件时，可以通过调用其showLoading和hideLoading方法来显示和隐藏loading，例如：
<!-- OtherComponent.vue -->
<template>
  <div>
    <button @click="handleClick">Click me</button>
    <Loading ref="loading"></Loading>
  </div>
</template>
<script>
import Loading from '@/components/Loading.vue'
export default {
  components: {
    Loading
  },
  methods: {
    async handleClick() {
      this.$refs.loading.showLoading()
      // 执行异步操作
      await someAsyncOperation()
      this.$refs.loading.hideLoading()
    }
  }
}
</script>

7.后端返回几万条数据前端怎么进行优化并说一下怎么实现

1.`分页`：将数据分为多页，每页显示一定数量的数据。这样不仅可以减少单页数据量，还可以提供更好的用户体验和导航功能。前端可以使用分页组件或手动实现分页逻辑。

2.`懒加载`：只加载可视区域内的数据，而不是一次性加载所有数据。这样可以减少页面加载时间和资源消耗。前端可以使用懒加载组件或手动实现懒加载逻辑。

3.`虚拟滚动`：将可视区域内的数据渲染到视图中，而不是渲染所有数据。这样可以减少DOM操作和内存消耗。前端可以使用虚拟滚动组件或手动实现虚拟滚动逻辑。

4.`数据缓存`：将数据缓存到本地，以便下次使用时直接从缓存中读取数据。这样可以减少网络请求和数据传输，提高页面性能。前端可以使用localStorage或sessionStorage等浏览器提供的API实现数据缓存。

5.`数据压缩`：如果数据量较大，可以将数据进行压缩，以减少传输时间和带宽消耗。前端可以使用gzip等压缩工具对数据进行压缩。

6.`数据过滤`：根据用户需求和业务需求，对数据进行过滤和筛选，以减少数据量和提高查询效率。前端可以使用过滤器或手动实现数据过滤逻辑。
总之，前端需要针对具体业务需求和用户体验，选择合适的优化策略和实现方法。同时，需要注意在数据处理和优化过程中，保证数据的准确性和安全性。

8.vue中v-for中key的作用，如果有相同的key会造什么结果

1.key的作用是帮助Vue区分每个不同的元素，以便在更新DOM时能够正确地识别哪些元素发生了变化。

2.如果有相同的key，则会造成一些不可预知的结果。比如，如果两个元素的key相同，但是它们的内容不同，那么Vue可能会将它们视为同一个元素，导致更新不正确。另外，如果两个元素的key相同，且它们的内容也相同，那么Vue可能会认为它们是同一个元素，从而跳过对其中一个元素的更新，导致UI不正确。因此，为了避免这种情况的发生，我们应该为每个元素指定一个不同的、唯一的key值。

9.说一下什么是动态路由

动态路由指路由器能够自动地建立自己的路由表，并且能够根据实际情况的变化适时地进行调整。动态路由器上的路由表项是通过相互连接的路由器之间交换彼此信息，然后按照一定的算法优化出来；路由信息在一定时间间隙里不断更新，以适应不断变化的网络，以随时获得最优的寻路效果。

10. 你了解过低代码和微前端吗

`低代码是一种软件开发方式，它使用可视化的工具和模板来快速构建应用程序，减少了对复杂编程知识的依赖。`
低代码平台通常包括拖放式的UI设计器、自动化的业务流程、预定义的组件库和自动化部署等工具，可以让开发人员和非技术人员都能够快速构建应用程序。低代码的优势是可以大大缩短开发周期、减少开发成本和提高生产效率，但是相应地也有一些局限性，比如可定制性、扩展性和性能等问题。
微前端是一种软件架构模式，它将前端应用程序拆分成多个小型的、独立的模块，每个模块都可以独立开发、测试、部署和运行，同时可以通过微服务架构的方式进行组合和集成。微前端的优势是可以解决前端应用程序的复杂性和可维护性问题，同时可以提高开发效率和团队协作能力。微前端的实现方式包括iframe、Web Components和服务端渲染等技术。
总之，低代码和微前端是两种不同的软件开发方式和架构模式，它们都有各自的优势和局限性，可以根据具体的应用场景和需求来选择使用。

11. 输入网址后发生了什么

1.`DNS解析`：浏览器会先检查本地缓存中是否有该网址对应的IP地址，如果没有则会向DNS服务器发送一个请求，获取该网址对应的IP地址。DNS服务器会根据域名解析规则，将域名解析为对应的IP地址，并返回给浏览器。

2.`建立TCP连接`：浏览器会使用HTTP协议向服务器发送一个连接请求，请求中包含了该网址对应的IP地址和端口号。服务器收到请求后会回复一个确认响应，建立起TCP连接。

3.`发送HTTP请求`：建立好TCP连接后，浏览器会向服务器发送一个HTTP请求，请求中包含了请求方法、请求头、请求体等信息。请求方法通常有GET、POST、PUT、DELETE等，请求头包含了一些附加信息，如浏览器类型、语言、Cookie等。

4.`接收HTTP响应`：服务器接收到HTTP请求后会处理请求，并返回一个HTTP响应，响应中包含了响应头、响应体等信息。响应头包含了响应状态码、响应头信息等，响应体包含了请求的结果数据。

5.`渲染页面`：浏览器接收到HTTP响应后，会解析HTML、CSS、JavaScript等资源，构建出一个DOM树和渲染树，并将其显示在浏览器窗口中。在页面渲染的过程中，浏览器会执行JavaScript代码，以更新页面内容和处理用户交互。
总之，输入网址后，浏览器会经过DNS解析、建立TCP连接、发送HTTP请求、接收HTTP响应和页面渲染等几个步骤，最终将目标网页呈现给用户。

12. 从服务器端拿到html文件后浏览器怎么渲染

1.`解析HTML`：浏览器会将HTML解析成DOM树，DOM树是由HTML标签、属性和文本节点组成的一种树形结构，表示了页面的结构和内容。

2.`解析CSS`：浏览器会将CSS解析成CSSOM树，CSSOM树是由CSS规则和对应的CSS属性组成的一种树形结构，表示了页面的样式。

3.`构建渲染树`：浏览器会将DOM树和CSSOM树结合起来，构建出一个渲染树，渲染树是由可视化元素和对应的样式组成的一种树形结构，表示了页面的布局和样式。

4.`布局和绘制`：浏览器会根据渲染树的信息，计算出每个元素的位置和大小，然后进行布局和绘制。在布局和绘制的过程中，浏览器会执行一些优化操作，如重排和重绘等，以提高渲染性能。

5.`JavaScript执行`：浏览器会执行页面上的JavaScript代码，以更新页面内容和处理用户交互。在JavaScript执行的过程中，浏览器会暂停渲染线程，以确保JavaScript代码的执行不会影响页面的渲染效果。
总之，浏览器渲染页面的过程包括解析HTML、解析CSS、构建渲染树、布局和绘制以及JavaScript执行等几个步骤，最终将目标网页呈现给用户

13.重排和重绘怎么触发

1.修改DOM元素的位置、大小、内容等属性时，会触发重排和重绘操作；

2.添加、删除、修改CSS样式表时，会触发重排和重绘操作；

3.改变浏览器窗口大小时，会触发重排和重绘操作；

4.滚动页面时，会触发重绘操作；

14.webpack build 有哪些常用的配置项

Webpack的build是用于将源代码构建为可部署的代码的过程。在Webpack的build过程中，可以通过配置文件来定制不同的构建流程，以下是Webpack build中一些常用的配置项：


`entry`: 指定应用程序的入口文件。

`output`: 指定应用程序的输出文件目录和文件名。

`mode`: 指定Webpack的构建模式，可选值为"development"、"production"和"none"。

`module`: 配置模块的处理方式，例如使用babel-loader处理ES6代码、使用css-loader处理CSS代码等。

`resolve`: 配置模块的解析方式，例如配置模块的别名、配置模块文件的后缀名等。

`plugins`: 配置Webpack的插件，例如使用UglifyJsPlugin压缩代码、使用HtmlWebpackPlugin生成HTML文件等。

`devtool`: 配置SourceMap的生成方式，用于在调试时将打包后的代码映射回源代码。

`optimization`: 配置Webpack的优化策略，例如使用SplitChunksPlugin拆分代码、使用Tree shaking去除未使用的代码等。
以上只是部分常用的配置项，实际上Webpack的配置项非常多，可以根据具体的需求进行定制。

15. webpack常用哪些插件，有什么作用

Webpack是一个高度可配置的构建工具，通过使用Webpack的插件，我们可以更加灵活和方便地定制构建流程。以下是Webpack中一些常用的插件以及它们的作用：


HtmlWebpackPlugin：用于生成HTML文件，并将打包后的JS、CSS等资源自动引入到HTML文件中。

CleanWebpackPlugin：用于在打包前清除上一次打包生成的文件夹。

MiniCssExtractPlugin：用于将CSS代码从JS文件中提取出来，并生成独立的CSS文件。

CopyWebpackPlugin：用于将静态资源（如图片、字体等）从源代码目录复制到打包后的目录。

DefinePlugin：用于在打包时定义全局变量，可以在代码中访问到这些变量。

UglifyJsPlugin：用于压缩JS代码，减小文件体积，加快页面加载速度。

HotModuleReplacementPlugin：用于在开发模式下实现模块热替换，实现在不刷新页面的情况下实时更新代码。

ProvidePlugin：用于在打包时自动加载模块，例如自动加载jQuery等。

BundleAnalyzerPlugin：用于分析打包后的代码，可以查看代码的大小、依赖关系等。

VueLoaderPlugin：用于解析Vue单文件组件，将其转换为JS模块。
以上是Webpack中一些常用的插件，实际上Webpack的插件非常多，可以根据具体的需求进行选择和配置。

16. Axios 封装有哪些，请求头会封装什么

Axios是一个非常流行的HTTP客户端，可以在浏览器和Node.js中发送HTTP请求。在使用Axios时，我们通常会对其进行一些封装，以便于在项目中更加方便地使用。以下是Axios封装中常用的一些方式：


创建实例：可以通过创建Axios实例来配置一些默认的请求参数、拦截器等，以便于在项目中更加方便地使用。

封装请求方法：可以将Axios的请求方法进行封装，例如封装GET、POST等请求方法，可以将一些公共的参数和请求头统一添加到请求中，从而减少代码冗余。

拦截器：可以使用Axios的拦截器来对请求和响应进行拦截和处理，例如在请求中添加token、在响应中处理错误等。

错误处理：可以通过对Axios请求返回值的状态码进行判断，来进行错误处理，例如请求失败时进行提示等。
关于请求头的封装，通常会封装以下内容：

Content-Type：指定请求的数据类型，例如application/json、application/x-www-form-urlencoded等。

Authorization：用于进行身份验证，例如Bearer Token等。

User-Agent：用于标识请求的客户端类型，例如Chrome、Firefox等。

Accept-Encoding：用于指定服务器返回的数据编码方式，例如gzip、deflate等。

Cookie：用于在请求中发送cookie信息，用于保持用户的登录状态。

Referer：用于指定当前请求的来源页面，例如在进行跨域请求时，可以指定Referer来方便服务器进行验证。
当然，对于请求头的封装，具体内容也会根据项目的需求和后端接口的要求而有所不同。

17. websocket有哪些封装

Websocket是一种双向通信协议，可以实现客户端和服务器之间的实时通信。在实际项目中，我们通常会对Websocket进行一些封装，以便于在项目中更加方便地使用。以下是一些常见的Websocket封装方式：


创建实例：可以通过创建Websocket实例来配置一些默认的请求参数、事件监听器等，以便于在项目中更加方便地使用。

封装事件：可以将Websocket的事件进行封装，例如封装连接成功、连接关闭、消息发送、消息接收等事件，可以将事件的处理逻辑进行封装，从而减少代码冗余。

心跳机制：为了保持Websocket连接的稳定性，通常会实现心跳机制，即定时向服务器发送心跳包，以保持连接不被服务器主动断开。

重连机制：在Websocket连接失败或者断开的情况下，通常会实现重连机制，即重新发起连接，以保证连接的稳定性。

封装协议：在Websocket通信中，通常需要定义一些通信协议，例如消息格式、消息类型等。可以将通信协议进行封装，以方便在项目中使用。

封装API：在实际项目中，通常会将Websocket的使用封装为API，以方便在业务代码中调用。
以上是Websocket常见的一些封装方式，实际上Websocket的封装方式非常灵活，可以根据具体项目的需求进行选择和配置。

18. 怎么加快webpack的打包速度

Webpack是一个非常强大的前端构建工具，但是在项目较大的情况下，Webpack的打包速度可能会变得比较慢，影响开发效率。以下是一些加快Webpack打包速度的方法：


使用快速构建工具：例如Webpack Dev Server、Webpack Hot Middleware等，这些工具可以帮助我们实现热重载、增量编译等功能，从而加快构建速度。

使用缓存：Webpack支持使用缓存来缓存中间结果，可以减少重复的构建操作，从而加快构建速度。可以使用插件如hard-source-webpack-plugin、cache-loader等来实现。

优化loader：对于耗时较长的loader，可以进行优化，例如使用thread-loader将其转换为多线程处理，从而加快构建速度。

优化resolve.modules配置：将常用的模块路径添加到resolve.modules配置中，可以减少Webpack查找模块的时间，从而加快构建速度。

使用DllPlugin：DllPlugin可以将第三方依赖库打包成一个单独的文件，从而避免了每次构建都要重新打包第三方依赖库的时间，从而加快构建速度。

使用Tree Shaking：Tree Shaking可以在构建时移除未被使用的代码，从而减少构建出的代码量，从而加快构建速度。

使用Happypack：Happypack可以将loader转换为子进程处理，从而加快构建速度。

升级Webpack版本：Webpack的新版本通常会加入一些优化，可以尝试升级Webpack版本，以获得更好的构建速度。
以上是加快Webpack打包速度的一些方法，实际上还有很多其他的优化方式，需要根据具体项目的情况进行选择和配置。

19. 子元素外边距塌陷有哪些解决办法

子元素外边距塌陷是CSS中常见的问题之一，它指的是当子元素的外边距和父元素的外边距相遇时，父元素的外边距会扩展到子元素的外边距上，从而导致布局混乱。以下是一些解决子元素外边距塌陷的方法：


使用padding替代margin：通过给父元素添加一个padding值，可以达到和margin相同的效果，从而避免外边距塌陷的问题。

使用overflow：将父元素的overflow属性设置为hidden或者auto，可以让父元素形成一个BFC，从而避免外边距塌陷的问题。

使用inline-block：将父元素的display属性设置为inline-block，可以让父元素形成一个BFC，从而避免外边距塌陷的问题。

使用clear：在子元素后面添加一个clear元素，可以清除父元素的浮动，从而避免外边距塌陷的问题。

使用flexbox布局：使用flexbox布局可以避免外边距塌陷的问题，因为flexbox布局中的元素都是独立的，不会相互影响。
以上是解决子元素外边距塌陷的一些方法，实际上还有其他的解决方法，需要根据具体情况进行