美团一面-3&宁德时代一面

美团：

1. 请尽可能详细地说明，小程序相对于H5的优势，可以结合开发人员的开发过程感受和用户体验等方面详细展开叙述。你的回答中不要写出示例代码。

小程序相对于H5的优势可以从多个角度进行详细分析，包括开发人员的开发过程感受和用户体验等方面。

开发人员的开发过程感受

1. 开发效率

   • 组件化开发：小程序提供了丰富的组件库，开发者可以直接使用这些组件，减少了重复造轮子的工作量，提高了开发效率。
   • API丰富：小程序提供了大量的API，涵盖了从网络请求到数据存储、从地理位置到设备信息等多个方面，使得开发者能够更便捷地实现各种功能。
   • 开发工具：微信开发者工具提供了实时预览、代码编辑、调试等功能，极大地提升了开发体验和效率。

2. 性能优化

   • 原生渲染：小程序采用原生渲染机制，相比H5的DOM渲染，性能更高，页面加载速度更快。
   • 分包加载：小程序支持分包加载，可以将不常用的功能模块放在分包中，按需加载，减少了首屏加载时间。

3. 开发和维护成本

   • 统一的环境：小程序运行在微信提供的沙箱环境中，避免了不同浏览器之间的兼容性问题，降低了开发和维护的复杂度。
   • 规范化的开发流程：小程序有明确的开发规范和审核流程，有助于团队协作和代码管理。

用户体验

1. 启动速度

   • 快速启动：小程序的启动速度通常比H5页面快得多，因为小程序的代码是预编译的，不需要像H5那样进行解释执行。

2. 流畅度

   • 流畅的用户体验：由于小程序采用原生渲染，页面切换和动画效果更加流畅，用户体验更接近原生应用。

3. 功能丰富

   • 丰富的API支持：小程序提供了丰富的API，可以实现诸如支付、分享、登录等复杂功能，而H5在这些方面通常需要借助第三方服务或插件。
   • 系统级权限：小程序可以更容易地获取系统级权限，如地理位置、摄像头等，为用户提供更加个性化和便捷的服务。

4. 离线访问

   • 离线缓存：小程序支持离线缓存，用户在无网络的情况下也能访问已经加载过的小程序页面，提升了用户体验。

5. 安全性

   • 沙箱环境：小程序运行在微信提供的沙箱环境中，有效隔离了网页代码和系统资源，降低了安全风险。
   • 审核机制：小程序的发布需要经过微信的审核，这在一定程度上保证了小程序的内容质量和安全性。

总结

小程序在开发效率、性能优化、开发和维护成本、用户体验等方面相对于H5都有显著的优势。对于开发人员来说，小程序提供了更高效的开发工具和更丰富的API，降低了开发和维护的难度；对于用户来说，小程序提供了更快的启动速度、更流畅的用户体验和更丰富的功能，提升了整体的使用满意度。

2. 请尽可能详细地说明，Vite的HMR的原理？相比Webpack，Vite快在哪里，为什么快？你的回答中不要写出示例代码。

Vite 的 HMR 原理

HMR（Hot Module Replacement，热模块替换）是一种提高开发效率的技术，它允许在应用运行时动态替换、添加或删除模块，而无需刷新整个页面。Vite 的 HMR 实现原理如下：

1. 依赖预构建

• Vite 在开发服务器启动时，会使用 ESBuild 快速预构建项目的依赖模块，生成高效的 JavaScript 模块代码。
• 这些预构建的模块会被缓存，后续请求可以直接从缓存中读取，极大地提高了模块加载速度。

2. 模块热更新

• 当文件发生变化时，Vite 会检测到变化并确定受影响的模块。
• Vite 使用 ESBuild 快速重新编译变化的模块，并生成新的模块代码。
• 新的模块代码通过 WebSocket 连接发送到浏览器端。

3. 模块替换

• 浏览器端的 HMR 运行时会接收新的模块代码，并根据模块的变化情况进行相应的处理：
  • 如果是样式文件变化，直接应用新的样式。
  • 如果是 JavaScript 模块变化，使用新的模块代码替换旧的模块代码，保持应用状态不变。

4. 状态保持

• Vite 的 HMR 设计注重状态的保持，尽量减少不必要的重渲染和重初始化。
• 对于组件级别的变化，Vite 只会重新渲染变化的组件，而不是整个页面。
• 对于全局状态（如 Vuex 或 Redux），Vite 会尽量保持状态的连续性，减少开发过程中的重复操作。

Vite 相比 Webpack 快的原因

1. 依赖预构建

• Webpack 在开发模式下也会进行依赖预构建，但使用的是 JavaScript 解析器（如 Acorn），速度相对较慢。
• Vite 使用 ESBuild 进行依赖预构建，ESBuild 是一个用 Go 编写的编译器，速度非常快，可以显著缩短预构建时间。

2. 模块解析

• Webpack 在模块解析时需要进行大量的 JavaScript 解析和处理，速度较慢。
• Vite 使用 ESBuild 进行模块解析，ESBuild 的解析速度非常快，可以显著缩短模块解析时间。

3. 编译速度

• Webpack 使用 JavaScript 编译器（如 Terser）进行代码压缩和优化，速度相对较慢。
• Vite 使用 ESBuild 进行代码压缩和优化，ESBuild 的编译速度非常快，可以显著缩短编译时间。

4. HMR 实现

• Webpack 的 HMR 实现较为复杂，需要进行大量的模块依赖分析和状态管理，速度较慢。
• Vite 的 HMR 实现相对简单，利用 ESBuild 快速重新编译变化的模块，并通过 WebSocket 连接快速传输新的模块代码，速度非常快。

总结

Vite 相比 Webpack 更快的原因主要在于其使用了 ESBuild 进行依赖预构建、模块解析和代码编译，ESBuild 的速度非常快，可以显著缩短开发和构建时间。此外，Vite 的 HMR 实现相对简单，利用 WebSocket 连接快速传输新的模块代码，进一步提高了开发效率。理解 Vite 的 HMR 原理和其相比 Webpack 更快的原因，有助于更好地利用 Vite 提高前端开发的效率。

3. 算法：模板字符串。

//@ts-check
const str = "{{ name }}--{{age}}!!{{abc}}";
const obj = {
    name: "abc",
    age: 23,
    abc: "qwe",
};

function renderTpl(str: string, obj: Record<string, string | number>) {
    const myReg = /\{\{ *\w+ *\}\}/;
    let ans = str;
    while (myReg.test(ans)) {
        const reg = ans.match(myReg)[0];
        const key=reg.match(/\w+/)[0];
        ans=ans.replace(reg,(obj[key]).toString());
    }
    return ans;
}

console.log(renderTpl(str, obj));

// abc--23!!qwe

4. 算法：数组转树。

const list = [
  {
    id: 1,
    parentId: null,
    value: "1"
  },
  {
    id: 2,
    parentId: null,
    value: "2"
  },
  {
    id: 11,
    parentId: 1,
    value: "11"
  },
  {
    id: 111,
    parentId: 11,
    value: "111"
  },
  {
    id: 22,
    parentId: 2,
    value: "22"
  },
  {
    id: 3,
    parentId: null,
    value: "3"
  },
];
interface N {
  readonly id: number;
  readonly parentId: number | null;
  readonly value: string;
  children?: Array<N>;
};
type Tree = Array<N>;
const dgAddChild = (ans: Tree, l: N) => {
  const parentId = l.parentId;
  for (const cur of ans) {
    if (cur.id === parentId) {
      if (!cur.children) {
        cur.children = [l];
      } else {
        cur.children.push(l);
      }
      return true;
    } else if (cur.children) {
      if (dgAddChild(cur.children, l)) {
        return true;
      }
    }
  }
  return false;
};

function list2tree (list: Tree) {
  const ans: Tree = [];
  let lastList = list;
  while (lastList.length) {
    const spliceArr: Tree = [];
    for (const l of list) {
      if (l.parentId === null) {
        ans.push(l);
      } else if (dgAddChild(ans, l)) {
      } else {
        spliceArr.push(l);
      }
    }
    lastList = spliceArr;
  }
  return ans;
}

console.log(JSON.stringify(list2tree(list)));

宁德时代：

1. 请尽可能详细地说明，前端双tokens机制的验证流程是怎样的？你的回答中不要写出示例代码。

前端双tokens机制通常涉及到两种类型的tokens：访问令牌（Access Token）和刷新令牌（Refresh Token）。这种机制主要用于在用户认证后，保持用户的登录状态并确保安全性。以下是详细的验证流程：

1. 用户登录

• 用户提交凭证：用户在登录表单中输入用户名和密码，并提交这些凭证到后端服务器。
• 服务器验证凭证：后端服务器验证用户提交的凭证是否正确。
• 生成tokens ：
  • 访问令牌（Access Token）：一个短期有效的token，通常包含用户的身份信息和权限，用于访问受保护的资源。
  • 刷新令牌（Refresh Token）：一个长期有效的token，用于在访问令牌过期后获取新的访问令牌。

2. 返回tokens给前端

• 服务器返回tokens：服务器将生成的访问令牌和刷新令牌返回给前端。
• 前端存储tokens：前端通常会将访问令牌存储在内存中（如JavaScript变量），而将刷新令牌存储在更安全的地方，如HTTP-only cookie。

3. 访问受保护资源

• 前端发送请求 ：前端在每次请求受保护资源时，将访问令牌放在请求头中（如Authorization: Bearer <access_token>）。
• 服务器验证访问令牌 ：
  • 解析令牌：服务器解析访问令牌，验证其签名和有效期。
  • 授权访问：如果令牌有效且用户有权限访问请求的资源，服务器返回相应的数据。

4. 访问令牌过期

• 检测过期：当访问令牌过期时，服务器会返回一个特定的错误码（如401 Unauthorized）。
• 前端处理过期：前端捕获到这个错误码后，知道需要获取新的访问令牌。

5. 使用刷新令牌获取新的访问令牌

• 前端发送刷新请求：前端使用存储的刷新令牌向服务器发送一个刷新请求。
• 服务器验证刷新令牌 ：
  • 解析和验证刷新令牌：服务器解析刷新令牌，验证其签名和有效期。
  • 生成新的访问令牌：如果刷新令牌有效，服务器生成一个新的访问令牌。
• 返回新的访问令牌：服务器将新的访问令牌返回给前端。

6. 更新前端存储

• 更新访问令牌：前端接收到新的访问令牌后，更新内存中的访问令牌。
• 继续访问资源：前端可以继续使用新的访问令牌访问受保护的资源。

7. 刷新令牌失效处理

• 刷新令牌过期或失效：如果刷新令牌也过期或失效，用户需要重新登录。
• 前端处理：前端检测到刷新令牌失效后，清除所有存储的tokens，并引导用户重新登录。

安全性考虑

• HTTPS：所有通信必须通过HTTPS进行，以防止中间人攻击。
• 短期访问令牌：访问令牌应设置较短的有效期，以减少被盗用的风险。
• HTTP-only Cookie：刷新令牌应存储在HTTP-only cookie中，以防止XSS攻击。

通过这种双tokens机制，可以在保证用户体验的同时，提高系统的安全性。

2. 请尽可能详细地说明，null和undefined的区别？你的回答中不要写出示例代码。

null 和 undefined 是 JavaScript 中两种特殊的值，它们都表示某种缺失或不存在的状态，但在含义和使用场景上存在一些关键区别。

null

1. 定义：

   • null 是一个表示"无值"或"空值"的字面量。
   • 它是一个明确的值，表示变量是有意赋值为"无"。

2. 用途：

   • 通常用于表示变量被显式地设置为没有值。
   • 在对象属性中，null 可以用来表示该属性存在但值为空。

3. 类型：

   • null 是一个原始值（primitive value），并且是 Null 类型的唯一值。

4. 比较：

   • 使用严格相等运算符（===）比较时，null 只与自身相等。
   • 使用宽松相等运算符（==）比较时，null 只与 undefined 相等。

undefined

1. 定义：

   • undefined 是一个表示变量已声明但未赋值的默认值。
   • 它是一个全局对象的属性，可以通过 window.undefined 或 globalThis.undefined 访问。

2. 用途：

   • 当变量声明后未赋值时，其默认值为 undefined。
   • 函数参数未传递时，默认值为 undefined。
   • 访问对象不存在的属性时，返回 undefined。

3. 类型：

   • undefined 也是一个原始值，并且是 Undefined 类型的唯一值。

4. 比较：

   • 使用严格相等运算符（===）比较时，undefined 只与自身相等。
   • 使用宽松相等运算符（==）比较时，undefined 只与 null 相等。

总结

• null 表示变量是有意赋值为"无"，而 undefined 表示变量未被赋值或不存在。
• null 是一个明确的值，而 undefined 是一个默认值。
• 在类型系统中，null 和 undefined 都是原始值，但属于不同的类型（Null 和 Undefined）。
• 在比较时，null 和 undefined 使用严格相等运算符时只与自身相等，使用宽松相等运算符时相等。

理解这两个值的区别对于编写健壮和可维护的 JavaScript 代码非常重要。