前端面试题目系列三

1. 事件循环（Event Loop）

浏览器的事件循环（Event Loop）是处理异步任务和执行 JavaScript 代码的核心机制。JS任务分为同步任务和异步任务，同步任务都在主线程上执行，形成一个执行栈；异步任务（用户交互、网络请求、定时器）是通过回调函数实现的，相关任务都放在任务队列中（消息队列）。

事件循环的工作流程：

1. 先执行执行栈中的同步任务

2. 异步任务放入任务队列中

3. 一旦执行栈中的所有同步任务执行完毕，系统就会依次读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行
   

2. 事件流和事件委托

​ 事件流是指事件在DOM元素上触发的顺序。主要包括三个阶段，捕获阶段（事件从根元素传递到目标元素）、目标阶段（事件到达目标元素）、冒泡阶段（事件从目标元素冒泡回根元素）

​ 事件委托是将事件处理程序添加到父元素而不是每个子元素的技术。这样的话，子元素上触发的事件可以在父元素上被捕获和处理，从而减少内存的使用和性能。

3. 深拷贝和浅拷贝？

深拷贝和浅拷贝是处理对象复制的两种常见方法，主要应用于处理复杂数据结构如对象或者数组等。

浅拷贝：

• 浅拷贝只复制对象的第一层属性，对象内部的嵌套对象（即引用类型的数据）任然引用原始对象中的同一实例；
• 对于基本类型的值（string、number、boolean），会直接复制其值。
• 对于引用类型的值（如数组、对象等），指挥复制其内存地址，也就是说新旧对象共享同一块内存区域。
• 但会造成一个问题是，当修改了新对象中的引用类型属性时，原始对象也会收到影响
• 常用方法有Object.assign（target，source）、展开运算符...

深拷贝：

• 深拷贝会递归的复制对象的所有层级，创建一个与原始对象完全独立的新对象。
• 对于引用类型的值，会递归复制每个层级的对象，确保新对象与原对象之间没有共享任何引用。
• 修改新对象中的数据不会影响到原始对象。
• 常用的方法可以使用 JSON.parse 和 JSON.stringify 或其他库如 Lodash 的 _.cloneDeep

4. 浏览器的同源策略？

​ 浏览器的同源策略（Same-origin policy）是一种重要的安全机制，用于限制一个网页文档或脚本如何与来自不同源的资源进行交互。同源策略的基本原则是：如果两个 URL 的协议、主机名和端口号都相同，则认为它们是同源的。同源策略的主要用来保护用户的隐私和数据安全以及防止恶意脚本从一个站点窃取另一个站点的数据

同源策略的规则包括：

• 允许跨域写操作，例如链接、重定向和表单提交。
• 允许跨域资源嵌入，例如脚本、CSS 和图片等。
• 不允许跨域读操作，例如通过 AJAX 请求获取数据。

5. 跨域解决方案

跨域问题（CORS, Cross-Origin Resource Sharing）是指在不同源之间（即协议、域名或端口不同的情况）进行请求时，浏览器的安全策略阻止这些请求。由于跨域问题，有如下的解决方案：

1. 使用CORS头

   服务器需要在响应中添加 CORS 相关的 HTTP 头，以允许跨域请求

   • Access-Control-Allow-Origin：指定允许访问资源的域名，可以是具体的域名或者 *（表示所有域名都允许访问）。
   • Access-Control-Allow-Methods：指定允许的 HTTP 方法。
   • Access-Control-Allow-Headers：指定允许的请求头字段。

2. JSONP（ JSON with Padding）

   服务器端将返回的JSON数据包裹在一个函数调用中,只支持GET请求

   callbackFunction({"key": "value"})
   

3. 使用代理服务器（将请求转发到目标服务器，从而绕过浏览器的同源策略）

4. 使用CORS代理服务

5. 使用websocket（WebSocket 协议不同于传统的 HTTP 请求，它不受同源策略的限制）