前端常见面试题

1前端的事件循环是什么

在前端开发中，事件循环（Event Loop）是指浏览器对 JavaScript 代码中的任务进行调度和执行的机制。由于 JavaScript 是单线程的，即一次只能执行一个任务，为了处理异步任务和用户交互事件，浏览器采用了事件循环机制。

事件循环的基本原理是将任务分为不同的队列，其中包括宏任务队列（macrotask queue）和微任务队列（microtask queue）。当执行 JavaScript 代码时，同步任务会被立即执行，而异步任务会被放入相应的队列中等待执行。

事件循环的执行过程如下：

1. 执行当前宏任务（例如执行完一段代码、定时器到期等）。
2. 检查微任务队列，依次执行所有微任务。
3. 更新渲染，更新页面的视图。
4. 执行下一个宏任务。

在每个宏任务执行完毕后，会依次执行微任务队列中的任务。微任务通常包括 Promise 的回调函数、MutationObserver 的回调函数等。微任务的执行优先级高于宏任务，即微任务会在下一个宏任务执行前完成。

通过事件循环机制，浏览器能够合理地处理异步任务和用户交互事件，保证 JavaScript 代码的执行顺序和页面的响应性。

2vue的双向绑定原理

Vue 的双向绑定是通过数据劫持和观察者模式实现的。

1. 数据劫持：Vue 在创建实例时会对数据对象进行遍历，利用 Object.defineProperty 方法将每个属性转换为 getter 和 setter。这样在访问和修改数据时，Vue 就能够监听到数据的变化。

2. 观察者模式：Vue 使用观察者模式实现了一个订阅-发布机制。在数据劫持时，每个属性会对应一个依赖收集器（Dep），用于存储所有订阅该属性变化的订阅者（Watcher）。当数据发生变化时，会通知对应属性的依赖收集器，然后依次通知所有订阅者更新视图。

具体流程如下：

1. 在 Vue 的实例化过程中，将 data 对象中的每个属性转换为 getter 和 setter。

2. 当访问数据属性时，会触发 getter 方法，在 getter 方法中将订阅者（Watcher）添加到当前属性的依赖收集器（Dep）中。

3. 当修改数据属性时，会触发 setter 方法，在 setter 方法中通知依赖收集器（Dep）的所有订阅者（Watcher）执行更新操作，从而更新对应的视图。

4. 在模板中使用指令（例如 v-model）时，会创建一个指令对应的 Watcher，用于监听模板中对应的数据变化。当模板中的数据发生改变时，会通过双向绑定的机制更新数据对象中的值。

通过数据劫持和观察者模式的结合，Vue 实现了数据的双向绑定，使得数据的变化能够实时反映到视图中，同时也使得视图中的修改能够自动更新到数据对象中。这为开发者提供了一种方便、高效的方式来处理数据和视图之间的交互。

3keepAlive 为什么不能缓存 Iframe 中的 dom 结构

<keep-alive> 是 Vue 提供的一个抽象组件，用于缓存组件的实例，以避免多次创建和销毁组件的开销。它通过在组件的生命周期中调用相应的钩子函数来实现缓存和恢复组件的状态。

然而，<keep-alive> 组件对于缓存 <iframe> 中的 DOM 结构是无效的。这是因为 <iframe> 是一个独立的浏览上下文，它具有自己的 DOM 树和渲染过程。即使将 <iframe> 内的内容包裹在 <keep-alive> 中，<keep-alive> 也无法缓存 <iframe> 中的 DOM 结构，因为 <iframe> 的内容是由浏览器渲染的，而不是由 Vue 管理的。

如果需要缓存 <iframe> 中的 DOM 结构，可以考虑其他方法，如手动保存和恢复 <iframe> 的状态，或使用其他技术如浏览器本地存储来缓存和管理 <iframe> 的内容。需要根据具体的需求和场景来选择合适的方案。

4性能优化有哪些做法

性能优化是提升应用程序或网站的性能和响应速度的过程。以下是一些常见的性能优化做法：

1. 减少 HTTP 请求：合并和压缩文件、使用雪碧图或图标字体减少图像请求、使用 CSS 和 JavaScript 的内联和内部化等方法来减少网页的 HTTP 请求次数。

2. 使用缓存：利用浏览器缓存、CDN 缓存、服务端缓存等机制，减少重复的数据传输和资源加载。

3. 压缩和优化资源：压缩 HTML、CSS、JavaScript 和图像等资源，减小文件大小，提升加载速度。

4. 使用延迟加载和按需加载：对于大型或复杂的网页，可以使用延迟加载和按需加载的方式，仅在需要时加载资源，减少初始加载的负担。

5. 优化图像：使用适当的图像格式、压缩图像、设置图像尺寸和响应式图像，以减小图像的文件大小。

6. 优化 JavaScript：减少 JavaScript 的执行时间，避免耗时的操作和循环，合理使用异步操作和懒加载。

7. 使用 Web Workers：将一些耗时的任务放在 Web Workers 中执行，避免阻塞主线程，提升页面的响应速度。

8. 优化 CSS：避免使用过多的样式规则和选择器，减少重绘和重排的次数。

9. 使用资源预加载和预渲染：通过预加载关键资源或预渲染页面，提前获取和渲染页面所需的资源，加快页面的加载和渲染速度。

10. 去除不必要的插件和脚本：定期审查并删除不再使用的插件、库和脚本，减少不必要的资源加载和执行。

11. 前端代码优化：优化 HTML 结构、减少 DOM 操作和重绘、使用事件委托、避免强制同步布局和重排等优化措施。

12. 使用性能分析工具：利用性能分析工具，如 Chrome 开发者工具的 Performance 面板、Lighthouse、WebPageTest 等，识别性能瓶颈并进行优化。

以上只是一些常见的性能优化做法，具体的优化策略和方法还需要根据具体的应用场景和需求进行调整和优化。

5JS的数据类型有那些？typeof NaN；typeof function输出

JavaScript 中的数据类型包括以下几种：

1. 基本数据类型（原始类型）：

   • 字符串（String）
   • 数字（Number）
   • 布尔值（Boolean）
   • 空值（Null）
   • 未定义（Undefined）
   • 符号（Symbol）（ES6 新增）

2. 引用数据类型（复合类型）：

   • 对象（Object）
   • 数组（Array）
   • 函数（Function）
   • 正则表达式（RegExp）
   • 日期（Date）
   • 等等

对于 typeof NaN 的输出结果是 "number"，因为 NaN 是 JavaScript 中的特殊值，代表非数值（Not a Number）。

对于 typeof function 的输出结果是 "function"，因为函数也是 JavaScript 中的一种对象类型，typeof 运算符会将其归类为 "function" 类型。

请注意，typeof 运算符的结果是一个字符串，表示被检查值的类型。