前端面试题详解整理23|performance.now 微前端，微服务，使用 antd 过程中有什么难点 ， onChange和 onInput 有什么区别

金色的雨570
201 阅读7分钟

阿里 淘宝交易 前端 社招 面经

一、上来就给了一道应用题

1. 链式延迟调用（juejin.cn/post/694056…），有点紧张，同步阻塞的方式写出来了（while 阻塞，用的 performance.now），异步的没写出来。
1.1 问了 performance.now 和 date.now 的区别。
1.2 问了如果在几秒内，n 在一个 while true 中一直 自增，最终会变成多少（我说和 cpu 指令周期有关）
1.3 就这个题问了 js 循环队列（微任务，交互队列，计时队列）

  1. 链式延迟调用：
    • 在JavaScript中实现链式延迟调用通常可以利用Promise和async/await来实现。通过逐个处理延迟任务，并在前一个任务完成后再执行下一个任务，可以实现类似链式调用的效果。
    • 如果使用同步阻塞的方式写出来，可能会导致页面卡顿或者无响应，不建议在实际项目中采用这种方式。

1.1 performance.now 和 date.now 的区别：

  • performance.now() 返回当前时间戳，精确到毫秒，而且返回的是一个高精度的时间值，通常用于性能监测和计时。
  • Date.now() 返回当前时间的时间戳，也是精确到毫秒的时间值，但它返回的是一个标准的JavaScript Date对象，用于获取当前时间。

1.2 在 while(true) 循环中自增的问题：

  • 当在一个 while(true) 循环中执行自增操作时，由于JavaScript是单线程执行的，该循环会一直占用主线程，导致其他任务无法执行。因此，最终的结果取决于循环内部的代码执行了多少次和执行时间的长短，但由于循环是一个无限循环，因此最终 n 的值将无法确定。

1.3 JavaScript 循环队列：

  • JavaScript中的事件循环队列包括宏任务队列和微任务队列。微任务队列中的任务会在当前任务执行结束后立即执行，而宏任务队列中的任务则会在下一个事件循环周期中执行。

  • 在事件循环的每个周期中，会先执行所有的微任务队列中的任务，然后执行一个宏任务队列中的任务，依此循环执行。这种机制保证了JavaScript代码的异步执行和任务调度的正确性。

onChange和 onInput 有什么区别

onChange 和 onInput 是两个事件监听属性，用于监听用户在输入框等表单元素中输入内容的变化，但它们有一些区别：

  1. 触发时机：

    • onChange：在输入框内容发生变化并失去焦点时触发。换句话说，只有在输入框失去焦点后，用户输入的内容才会触发 onChange 事件。
    • onInput：在输入框内容发生变化时即时触发。无需等待输入框失去焦点，用户每输入一个字符，就会触发一次 onInput 事件。

  2. 应用场景：

    • onChange：适用于需要在用户输入完毕后进行处理或者提交表单时触发。由于 onChange 事件是在输入框失去焦点后触发的，因此适合处理较大量的输入内容，避免频繁触发事件。
    • onInput：适用于需要实时监测用户输入内容并进行即时处理的场景，例如实时搜索、实时校验输入内容等。

  3. 兼容性：

    • onChange 是一个标准的DOM事件，适用于所有主流浏览器。
    • onInput 也是一个标准的DOM事件，但是在旧版的IE浏览器中可能不被支持。通常可以使用 onpropertychange 事件作为 onInput 的兼容处理方案。

总的来说，onChange 适用于需要等待用户输入完毕后进行处理的场景，而 onInput 适用于需要即时监测用户输入内容的场景。在实际应用中，根据具体需求选择合适的事件监听方式。

（juejin.cn/post/693505…）
我把 onInput 给记成 textInput 了，估计面试官以为我在胡诌了

第一题用了半个多小时

二、然后就是常规的问题：
目前公司情况，部门结构
项目难点，项目亮点（感觉回答的一般）
使用 antd 过程中有什么难点
在使用 Ant Design（antd）过程中，可能会遇到以下几个常见的难点：

  1. 样式冲突：Ant Design的组件通常会有一套默认的样式，如果项目中已有的样式与Ant Design的样式产生冲突，可能会导致页面显示异常或样式覆盖问题。解决这个问题通常需要对样式进行调整或者使用scoped样式。

  2. 定制主题：Ant Design提供了一套灵活的主题定制功能，但是对于一些特定的样式定制，可能需要深入了解Ant Design的样式变量和LESS的使用方法。

  3. 组件的样式调整：有时候可能需要对Ant Design的组件进行样式调整以满足项目的需求，这就需要熟悉Ant Design的组件API和样式定制方式。

  4. 国际化：如果项目需要多语言支持，可能需要对Ant Design的组件进行国际化配置，这需要一定的配置和了解。

  5. 组件功能扩展：有时候可能需要对Ant Design的组件进行功能扩展或者自定义组件，这就需要深入了解Ant Design的组件源码和扩展机制。

  6. 版本升级：随着Ant Design的版本迭代，可能会出现一些API的变化或者新功能的引入，这可能会影响到项目的稳定性和兼容性，因此在版本升级时需要谨慎评估和测试。

针对这些难点，建议在项目初期就进行充分的调研和准备工作，熟悉Ant Design的使用文档和样式定制方法，保持对Ant Design社区的关注，及时了解最新的版本更新和功能改进。另外，可以通过阅读Ant Design的源码和参与社区讨论来深入理解Ant Design的使用和定制方式，从而更好地解决项目中的难点。

为什么要换工作

微前端（不是很了解），微服务

微前端和微服务是两个不同的概念，但它们都是当前前端和后端领域的热门话题。

  1. 微前端：

    • 微前端是一种架构风格，旨在将前端应用程序拆分为更小、更易于管理的部分，每个部分称为微前端，然后将这些微前端组合成一个完整的应用程序。
    • 微前端的主要目标是提高应用程序的可维护性、可扩展性和团队的独立性。通过将应用程序拆分为独立的微前端，不同团队可以独立开发、测试和部署各自的微前端，从而加快开发速度和降低代码耦合度。
    • 微前端可以采用不同的技术栈和框架来实现，例如基于Web Components的微前端、基于iframe的微前端、基于模块联邦的微前端等。

  2. 微服务：

    • 微服务是一种架构风格，旨在将应用程序拆分为一组小型、自治的服务，每个服务都围绕特定的业务功能进行构建，并可以独立部署、扩展和管理。
    • 微服务的主要目标是提高应用程序的可伸缩性、灵活性和可维护性。通过将应用程序拆分为小型的、松耦合的服务，可以更容易地实现持续交付和持续集成，以及快速部署和扩展应用程序。
    • 微服务架构通常使用轻量级通信协议（如HTTP或RPC）来实现服务之间的通信，并通过容器化技术（如Docker）来部署和管理服务。

虽然微前端和微服务是两个不同的概念，但它们都旨在通过拆分应用程序为更小、更灵活的部分来提高应用程序的可维护性和可扩展性。在实际应用中，可以将微前端和微服务结合起来使用，从而更好地实现复杂应用程序的开发和管理。

三、反问
1. 部门，负责的事情
2. 如果我在这个岗位上，我的发展目标会是什么样的

作者：cinnamons
链接：www.nowcoder.com/feed/main/d…
来源：牛客网

avatar
文章
阅读
粉丝