xxx割喉

2023年（js,css3,es6,Vue,react）面试常问面试题总结

1.vue和react的区别是什么？

模板语言：

Vue使用基于HTML的模板语言，允许您在HTML中直接编写Vue代码，并且可以轻松地与现有的HTML、CSS和JavaScript代码集成。React没有自己的模板语言，它使用JavaScript的JSX语法来描述UI组件。

数据绑定：

Vue使用双向数据绑定，这意味着当数据发生变化时，视图会自动更新。React则使用单向数据流，只能从父组件向子组件传递数据，不能在组件之间共享数据。

组件：

Vue和React都使用组件来构建复杂的UI。Vue组件的结构更加简单明了，因为它将JavaScript和CSS代码封装在一个文件中。React则将这些代码分开管理，需要在不同的文件中进行编写和维护。

性能：

Vue和React都是非常快速的，但Vue在性能方面更加强大，因为它使用模板编译来提高渲染速度。React使用虚拟DOM来优化性能。

2.vue diff算法,react diff算法？

Vue 和 React 都使用虚拟 DOM 和 diff 算法来实现高效的 UI 渲染。

Vue 的 diff 算法：

Vue 的 diff 算法被称为 "渐进式的近似算法"。它首先将新的虚拟 DOM 树和旧的虚拟 DOM 树进行比较，然后只对差异进行更新。它不会直接操作真实的 DOM，而是将更新操作放在一个队列中，并异步执行队列中的所有更新操作。

Vue 的 diff 算法主要有以下几个步骤：

通过深度优先遍历，比较新旧虚拟 DOM 树的节点，找到需要更新的节点。
对需要更新的节点进行更深层次的比较，找到具体的差异。
根据差异类型，进行相应的更新操作。例如，添加、移动或删除节点。
对于子节点的比较，递归地执行上述步骤。

React 的 diff 算法：

React 的 diff 算法也被称为 "双指针算法" 或 "Fiber 算法"。React 的 diff 算法将新的虚拟 DOM 树和旧的虚拟 DOM 树进行比较，然后只对差异进行更新。与 Vue 不同的是，React 直接操作真实的 DOM，而不是将更新操作放在队列中异步执行。

React 的 diff 算法主要有以下几个步骤：

对比新旧虚拟 DOM 树的根节点，找到需要更新的节点。
根据节点类型和 key 属性进行比较，找到具体的差异。
根据差异类型，进行相应的更新操作。例如，添加、移动或删除节点。
递归地执行上述步骤，直到完成整个虚拟 DOM 树的比较。

3.vue虚拟dom，react虚拟dom？

Vue 的虚拟 DOM：

Vue 的虚拟 DOM 是基于渐进式的近似算法实现的。每个 Vue 组件都有自己的虚拟 DOM 树，当组件的状态发生变化时，Vue 会使用新的状态生成新的虚拟 DOM 树，然后使用 diff 算法比较新旧虚拟 DOM 树的差异，最终只更新需要更新的部分。在更新虚拟 DOM 树时，Vue 会将所有操作都放在一个队列中，然后异步执行队列中的所有更新操作，以提高性能。

React 的虚拟 DOM：

React 的虚拟 DOM 是基于 Fiber 实现的。每个 React 组件也都有自己的虚拟 DOM 树，当组件的状态发生变化时，React 会使用新的状态生成新的虚拟 DOM 树，然后使用 diff 算法比较新旧虚拟 DOM 树的差异，最终只更新需要更新的部分。在更新虚拟 DOM 树时，React 会直接操作真实 DOM，而不是将更新操作放在队列中异步执行。为了避免阻塞 UI 线程，React 使用 Fiber 架构实现了异步渲染，并提供了一种优先级机制，以确保重要的更新优先被执行。

4.怎么实现深浅拷贝？

浅拷贝：浅拷贝只复制对象或数组的第一层内容，而不复制嵌套的子对象或数组。

实现浅拷贝的方法：

使用 Object.assign() 方法

const newObj = Object.assign({}, obj);
const newArr = Object.assign([], arr);

使用展开运算符（spread operator）

深拷贝：深拷贝会复制对象或数组的所有层级内容，包括嵌套的子对象或数组。

实现深拷贝的方法：

递归实现

function deepClone(obj) {
  // 首先判断拷贝的数据类型
  if (typeof obj !== 'object' || obj === null) {
    return obj; // 如果是基本数据类型或null，直接返回
  }

  // 创建一个新的目标对象或数组
  const newObj = Array.isArray(obj) ? [] : {};

  // 递归拷贝对象或数组的属性和元素
  for (let key in obj) {
    newObj[key] = deepClone(obj[key]);
  }

  return newObj;
}

使用 JSON 对象的 stringify() 和 parse() 方法

但是，需要注意的是，这种方法无法拷贝函数和循环引用的对象，因为 JSON 不支持这些数据类型。

5.es6新特性有哪些？

let 和 const 关键字：用于声明块级作用域变量和常量。
箭头函数：使用箭头（=>）语法定义函数，可以更简洁地写出函数表达式和匿名函数。
模板字符串：使用反引号（`）包裹的字符串，可以包含变量和表达式，可以在字符串中换行，提高可读性和代码编写效率。
解构赋值：可以从数组和对象中解构出变量，使代码更简洁易懂。
默认参数：函数可以设置默认参数值，当函数调用时不传递参数时，将使用默认参数值。
展开运算符：使用三个点（...）运算符可以将数组或对象中的元素展开为单独的值。
class 和继承：使用 class 和 extends 关键字定义类和实现继承。
Promise：Promise 是一种处理异步操作的方法，可以更好地处理回调地狱和错误处理。
模块化：ES6 引入了模块化的语法，使用 import 和 export 关键字可以将代码模块化，提高代码的可维护性和可重用性。
Symbol：Symbol 是一种新的原始数据类型，用于创建唯一的标识符，可以用于对象属性的命名。
Map 和 Set：ES6 引入了 Map 和 Set 数据结构，分别用于存储键值对和一组唯一的值，提供了更灵活的数据操作方式。
Generator：Generator 是一种特殊的函数，可以在执行过程中暂停和恢复，可以用于异步编程和迭代器的实现。

还有一些其他的特性，如 Proxy、Reflect、for...of 循环、字符串和数字的扩展方法等，这些特性一起构成了 ES6 的新特性。

6.async,await和promise有什么区别？

Promise、async/await 是两种处理异步操作的方式，它们与 JavaScript 的回调函数相比，可以更好地处理异步代码，并使其更加易于理解和维护。

Promise 是一种异步操作的表示方法，它可以在异步操作完成后，使用 resolve() 和 reject() 方法返回结果或错误。在使用 Promise 时，可以通过 then() 方法或 catch() 方法处理异步操作的结果或错误。

async/await 是基于 Promise 的语法糖，它让异步代码看起来更像同步代码，使其更易于理解和维护。使用 async/await 时，可以使用 async 关键字定义一个异步函数，然后在函数中使用 await 关键字等待异步操作的结果。在等待异步操作的过程中，async 函数会挂起并等待异步操作完成后再继续执行。在 async 函数中使用 try/catch 语句可以捕获异步操作的错误。

以下是它们之间的区别：

语法：使用 Promise 时需要创建一个 Promise 实例，并使用 then() 和 catch() 方法处理异步操作的结果或错误；使用 async/await 时，可以使用 async 关键字定义一个异步函数，然后使用 await 关键字等待异步操作的结果。
错误处理：Promise 使用 then() 方法和 catch() 方法处理异步操作的结果和错误；async/await 使用 try/catch 语句处理异步操作的错误。
可读性：使用 async/await 可以让异步代码看起来更像同步代码，易于理解和维护；Promise 的语法相对于回调函数来说更加简洁明了，但仍然需要使用 then() 和 catch() 方法。
功能：Promise 可以链式调用多个异步操作，可以使用 Promise.all() 和 Promise.race() 方法处理多个异步操作的结果；async/await 不能直接链式调用多个异步操作，但可以在 async 函数中调用其他的异步函数。

7.箭头函数在那些场景不能使用？

作为构造函数：箭头函数没有自己的 this 值，也没有 prototype 属性，因此不能被用作构造函数。
对象方法：如果要将箭头函数作为对象的方法使用，箭头函数中的 this 值会被绑定到当前作用域中的 this 值，而不是对象本身。
回调函数中的 this：如果箭头函数作为回调函数使用，箭头函数中的 this 值会被绑定到当前作用域中的 this 值，而不是回调函数所在的对象。
函数体内使用 arguments 对象：箭头函数没有自己的 arguments 对象，如果需要使用 arguments 对象，可以使用 rest 参数代替。
事件处理函数：如果将箭头函数作为事件处理函数使用，箭头函数中的 this 值会被绑定到当前作用域中的 this 值，而不是触发事件的元素。

8.有哪些请求方式？

GET：获取资源。使用 GET 请求时，请求参数会被附加到 URL 后面，因此可以被浏览器缓存。GET 请求通常用于获取数据，不应该用于修改数据。
POST：提交数据。使用 POST 请求时，请求参数会被包含在请求体中，因此不会被浏览器缓存。POST 请求通常用于提交数据，例如表单数据或者 JSON 数据。
PUT：更新资源。使用 PUT 请求时，请求参数会被包含在请求体中，用于更新服务器上的资源。
DELETE：删除资源。使用 DELETE 请求时，请求参数会被包含在 URL 中，用于删除服务器上的资源。
HEAD：获取资源头部信息。与 GET 请求类似，但是只获取资源头部信息，不返回实际的资源内容。
OPTIONS：获取资源支持的请求方法。用于查询服务器支持的请求方式，通常在跨域请求时使用。
PATCH：部分更新资源。与 PUT 请求类似，但是只更新部分资源内容。

9.get和post请求有什么不同

使用方式：GET 请求和 POST 请求的使用方式不同。GET 请求通常用于从服务器获取数据，请求参数会被附加到 URL 的末尾，以 ? 开头，多个参数之间使用 & 连接。POST 请求通常用于向服务器提交数据，请求参数会被包含在请求体中，不会出现在 URL 中。
请求语义：GET 请求和 POST 请求的请求语义不同。GET 请求表示客户端希望从服务器获取资源，请求参数通常用于限定获取的资源范围或者提供查询条件。POST 请求表示客户端希望向服务器提交数据，请求参数通常用于传递提交的数据。
安全性：GET 请求和 POST 请求的安全性不同。GET 请求不具有安全性，因为请求参数暴露在 URL 中，容易被其他人窃取和篡改。POST 请求具有一定的安全性，因为请求参数不会被暴露在 URL 中，而是包含在请求体中。
请求大小：GET 请求和 POST 请求的请求大小有限制。GET 请求对 URL 的长度有限制，因此请求参数的大小也受到限制。POST 请求对请求体的大小有限制，但是相对于 GET 请求而言，请求参数可以更大。

10.什么是服务端渲染?

服务端渲染（SSR）是一种将服务器端的数据和页面模板组合成完整的 HTML 页面并将其发送到客户端的技术。相比于传统的客户端渲染）技术，服务端渲染可以提升首屏渲染速度、SEO 友好、更利于移动设备访问等优点。

服务端渲染的基本思路是，当用户发起请求时，服务器端根据请求的 URL 路径和参数等信息获取到所需的数据，并使用服务器端的模板引擎将数据和 HTML 模板进行组合，生成完整的 HTML 页面，并将其发送到客户端。客户端收到 HTML 页面后，直接进行展示，无需再进行数据获取和页面渲染等操作，从而提高了页面渲染的速度和性能。

11.节流防抖？

节流：指定时间间隔内只执行一次函数，多次调用函数会在时间间隔内合并为一次调用，适用于需要频繁触发的事件，例如页面滚动、鼠标移动、窗口大小变化等。
防抖：等待指定时间间隔后执行函数，如果在等待时间间隔内再次触发事件，则重新计时，适用于用户输入、搜索框输入等场景，可以避免频繁的 API 请求。

下面分别介绍一下节流和防抖的实现方法：

节流实现方法：

function throttle(func, wait) {
  let timer = null;
  return function() {
    const context = this;
    const args = arguments;
    if (!timer) {
      timer = setTimeout(function() {
        func.apply(context, args);
        timer = null;
      }, wait);
    }
  }
}

防抖实现方法：

function debounce(func, delay) {
  let timerId;

  return function(...args) {
    clearTimeout(timerId);

    timerId = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

12.语义化标签有哪些？

：表示文档的页眉，通常包含网站的标题、导航栏等内容。
：表示文档的导航部分，通常包含网站的导航链接。
：表示文档的主要内容部分，通常包含页面的核心内容。
：表示一个独立的、完整的内容单元，通常包含一篇文章、一段新闻等内容。
：表示与主要内容相关的辅助信息，通常包含侧边栏、广告、相关文章等内容。
：表示文档中的一个区块，通常包含一组相关的内容。
：表示文档的页脚，通常包含版权信息、联系方式等内容。
~
：表示标题，通常用于标识文档的章节和子章节。
：表示段落，通常用于显示一段文字内容。

2023年（js,css3,es6,Vue,react）面试常问面试题总结

1.vue和react的区别是什么？

2.vue diff算法,react diff算法？

3.vue虚拟dom，react虚拟dom？

4.怎么实现深浅拷贝？

5.es6新特性有哪些？

6.async,await和promise有什么区别？

7.箭头函数在那些场景不能使用？

8.有哪些请求方式？

9.get和post请求有什么不同

10.什么是服务端渲染?

11.节流防抖？

12.语义化标签有哪些？

~

：表示标题，通常用于标识文档的章节和子章节。

13.怎么让一个元素水平垂直居中

14.usestate是同步还是异步

15.大屏数据可视化项目屏幕怎么适配？

16.ECharts怎么适配？

17.使用ECharts怎么渲染十万条数据？

18.js闭包理解优点和缺点？

19.vue权限验证？

20.Vue组件之间的通信方式都有哪些？

21.vue生命周期

22.http与https区别

23.vue性能优化方案

24. Vue响应式原理

data为什么是个函数？

25.浏览器渲染机制

26.当在浏览器中输入 Google.com 并且按下回车之后发生了什么？

从输入URL到页面加载完成的主要流程如下：

TCP三次握手和TCP四次挥手有什么区别？

27.项目优化方案

28.hash和history

29.sort排序，从大到小，从小到大

30.MVVM和MVC有什么区别

31.首屏优化

32.keep-alive

33.路由导航守卫

34.回流和重绘

35.set

36.判断数据类型的方法

37.BFC，即块级格式化上下文

38.重构

39.谈谈你对原型和原型链的理解

40.作用域

49.事件冒泡和事件捕获

50.事件委托

51.本地存储

52.vue3为什么要用 Proxy 替代defineProperty?

53.对proxy的理解

54.事件循环机制

55.父子组件生命周期执行顺序

56.Vuex

57.常用的数组API

58.谈谈你对Promise的理解

59.Promise.all() 执行多个异步操作 其中一个出现错误会出现什么情况

60.谈谈你对堆和栈的理解

61.WebSocket的使用

62.你在axios二次封装做过什么操作。

63.浏览器缓存怎么做？

64.HTML5新特性有哪些？

66.CSS3新特性有哪些？

67.WebSocket 和服务端建立连接后，服务端修改token会不会断开连接？

68.Vue3中常用的组合式API及作用

69.v-model使用场景

59.Promise.all() 执行多个异步操作其中一个出现错误会出现什么情况