前端面试题详解整理27|用什么做动画 ,css做动画和js做动画区别 ,react和vue有什么区别redux工作原理 ,react里面组件间通信,

金色的雨570
342 阅读13分钟

阿里闲鱼前端一面

阿里闲鱼部门前端开发
写个面经，积攒人品，前面问了一下实习和项目经历，后面问了问常规八股。面试官好像有点不耐烦，没手撕算法，大概率是被当做kpi刷了，应该是寄了。

1.平时用什么做动画

平时在前端开发中，可以使用以下几种方式来实现动画效果：

  1. CSS 动画： 使用 CSS3 的动画特性，如 @keyframes、transition、animation 等，可以实现简单的动画效果，如淡入淡出、平移、旋转等。这种方式无需使用 JavaScript，性能较好，适用于简单的动画场景。

  2. CSS 过渡效果： 使用 CSS3 的过渡特性（transition）可以实现元素属性的平滑过渡效果，如颜色、大小、位置等属性的过渡动画。这种方式不需要编写复杂的动画代码，适用于简单的过渡效果。

  3. JavaScript 动画库： 使用 JavaScript 动画库，如 GreenSock Animation Platform (GSAP)、anime.js、Velocity.js 等，可以实现更加复杂和灵活的动画效果。这些库提供了丰富的 API 和功能，支持缓动函数、时间轴控制、链式动画等特性，适用于各种复杂的动画需求。

  4. Web 动画 API： 使用 Web 动画 API，如 Web Animations API，可以直接通过 JavaScript 来控制动画效果。这种方式提供了更高的灵活性和控制性，但需要编写更多的代码来实现动画效果。

  5. Canvas 动画： 使用 HTML5 Canvas 技术可以实现更加复杂和高性能的动画效果。通过绘制图形和处理图像数据，可以实现各种自定义的动画效果，如粒子效果、游戏动画等。

综上所述，根据项目需求和个人偏好，可以选择适合的动画实现方式。对于简单的动画效果，可以使用 CSS 动画或过渡效果；对于复杂的动画效果，可以选择使用 JavaScript 动画库或 Web 动画 API；而对于需要自定义绘制的动画效果，可以使用 Canvas 技术来实现。

2.说说用css做动画和js做动画有什么区别

使用 CSS 和 JavaScript 来实现动画效果各有优缺点，下面是它们之间的主要区别：

  1. CSS 动画：

    • 优点：
      • 硬件加速：CSS 动画通常由浏览器通过硬件加速来执行，因此性能较好，动画流畅度高。
      • 简单易用：CSS 提供了简单的动画属性和关键帧规则，可以通过少量的代码就实现一些常见的动画效果，如平移、旋转、淡入淡出等。
      • 自动优化：浏览器会对 CSS 动画进行优化，例如对于位移和透明度的动画，浏览器可能会使用优化后的动画线程执行，以提高性能。
    • 缺点：
      • 限制性：CSS 动画的灵活性有限，只能实现一些简单的动画效果，难以实现复杂的动画逻辑。
      • 控制性差：CSS 动画通常只能通过添加、移除 CSS 类或改变样式属性来控制，无法动态地控制动画的播放、暂停、重新播放等行为。
      • 兼容性问题：某些复杂的 CSS 动画在不同浏览器上可能存在兼容性问题，需要特殊处理。

  2. JavaScript 动画：

    • 优点：
      • 灵活控制：JavaScript 动画通过编程的方式实现，具有更高的灵活性和控制性，可以实现各种复杂的动画效果，并且可以动态地控制动画的播放、暂停、进度等。
      • 功能丰富：JavaScript 动画库通常提供了丰富的 API 和功能，如缓动函数、时间轴控制、链式动画等，可以满足各种复杂的动画需求。
      • 兼容性好：JavaScript 动画通常能够较好地兼容不同的浏览器和设备，可以更好地控制动画的行为和性能。
    • 缺点：
      • 性能较低：JavaScript 动画通常由 JavaScript 引擎执行，性能较 CSS 动画略低，特别是在处理复杂的动画效果时可能会出现性能问题。
      • 开发成本高：相比于 CSS 动画，使用 JavaScript 实现动画通常需要编写更多的代码，开发成本较高。
      • 复杂度高：一些复杂的动画效果可能需要编写复杂的逻辑代码，维护和调试成本较高。

综上所述，使用 CSS 动画适合实现简单的动画效果，并且具有更好的性能和较低的开发成本；而使用 JavaScript 动画适合实现复杂的动画效果，并且具有更高的灵活性和控制性，但开发成本和性能会相对较高。在实际项目中，可以根据具体需求和优先考虑的因素选择合适的动画实现方式。

3.react比较熟还是vue比较熟(答:react)

4.react和vue有什么区别

React 和 Vue 是两种流行的前端框架，它们在设计理念、生态系统、语法特性等方面存在一些区别，下面是它们的主要区别：

  1. 设计理念：

    • React： React 是一个由 Facebook 开发的 JavaScript 库，专注于构建用户界面的组件化开发。它提供了一种声明式的方式来描述 UI，并且将 UI 拆分为独立的组件，通过单向数据流来管理组件之间的状态和数据通信。
    • Vue： Vue 是一个由尤雨溪开发的渐进式 JavaScript 框架，旨在通过简单的 API 和响应式数据绑定来构建交互式的用户界面。Vue 提供了一种更加直观和灵活的方式来构建应用，同时也支持组件化开发和单文件组件。

  2. 语法特性：

    • React： React 使用 JSX（JavaScript XML）语法来描述 UI，将 HTML 和 JavaScript 结合在一起编写组件。它使用了虚拟 DOM 技术来提高页面的渲染效率，并且通过状态和 props 来管理组件的数据和状态。
    • Vue： Vue 使用模板语法来描述 UI，将 HTML 和 JavaScript 分离开来，通过指令和插值语法来绑定数据和事件。Vue 还提供了响应式数据绑定和计算属性等特性，使得数据和 UI 之间的关系更加清晰和直观。

  3. 生态系统：

    • React： React 生态系统庞大且成熟，包括了许多相关的工具和库，如 React Router、Redux、Material-UI 等。React 还有着活跃的社区和丰富的资源，提供了大量的文档、教程和案例。
    • Vue： Vue 生态系统也很庞大，包括了诸多与 Vue 相关的库和插件，如 Vue Router、Vuex、Vuetify 等。Vue 的社区也非常活跃，提供了丰富的资源和社区支持。

  4. 学习曲线：

    • React： React 的学习曲线较为陡峭，特别是对于初学者来说，需要掌握 JSX 语法、组件化思想、单向数据流等概念，可能需要一定的时间和精力来适应。
    • Vue： Vue 的学习曲线相对较平缓，其简单直观的 API 和文档使得学习和上手变得更加容易，可以更快地构建起对 Vue 的理解和熟练度。

综上所述，React 和 Vue 在设计理念、语法特性、生态系统和学习曲线等方面存在一些区别，开发者可以根据项目需求、个人偏好和团队技术栈来选择合适的框架。

5.js和jsx的区别(说了jsx文件开头大写，不过面试官好像不是很满意)
JavaScript（JS）和 JSX 是两种不同的语言或语法。

  1. JavaScript（JS）：

    • JavaScript 是一种通用的编程语言，用于开发 Web 应用程序和其他类型的软件。
    • 它是一种脚本语言，可以在浏览器中直接执行，也可以在服务器端通过 Node.js 运行。
    • JavaScript 是一种动态类型语言，支持面向对象编程（OOP）、函数式编程（FP）和原型继承等特性。
    • JavaScript 的语法包括变量声明、函数定义、控制流语句、对象字面量、数组等基本语法。

  2. JSX：

    • JSX 是一种 JavaScript 的语法扩展，用于在 React 应用程序中描述用户界面的结构。
    • JSX 允许开发者在 JavaScript 中编写类似 HTML 的代码，以声明式的方式描述 UI 组件的结构和样式。
    • JSX 语法中可以直接嵌入 JavaScript 表达式，并支持使用花括号 {} 来包裹 JavaScript 表达式。
    • JSX 会被转译为纯 JavaScript 代码，以便被浏览器或 Node.js 执行。通常，通过使用构建工具如 Babel 来将 JSX 转换为标准的 JavaScript。

综上所述，JavaScript 是一种通用的编程语言，而 JSX 是 React 框架特有的语法扩展，用于描述 React 组件的结构和样式。在 React 开发中，通常会使用 JSX 编写组件的 UI 部分，以提高代码的可读性和开发效率。

6.react里面组件间通信有什么方法

在 React 中，组件之间通信的方法有多种，主要包括以下几种：

  1. Props（属性）传递：

    • 在 React 中，父组件可以通过 props（属性）向子组件传递数据。子组件可以通过 props 来接收父组件传递的数据，并根据这些数据来渲染自身的 UI。
    • 父组件可以在 JSX 中使用子组件，并通过在子组件上设置属性来传递数据，例如 <ChildComponent data={data} />。
    • 子组件可以通过 this.props 来访问父组件传递的数据。

  2. State（状态）提升：

    • 当多个组件之间需要共享状态时，可以将状态提升到这些组件的共同父组件中管理。父组件可以将状态通过 props 传递给子组件，从而实现组件之间的通信。
    • 当其中一个子组件修改了状态，父组件的状态也会相应地更新，从而影响到其他子组件。

  3. Context（上下文）：

    • Context 是 React 提供的一种跨组件传递数据的方法。通过创建一个 Context 对象，并通过 Provider 组件向下传递数据，所有子组件都可以直接访问这个数据，无需逐层传递 props。
    • Context 适用于在组件树中多层嵌套的情况下，需要跨越多层组件进行数据传递的场景。

  4. 事件回调：

    • 父组件可以通过将函数作为 props 传递给子组件，从而实现子组件向父组件传递消息。子组件可以在适当的时机调用这些函数来触发事件。
    • 这种方式适用于子组件需要通知父组件进行某些操作的场景，如点击按钮触发某个事件。

  5. 全局状态管理（如 Redux、MobX）：

    • 对于复杂的应用程序，可以使用全局状态管理工具来管理应用的状态，如 Redux、MobX 等。这些工具可以帮助在任意组件之间共享状态，并提供一套统一的状态管理机制。

综上所述，React 中组件之间通信的方法包括 Props 传递、状态提升、Context、事件回调和全局状态管理等多种方式，开发者可以根据具体的场景和需求选择合适的方法。

7.你刚才说redux，那你说一下redux工作原理

Redux 是一种用于 JavaScript 应用程序状态管理的库，它的工作原理可以简要概括如下：

  1. 单一数据源： Redux 应用程序的状态被存储在一个单一的 JavaScript 对象中，称为状态树（state tree）或应用程序状态（application state）。这个状态对象代表了整个应用程序的状态，所有组件共享同一个状态。

  2. 只读状态： Redux 中的状态是只读的，不能直接修改。为了修改状态，必须通过发送一个 action，即一个描述状态变化的普通 JavaScript 对象。

  3. 纯函数 reducer： Reducer 是一个纯函数，用于描述状态树的变化。它接收当前的状态和一个 action，然后返回一个新的状态。Redux 应用程序中可能会有多个 reducer，每个 reducer 负责管理状态树的一部分。

  4. 单向数据流： Redux 遵循单向数据流的原则，即数据的流动是单向的。当一个 action 被派发（dispatch）时，它会被传递给 reducer，reducer 根据 action 的类型来更新状态，并返回一个新的状态。然后，Redux 通知所有订阅了状态变化的组件，以便更新它们的 UI。

  5. 中间件： Redux 支持使用中间件来扩展其功能。中间件是一个函数，用于在 action 被派发到 reducer 之前进行处理。中间件可以用来实现日志记录、异步操作、路由导航等功能。

  6. Store： Redux 应用程序的状态存储在一个称为 Store 的对象中。Store 包含了当前的状态树、派发 action 的方法、订阅状态变化的方法等。通常情况下，一个应用程序只有一个 Store。

通过以上机制，Redux 实现了一个可预测性、可维护性的状态管理方案。它的工作原理简单清晰，通过约定和规范化的方式来管理应用程序的状态，使得状态变化可追踪、可调试，并且易于理解和维护。

8.输入url到显示页面浏览器发生了什么
在浏览器中输入 URL 后，浏览器会执行一系列步骤来获取并显示页面。以下是大致的流程：

  1. URL 解析： 浏览器首先会解析输入的 URL，包括协议（如 http、https）、域名、路径、查询参数等部分。

  2. DNS 解析： 如果域名部分存在，浏览器会向 DNS 服务器发起请求，解析域名对应的 IP 地址。

  3. 建立 TCP 连接： 浏览器使用 HTTP 或 HTTPS 协议与服务器建立 TCP 连接。对于 HTTPS 连接，还需要进行 SSL/TLS 握手过程，建立加密连接。

  4. 发送 HTTP 请求： 浏览器向服务器发送 HTTP 请求，请求中包含了请求方法（GET、POST 等）、请求头部（User-Agent、Accept、Cookie 等）、请求体（对于 POST 请求）等信息。

  5. 服务器处理请求： 服务器接收到请求后，会根据请求的路径和参数进行处理，并返回相应的数据。

  6. 接收响应： 浏览器接收到服务器返回的响应数据，包括响应状态码、响应头部信息和响应体（HTML、CSS、JavaScript 等）。

  7. 渲染页面： 浏览器根据接收到的 HTML、CSS 和 JavaScript 文件开始渲染页面。它会解析 HTML 结构，构建 DOM 树，解析 CSS 样式，构建渲染树，并将它们合并成一个可视化的页面。

  8. 执行 JavaScript： 如果页面中存在 JavaScript 代码，浏览器会执行 JavaScript 代码，对页面进行动态交互、事件处理等操作。

  9. 显示页面： 最终，浏览器会根据渲染树和布局信息，将页面内容显示在用户界面上，用户可以与页面进行交互。

整个过程中，浏览器会根据 HTTP 响应头部的 Cache-Control、Expires 等字段来判断是否需要缓存响应数据，并且会根据需要将缓存数据存储到本地。如果页面中存在资源（如图片、样式表、脚本等）的链接，浏览器还会发送额外的请求来获取这些资源，并根据需要进行缓存和重用。

9.平时看哪些前端相关的书(答:阮一峰的ES6)

作者：前端爱米信米等米
链接：www.nowcoder.com/feed/main/d…
来源：牛客网

avatar
文章
阅读
粉丝