说说async、await的设计和实现

async 和 await 是 ES2017 引入的，旨在简化基于 Promise 的异步操作。
async 关键字用于声明一个函数是异步的，而 await 关键字用于等待一个 Promise 解析完成。
设计思想：使异步代码看起来和编写同步代码一样直观。
实现方式：async 函数自动将其返回值封装成 Promise。await 只能在 async 函数内部使用，它暂停代码的执行，直到 Promise 解决，然后继续执行 async 函数并返回解析值。

深拷贝需要注意哪些问题?

循环引用：使用递归实现深拷贝时，需要处理对象的循环引用问题，否则会导致无限递归。
特殊对象：Function、RegExp、Date 等特殊对象需要特别处理，以保留其特性。
Symbol 作为键：确保 Symbol 类型的键也被复制。
性能问题：深拷贝大型对象时可能会有性能问题。

判断数组的方法有哪些?手写一个instanceof方法

判断数组的方法包括：Array.isArray()
instanceof Array
Object.prototype.toString.call() 方法
实现 instanceof：

function myInstanceOf(left, right) {
  let proto = Object.getPrototypeOf(left);
  while (proto) {
  	if (proto === right.prototype) return true;
  	proto = Object.getPrototypeOf(proto);
  }
  return false;
}

如何借鉴React diff算法的思想，实现各种情况树节点的更新

React diff 算法的核心思想是通过比较新旧 VDOM 树，找出最小的变更，然后应用这些变更到真实 DOM 上。实现时可以借鉴以下几点：
节点类型不同：直接替换旧节点。
节点类型相同：比较属性和子节点。
列表对比：使用“key”帮助识别哪些子元素在不同的渲染中保持不变。

怎么让中间页携带 上cookie?

确保 cookie 的 SameSite 属性设置为 None 并设置 Secure 属性，使其在跨站请求时被发送，前提是页面通过 HTTPS 加载。

说说跨域问题

跨域问题是由浏览器的同源策略引起的，防止不同源的网页读取当前页面的数据。解决方法包括：JSONPCORS使用代理（如 Nginx）WebSockets

讲讲webpack的整个工作流程

Webpack 的工作流程包括：
初始化配置：合并用户自定义配置和默认配置。
开始编译：从 Entry 开始，针对每个模块串行调用对应的 Loader 处理，然后找到模块依赖的模块，递归本步骤。
输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk，再将每个 Chunk 转换成一个单独的文件加入到输出列表。
完成编译并输出：确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统。

有没有用过webpack的loader解决过一些具体的场景问题?

是的，如使用 babel-loader 来转换 ES6+ 代码，css-loader 和 style-loader 来处理 CSS 文件，或 file-loader 和 url-loader 来管理静态资源文件等。

ES5怎么实现继承?讲讲对原型链的理解

在 ES5 中，继承通常通过原型链来实现，具体方法是将子类的原型设置为父类的实例。原型链是 JavaScript 实现继承的主要方法，每个对象都有一个原型对象，对象以其原型为模板、从原型继承方法和属性。

function Parent() {}
function Child() {}
Child.prototype = new Parent();

require和import的区别?

require 是 CommonJS 模块化规范的导入语法，支持动态导入，运行时加载。
import 是 ES6 模块化规范的导入语法，支持静态导入，编译时加载，更加高效。

前端项目中遇到的难点

性能优化：如减少页面加载时间、提高页面渲染效率。
跨浏览器兼容性：不同浏览器对 CSS 和 JavaScript 的支持差异可能导致页面显示不一致。
安全问题：如跨站脚本攻击（XSS）、跨站请求伪造（CSRF）等。
状态管理：在复杂应用中管理状态变得困难，尤其是跨组件或全局状态。

你是如何优化你的项目的

代码分割和懒加载：仅加载用户需要的资源。
图片优化：使用适当格式，如 WebP，实现图片懒加载。
利用浏览器缓存：通过配置 HTTP 缓存策略减少资源的重复加载。
减少重绘和回流：通过优化 CSS 和动画实现。
使用 CDN：减少资源加载时间。
压缩资源：如压缩 JavaScript、CSS 和图片资源。

从输入url到页面加载的全过程

DNS 解析：将域名解析为 IP 地址。
TCP 连接：建立 TCP 连接（三次握手）。
发送 HTTP 请求：浏览器向服务器发送请求。
服务器处理请求并响应：服务器处理请求并返回响应数据。
浏览器渲染页面：浏览器解析 HTML、CSS，执行 JavaScript 代码，渲染页面。
断开连接：TCP 连接释放（四次挥手）。

Vue 响应式原理，双向绑定原理

Vue2 响应式原理：通过 Object.defineProperty 为数据对象的每个属性创建 getter 和 setter，以便在属性访问和修改时进行拦截。
Vue3 响应式原理：使用 Proxy 替代 Object.defineProperty，可以直接监听对象而非属性，解决了 Vue2 中数组变化侦测等限制。
双向绑定：通过 v-model 指令，结合响应式系统和事件监听实现数据和视图的双向绑定。

Vue2 和 Vue3 的区别

响应式系统：Vue3 使用 Proxy 实现响应式，替代了 Vue2 的 Object.defineProperty。
组合式 API：Vue3 引入了 Composition API，提供了更灵活的逻辑复用和组织方式。
性能提升：Vue3 在性能上有显著提升，包括更小的体积、更快的虚拟DOM 算法等。
更好的 TypeScript 支持：Vue3 从一开始就考虑了 TypeScript 的支持。

HTTP 缓存：强制缓存和协商缓存

强制缓存：通过设置 Expires 和 Cache-Control 响应头实现。浏览器根据这些头信息决定是否从缓存中加载资源，而不向服务器发送请求。
协商缓存：通过 Last-Modified/If-Modified-Since 和 ETag/If-None-Match 实现。当强制缓存失效时，浏览器会向服务器发送请求，由服务器决定资源是否被修改。

怎么实现图片懒加载

监听滚动事件：当图片进入可视区域时，将图片的 src 属性从占位图切换到真实图片。
Intersection Observer API：这是一种更现代的方法，允许你配置一个观察者来监听元素是否进入了可视区域，从而触发加载。

事件循环

JavaScript 的事件循环是其异步编程模型的核心。代码执行分为同步任务和异步任务。同步任务在主线程上执行，形成一个执行栈。异步任务完成后，会在任务队列中等待。主线程内的任务执行完毕空闲时，会去任务队列中查看是否有任务，有则加入执行栈中执行，形成一个循环。

ES6 的新特性

let 和 const：引入块级作用域变量声明。
箭头函数：简化了函数定义的写法。
模板字符串：增强了字符串的功能。
解构赋值：一种更方便的数据访问方式。
默认参数、扩展运算符。
Promise：一种更好的异步编程解决方案。
模块化：import 和 export 语句用于模块的导入和导出。
类（Class）：引入了类的概念，使得 JavaScript 更接近面向对象编程。

如果对你有帮助并且也喜欢，可以点赞收藏留言，关注哟~