2面

怎么接触前端，怎么学习

如果你是项目负责人，react和vue如何选型

选择 React 还是 Vue 取决于多个因素，包括项目需求、团队技术栈、开发经验等。下面是一些可以考虑的因素：

1. 项目需求： 考虑项目的规模、复杂度和功能需求。如果项目需要更高的性能、更好的扩展性和灵活性，可能更适合选择 React。而如果项目更偏向于快速开发和简单维护，可能更适合选择 Vue。

2. 团队技术栈： 考虑团队成员的技术背景和经验，以及已有的技术栈。如果团队成员已经熟悉了 React 或 Vue，可能更容易上手和快速开发。另外，如果团队已经在其他项目中成功使用了某个框架，可能更倾向于继续使用该框架。

3. 生态系统： 考虑框架的生态系统和周边工具支持。React 和 Vue 都有庞大的生态系统，有丰富的第三方库和组件可供选择。可以根据项目需求和具体情况评估两者的生态系统是否满足需求。

4. 性能和优化： 考虑框架的性能表现和优化能力。React 和 Vue 在性能方面有各自的优势和劣势，可以根据项目需求和重点优化方向来选择合适的框架。

5. 学习曲线： 考虑框架的学习曲线和上手难度。Vue 的学习曲线相对较低，更容易上手，适合初学者和小型团队。而 React 的学习曲线稍高一些，但一旦掌握了其核心概念，可以更灵活地进行开发。

6. 社区和支持： 考虑框架的社区活跃度和技术支持。React 和 Vue 都有活跃的社区和强大的技术支持，可以通过社区论坛、文档和教程等渠道获取帮助和解决问题。

综合考虑以上因素，并根据具体的项目需求和团队情况进行选择，可以更好地决定是使用 React 还是 Vue。同时，也可以根据项目的不同阶段和特点，灵活选择合适的技术栈和工具。

vue收集依赖的时间点（编译的时候触发数据的get）

在 Vue 中，收集依赖的时间点主要发生在组件实例化过程中，具体来说是在渲染函数执行时。Vue 通过响应式系统来追踪依赖关系，当一个组件实例中的响应式数据被访问时，Vue 会收集对应的依赖。

收集依赖的过程是由 Watcher 对象来完成的。当渲染函数执行时，Vue 会创建一个 Watcher 对象，该 Watcher 对象会观察渲染函数中访问的所有响应式数据。在访问响应式数据的过程中，Vue 会将当前的 Watcher 对象添加到对应数据的依赖列表中，这样当数据发生变化时，Vue 就能够通知到相应的 Watcher 对象，从而触发重新渲染。

总结来说，Vue 在渲染函数执行时，会创建一个 Watcher 对象来收集依赖，将当前 Watcher 对象添加到访问的响应式数据的依赖列表中。这样就能够在数据发生变化时及时更新视图。

pnpm原理优势

pnpm 是一种基于版本的包管理器，它与 npm 和 Yarn 不同之处在于它采用了一种称为“硬链接（hardlink）”的文件链接策略来实现包的共享。以下是 pnmp 的工作原理和优势：

工作原理：

1. 硬链接（hardlink）： 在使用 pnpm 安装包时，它会将包的文件存储在一个称为“存储目录（store）”的地方。当安装相同版本的包时，pnpm 不会在 store 中重复存储文件，而是创建硬链接指向 store 中已有的文件。这样可以避免重复存储相同版本的包文件，节省了磁盘空间。

2. 符号链接（symlink）： 对于不同版本的包，pnpm 会在项目的 node_modules 目录下创建符号链接，指向 store 中对应版本的文件。这样可以在项目中引用不同版本的包，而不会产生冲突。

3. 共享 node_modules： 在使用 pnpm 安装依赖时，默认情况下会将所有项目的依赖安装在一个全局的存储目录中，这样不同项目可以共享相同的依赖包。这种方式可以减少依赖的重复安装，提高安装速度和节省磁盘空间。

优势：

1. 节省磁盘空间： 由于采用了硬链接的方式来存储和共享包，pnpm 能够避免重复存储相同版本的包文件，节省了磁盘空间。

2. 加速安装： 当安装相同版本的包时，pnpm 可以直接创建硬链接，而不需要重新下载和解压文件，因此安装速度更快。

3. 减少网络流量： 由于共享依赖，pnpm 可以减少下载依赖时的网络流量，尤其是在多个项目中存在相同版本的依赖时。

4. 简化依赖管理： 使用 pnpm 可以简化依赖管理，避免了不同项目之间依赖版本的冲突，提高了项目的稳定性和可维护性。

总的来说，pnpm 通过使用硬链接和共享依赖的方式，实现了快速、高效和节省资源的包管理，为开发者提供了更好的开发体验。

ssr和csr区别原理，编程的时候有什么区别，哪部门内容在服务端拼接，哪些内容在客户端再渲染, SSR（Server-Side Rendering）和CSR（Client-Side Rendering）是两种不同的前端渲染方式，它们在原理、编程方式以及内容渲染位置等方面有所不同。

SSR 和 CSR 的区别和原理：

1. 原理：

   • SSR： 在服务器端生成完整的 HTML 页面，并在服务器端将页面的数据和内容与 HTML 结合，最终将完整的 HTML 页面发送到客户端。因此，客户端在收到 HTML 页面后，直接显示完整的页面内容，不需要再进行额外的页面渲染。
   • CSR： 在客户端浏览器中，通过 JavaScript 请求页面数据，并使用 JavaScript 动态地生成页面内容。浏览器在接收到 HTML 页面后，再使用 JavaScript 渲染页面内容，因此整个页面的渲染过程是在客户端完成的。

2. 编程方式：

   • SSR： 在 SSR 中，前端和后端的代码通常是结合在一起的，前端框架如 React、Vue 等可以直接在服务器端运行，从而实现服务器端渲染。
   • CSR： 在 CSR 中，前端代码和后端代码是分开的，前端主要负责页面的交互和数据展示，后端主要负责数据接口和逻辑处理。

编程时的区别：

1. SSR：

   • 前端代码中需要区分服务器端和客户端，针对不同的环境执行不同的逻辑。
   • 前端组件的生命周期中，服务器端渲染时会触发 getInitialProps、getServerSideProps 等生命周期钩子，用于在服务器端获取数据，并将数据传递给前端组件。
   • 页面的初始渲染是在服务器端完成的，因此首屏加载速度较快，有利于 SEO。

2. CSR：

   • 前端代码可以专注于页面交互和事件处理，不需要考虑服务器端渲染的相关逻辑。
   • 前端组件的生命周期中，通常会使用 useEffect、useState 等钩子来处理页面交互逻辑和数据请求。
   • 页面的初始渲染是在客户端浏览器中完成的，因此首屏加载速度较慢，但后续的页面切换速度可以更快。

内容渲染位置：

在 SSR 中，页面的基本结构和内容是在服务器端渲染完成的，包括 HTML 结构、页面文本内容等。而在 CSR 中，页面的基本结构是由服务器端渲染的，但页面的具体内容和数据是在客户端浏览器中通过 JavaScript 动态渲染生成的。

总的来说，SSR 和 CSR 在原理、编程方式和内容渲染位置等方面有较大的差异，开发人员可以根据项目需求和性能考虑来选择适合的渲染方式。

比如一个列表，在服务端拼接html的时候怎么才能知道要渲染多少条数据＝怎么在服务端知道可视区域有多少条数据（等大佬解答）

在服务端拼接 HTML 时确定可视区域内有多少条数据通常涉及到前端与服务端的交互，以及对前端页面的加载进行优化。以下是一些常见的解决方案：

1. 前端向服务端发送请求：前端可以通过 AJAX 或其他方式向服务端发送请求，请求所需的数据。在这个请求中，前端可以传递一些参数，比如当前页面的页码、每页显示的数据量等。服务端根据这些参数来决定返回多少条数据给前端。

2. 分页机制：服务端通常会实现一种分页机制，根据前端传递的页码和每页数据量参数，在数据库或其他数据源中进行查询，并返回相应页码的数据给前端。这种方式可以帮助在服务端确定要渲染的数据量。

3. 滚动加载：前端可以实现滚动加载（Infinite Scroll）的功能，即当用户滚动到页面底部时，自动触发向服务端请求更多数据。这种方式可以让前端逐步加载数据，而不是一次性加载所有数据，减轻服务器的负载。

4. 虚拟列表（Virtual List）：虚拟列表是一种优化手段，通过只渲染当前可视区域内的数据项，而不是全部数据项，来提高页面性能。前端可以向服务端发送请求，获取可视区域内的数据，然后在前端进行渲染。

5. 响应式设计：在设计页面时，可以考虑使用响应式设计，根据不同的设备屏幕大小和分辨率，动态调整页面展示的数据量，以提供更好的用户体验。

综上所述，要在服务端确定要渲染多少条数据，通常需要前端与服务端之间的交互，以及考虑页面加载的优化策略。

在服务端直接知道客户端可视区域有多少条数据是不太可能的，因为服务端不直接与客户端的视图交互。服务端处理的是数据的请求和响应，而不了解客户端的视图状态。但是，可以通过客户端向服务端发送请求时携带一些参数，来告知服务端客户端的需求，例如可视区域的大小或者希望获取的数据量。

以下是一种可能的解决方案：

1. 客户端发送请求：客户端可以发送一个请求到服务端，请求所需的数据，同时在请求中携带一些参数，比如可视区域的大小或者希望获取的数据量。

2. 服务端根据参数返回数据：服务端收到请求后，根据客户端传递的参数进行处理，返回相应的数据给客户端。服务端可以根据客户端传递的可视区域大小或者希望获取的数据量来确定要返回的数据量。

3. 客户端渲染数据：客户端接收到服务端返回的数据后，根据数据进行渲染。客户端可以根据自己的需求和视图状态来决定如何处理服务端返回的数据，比如只渲染可视区域内的数据项。

总的来说，服务端并不直接知道客户端的可视区域有多少条数据，但可以通过客户端向服务端发送请求时携带的参数来间接地了解客户端的需求，然后返回相应的数据给客户端。

lcp时间怎么计算，埋点performanceObserver

LCP（Largest Contentful Paint）是 Web 性能指标之一，用于衡量页面加载过程中最大的可见内容绘制完成的时间。它反映了用户在视觉上感知到页面加载完成的时间点，通常对于用户体验至关重要。

在 Web 开发中，你可以通过 Performance API 的 PerformanceObserver 接口来监控和测量 LCP 时间。下面是一个基本的示例：

// 创建一个新的 PerformanceObserver
const observer = new PerformanceObserver((list) => {
  // 遍历观察到的性能条目
  list.getEntries().forEach((entry) => {
    // 检查是否是 LCP 条目
    if (entry.name === 'largest-contentful-paint') {
      // 打印 LCP 时间
      console.log('LCP 时间:', entry.startTime);
    }
  });
});

// 监听 LCP 事件
observer.observe({ type: 'largest-contentful-paint', buffered: true });

在上面的代码中：

• 我们创建了一个新的 PerformanceObserver 对象，并传入一个回调函数。这个回调函数将在性能条目被观察到时执行。
• 回调函数通过调用 list.getEntries() 获取到所有的性能条目，并遍历它们。
• 对于每个性能条目，我们检查它的 name 属性是否为 'largest-contentful-paint'，以确定它是否是 LCP 条目。
• 如果是 LCP 条目，我们就打印出它的 startTime 属性，即 LCP 时间。

通过这种方式，你可以在页面加载过程中捕获到 LCP 事件，并记录 LCP 时间以便进一步分析和优化页面性能。

国际化配置实现

国际化（Internationalization，简称 i18n）是一种使软件能够适应不同语言、地区和文化习惯的技术。在前端开发中，实现国际化通常涉及以下几个步骤：

1. 准备翻译文件：首先，需要准备好与应用程序中使用的文本对应的翻译文件。这些文件通常是 JSON 格式，每个文件对应一种语言或地区，其中包含了键值对，键是原始文本，值是对应的翻译文本。

2. 选择国际化库：选择适合项目的国际化库。一些常用的国际化库包括 i18next、react-intl、vue-i18n 等。这些库提供了方便的 API 来实现文本的国际化。

3. 配置国际化库：根据选择的国际化库的文档，配置库的相关参数和选项。通常，你需要告诉库从哪里加载翻译文件，以及如何根据用户的首选语言选择正确的翻译文本。

4. 在应用中使用国际化文本：在应用的代码中，替换原始文本为国际化库提供的 API。通常，这涉及到将原始文本包裹在一个函数或组件中，国际化库会根据当前语言选择正确的翻译文本。

5. 切换语言：提供用户切换语言的功能。这可以是一个语言选择器组件，或者在设置中提供一个选项来切换语言。切换语言时，需要更新国际化库的配置，并重新渲染应用以显示新的语言文本。

以下是一个简单的示例，使用 i18next 库来实现国际化：

// 导入所需的库
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

// 初始化 i18n
i18n
  .use(initReactI18next) // 使用 React 绑定
  .init({
    resources: {
      en: { translation: { hello: 'Hello World!' } }, // 英文翻译
      fr: { translation: { hello: 'Bonjour le monde!' } }, // 法语翻译
    },
    lng: 'en', // 默认语言
    fallbackLng: 'en', // 如果找不到匹配的语言，则使用默认语言
    interpolation: { escapeValue: false }, // 避免 XSS 攻击
  });

// 在应用中使用国际化文本
const MyComponent = () => {
  const { t } = useTranslation(); // 使用 useTranslation 钩子函数获取 t 函数
  return <div>{t('hello')}</div>; // 使用 t 函数获取翻译文本
};

在这个示例中，我们首先初始化了 i18n，配置了两种语言的翻译文本，并设置了默认语言为英文。然后，在组件中使用 useTranslation 钩子函数获取 t 函数，用来获取翻译文本。最后，在组件中通过 t('hello') 获取翻译后的文本并显示出来。

算法:数组转树

将数组转换为树是一种常见的算法问题，特别适用于前端开发中处理树形数据的场景，比如菜单导航、组织结构等。下面是一个基本的示例算法，假设数组中的每个元素都包含一个 id 字段和一个 parentId 字段，表示节点的唯一标识和父节点的标识。

function arrayToTree(array) {
  const map = {}; // 创建一个映射对象，用于快速查找每个节点

  // 构建映射对象
  array.forEach(item => {
    map[item.id] = {...item, children: []}; // 将每个节点添加到映射对象中，并初始化 children 数组
  });

  const tree = []; // 存储最终的树结构

  // 遍历数组，构建树结构
  array.forEach(item => {
    if (item.parentId !== null && map[item.parentId]) {
      // 如果当前节点有父节点，并且父节点存在于映射对象中
      map[item.parentId].children.push(map[item.id]); // 将当前节点添加为父节点的子节点
    } else {
      // 否则，当前节点是根节点，直接添加到树结构中
      tree.push(map[item.id]);
    }
  });

  return tree;
}

使用示例：

const array = [
  { id: 1, parentId: null, name: 'Node 1' },
  { id: 2, parentId: 1, name: 'Node 2' },
  { id: 3, parentId: 1, name: 'Node 3' },
  { id: 4, parentId: 2, name: 'Node 4' },
  { id: 5, parentId: null, name: 'Node 5' },
];

const tree = arrayToTree(array);
console.log(tree);

在这个示例中，我们首先创建了一个映射对象 map，用于存储每个节点，并根据 id 字段作为键。然后遍历数组，构建树结构。如果当前节点有父节点，并且父节点在映射对象中存在，则将当前节点添加为父节点的子节点；否则，当前节点是根节点，直接添加到树结构中。最终返回构建好的树结构。

作者：已坠机
链接：www.nowcoder.com/discuss/545…
来源：牛客网