总的来说，这套问题比较基础，但也是前端面试中一些最常见的面试问题，适合大家巩固和练习习。
1.了解 Flex 布局及其用例。
Flex Layout 是一种灵活的布局，它允许容器中的子元素适应大小、位置和间距，使其成为移动开发的理想选择。 通过设置容器和物料的属性，可以实现水平居中、垂直居中、等分、流布局等多种布局方式。 在实际开发中，可以使用 Flex Layout 实现响应式设计、网格布局、导航菜单、卡片列表等多种布局效果。
2.JS 中的原型和原型链简介。
j**ascript 中的原型是每个函数对象都具有的属性，它指向包含共享属性和方法的对象。 当我们创建一个对象的新实例时，该对象继承其构造函数原型上的属性和方法。 原型链由对象的 proto 属性连接，对象可以通过该属性访问其原型对象的属性和方法。 这些连接层形成了一个原型链，使对象最终可以访问所有对象原型上的属性和方法。
3.有多少种方法可以在 react 组件之间传递值？
父组件将属性（props）传递给子组件：可以使用props将数据从父组件传递到子组件，子组件可以使用子组件根据需要进行渲染和操作。
子组件将事件传递给父组件：可以在子组件中定义事件处理程序，并且可以使用 props 将这些函数传递给父组件。 当子组件触发事件时，可以通过 props 调用父组件的事件处理程序。
上下文：上下文允许在组件树中共享数据，而不必通过 props 传递。 上下文提供了一种在祖先和后代组件之间传递信息的方法，但应谨慎使用，因为过度使用上下文会导致组件之间的耦合增加。
发布-订阅模式：您可以使用事件发布-订阅机制实现组件之间的通信。 一个组件可以将消息发布到事件总线（或事件中心），其他组件可以订阅这些消息并在需要时做出响应。
共享状态：您可以将状态放在共享存储中，例如 Redux 或 Mobx，然后在各个组件中获取和修改状态。 共享状态可实现高效的组件通信，但它需要确保状态一致且正确。
4.常见的水平和垂直方法有哪些？
5.请介绍一下类组件和函数组件之间的区别？
语法差异：函数组件是一个纯函数，它接受 props 参数并返回一个 react 元素。 类组件需要从 react 继承组件，类组件需要创建一个渲染并返回一个 React 元素，这在语法上比较复杂。 调用方法 可以直接调用功能组件来返回一个新的 react 元素; 当调用类组件时，它需要创建一个实例，然后通过调用实例中的 render 方法返回一个 react 元素。 状态管理 功能组件没有状态管理，而类组件有。 对 Use Scenario 类组件没有特定要求。 功能组件一般在大型项目中用于划分大型组件（功能组件不需要创建实例，效率更高），一般可以使用功能组件代替类组件，提高了效率。 6.如果我在地址栏中输入地址会怎样？
1. 在浏览器地址栏中输入URL，然后按回车键。 2.浏览器查找当前URL是否有缓存，并比较缓存是否过期。 3. DNS解析URL对应的IP地址。 4.建立基于IP的TCP连接（三次握手）。 5. HTTP 发起请求。 6. 服务器处理请求，浏览器接收 HTTP 响应。 7. 渲染页面并构建 DOM 树。 8.关闭TCP连接（四挥手）7说为....在和为....的区别？
for...in 循环主要用于遍历对象，不适合遍历数组; for...Of 循环可用于遍历数组、类数组对象、字符串、集合、映射和生成器对象。
8.将虚拟 DOM 转换为真实 DOM
首先，比较新旧虚拟 DOM 树之间的差异，找出需要更新的内容。 然后，根据差异进行本地更新，生成一系列DOM操作指令。 接下来，分批执行这些指令，将更新应用于实际 DOM。 最后，更新完成，用户可以在页面上看到相应的更改。 9.实现节流和防抖功能。
限制：每个时间段最多只允许运行一次。 例如，在调整窗口的过程中，事件被高频触发，可以使用节流功能在一定间隔时间内最多触发一次。 防抖：在高频通话中，只有有足够的空闲时间，**才会执行一次，常见的是输入变化事件，只有暂停输入事件大于指定时间，**才会执行一次。 10.单击刷新按钮或按 F5、Ctrl+F5（强制刷新）和在地址栏中按 Enter 有什么区别？
单击“刷新”按钮或按 F5：浏览器直接使本地缓存文件过期，但带有 if-modifed-since、if-none-match，这意味着服务器会检查文件的新鲜度，返回结果可能是 304 或 200。 用户按 Ctrl+F5（强制刷新）：浏览器不仅会让本地文件过期，而且也不会带来 if-modifed-since、if-none-match，相当于之前从不请求，返回结果为 200。 地址栏进入：浏览器发起请求，按照正常流程，本地检查是否过期，然后服务器检查新鲜度，最后返回内容。 11.实现模板字符串解析。
点击下方阅读原文，查看详细答案。
12.Cookie有哪些字段，它们的功能是什么？
13.介绍承诺race
传递给 promise 时当竞争对象中的任何可迭代 promise 对象被求解或拒绝时，返回的 promise 对象将立即被解析或拒绝，并采用第一个已解析或被拒绝的 promise 的值或原因。
此功能做出承诺在处理竞争条件时，种族非常有用。 例如，您可以使用 promise竞相实现超时函数，即如果一个异步操作没有在指定时间内完成，就会进行相应的处理。
14.跟我们说说切片拼接拆分的区别吗？
15.浏览器的渲染过程。
首先，解析接收到的文档，并基于文档定义构建 DOM 树，该树由 DOM 元素和属性节点组成。 然后解析 CSS 以生成 CSSOM 规则树。 基于 DOM 树和 CSSOM 规则树构建渲染树。 渲染树的节点称为渲染对象，是包含颜色、大小等属性的矩形，渲染对象对应 DOM 元素，但这种对应关系不是一一对应的，不可见的 DOM 元素不会插入到渲染树中。 还有对应于几个可见对象的 DOM 元素，这些对象通常是具有复杂结构的元素，无法用单个矩形来描述。 当渲染对象被创建并添加到树中时，它们没有位置或大小，因此当浏览器生成渲染树时，它将根据渲染树进行布局（也称为重排）。 在这个阶段，浏览器要做的就是弄清楚页面中各个节点的确切位置和大小。 通常，此行为也称为“自动重排”。 布局阶段之后是绘制阶段，该阶段遍历呈现树并调用呈现对象的 Paint 方法以在屏幕上显示其内容，并使用 UI 基本组件进行绘制。 16.跟我们说说你对盒子模型的理解吗？
CSS3 中有两种类型的盒子模型：标准盒子模型、IE 盒子模型和盒子模型由四个部分组成，分别是边距、边框、填充和内容标准箱式和IE箱式的区别：设置宽度和高度时，对应的范围不同1，标准盒子模型的宽度和高度属性范围仅包括内容2，IE盒子模型的宽度和高度属性范围包括边框、填充和内容，可以通过修改元素的box-sizing属性来改变元素的盒子模型; 1. box-sizing：content-box 代表标准盒子模型（默认） 2. box-sizing：border-box 代表 IE 盒子模型（奇怪的盒子模型） 17Vue 中双向数据绑定的原理是什么？
双向数据绑定是：数据劫持 + 发布/订阅模式（观察者模式）。。vue2 在实例初始化时遍历 data 中的所有属性，并使用object.defineproperty将所有这些属性转换为 getter setter。 并且劫持单个属性的 getter 和 setter，在数据发生变化时向订阅者发布消息，触发相应的监听**，中间有几个问题Vue3 使用代理来监控数据的变化。代理是 ES6 中提供的一项功能，它定义了基本操作（例如，属性查找、赋值、枚举、函数调用等）的自定义行为。 18.介绍承诺any
有承诺种族不同，承诺any 等待传递给它的所有 promise 对象被拒绝后再拒绝它们，并且只有当至少一个 promise 对象被解析时，返回的 promise 对象才会被解析。 它将把第一个求解的 promise 的值作为其求解值。
此功能做出承诺Any 在处理多个异步操作的情况下很有用，只要一个操作成功完成，关联的逻辑就可以继续执行。 如果所有其他方法都失败了，您可以在 promise 中添加一条消息Any 返回一个 promise 对象。
19.闭合的应用场景。
return返回一个函数函数作为参数IIFE（自执行函数）用于使用**函数进行循环赋值，即使用闭合节流防抖函数Curryization。