2025面试大全（29）1. Promise中的值穿透是什么？ Promise 中的“值穿透”（也称为“穿透效应”）是指

1. Promise中的值穿透是什么？

Promise 中的“值穿透”（也称为“穿透效应”）是指在 Promise 链中，如果某个 then 方法没有显式地返回一个值（即没有 return 语句或者 return 后面没有跟值），那么它默认会返回一个 Promise，这个 Promise 的解析值将会是前一个 Promise 的解析值。这种现象导致的结果是，在 Promise 链中，一个 then 方法的返回值如果没有被改变，那么这个值会“穿透”到下一个 then 方法中。以下是一个简单的例子：

Promise.resolve(10)
  .then(value => {
    console.log(value); // 输出 10
    // 没有显式返回值
  })
  .then(value => {
    console.log(value); // 输出 10，因为前一个 then 的返回值“穿透”过来了
  });

在这个例子中，第一个 then 方法没有显式返回任何值，所以它的返回值默认就是前一个 Promise 的解析值，即 10。这个值随后“穿透”到第二个 then 方法中。值穿透是 Promise 链式调用中的一个重要特性，它使得我们在处理异步操作时可以更加灵活和简洁。但同时也需要注意，有时候这种默认行为可能会导致非预期的结果，所以在编写 Promise 链时需要仔细考虑每个 then 方法的返回值。

2. 如何使用js计算一个html页面有多少种标签？

要计算一个HTML页面中有多少种不同的标签，你可以使用JavaScript来遍历文档的所有元素，并记录每个标签名称的出现。以下是一个简单的示例代码，展示了如何实现这一功能：

function countUniqueTags() {
  const tags = new Set(); // 使用 Set 来存储唯一的标签名
  const allElements = document.querySelectorAll('*'); // 获取页面上的所有元素
  allElements.forEach(element => {
    tags.add(element.tagName); // 将每个元素的标签名添加到 Set 中
  });
  return tags.size; // Set 的大小就是唯一标签的数量
}
// 调用函数并输出结果
const uniqueTagCount = countUniqueTags();
console.log(`该页面共有 ${uniqueTagCount} 种不同的标签。`);

这段代码的工作原理如下：

定义一个函数 countUniqueTags。
在函数内部，创建一个 Set 对象来存储唯一的标签名。
使用 document.querySelectorAll('*') 选择器获取页面上的所有元素。
遍历所有元素，并将每个元素的 tagName 属性添加到 Set 中。Set 会自动处理重复的标签名，只保留唯一的标签名。
返回 Set 的大小，即唯一标签的数量。
调用函数并输出结果。请注意，这个计算是在页面加载完成后进行的，所以确保在DOM完全加载后运行这段代码，例如在 window.onload 事件监听器中或者将脚本放在页面底部。如果你想要查看具体的标签名称，可以修改代码以输出 Set 的内容：

console.log(Array.from(tags)); // 将 Set 转换为数组并输出

这样你就可以看到页面中所有不同的标签名称了。

3. 协商缓存中，有了 Last-Modified，为什么还会出现 ETag？

协商缓存是HTTP缓存机制中的一种，它允许客户端和服务器在请求资源时进行协商，以确定资源是否需要更新。Last-Modified 和 ETag 都是用于协商缓存的响应头，它们各自有不同的特点和用途。

Last-Modified

Last-Modified 是一个响应头，用于表示资源最后一次被修改的时间。客户端在后续请求中可以通过 If-Modified-Since 请求头将这个时间戳发送给服务器，服务器会比较这个时间戳和资源的当前修改时间，如果资源没有变化，就返回304 Not Modified状态码，告诉客户端可以使用缓存版本。

ETag

ETag（Entity Tag）是另一个响应头，它是一个唯一标识资源版本的字符串。客户端在后续请求中可以通过 If-None-Match 请求头将这个ETag发送给服务器，服务器会比较这个ETag和资源的当前ETag，如果它们匹配，说明资源没有变化，服务器同样返回304 Not Modified状态码。

为什么同时需要 Last-Modified 和 ETag？

精度问题：Last-Modified 只能精确到秒，如果在一秒内资源被修改多次，它就无法准确反映这种变化。而 ETag 可以提供更细粒度的控制，因为它可以是基于内容变化的哈希值。
性能考虑：在某些情况下，生成 ETag 可能比检查最后修改时间更高效，尤其是对于动态生成的内容或者分布式系统中的资源。
资源状态：ETag 可以更好地处理资源状态的变化，比如资源被移动、重命名或者服务器配置变化等情况，这些情况下 Last-Modified 可能不会改变，但 ETag 会变化。
并发控制：ETag 可以用于实现乐观并发控制，即多个客户端同时修改资源时，可以通过ETag来检测是否有其他客户端已经修改了资源，从而避免冲突。
兼容性：某些服务器或客户端可能只支持 Last-Modified 或 ETag，为了提高兼容性，服务器可能会同时提供这两个头。
缓存失效策略：不同的缓存策略可能需要不同的验证方式，Last-Modified 适用于基于时间的缓存失效策略，而 ETag 适用于基于内容变化的缓存失效策略。总之，Last-Modified 和 ETag 各有优势，它们可以单独使用，也可以结合使用，以提供更强大、灵活的缓存和资源验证机制。服务器可以根据具体情况选择使用哪一个或两者都使用。

4. React有哪些性能优化的方法？

React性能优化是开发过程中的一个重要环节，以下是一些常见的性能优化方法：

1. 使用生产版本

确保在部署时使用React的生产版本，因为开发版本包含了额外的警告和检查，这会降低性能。

2. 避免不必要的重新渲染

PureComponent：使用React.PureComponent代替React.Component，它会对props和state进行浅比较，以避免不必要的更新。
React.memo：对于函数组件，使用React.memo进行性能优化。
shouldComponentUpdate：在类组件中实现shouldComponentUpdate方法，手动判断是否需要更新组件。
useMemo和useCallback：在函数组件中使用useMemo来缓存计算结果，使用useCallback来缓存函数。

3. 使用懒加载

React.lazy：用于动态导入组件，实现组件的懒加载。
Suspense：与React.lazy一起使用，允许组件在加载时显示一个加载指示器。

4. 优化状态管理

避免在顶层组件中存储大量状态，而是将状态下沉到需要它们的组件中。
使用不可变数据结构，以便React可以更快地检测到状态变化。

5. 使用虚拟化长列表

React Virtualized：对于长列表，使用虚拟化库如React Virtualized来渲染可视区域内的元素。

6. 优化事件处理

使用事件委托来减少事件处理器的数量。
避免在事件处理器中进行复杂的操作，可以使用防抖或节流技术。

7. 优化组件结构

避免过度嵌套组件，尽量保持组件结构扁平。
将复杂组件拆分为更小的子组件。

8. 使用错误边界

Error Boundaries：使用错误边界来捕获子组件中的错误，避免整个组件树崩溃。

9. 优化Context使用

避免在Context中存储大量数据，因为这会导致使用该Context的组件频繁重新渲染。

10. 使用代码分割

使用webpack的代码分割功能来分割代码，按需加载。

11. 优化自定义Hook

在自定义Hook中避免不必要的重新渲染，使用useRef和useCallback等。

12. 使用性能分析工具

React DevTools：使用React DevTools的性能分析功能来检测和分析组件的渲染性能。

13. 避免使用内联函数

内联函数会在每次渲染时创建新的函数实例，导致子组件不必要的重新渲染。

14. 使用key属性

在渲染列表时，为每个元素指定唯一的key属性，帮助React识别哪些元素发生了变化。

15. 优化动画和过渡

使用requestAnimationFrame或CSS动画来优化动画性能。
使用React Transition Group来管理过渡动画。通过结合这些方法，可以显著提高React应用的性能。不过，每个应用的情况不同，需要根据具体情况进行选择和调整。

5. bind() 连续调用多次，this的绑定值是什么呢？

在JavaScript中，Function.prototype.bind() 方法会创建一个新函数，这个新函数的this会被绑定到bind()方法第一个参数指定的值，并且不会改变。无论你连续调用bind()多少次，this的绑定值都是由第一次调用bind()时指定的。

function example() {
  console.log(this);
}
const obj1 = { name: 'obj1' };
const obj2 = { name: 'obj2' };
const boundToObj1 = example.bind(obj1);
const boundToObj1AndObj2 = boundToObj1.bind(obj2);
boundToObj1(); // 输出: { name: 'obj1' }
boundToObj1AndObj2(); // 输出: { name: 'obj1' }

在这个例子中，即使boundToObj1再次被bind到obj2，它的this值仍然是obj1。这是因为bind()方法返回的新函数已经固定了this的绑定，后续的bind()调用不会改变这个绑定。需要注意的是，如果你尝试在严格模式下或者在this不可变的函数（如箭头函数）上使用bind()，行为可能会有所不同。箭头函数没有自己的this，它们的this值由外围最近一层非箭头函数决定，因此对箭头函数使用bind()不会改变this的值。

6. 浏览器和 Node 中的事件循环有什么区别？

浏览器和 Node.js 都实现了事件循环（Event Loop），但它们在实现细节和组件上存在一些区别。以下是它们之间的一些主要区别：

浏览器中的事件循环：

组件：
- 调用栈（Call Stack）：用于执行同步代码。
- 任务队列（Task Queue）：也称为宏任务队列，用于存储待执行的宏任务，如脚本执行、事件回调、setTimeout、setInterval等。
- 微任务队列（Microtask Queue）：用于存储待执行的微任务，如Promise的回调、process.nextTick（在浏览器中不常见，但概念类似）。
执行流程：
- 执行同步代码，直到调用栈清空。
- 检查微任务队列，执行所有微任务，直到微任务队列为空。
- 渲染更新（如果需要）。
- 从任务队列中取出一个宏任务执行。
- 重复以上步骤。
渲染：
- 浏览器的事件循环会在每个循环的末尾进行渲染更新，这包括样式计算、布局和绘制。

Node.js中的事件循环：

组件：
- 调用栈（Call Stack）：用于执行同步代码。
- 事件队列（Event Queue）：存储待处理的事件，如I/O事件、定时器回调等。
- 多个阶段：Node.js的事件循环由多个阶段组成，包括定时器阶段、I/O回调阶段、闲置阶段、轮询阶段等。
执行流程：
- 执行同步代码，直到调用栈清空。
- 进入事件循环的各个阶段，每个阶段都有对应的队列：
  - 定时器阶段：执行setTimeout和setInterval的回调。
  - I/O回调阶段：执行I/O操作的回调。
  - 闲置阶段：执行setImmediate的回调。
  - 轮询阶段：检索新的I/O事件，执行I/O回调。
  - 检查阶段：执行setImmediate的回调。
  - 关闭阶段：关闭回调，如socket.on('close', callback)。
- 每个阶段之间可以执行微任务（通过process.nextTick）。
渲染：
- Node.js没有浏览器的渲染过程，因此不会在每个循环中进行样式计算、布局和绘制。

主要区别：

微任务执行时机：在浏览器中，微任务总是在下一个宏任务之前执行。在Node.js中，微任务（通过process.nextTick）可以在事件循环的各个阶段之间执行，甚至在宏任务之前。
事件循环阶段：Node.js的事件循环有多个明确的阶段，而浏览器的事件循环主要分为宏任务和微任务。
渲染过程：浏览器的事件循环包含渲染过程，而Node.js没有。
API差异：浏览器提供了setTimeout、setInterval、Promise等，而Node.js还提供了setImmediate、process.nextTick等特定于Node的API。这些区别反映了浏览器和Node.js在设计和用途上的不同：浏览器需要处理用户交互和页面渲染，而Node.js专注于服务器端的I/O操作和事件处理。

7. 谈谈对 window.requestAnimationFrame 的理解

window.requestAnimationFrame 是一个浏览器API，用于在浏览器中创建动画。它告诉浏览器你希望执行一个动画，并请求浏览器在下次重绘之前调用指定的函数来更新动画。这是一个优化动画性能的API，因为它允许浏览器在适当的时间进行重绘，从而避免不必要的布局计算和重绘，提高动画的流畅性和效率。以下是requestAnimationFrame的一些关键特点和理解：

帧率同步：
- requestAnimationFrame 会尝试在每秒60帧的速率下运行，即每帧大约16.67毫秒。不过，实际帧率可能会根据浏览器的性能和设备的显示能力而有所不同。
浏览器优化：
- 当页面处于非激活状态时，浏览器会自动暂停动画，以节省CPU和电池资源。
- 浏览器会合并多个帧的更新，以避免不必要的布局和绘制操作。
回调函数：
- requestAnimationFrame 接受一个回调函数作为参数，这个回调函数会在浏览器准备绘制新帧时被调用。
- 回调函数接收一个时间戳参数，表示调用回调函数时的当前时间。
循环动画：
- 为了创建连续的动画，通常会在回调函数内部再次调用requestAnimationFrame，形成循环。
替代定时器：
- requestAnimationFrame 是创建动画的首选方法，相比setTimeout或setInterval，它可以提供更平滑、更高效的动画效果。
取消动画：
- 可以使用window.cancelAnimationFrame来取消由requestAnimationFrame请求的动画帧。
使用场景：
- 适用于创建平滑的动画，如页面滚动、CSS动画、Canvas动画等。
兼容性：
- requestAnimationFrame 在现代浏览器中得到了广泛支持，但在一些旧浏览器中可能需要使用前缀或polyfill。示例代码：

function animate() {
  // 更新动画的状态
  updateAnimationState();
  // 绘制动画
  drawAnimation();
  // 请求下一帧
  requestAnimationFrame(animate);
}
// 开始动画
requestAnimationFrame(animate);

在这个示例中，animate函数会在每一帧被调用，从而创建一个连续的动画效果。通过requestAnimationFrame，我们可以确保动画的更新和绘制与浏览器的重绘周期同步，从而实现高效、流畅的动画。

8. React Fiber 是如何实现更新过程可控？

React Fiber 是 React 16 及以上版本中引入的一种新的 reconciliation（协调）引擎，它的主要目的是使 React 的更新过程更加灵活和可控制。Fiber 的实现通过将更新过程分解为许多小的工作单元，并在每个工作单元完成后允许浏览器执行其他任务，从而实现更新过程的可控。以下是 React Fiber 实现更新过程可控的几个关键点：

任务分解：
- Fiber 将虚拟DOM的更新过程分解为许多小的工作单元，每个单元可以独立执行和中断。
可中断的渲染：
- Fiber 可以在执行完一个工作单元后暂停渲染过程，将控制权交回给浏览器，让浏览器处理其他高优先级的任务，如用户输入、动画等。
优先级调度：
- Fiber 引入了优先级的概念，可以根据任务的紧急程度赋予不同的优先级。高优先级的任务（如用户交互）可以中断低优先级的任务（如后台数据更新）。
增量渲染：
- Fiber 采用增量渲染的方式，每次只处理一部分更新，而不是一次性完成所有更新。这样可以避免长时间占用主线程，减少页面卡顿。
重用和复用：
- Fiber 会尽可能重用和复用已有的DOM节点和组件实例，减少创建和销毁的开销。
协作式多任务：
- Fiber 利用浏览器的空闲时间片段（requestIdleCallback）来执行更新，与浏览器的主线程协作，避免冲突。
错误边界：
- Fiber 提供了错误边界（Error Boundaries）机制，可以捕获组件树中的错误，防止整个应用崩溃。
异步更新：
- Fiber 的更新是异步的，不会阻塞主线程，使得应用更加响应迅速。
调和算法的优化：
- Fiber 优化了调和算法，减少了不必要的DOM操作，提高了更新效率。
状态恢复：
- 当一个高优先级任务中断了一个低优先级任务时，Fiber 可以保存低优先级任务的状态，并在高优先级任务完成后恢复执行。通过这些机制，React Fiber 实现了更新过程的可控，使得React应用能够更流畅地运行，即使在复杂的应用中也能保持良好的性能和用户体验。

9. Fiber 为什么是 React 性能的一个飞跃？

Fiber 是 React 性能的一个飞跃，主要原因在于它从根本上改变了 React 的更新机制，使得 React 应用能够更高效、更流畅地处理复杂的用户界面更新。以下是 Fiber 为何能带来性能飞跃的几个关键点：

增量渲染（Incremental Rendering）：
- Fiber 将渲染工作分解为许多小的工作单元，允许 React 在每个工作单元完成后将控制权交回给浏览器，从而避免长时间占用主线程。这种增量渲染方式减少了页面卡顿和响应延迟。
任务调度与优先级：
- Fiber 引入了任务调度的概念，可以根据任务的紧急程度赋予不同的优先级。高优先级的任务（如用户交互）可以中断低优先级的任务，确保用户感受到的响应性得到提升。
可中断与恢复：
- Fiber 的更新过程是可以中断的，当有更高优先级的任务需要处理时，当前任务可以被暂停，并在稍后恢复。这种能力使得 React 能够更好地适应实时用户输入和动画等需求。
更好的并发处理：
- Fiber 支持并发渲染，允许同时处理多个渲染任务。这意味着 React 可以在后台准备新的更新，而不会影响到当前的用户交互。
DOM 操作的优化：
- Fiber 优化了 DOM 操作，减少了不必要的重排和重绘。通过更智能的差异化算法，Fiber 只更新实际改变的部分，从而提高性能。
错误边界：
- Fiber 引入了错误边界，可以捕获组件树中的 JavaScript 错误，防止整个应用崩溃，提高了应用的稳定性和用户体验。
更好的资源利用：
- Fiber 利用浏览器的空闲时间片段（如 requestIdleCallback）来执行非紧急的更新任务，从而更好地利用系统资源，避免浪费。
平滑的动画和过渡：
- 由于 Fiber 可以控制更新的节奏，它能够保证动画和过渡的平滑性，即使在复杂的交互中也能保持良好的性能。
组件复用和状态保持：
- Fiber 在更新过程中可以更有效地复用组件实例和保持状态，减少了创建和销毁组件的开销。
向后兼容性：
- Fiber 在提供这些性能改进的同时，保持了向后兼容性，使得现有应用可以无缝升级并受益于新的性能特性。总的来说，Fiber 通过重新设计 React 的核心算法，使得 React 在处理大型和复杂应用时能够提供更流畅、更可预测的用户体验，从而实现了性能上的一个飞跃。

10. 浏览器一帧都会干些什么？

浏览器在一帧（通常指16.67毫秒，对应60Hz的刷新率）内会执行一系列复杂的操作，以确保页面内容的流畅渲染和用户交互的响应。以下是浏览器在一帧内通常会执行的主要任务：

处理用户输入：
- 浏览器会首先处理用户的输入事件，如点击、滚动、按键等，以确保应用的响应性。
执行 JavaScript：
- 浏览器会执行当前帧需要运行的 JavaScript 代码。这包括事件处理函数、定时器回调、Promise 回调等。
计算样式：
- 浏览器会计算元素的样式，包括应用 CSS 规则和解析样式属性。
布局（Layout）：
- 浏览器会根据元素的样式计算布局，确定元素在页面上的位置和大小。
绘制（Paint）：
- 浏览器会绘制元素到屏幕上，包括文本、颜色、边框、阴影等。
合成（Composite）：
- 浏览器会将绘制好的层合并成一张图片，然后输出到屏幕上。这个过程可以利用 GPU 加速。
处理 RAF（RequestAnimationFrame）：
- 浏览器会执行通过 requestAnimationFrame 注册的回调函数，用于动画和高速渲染。
执行微任务（Microtasks）：
- 浏览器会执行微任务队列中的任务，如 Promise 的 then 和 catch 回调。
执行宏任务（Macrotasks）：
- 浏览器会执行宏任务队列中的任务，如 setTimeout、setInterval 的回调。
空闲时间（Idle Time）：
- 如果当前帧还有剩余时间，浏览器可能会执行低优先级的任务，如垃圾回收、预加载资源等。
事件循环（Event Loop）：
- 浏览器会持续进行事件循环，处理上述任务，并在下一帧开始时重复这个过程。
其他浏览器内部操作：
- 浏览器还可能执行一些内部操作，如网络请求、历史记录管理、插件处理等。浏览器在一帧内需要高效地完成这些任务，以确保页面的流畅性和响应性。如果某帧中的任务过于繁重，导致浏览器无法在16.67毫秒内完成所有工作，就会出现帧率下降，用户会感受到卡顿或延迟。因此，开发者需要优化代码，减少重排（Reflow）和重绘（Repaint），以及避免长时间运行的 JavaScript 任务，以确保浏览器能够在一帧内完成所有必要的操作。

11. 不同版本的 React 都做过哪些优化？

React在不同版本中进行了许多重要的优化和改进，以下是一些主要版本的优化内容：

React 16

异步渲染与Fiber架构：
- 引入了异步渲染机制，允许在渲染过程中暂停和恢复，提高了应用的响应性和性能。
- Fiber架构将渲染过程分解为多个小任务，这些任务可以在不同的帧之间进行调度，避免了长时间占用主线程。
错误处理：
- 引入了错误边界（Error Boundaries），允许开发者捕获子组件中的错误，避免整个应用的崩溃，提高了应用的稳定性。
生命周期API的变革：
- 引入了新的生命周期方法如getDerivedStateFromProps和getSnapshotBeforeUpdate，提供了更安全和更可控的方式来管理组件状态和副作用。
Context API的改进：
- 改进了Context API，使其更易于使用且性能更优，方便在组件树中传递数据。
Hooks的引入：
- React 16.8引入了Hooks（如useState、useEffect），彻底改变了函数组件的编写方式，使得状态管理和副作用处理更加简洁。

React 17

并发模式：
- 引入了并发模式，使应用程序能够在不阻塞主线程的情况下更新UI，显著增强了应用程序的响应性。
稳定性提升：
- 进一步提高了组件的稳定性，减少了不必要的重新渲染，提升了应用程序的整体性能和用户体验。
无状态更新：
- 更新不再基于组件的实例，这有助于提高性能和简化内存管理。

React 18

自动批量更新：
- 引入了自动批量更新机制，可以自动将多个更新合并成一个批处理，大幅减少了不必要的重新渲染，提升了应用程序的性能。
Suspense：
- 引入了Suspense API，用于实现组件的懒加载和代码分割，提高了应用的加载性能。
并发渲染：
- 进一步改进了并发渲染，引入了startTransition等API，允许React在后台准备新的UI，而不会阻塞主线程。
新的Hooks：
- 引入了新的Hooks如useId、useTransition、useDeferredValue等，提供了更多的并发特性和性能优化手段。这些优化和改进极大地提升了React的性能、开发效率和用户体验。每个新版本的发布都使得React更加高效、灵活和强大。

12. 谈谈 Object.defineProperty 与 Proxy 的区别

Object.defineProperty和Proxy都是JavaScript中用于操作对象属性和拦截对象行为的方法，但它们在用途、功能和使用方式上有显著的区别。

Object.defineProperty

Object.defineProperty是ES5中引入的，用于直接在一个对象上定义新的属性，或者修改现有属性的值和属性描述符。 特点：

针对单个属性：只能一次性定义或修改一个属性的描述符。
属性描述符：可以设置属性的值、可枚举性、可配置性、可写性等。
数据描述符与访问描述符：支持数据描述符（value, writable）和访问描述符（get, set）。
局限性：不能用于添加新属性，除非同时设置configurable为true。 示例：

let obj = {};
Object.defineProperty(obj, 'prop', {
  value: 10,
  writable: true,
  enumerable: true,
  configurable: true
});
console.log(obj.prop); // 10

Proxy

Proxy是ES6中引入的，用于创建一个对象的代理，从而可以拦截并定义对象的基本操作。 特点：

代理对象：创建一个新对象，这个对象可以代理另一个对象的所有操作。
拦截操作：可以拦截多达13种操作，如属性读取、属性设置、枚举、函数调用等。
灵活性：提供了极高的灵活性，可以自定义拦截行为。
反射API：通常与Reflect对象配合使用，以确保默认行为得到保留。 示例：

let target = {
  prop: 10
};
let handler = {
  get: function(target, prop) {
    return `Property ${prop} is ${target[prop]}`;
  }
};
let proxy = new Proxy(target, handler);
console.log(proxy.prop); // "Property prop is 10"

区别总结

范围：
- Object.defineProperty针对单个属性进行操作。
- Proxy针对整个对象进行代理，可以拦截对象的所有操作。
功能：
- Object.defineProperty主要用于定义或修改属性描述符。
- Proxy可以拦截更多种类的操作，如属性读取、设置、枚举、函数调用等。
灵活性：
- Object.defineProperty相对简单，适用于简单的属性操作。
- Proxy提供了更高的灵活性，可以自定义复杂的拦截行为。
性能：
- Object.defineProperty性能较好，因为它是直接操作属性。
- Proxy可能会有一定的性能开销，因为需要创建代理对象并拦截操作。
兼容性：
- Object.defineProperty在ES5及更高版本中可用。
- Proxy在ES6及更高版本中可用。
使用场景：
- Object.defineProperty常用于定义对象属性时的细粒度控制。
- Proxy常用于实现数据绑定、双向绑定、访问控制、日志记录等复杂功能。在选择使用Object.defineProperty还是Proxy时，需要根据具体的需求和场景来决定。如果只需要简单操作单个属性，Object.defineProperty可能更合适；如果需要拦截和自定义对象的各种操作，Proxy则是更好的选择。

13. base64编码图片，为什么会让数据量变大？

Base64编码是一种基于64个可打印字符来表示二进制数据的方法。它通常用于在文本格式中嵌入二进制数据，比如在HTML或CSS中嵌入图片。然而，Base64编码会导致数据量变大，原因如下：

编码效率：Base64编码将每3个字节的二进制数据转换为4个字节的文本字符。这意味着编码后的数据量会比原始数据多出约33%。
字符集：Base64编码使用了一组64个字符（A-Z, a-z, 0-9, +, /）来表示数据，并且可能会使用'='字符作为填充字符。这些字符通常以ASCII码的形式存储，每个字符占用1字节。而在二进制格式中，图片数据可能以更紧凑的方式存储，比如每个像素用几个比特表示。
填充：Base64编码在必要时会在编码后的数据末尾添加'='字符作为填充，以确保编码后的数据长度是4的倍数。这也会增加一些额外的数据量。
元数据：在某些情况下，Base64编码的图片可能会包含一些元数据，比如MIME类型信息（如data:image/jpeg;base64,），这些也会增加数据量。示例：假设我们有一个3字节的二进制数据：

01001101 01100001 01101110

Base64编码后，这3个字节会被转换为4个字节的文本字符：

TWFu

在这个例子中，3字节的原始数据变成了4字节的编码数据，增加了33%的数据量。 为什么使用Base64？尽管Base64编码会导致数据量增加，但它仍然被广泛使用，原因包括：

兼容性：Base64编码的文本可以在不同的系统和服务之间轻松传输，而不需要担心二进制数据的兼容性问题。
嵌入性：可以直接在HTML、CSS或JavaScript中嵌入Base64编码的图片，减少HTTP请求。
安全性：在某些情况下，Base64编码可以防止特殊字符引起的解析错误或安全漏洞。总之，Base64编码是一种方便的表示二进制数据的方法，但它的确会导致数据量增加。在实际使用时，需要权衡其便利性和数据量增加的代价。

14. html和css中的图片加载与渲染规则是什么样的？

在HTML和CSS中，图片的加载与渲染遵循一系列规则和流程，这些规则确保了图片能够正确地被浏览器解析和显示。以下是图片加载与渲染的主要规则和步骤：

HTML中的图片加载与渲染

标签使用：
- 使用<img>标签来嵌入图片，通过src属性指定图片的URL。
- 可以使用alt属性提供替代文本，用于图片无法加载时显示或供屏幕阅读器使用。
加载过程：
- 浏览器解析HTML文档，遇到<img>标签时，开始异步加载图片。
- 浏览器发送HTTP请求获取图片资源。
- 图片加载过程中，根据alt属性可能显示替代文本或占位符。
渲染规则：
- 图片加载完成后，浏览器根据<img>标签的属性（如width、height）和CSS样式来确定图片的显示尺寸。
- 如果没有指定尺寸，浏览器会使用图片的原始尺寸。
- 图片会按照文档流（normal flow）进行布局，除非通过CSS改变了其定位属性（如float、position等）。
响应式设计：
- 可以使用srcset属性和sizes属性来实现响应式图片，根据设备屏幕尺寸和分辨率加载不同大小的图片。
- 使用picture元素可以更细致地控制不同条件下加载的图片资源。

CSS中的图片加载与渲染

背景图片：
- 使用background-image属性来设置元素的背景图片。
- 可以通过background-repeat、background-position、background-size等属性控制背景图片的重复、位置和尺寸。
加载过程：
- 浏览器解析CSS，遇到background-image属性时，开始异步加载图片。
- 图片加载过程中，元素可能显示背景颜色或保持透明。
渲染规则：
- 背景图片加载完成后，根据CSS属性进行渲染。
- 背景图片不会影响元素的布局，除非设置了background-attachment为fixed或local。
- 背景图片会根据background-origin和background-clip属性确定其定位和剪裁区域。
多重背景：
- 可以在一个元素上设置多个背景图片，通过逗号分隔不同的背景属性值。

共同规则和注意事项

缓存：浏览器会缓存已加载的图片，以便在后续访问时快速显示。
优先级：浏览器会根据资源的优先级和当前网络条件来决定加载顺序。
懒加载：可以通过JavaScript实现图片的懒加载，即只有当图片进入视口（viewport）时才开始加载。
性能考虑：大量或大尺寸的图片会影响页面加载性能，应优化图片大小和使用适当的格式。

渲染性能优化

使用适当的图片格式：如JPEG、PNG、WebP等，根据图片内容和需求选择。
压缩图片：减少图片文件大小，提高加载速度。
使用CDN：分布式部署图片资源，减少加载时间。
避免布局抖动：提前指定图片尺寸，避免加载时引起的布局变化。了解这些规则和步骤有助于开发者更好地控制图片的加载和渲染，从而提高网页的性能和用户体验。

15. 虚拟DOM一定更快吗？

虚拟DOM（Virtual DOM）并不一定总是更快，但它通常能提供更好的性能和更流畅的用户体验，尤其是在复杂的应用程序中。虚拟DOM的优势在于它提供了一种更高效的方式来更新和渲染UI，而不是直接操作实际的DOM。以下是虚拟DOM的一些关键点和性能考虑：

虚拟DOM的优势：

批处理和优化：
- 虚拟DOM可以批处理多个操作，然后一次性更新实际的DOM，减少重绘和重排的次数。
差异算法：
- 虚拟DOM使用差异算法（如React的Reconciliation）来计算新旧虚拟DOM树之间的差异，只更新变化的部分。
抽象和简化：
- 虚拟DOM提供了一层抽象，使得开发者可以更简单地描述UI的状态，而不需要直接操作DOM。
跨平台：
- 虚拟DOM可以渲染到不同的平台，如Web、React Native、服务器端渲染等。

虚拟DOM的潜在性能问题：

初始化开销：
- 创建和维护虚拟DOM树本身有一定的性能开销，尤其是在大型应用程序中。
复杂差异计算：
- 如果虚拟DOM树非常庞大或变化复杂，差异计算可能会变得昂贵。
不必要的渲染：
- 如果没有正确地使用shouldComponentUpdate、React.memo或Hooks中的useMemo等优化手段，可能会导致不必要的渲染。

实际DOM的优势：

直接操作：
- 对于简单的更新，直接操作DOM可能更快，因为没有虚拟DOM层的抽象和差异计算。
较少的内存使用：
- 不使用虚拟DOM可以减少内存使用，因为不需要存储两棵树（虚拟DOM树和实际DOM树）。

性能比较：

小型或简单应用：对于小型或简单的应用程序，虚拟DOM的优势可能不明显，甚至可能比直接操作DOM慢。
大型或复杂应用：对于大型或复杂的应用程序，虚拟DOM通常能提供更好的性能和可维护性。

结论：

虚拟DOM并不一定总是更快，但它提供了一种更高效、可预测和可维护的方式来构建用户界面。在实际应用中，虚拟DOM的性能通常优于直接操作DOM，尤其是在处理复杂交互和大型应用程序时。然而，对于非常简单的场景，直接操作DOM可能更有优势。开发者应根据具体需求和场景来选择合适的技术栈。

16. mete标签中的viewport 有什么用？

<meta> 标签中的 viewport 是用于控制视口（viewport）的设置，视口是用户在浏览器中看到的网页的区域。viewport meta标签对于移动设备尤其重要，因为它可以确保网页在移动设备上正确显示和缩放。

`viewport` meta标签的主要作用：

控制缩放：
- 可以设置初始缩放比例、最小缩放比例、最大缩放比例等，以防止用户缩放页面导致布局错乱。
宽度设置：
- 可以设置视口的宽度，通常设置为 device-width 以适应不同设备的屏幕宽度。
布局优化：
- 通过设置 viewport，可以优化移动设备上的布局，使网页在移动设备上看起来更像原生应用。

`viewport` meta标签的常见属性：

width：设置视口的宽度，可以是一个具体的像素值，或者 device-width 表示设备屏幕的宽度。
initial-scale：设置页面的初始缩放比例。
minimum-scale：设置用户可以缩放的最小比例。
maximum-scale：设置用户可以缩放的最大比例。
user-scalable：设置用户是否可以手动缩放页面，取值为 yes 或 no。

示例：

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

这个示例设置了视口宽度为设备宽度，初始缩放比例为1，不允许用户缩放。

为什么使用 `viewport` meta标签？

响应式设计：通过设置 viewport，可以更容易地实现响应式设计，使网页在不同设备上都能良好显示。
改善用户体验：防止用户缩放导致布局错乱，提供更一致的浏览体验。
适配移动设备：确保网页在移动设备上正确显示，而不是默认缩放以适应屏幕。

注意事项：

不正确的 viewport 设置可能导致网页在移动设备上显示不正常。
过度限制缩放（如设置 user-scalable=no）可能会影响用户的浏览体验，特别是在需要放大查看内容的情况下。总之，viewport meta标签是移动网页开发中不可或缺的一部分，它有助于确保网页在不同设备上都能提供良好的用户体验。

17. CSS中的 “flex:1;” 是什么意思？

在CSS中，flex: 1; 是一个简写属性，用于设置弹性容器（flex container）中的子元素（flex item）的弹性比例。这个属性是 flex-grow、flex-shrink 和 flex-basis 三个属性的简写形式。

`flex: 1;` 的具体含义：

flex-grow: 1：
- 表示该子元素将占用剩余空间的比例。在这个例子中，flex-grow 被设置为1，意味着子元素将平均分配剩余空间。
flex-shrink: 1（默认值）：
- 表示在空间不足时，子元素将按照比例缩小。由于没有显式设置，它默认为1。
flex-basis: 0%（默认值）：
- 表示子元素的初始主轴大小。在这个简写中，flex-basis 默认为0%，但实际表现取决于其他因素，如子元素的内容大小。

示例：

.item {
  flex: 1;
}

解释：

flex-grow: 1：所有设置了 flex: 1; 的子元素将平均分配父容器中的剩余空间。
flex-shrink: 1：如果空间不足，这些子元素将按照相同比例缩小。
flex-basis: 0%：子元素的初始大小为0%，但实际上它们会根据内容大小或父容器的大小来调整。

应用场景：

平均分配空间：当你想要多个子元素在父容器中平均分配剩余空间时，可以给它们设置 flex: 1;。
响应式布局：在响应式设计中，使用 flex: 1; 可以轻松实现子元素在不同屏幕尺寸下的自适应布局。

注意事项：

flex: 1; 是一个简写属性，可以根据需要单独设置 flex-grow、flex-shrink 和 flex-basis。
如果子元素设置了固定宽度，flex: 1; 可能不会如预期工作，因为固定宽度会优先考虑。
flex: 1; 在弹性布局中非常强大，但需要理解其背后的工作原理以避免布局问题。总之，flex: 1; 是CSS弹性布局中一个非常实用和强大的属性，用于实现子元素在父容器中的平均空间分配和自适应布局。

18. html文档渲染过程，css文件和js文件的下载，是否会阻塞渲染？

HTML文档渲染过程中，CSS文件和JS文件的下载都会对渲染产生一定的影响，但它们的影响方式和程度是不同的。

CSS文件下载对渲染的影响：

阻塞渲染：CSS文件是渲染阻塞资源。这意味着在解析HTML文档时，如果遇到一个<link>标签引用了外部CSS文件，浏览器会暂停HTML的解析，直到该CSS文件下载并解析完成。这是因为CSS负责页面的布局和样式，浏览器需要确保在渲染页面之前已经应用了所有的CSS规则。
重要性：由于CSS直接影响页面的外观，浏览器需要等待CSS文件下载完成以确保渲染的正确性。

JS文件下载对渲染的影响：

可能阻塞渲染：JavaScript文件可以是渲染阻塞资源，也可以不是，这取决于其位置和属性。
- <script>标签在<head>中：如果<script>标签没有async或defer属性，并且位于<head>中，它会阻塞HTML的解析直到脚本下载并执行完成。
- <script>标签在<body>结束前：如果<script>标签位于<body>的结束标签之前，并且没有async或defer属性，它也会阻塞HTML的解析，但此时大部分HTML已经解析完成，影响相对较小。
- async属性：如果<script>标签包含async属性，脚本将在下载时不会阻塞HTML解析，但会在下载完成后暂停HTML解析以执行脚本。
- defer属性：如果<script>标签包含defer属性，脚本将在HTML解析完成后、DOM内容加载前执行，不会阻塞HTML解析。
执行顺序：JavaScript的执行可能会修改DOM或CSSOM，因此浏览器需要等待脚本执行完成以确保渲染的正确性。

总结：

CSS文件：总是阻塞渲染，直到下载并解析完成。
JS文件：可以是阻塞的，也可以是非阻塞的，取决于脚本的位置和属性（async、defer）。

优化建议：

CSS：将CSS文件放在文档的<head>中，并尽量减少其大小，以加快下载和解析速度。
JS：根据需要使用async或defer属性，将非关键的脚本异步加载，避免阻塞渲染。将关键的脚本放在<body>的结束标签之前，以确保HTML解析完成后才执行。通过合理地管理CSS和JS文件的加载，可以最大限度地减少对渲染的阻塞，提高页面的加载速度和用户体验。

19. 谈谈你对浏览器中进程和线程的理解

在浏览器中，进程和线程是两个非常重要的概念，它们共同协作以实现浏览器的多任务处理和高效运行。以下是我对浏览器中进程和线程的理解：

进程（Process）

定义：进程是操作系统分配资源的基本单位，它包含了一个程序的执行环境，包括代码、数据和系统资源。
独立性：每个进程都有自己独立的内存空间，进程之间的资源是隔离的，一个进程崩溃不会影响其他进程。
多进程架构：现代浏览器通常采用多进程架构，例如Chrome浏览器采用了多进程模型，包括浏览器主进程、渲染进程、插件进程等。这种架构可以提高浏览器的稳定性和安全性。
浏览器主进程：负责协调和管理其他进程，处理用户输入、UI显示等。
渲染进程：每个标签页通常有自己的渲染进程，负责解析HTML、CSS、JavaScript，以及渲染页面。
插件进程：插件运行在独立的进程中，以避免插件崩溃影响整个浏览器。

线程（Thread）

定义：线程是进程内部的一个执行流，是操作系统调度和执行的基本单位。
共享资源：同一进程内的线程共享进程的资源，包括内存和文件等。
多线程：在浏览器中，一个进程可以包含多个线程，以实现并发执行。例如，JavaScript的执行通常在一个单独的线程中进行，而浏览器渲染和I/O操作可能在其他线程中执行。
JavaScript单线程：由于历史原因，JavaScript在浏览器中是单线程执行的，这意味着同一时间只能执行一个JavaScript任务。为了处理异步操作，浏览器提供了事件循环（Event Loop）机制。
事件循环：事件循环是浏览器用于处理异步操作的一种机制，它允许浏览器在执行长时间运行的任务时不会阻塞UI的更新。
Web Workers：为了在浏览器中实现真正的并行处理，可以使用Web Workers（如Web Workers或Service Workers）在后台线程中运行脚本，这些线程可以执行耗时的任务而不阻塞主线程。

进程与线程的关系

进程包含线程：一个进程可以包含多个线程，进程是线程的容器。
资源共享：同一进程内的线程共享进程的资源，但不同进程的资源是隔离的。
并发与并行：多线程可以实现并发执行，而多进程可以实现并行执行。

浏览器中的进程和线程

渲染进程中的线程：渲染进程通常包含多个线程，如主线程（负责执行JavaScript）、合成线程（负责将页面元素绘制到屏幕上）等。
浏览器主进程中的线程：浏览器主进程也包含多个线程，如UI线程、I/O线程等。
插件进程中的线程：插件进程可以根据需要创建多个线程来执行任务。

优化与安全

性能优化：通过多进程和多线程，浏览器可以更有效地利用多核CPU，提高性能。
安全性：多进程架构可以提高安全性，因为进程之间的资源隔离减少了攻击面。

总结

浏览器中的进程和线程是实现浏览器高效、稳定和安全的基石。多进程架构提供了资源隔离和并行处理的能力，而多线程允许在单个进程中实现并发执行。通过合理地使用进程和线程，浏览器能够同时处理多个任务，提供流畅的用户体验。

注意事项

资源消耗：多进程和多线程会带来更高的资源消耗，需要平衡性能和资源使用。
复杂度：多进程和多线程增加了浏览器的复杂度，需要更复杂的调度和管理。通过理解浏览器中的进程和线程，我们可以更好地理解浏览器的架构和性能优化，以及如何编写更高效和安全的Web应用。

20. 为什么JavaScript是单线程？

JavaScript被设计为单线程的主要原因是其最初的用途和运行环境。以下是JavaScript单线程设计的几个关键原因：

历史原因：
- JavaScript最初是为浏览器设计的，用于在网页上添加交互性。在早期，浏览器和Web技术相对简单，单线程模型足以应对大多数场景。
- 设计者希望保持语言的简单性和易用性，单线程模型更容易理解和实现。
浏览器环境：
- 浏览器需要处理大量的用户交互、DOM操作和页面渲染。如果JavaScript是多线程的，那么多个线程同时修改DOM可能会导致不一致和冲突。
- 单线程模型可以避免复杂的同步问题，简化了内存管理和DOM操作的复杂性。
事件驱动：
- JavaScript采用了事件驱动的方式来处理异步操作，如网络请求、定时器和用户输入。事件循环（Event Loop）机制允许浏览器在执行长时间运行的任务时不会阻塞UI的更新。
- 这种事件驱动的模型在单线程环境中运行得很好，可以有效地管理异步任务。
避免复杂性：
- 多线程编程通常涉及复杂的同步和锁机制，这会增加编程的难度和出错的可能性。
- 单线程模型简化了编程模型，使得开发者可以更容易地编写和维护代码。
性能考虑：
- 在早期，硬件性能有限，多线程可能不会带来显著的性能提升，反而可能因为线程管理的开销而降低性能。
- 随着硬件的发展，单线程模型的性能瓶颈逐渐显现，但现代浏览器通过Web Workers等技术提供了在后台线程中运行JavaScript的能力，从而在一定程度上缓解了这个问题。
安全考虑：
- 单线程模型可以减少某些类型的安全问题，如线程间的数据竞争和同步问题。尽管JavaScript是单线程的，但现代浏览器提供了多种技术来克服单线程的限制，例如：

事件循环：允许异步操作不会阻塞主线程。
Web Workers：允许在后台线程中运行JavaScript代码，实现并行处理。
Promise：提供了一种更优雅的方式来处理异步操作。
Async/Await：使得异步代码的编写更加直观和易于理解。总之，JavaScript的单线程设计是其历史、运行环境和设计目标共同作用的结果。尽管这种设计有一定的局限性，但通过现代浏览器的各种技术和API，开发者仍然可以编写高效、响应迅速的Web应用。

21. 说说你对 Object.defineProperty 的理解

Object.defineProperty() 是 JavaScript 中一个非常强大的原生方法，用于直接在一个对象上定义新的属性，或者修改已经存在的属性，并返回该对象。这个方法在 ES5 中被引入，它的使用场景非常广泛，包括实现数据绑定、创建不可枚举属性、设置只读属性等。以下是 Object.defineProperty() 方法的一些关键点：

基本语法

Object.defineProperty(obj, prop, descriptor)

obj：需要定义属性的对象。
prop：需要定义或修改的属性的名称。
descriptor：属性描述符，是一个对象，包含了属性的配置信息。

属性描述符

属性描述符有两种形式：数据描述符和访问器描述符。

数据描述符

value：属性的值。
writable：决定属性是否可写，默认为 false。
enumerable：决定属性是否可枚举，即是否可以通过 for-in 循环或 Object.keys() 被遍历到，默认为 false。
configurable：决定属性是否可配置，即是否可以修改属性描述符或重新定义属性，默认为 false。

访问器描述符

get：属性的getter函数，当访问属性时被调用。
set：属性的setter函数，当修改属性时被调用。
enumerable：同上。
configurable：同上。

使用场景

实现双向数据绑定：在现代前端框架中，如Vue.js，使用 Object.defineProperty() 来实现数据与视图的同步更新。
创建不可修改的对象：通过设置 writable 和 configurable 为 false，可以创建一个不可修改的属性。
隐藏属性：通过设置 enumerable 为 false，可以创建一个不可枚举的属性，从而在遍历对象时隐藏该属性。
自定义属性行为：使用访问器描述符，可以自定义属性的读取和设置行为，例如实现依赖收集、缓存等。

注意事项

一旦将 configurable 设置为 false，就不能再修改该属性的描述符，也不能重新定义该属性。
在严格模式下，尝试修改一个不可写的属性会抛出错误。
Object.defineProperty() 可以用来模拟实现 私有属性，但现代JavaScript提供了更原生的方式，如 #私有属性。

示例

let obj = {};
Object.defineProperty(obj, 'name', {
  value: 'Alice',
  writable: true,
  enumerable: true,
  configurable: true
});
console.log(obj.name); // 输出: Alice
Object.defineProperty(obj, 'name', {
  value: 'Bob'
});
console.log(obj.name); // 输出: Bob

在这个示例中，我们首先定义了一个名为 name 的属性，然后修改了它的值。由于 configurable 被设置为 true，我们能够成功修改属性值。 Object.defineProperty() 是一个非常强大的工具，但使用时需要小心，以避免引入难以调试的错误。理解它的原理和限制对于深入掌握JavaScript对象模型至关重要。

22. ES6中的 Reflect 对象有什么用？

Reflect 是 ES6 引入的一个新对象，它的主要目的是提供一种更统一、更标准的方式来操作对象属性。Reflect 对象的设计与 Object 类似，但提供了更丰富的方法和更符合函数式编程风格的操作。以下是 Reflect 对象的一些主要用途和特点：

1. 替代 `Object` 的某些方法

Reflect 对象提供了一系列静态方法，这些方法与 Object 对象上的方法功能相似，但有一些改进。例如：

Reflect.getPrototypeOf() 替代 Object.getPrototypeOf()
Reflect.setPrototypeOf() 替代 Object.setPrototypeOf()
Reflect.defineProperty() 替代 Object.defineProperty()
Reflect.getOwnPropertyDescriptor() 替代 Object.getOwnPropertyDescriptor()
Reflect.preventExtensions() 替代 Object.preventExtensions()
Reflect.isExtensible() 替代 Object.isExtensible()
Reflect.ownKeys() 替代 Object.getOwnPropertyNames() 和 Object.getOwnPropertySymbols() 的组合

2. 提供更清晰的错误处理

Reflect 方法在遇到错误时通常返回一个布尔值，而不是抛出异常。这使得错误处理更加清晰和一致。例如：

Reflect.defineProperty() 在无法定义属性时返回 false，而不是抛出错误。
Reflect.setPrototypeOf() 在无法设置原型时返回 false，而不是抛出错误。

3. 操作符式的函数式编程

Reflect 提供了一种更符合函数式编程风格的方式来操作对象。例如，Reflect.get() 可以替代对象属性访问操作符 .，Reflect.set() 可以替代赋值操作符 =。

4. 配合 `Proxy` 使用

Reflect 与 Proxy 密切相关，Proxy 可以拦截 JavaScript 的原生操作，而 Reflect 则提供了对这些操作的默认行为。在 Proxy 的处理函数中，通常使用 Reflect 来调用默认行为。例如：

let target = {
  name: 'Alice'
};
let handler = {
  get(target, prop, receiver) {
    console.log(`Getting ${prop}`);
    return Reflect.get(target, prop, receiver);
  },
  set(target, prop, value, receiver) {
    console.log(`Setting ${prop} to ${value}`);
    return Reflect.set(target, prop, value, receiver);
  }
};
let proxy = new Proxy(target, handler);
proxy.name; // 输出: Getting name
proxy.name = 'Bob'; // 输出: Setting name to Bob

在这个例子中，Proxy 拦截了属性的获取和设置操作，而 Reflect 被用来执行这些操作的实际行为。

5. 提供额外的功能

Reflect 还提供了一些 Object 不具备的功能，例如：

Reflect.apply()：用于调用函数。
Reflect.construct()：用于创建新对象，类似于 new 操作符，但更灵活。
Reflect.has()：用于检查一个对象是否拥有某个属性，类似于 in 操作符。

总结

Reflect 对象为 JavaScript 提供了一种更现代、更一致的方式来操作对象和函数。它不仅替代了 Object 的某些方法，还提供了更好的错误处理、更符合函数式编程的风格，并且与 Proxy 密切配合，使得拦截和定义对象行为变得更加灵活和强大。随着 JavaScript 的发展，Reflect 的使用越来越广泛，成为了现代 JavaScript 编程的重要组成部分。

23. 什么是尾调用优化和尾递归？

尾调用优化（Tail Call Optimization，TCO）和尾递归（Tail Recursion）是编程语言和编译器优化中的一些概念，特别是在函数式编程中非常重要。它们涉及到函数调用的优化，以避免栈溢出和提高程序效率。

尾调用（Tail Call）

尾调用是指一个函数的最后一个动作是调用另一个函数，并且这个调用的结果直接返回，而不需要额外的操作。换句话说，函数的返回值是对另一个函数的调用结果。例如，以下是一个尾调用的例子：

function factorial(n, acc) {
  if (n === 0) return acc;
  return factorial(n - 1, n * acc); // 尾调用
}
console.log(factorial(5, 1)); // 120

在这个例子中，factorial 函数的最后一个动作是调用自身，并且没有在调用之后进行其他操作。

尾调用优化（TCO）

尾调用优化是一种编译器或解释器对尾调用进行的优化，目的是减少函数调用栈的大小。在没有尾调用优化的情况下，每次函数调用都会在调用栈上增加一个新的帧。如果函数调用层次很深，可能会导致栈溢出。尾调用优化允许编译器或解释器重用当前的函数调用帧而不是创建一个新的帧，从而避免了栈溢出。在上面的 factorial 函数中，如果 JavaScript 引擎支持尾调用优化，那么在递归调用 factorial 时，不会增加新的栈帧，而是重用当前的栈帧。

尾递归（Tail Recursion）

尾递归是尾调用的一种特殊形式，即函数通过尾调用自身来进行递归。尾递归函数的特点是递归调用是函数的最后一个动作，并且不需要在递归调用之后进行额外的操作。尾递归函数可以通过尾调用优化来避免栈溢出，使得递归深度不再受限于调用栈的大小。这使得尾递归在处理大量数据或深度递归时非常有用。

为什么尾调用优化很重要？

避免栈溢出：尾调用优化可以避免因深度递归导致的栈溢出错误。
提高效率：减少了函数调用的开销，因为不需要频繁地创建和销毁栈帧。
支持更复杂的递归算法：使得编写复杂的递归算法成为可能，而不必担心栈空间的限制。

尾调用优化的局限性

并非所有的编程语言和编译器都支持尾调用优化。例如，JavaScript 的 ES6 标准规定了尾调用优化的要求，但并非所有的 JavaScript 引擎都完全实现了这一特性。因此，在实际应用中，开发者需要了解所使用的语言和编译器对尾调用优化的支持情况。

总结

尾调用优化和尾递归是提高函数调用效率、避免栈溢出的重要技术。它们在函数式编程中尤为常见，但对于支持它们的命令式编程语言也同样有用。理解这些概念可以帮助开发者编写更高效、更可靠的代码。

24. 简单介绍下 ES6 中的 Iterator 迭代器

ES6中的Iterator迭代器：概念： Iterator（迭代器）是ES6中引入的一种新的遍历机制，它提供了一种统一的方式来访问各种数据结构中的元素，而不管这些数据结构内部是如何实现的。 核心特性：

迭代器对象：Iterator本身是一个对象，它定义了一个序列的访问机制，通过迭代器可以按顺序访问数据结构中的每一个元素，而不需要了解数据结构的内部实现。
next方法：迭代器对象必须实现一个名为next的方法，每次调用next方法都会返回一个包含两个属性的对象：value和done。
- value：表示当前元素的值。
- done：是一个布尔值，表示是否已经遍历完所有元素。如果已经遍历完，done为true，否则为false。 工作原理：当我们对一个数据结构调用迭代器时，它会返回一个迭代器对象。我们可以不断地调用这个迭代器对象的next方法来获取数据结构中的下一个元素，直到done属性为true为止。 使用场景：
for...of循环：ES6中的for...of循环内置了Iterator迭代器，可以用来遍历数组、字符串、Set、Map等可迭代对象。
扩展运算符：扩展运算符（...）也使用了Iterator迭代器来展开数组或类数组对象。
解构赋值：在解构赋值中，如果右侧是一个可迭代对象，也会使用Iterator迭代器来按顺序获取值。 自定义迭代器：我们还可以为自定义对象实现Iterator迭代器，使它们变得可迭代。这需要我们在对象上定义一个特殊的Symbol.iterator属性，这个属性的值是一个函数，该函数返回一个迭代器对象。示例：

const arr = [1, 2, 3];
// 获取数组arr的迭代器对象
const iterator = arr[Symbol.iterator]();
console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

在这个示例中，我们通过调用数组的Symbol.iterator方法获取了一个迭代器对象，然后通过不断地调用next方法来遍历数组中的元素。总结： ES6中的Iterator迭代器提供了一种统一、灵活的方式来遍历各种数据结构，使得代码更加简洁和易于理解。通过自定义迭代器，我们还可以使任何对象变得可迭代，从而扩展了迭代器的应用范围。

25. js对象中，可枚举性（enumerable）是什么？

在JavaScript中，对象的属性除了值（value）之外，还包含三个特性：可枚举性（enumerable）、可配置性（configurable）和可写性（writable）。这些特性被称为属性的“属性描述符”。 可枚举性（enumerable）：可枚举性是指属性是否可以通过for-in循环或Object.keys()等方法被枚举（即被遍历到）。

如果一个属性的enumerable特性为true，那么这个属性就可以被for-in循环或Object.keys()等方法枚举。
如果一个属性的enumerable特性为false，那么这个属性就不会被for-in循环或Object.keys()等方法枚举到。 默认情况：
在通过对象直接量（{}）或new Object()创建的对象中，用户定义的属性默认是可枚举的。
在通过Object.defineProperty()或Object.defineProperties()方法定义的属性中，如果不显式指定，enumerable特性默认为false。示例：

const obj = {
  a: 1,
  b: 2
};
Object.defineProperty(obj, 'c', {
  value: 3,
  enumerable: false
});
for (key in obj) {
  console.log(key); // 输出 'a', 'b'
}
console.log(Object.keys(obj)); // 输出 ['a', 'b']

在上述示例中，属性'c'是不可枚举的，因此不会出现在for-in循环或Object.keys()的结果中。注意：

在使用Object.defineProperty()或Object.defineProperties()时，可以显式设置属性的enumerable特性。
在ES6中，还可以使用Object.getOwnPropertyNames()方法获取对象的所有属性名，包括不可枚举的属性。 使用场景：
在对象属性不应该被for-in循环遍历的情况下，可以设置enumerable为false。
在需要忽略某些属性的情况下，可以使用enumerable特性来避免在遍历过程中包含这些属性。总结：可枚举性是JavaScript对象属性的一个重要特性，通过合理设置enumerable特性，可以控制对象的哪些属性应该被遍历，哪些属性不应该被遍历，从而提高代码的可读性和可维护性。

26. forEach 中能否使用 await ？

在 forEach 中使用 await 是可以的，但需要注意的是，forEach 本身不会等待 await 表达式解决。forEach 方法用于遍历数组，并对每个元素执行一个回调函数，但它不会返回一个等待所有异步操作完成的 Promise。如果你在 forEach 的回调函数中使用 await，那么每个迭代将会等待对应的异步操作完成，但 forEach 不会等待所有迭代完成才继续执行后续代码。以下是一个示例：

async function asyncOperation(item) {
  // 模拟异步操作
  return new Promise(resolve => {
    setTimeout(() => {
      console.log(item);
      resolve();
    }, 1000);
  });
}
async function run() {
  const array = [1, 2, 3];
  // 使用 forEach 和 await
  array.forEach(async (item) => {
    await asyncOperation(item);
  });
  console.log('forEach completed, but not waiting for async operations');
}
run();

输出将会是：

forEach completed, but not waiting for async operations
1
2
3

可以看到，'forEach completed, but not waiting for async operations' 这句话先于异步操作的输出，因为 forEach 不会等待 await。如果你需要等待所有异步操作完成，可以使用 for...of 循环或者 Promise.all 方法。例如：

async function runWithForOf() {
  const array = [1, 2, 3];
  for (const item of array) {
    await asyncOperation(item);
  }
  console.log('All async operations completed');
}
runWithForOf();

或者使用 Promise.all：

function runWithPromiseAll() {
  const array = [1, 2, 3];
  const promises = array.map(item => asyncOperation(item));
  Promise.all(promises).then(() => {
    console.log('All async operations completed');
  });
}
runWithPromiseAll();

在这两个例子中，'All async operations completed' 将会在所有异步操作完成后输出。

27. 如何中断Promise？

在JavaScript中，一旦一个Promise开始执行，它就不能被直接中断。这是因为Promise的设计是基于异步操作的完成或失败，而不是基于流程控制。不过，有一些方法可以间接地实现类似中断的效果：

拒绝（Reject）Promise：你可以在Promise的执行过程中，如果满足某些条件，直接调用reject函数来拒绝Promise。

function createPromise() {
  return new Promise((resolve, reject) => {
    // 假设这是一个可能需要中断的异步操作
    someAsyncOperation((err, result) => {
      if (shouldInterrupt) {
        reject(new Error('Interrupted'));
      } else if (err) {
        reject(err);
      } else {
        resolve(result);
      }
    });
  });
}

使用AbortController：对于一些支持中断的API（如fetch），你可以使用AbortController来发送一个中断信号。

const controller = new AbortController();
const signal = controller.signal;
fetch(url, { signal })
  .then(response => ...)
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('Fetch aborted');
    }
  });
// 当需要中断时
controller.abort();

返回一个新的Promise：你可以返回一个新的Promise来覆盖原有的Promise，从而实现中断。

let isInterrupted = false;
function createPromise() {
  return new Promise((resolve, reject) => {
    // 模拟异步操作
    setTimeout(() => {
      if (isInterrupted) {
        reject(new Error('Interrupted'));
      } else {
        resolve('Result');
      }
    }, 1000);
  });
}
const promise = createPromise();
// 在某个时刻设置中断标志
isInterrupted = true;
promise.catch(err => {
  if (err.message === 'Interrupted') {
    console.log('Promise was interrupted');
  }
});

使用外部变量控制：你可以使用一个外部变量来控制是否继续执行Promise中的逻辑。

let shouldContinue = true;
function createPromise() {
  return new Promise(resolve => {
    // 模拟异步操作
    setTimeout(() => {
      if (shouldContinue) {
        resolve('Result');
      }
    }, 1000);
  });
}
// 在需要中断时
shouldContinue = false;

使用Promise.race：你可以使用Promise.race来设置一个超时，从而在超时后中断Promise。

const timeoutPromise = new Promise((_, reject) =>
  setTimeout(() => reject(new Error('Timeout')), 5000)
);
Promise.race([createPromise(), timeoutPromise])
  .then(result => ...)
  .catch(err => {
    if (err.message === 'Timeout') {
      console.log('Promise was interrupted by timeout');
    }
  });

需要注意的是，这些方法并不是真正地“中断”了Promise的执行，而是通过不同的方式来阻止Promise的进一步处理或触发错误处理。在实际情况中，应根据具体的异步操作和API选择合适的方法。

28. Object.create 和 new 有什么区别？

Object.create 和 new 都是用来创建对象的方法，但它们在实现机制和用途上有所不同：

`new` 操作符

构造函数：
- new 用于调用构造函数创建对象。
- 构造函数内部会创建一个新对象，并将这个新对象的原型（__proto__）指向构造函数的prototype属性。
执行过程：
- 创建一个新对象。
- 将新对象的原型指向构造函数的prototype。
- 执行构造函数，将this绑定到新对象上。
- 如果构造函数返回一个对象，那么这个对象会作为new表达式的结果；否则，返回新创建的对象。

示例：

function Person(name) {
  this.name = name;
}
Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name}`);
};
const person1 = new Person('Alice');
person1.sayHello(); // Hello, my name is Alice

`Object.create`

原型继承：
- Object.create 用于创建一个新对象，并直接指定这个新对象的原型。
- 它不需要构造函数，而是直接以一个现有的对象作为新对象的原型。
执行过程：
- 创建一个新对象。
- 将新对象的原型指向传入的参数对象。
- 返回新创建的对象。

示例：

const personPrototype = {
  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }
};
const person2 = Object.create(personPrototype);
person2.name = 'Bob';
person2.sayHello(); // Hello, my name is Bob

区别

原型链设置：
- new 通过构造函数的prototype属性来设置新对象的原型。
- Object.create 直接通过参数来设置新对象的原型。
构造函数调用：
- new 会调用构造函数，可以初始化对象。
- Object.create 不会调用构造函数，它只是创建一个以给定对象为原型的空对象。
灵活性：
- new 需要一个构造函数，通常用于创建特定类型的实例。
- Object.create 更灵活，可以创建一个与任何现有对象有直接原型关系的对象，常用于原型继承或创建纯净的对象。
性能：
- new 可能会稍微快一些，因为它不涉及额外的属性复制（除非构造函数内部有）。
- Object.create 在某些浏览器中可能比new慢，因为它需要处理更多的内部属性。选择使用new还是Object.create取决于具体的需求和场景。如果需要通过构造函数初始化对象，通常使用new；如果需要更灵活的原型继承或创建纯净对象，Object.create可能是更好的选择。

29. 堆与栈有什么区别？

在JavaScript中，堆和栈的概念与底层语言如C或C++中的概念相似，但JavaScript作为高级语言，对内存管理的抽象程度更高。以下是用JavaScript描述的堆和栈的区别：

栈（Stack）

在JavaScript中，栈主要用于存储执行上下文（execution context），包括：

函数的局部变量
函数的参数
函数的返回地址
函数的调用栈信息栈操作是自动的，由JavaScript引擎管理。例如：

function func() {
  let a = 10; // 'a'存储在栈上
  let b = 20; // 'b'存储在栈上
}
func(); // 函数调用，创建新的执行上下文，存储在栈上

当函数调用结束时，其执行上下文会被弹出栈，局部变量随之被销毁。

堆（Heap）

堆用于存储动态分配的数据，如对象和数组。这些数据通过引用（reference）来访问。例如：

let obj = { name: 'Alice' }; // 'obj'存储在栈上，但对象'{ name: 'Alice' }'存储在堆上
let arr = [1, 2, 3];         // 'arr'存储在栈上，但数组'[1, 2, 3]'存储在堆上

在上述例子中，obj和arr是存储在栈上的引用，它们指向堆上的实际对象和数组。

示例

function func() {
  let a = 10; // 'a'存储在栈上
  let b = { x: 20 }; // 'b'存储在栈上，但对象'{ x: 20 }'存储在堆上
}
let obj = { name: 'Alice' }; // 'obj'存储在栈上，对象'{ name: 'Alice' }'存储在堆上
func(); // 函数调用，创建新的执行上下文，存储在栈上

性能考虑

栈：访问速度快，因为变量直接存储在栈上，且内存分配和释放由JavaScript引擎自动管理。
堆：访问速度相对较慢，因为需要通过引用间接访问。内存分配和释放可能涉及垃圾回收，有一定的性能开销。

内存管理

栈：自动管理，函数调用结束时，局部变量自动被销毁。
堆：由垃圾回收器管理，当没有引用指向某个对象时，垃圾回收器可能会回收其内存。

总结

在JavaScript中，栈用于存储执行上下文和基本类型值，而堆用于存储复杂类型的数据（对象和数组）。JavaScript引擎负责栈的自动管理，而堆的管理则依赖于垃圾回收机制。理解这些概念有助于编写更高效的JavaScript代码。

30. “严格模式”是什么？

"严格模式"（Strict mode）是ECMAScript 5（ES5）引入的一种新的JavaScript执行模式，旨在提高代码的健壮性和可读性，减少因语言的一些怪异行为而可能导致的错误。通过在脚本或函数的开头添加一个特殊的指令"use strict";，可以启用严格模式。

启用严格模式

全局严格模式：在脚本文件的第一行添加"use strict";，则整个脚本文件都将在严格模式下运行。
```
"use strict";
// 整个脚本都在严格模式下运行
```

函数级严格模式：只在特定函数内部启用严格模式。

function strictFunc() {
  "use strict";
  // 这个函数在严格模式下运行
}

严格模式的主要变化

禁止使用未声明的变量：
- 在非严格模式下，引用未声明的变量会创建一个全局变量。
- 在严格模式下，会抛出ReferenceError。
```
"use strict";
x = 10; // ReferenceError: x is not defined
```
禁止删除不可删除的属性：
- 在非严格模式下，尝试删除不可删除的属性（如Object.prototype的属性）会被忽略。
- 在严格模式下，会抛出TypeError。
```
"use strict";
delete Object.prototype; // TypeError: Cannot delete property 'prototype' of function Object()
```

函数参数的限制：

禁止使用相同的参数名。
禁止修改arguments对象。

"use strict";
function func(a, a) { } // SyntaxError: Duplicate parameter name not allowed in this context
function func(a) {
  arguments[0] = 10; // 不会影响a的值
  console.log(a); // 输出原始值
}

禁止使用with语句：
- with语句在严格模式下会被禁用，因为它可能导致代码混淆和性能问题。
```
"use strict";
with (obj) { } // SyntaxError: Strict mode code may not include a with statement
```
this的值：
- 在非严格模式下，函数调用时this可能为null或undefined，并自动转换为全局对象。
- 在严格模式下，this的值为null或undefined时不会自动转换。
```
"use strict";
function func() {
  console.log(this); // 输出null或undefined，不会转换为全局对象
}
func.call(null);
```
禁止使用八进制字面量：
- 在非严格模式下，以0开头的数字被视为八进制字面量。
- 在严格模式下，会抛出SyntaxError。
```
"use strict";
var octal = 0123; // SyntaxError: Octal literals are not allowed in strict mode.
```
eval和arguments的限制：
- eval和arguments不能作为变量名、函数名或参数名。
- eval不会创建新的变量作用域。
```
"use strict";
var eval = 10; // SyntaxError: Unexpected eval or arguments in strict mode
```

总结

严格模式通过引入一系列限制和变化，帮助开发者编写更清晰、更健壮的JavaScript代码。它有助于捕获常见的错误和不好的编程实践，从而提高代码质量和可维护性。在现代JavaScript开发中，推荐使用严格模式。

2025面试大全（29）

1. Promise中的值穿透是什么？

2. 如何使用js计算一个html页面有多少种标签？

3. 协商缓存中，有了 Last-Modified，为什么还会出现 ETag？

Last-Modified

ETag

为什么同时需要 Last-Modified 和 ETag？

4. React有哪些性能优化的方法？

1. 使用生产版本

2. 避免不必要的重新渲染

3. 使用懒加载

4. 优化状态管理

5. 使用虚拟化长列表

6. 优化事件处理

7. 优化组件结构

8. 使用错误边界

9. 优化Context使用

10. 使用代码分割

11. 优化自定义Hook

12. 使用性能分析工具

13. 避免使用内联函数

14. 使用key属性

15. 优化动画和过渡

5. bind() 连续调用多次，this的绑定值是什么呢？

6. 浏览器和 Node 中的事件循环有什么区别？

浏览器中的事件循环：

Node.js中的事件循环：

主要区别：

7. 谈谈对 window.requestAnimationFrame 的理解

8. React Fiber 是如何实现更新过程可控？

9. Fiber 为什么是 React 性能的一个飞跃？

10. 浏览器一帧都会干些什么？

11. 不同版本的 React 都做过哪些优化？

React 16

React 17

React 18

12. 谈谈 Object.defineProperty 与 Proxy 的区别

Object.defineProperty

Proxy

区别总结

13. base64编码图片，为什么会让数据量变大？

14. html和css中的图片加载与渲染规则是什么样的？

HTML中的图片加载与渲染

CSS中的图片加载与渲染

共同规则和注意事项

渲染性能优化

15. 虚拟DOM一定更快吗？

虚拟DOM的优势：

虚拟DOM的潜在性能问题：

实际DOM的优势：

性能比较：

结论：

16. mete标签中的viewport 有什么用？

viewport meta标签的主要作用：

viewport meta标签的常见属性：

示例：

为什么使用 viewport meta标签？

注意事项：

17. CSS中的 “flex:1;” 是什么意思？

flex: 1; 的具体含义：

示例：

解释：

应用场景：

注意事项：

18. html文档渲染过程，css文件和js文件的下载，是否会阻塞渲染？

CSS文件下载对渲染的影响：

JS文件下载对渲染的影响：

总结：

优化建议：

19. 谈谈你对浏览器中进程和线程的理解

进程（Process）

线程（Thread）

进程与线程的关系

浏览器中的进程和线程

优化与安全

总结

注意事项

20. 为什么JavaScript是单线程？

21. 说说你对 Object.defineProperty 的理解

基本语法

`viewport` meta标签的主要作用：

`viewport` meta标签的常见属性：

为什么使用 `viewport` meta标签？

`flex: 1;` 的具体含义：

1. 替代 `Object` 的某些方法

4. 配合 `Proxy` 使用

`new` 操作符

`Object.create`