腾讯 QQ 前端实习面经（二面）

发面经，攒人品！！！

部门：QQ

时间线：

• 2024-03-01 一年前的简历被捞，遂约面
• 2024-03-07 一面
• 2024-03-08 二面

二面

1. 实习业务介绍
2. React18 有哪些新特性（直接用的就是 18 版本，遂回答刷视频看到过的 React 19 的新特性）

1. 常用的 hooks 有哪些

React 18 和 19 的新特性主要包括以下方面：

React 18 新特性：

1. Concurrent Rendering（并发渲染）： React 18 引入了 Concurrent Mode（并发模式），允许 React 应用在渲染过程中中断和恢复，以提高渲染的流畅性和用户体验。

2. 新的 Root API： React 18 提供了新的 Root API，允许应用在同一个页面中同时渲染多个 React 树，从而更好地支持多个独立的组件渲染。

3. 新的事件系统： React 18 引入了新的事件系统，提供了更灵活和高效的事件处理机制，支持更复杂的交互场景。

4. 新的 Suspense API： React 18 中的 Suspense API 进一步完善，支持更丰富的用法和场景，例如数据加载、代码拆分等。

5. 新的渲染器架构： React 18 对渲染器架构进行了重构和优化，提高了渲染性能和稳定性。

React 19 新特性：

1. 更好的 TypeScript 支持： React 19 提供了更好的 TypeScript 支持，包括更准确的类型推断、更丰富的类型定义等，使得在 TypeScript 环境下开发 React 应用更加便捷和高效。

2. 新的 Hooks： React 19 引入了一些新的 Hooks，例如 useAnimation、useRouter 等，提供了更丰富的功能和更灵活的用法。

3. 性能优化： React 19 对渲染性能和内存占用进行了优化，提高了应用的运行效率和响应速度。

4. 新的生命周期： React 19 引入了一些新的生命周期函数，例如 componentDidError、componentDidSuspend 等，用于更好地处理组件的错误和挂起状态。

5. 新的错误处理机制： React 19 提供了新的错误处理机制，支持更精确的错误捕获和处理，提高了应用的稳定性和可靠性。

以上是 React 18 和 19 的一些主要新特性，其中 React 18 主要着重于渲染和交互方面的改进，而 React 19 则更注重于开发体验和性能优化。

3. React Fiber 架构了解吗

React Fiber 是 React 中的一种架构，旨在改进 React 的渲染性能和交互体验。它是 React 16 中引入的一项重大更新，主要目标是实现更高效的渲染、更流畅的用户交互以及更好的协调机制。

下面是 React Fiber 架构的一些关键特点和概念：

1. 可中断性（Interruptible）：Fiber 架构使得 React 渲染过程中可以中断，从而可以更好地响应用户的交互操作。这意味着 React 可以在渲染过程中暂停，执行其他高优先级的任务，然后再恢复渲染。

2. 增量式渲染（Incremental Rendering）：Fiber 架构支持增量式渲染，可以将渲染任务分解成小的任务单元，然后按优先级依次执行。这样可以实现更平滑的页面渲染，提高用户体验。

3. 优先级调度（Priority Scheduling）：Fiber 架构引入了优先级调度的概念，可以根据任务的优先级来动态调整任务的执行顺序，确保用户交互任务和页面渲染任务的优先级更高。

4. 可中断性和优先级调度的结合：Fiber 架构将可中断性和优先级调度结合起来，实现了更灵活的任务调度和执行。这使得 React 可以在不阻塞主线程的情况下，更好地处理异步任务和用户交互。

总的来说，React Fiber 架构的引入使得 React 应用在性能和用户体验方面有了更大的提升，并且为未来的改进和扩展奠定了基础。

3. Vue 组件通信方式 props 与 emitprovide 与 injectexpose 与 ref全局状态管理

Vue 组件通信有多种方式，包括 props 与 emit、provide 与 inject、expose 与 ref 全局状态管理。下面我将简要介绍它们的使用方法和特点：

1. Props 与 Emit：

   • Props：通过 props 将父组件的数据传递给子组件。在子组件中，可以通过 props 来接收父组件传递的数据，并且这些 props 是单向数据流，子组件不能直接修改父组件的数据。
   • Emit：子组件可以通过 $emit 方法触发自定义事件，并且可以传递数据给父组件。父组件可以监听子组件的自定义事件，从而实现子组件向父组件通信。

2. Provide 与 Inject：

   • Provide：在父组件中通过 provide 来提供数据，子组件通过 inject 来注入父组件提供的数据。这种方式可以实现跨层级的组件通信，但是需要注意的是 provide/inject 是非响应式的，不能实现数据的自动更新。

3. Expose 与 Ref 全局状态管理：

   • Expose：在组件内部通过 expose 选项来暴露一些内部属性或方法，使得它们可以被父组件或其他组件访问。这个特性通常用于库组件或插件中，暴露一些对外可用的接口。
   • Ref 全局状态管理：Vue 3 提供了 ref 和 reactive 来管理组件内部的状态。ref 可以创建一个响应式的数据，并且可以通过 value 属性来访问和修改这个数据。reactive 可以创建一个响应式的对象，可以对对象的属性进行监听和更新。

综上所述，Vue 提供了多种灵活的组件通信方式，开发者可以根据具体的场景选择合适的方式来进行组件间的数据传递和通信。

3. Vuex 实现原理

Vuex 是 Vue.js 应用中的状态管理库，它可以帮助我们在不同组件之间共享和管理状态。下面是 Vuex 的主要实现原理：

1. 单一状态树：Vuex 使用单一状态树来管理应用中的所有状态。这意味着应用的所有状态都存储在一个对象中，并且这个对象是响应式的，可以在任何地方访问和修改。

2. State：Vuex 的状态存储在一个名为 state 的对象中。这个对象被设计为只读的，意味着不能直接修改 state 对象中的属性。要修改状态，必须使用 commit 提交 mutation。

3. Mutation：Mutation 是一种更改状态的方式。每个 Mutation 都有一个字符串类型的事件类型 (type) 和一个回调函数 (handler)。在回调函数中，可以对 state 对象进行修改。

4. Action：Action 类似于 Mutation，但是可以包含异步操作。Action 是提交给 Mutation 的请求，用于触发 Mutation 的执行。Action 通过 dispatch 方法进行分发。

5. Getter：Getter 用于从 Store 中获取状态，并且可以对状态进行计算和筛选。Getter 接收 state 作为参数，并返回状态的计算值。

6. Module：Vuex 允许将状态树分割成模块，每个模块可以有自己的 state、mutation、action、getter 等。这样可以使得大型应用的状态管理更加清晰和模块化。

7. Store：Store 是 Vuex 的核心，它包含了状态树、Mutation、Action、Getter 等。每个 Vue 应用只能有一个 Store 实例。

8. 插件机制：Vuex 提供了插件机制，允许开发者扩展 Vuex 的功能。可以使用插件来监听 Mutation、Action 的执行，并且在执行之前或之后进行一些处理。

总的来说，Vuex 的实现原理主要包括状态树的设计和管理、Mutation、Action 的提交和执行、Getter 的计算和筛选、以及模块化的管理。通过这些机制，Vuex 实现了对应用状态的集中管理和共享，使得状态的管理变得更加简单和可控。

3. 输入 URL 到页面展示的过程

4. 解析 HTML 时遇见 script 标签如何处理，script 的 defer 与 async 的区别

在解析 HTML 时，遇到 <script> 标签时，浏览器会根据情况进行不同的处理：

1. 解析阶段：当浏览器解析到 <script> 标签时，会暂停 HTML 的解析，并开始下载并执行该 <script> 标签引用的 JavaScript 文件。在执行 JavaScript 代码之前，浏览器通常会等待该脚本文件完全下载和执行。

2. 阻塞效应：默认情况下，浏览器会阻塞页面的渲染，直到 JavaScript 文件被下载和执行完毕。这会导致页面加载速度变慢，尤其是在 JavaScript 文件较大或者网络状况较差的情况下。

针对这个问题，<script> 标签提供了两个属性来改变默认行为：

• defer 属性：表示延迟执行脚本。浏览器会继续解析页面，并在文档解析完成后，按照 <script> 标签在页面中的顺序依次执行延迟脚本。这样可以保证页面的渲染不会被阻塞，但是脚本的执行顺序可能会受到影响，因为延迟脚本的执行是在文档解析完成后才开始的。

• async 属性：表示异步加载脚本。浏览器在解析到带有 async 属性的 <script> 标签时，会异步地下载脚本文件，并继续解析页面。脚本下载完成后会立即执行，不会等待文档解析完成。这样可以避免阻塞页面渲染，但是脚本的执行顺序无法保证，因为异步脚本的加载和执行是并行的。

总的来说，defer 属性和 async 属性都可以避免 JavaScript 对页面渲染的阻塞，但是它们的区别在于执行时机的不同。defer 脚本会在文档解析完成后按照顺序执行，而 async 脚本会在下载完成后立即执行，不等待文档解析完成。

3. 了解过哪些性能优化方案

4. Vue-router 的实现原理

Vue Router 是 Vue.js 官方提供的路由管理器，用于实现单页面应用（SPA）中的路由功能。其实现原理主要基于 Vue.js 提供的导航守卫和响应式数据。

下面是 Vue Router 的实现原理概述：

1. 基于 Vue 实例：Vue Router 将路由信息和状态都保存在 Vue 实例中，这些信息都是响应式的，当路由发生变化时，Vue 实例会自动更新视图。

2. 导航守卫：Vue Router 使用导航守卫机制来实现路由的跳转和拦截。导航守卫分为全局导航守卫（beforeEach、afterEach）和路由独享守卫（beforeEnter）、组件内守卫（beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave）。通过这些导航守卫，Vue Router 可以在路由切换前、切换后、路由离开前等时机执行相应的逻辑。

3. 路由映射表：Vue Router 会根据用户配置的路由信息生成一张路由映射表，将路径和对应的组件进行映射。当用户访问某个路径时，Vue Router 根据路径匹配到对应的组件进行渲染。

4. 路由模式：Vue Router 支持多种路由模式，包括 hash 模式、history 模式、abstract 模式等。在 hash 模式下，路由信息保存在 URL 的 hash 中，通过监听 hashchange 事件来实现路由切换；在 history 模式下，利用 HTML5 History API 来实现路由切换，可以通过修改浏览器的 URL 来导航。

5. 动态路由：Vue Router 支持动态路由，即路由的路径和参数可以根据当前的业务逻辑动态生成，这样可以更灵活地处理不同的路由情况。

总的来说，Vue Router 的实现原理是基于 Vue.js 提供的响应式数据和导航守卫机制，通过管理路由信息、路由映射表和监听 URL 变化来实现路由的跳转和管理。

3. http1.0 / 1.1 / 2.0 的区别

HTTP（Hypertext Transfer Protocol）是一种用于传输超文本数据的应用层协议，它定义了客户端和服务器之间进行通信的规则。HTTP 协议的不同版本之间存在一些区别，主要包括以下几个方面：

1. HTTP 1.0：

   • 连接管理：HTTP 1.0 使用短连接（non-persistent connection），即每次请求都需要建立新的连接。这导致了较大的网络开销，因为每次请求都需要经过 TCP 握手和断开连接的过程。
   • 请求/响应格式：HTTP 1.0 的请求和响应消息格式相对简单，头部信息和主体内容之间使用空行分隔。
   • 无状态：HTTP 1.0 是无状态协议，即服务器不会保留客户端的状态信息。

2. HTTP 1.1：

   • 持久连接：HTTP 1.1 引入了持久连接（persistent connection），允许在单个 TCP 连接上发送多个 HTTP 请求和响应，减少了连接的建立和断开次数，提高了性能。
   • 管道化：HTTP 1.1 支持管道化（pipelining），允许客户端在发送请求之前不必等待服务器的响应，从而进一步减少了延迟。
   • 缓存控制：HTTP 1.1 引入了更多的缓存控制机制，包括强缓存和协商缓存，以提高缓存的效率。
   • 分块传输编码：HTTP 1.1 支持分块传输编码（chunked transfer encoding），允许服务器将响应主体分成多个块发送，而不是一次性发送全部内容。

3. HTTP 2.0：

   • 多路复用：HTTP 2.0 支持多路复用（multiplexing），允许在单个 TCP 连接上同时发送和接收多个 HTTP 请求和响应，提高了并发性能。
   • 头部压缩：HTTP 2.0 使用 HPACK 算法对请求和响应的头部进行压缩，减少了头部传输的数据量，降低了网络延迟。
   • 服务器推送：HTTP 2.0 支持服务器推送（server push），允许服务器在客户端请求之前主动向客户端推送资源，提高了页面加载速度。
   • 二进制协议：HTTP 2.0 使用二进制格式而不是文本格式传输数据，减少了传输的开销。

总的来说，HTTP 1.0 到 HTTP 1.1 的主要改进是引入了持久连接和管道化，而 HTTP 2.0 则在此基础上进一步提高了性能，并引入了更多的新特性。

3. cookie 的作用与常见属性

Cookie 是存储在用户计算机上的小型文本文件，用于在客户端和服务器之间传递数据。它具有以下作用：

1. 会话管理：最常见的用途是在用户访问网站时识别用户。通过使用会话 Cookie，服务器可以在用户登录时创建一个唯一的会话标识符，并在用户浏览网站时将该标识符发送回服务器，从而保持用户的会话状态。

2. 个性化体验：网站可以使用 Cookie 存储用户的偏好设置或个性化信息，以提供更好的用户体验。例如，记住用户的语言选择、主题偏好或购物车内容。

3. 跟踪用户行为：通过分析用户的 Cookie 数据，网站可以跟踪用户的行为并收集有关用户活动的信息。这些信息可以用于改善网站的内容、广告定位和市场营销策略。

4. 广告定位：许多广告网络使用 Cookie 来跟踪用户的浏览行为，并根据其兴趣和偏好提供定向广告。

常见的 Cookie 属性包括：

1. Name（名称）：Cookie 的名称，用于标识 Cookie。

2. Value（值）：Cookie 的值，存储在 Cookie 中的数据。

3. Domain（域）：Cookie 所属的域名。只有在与该域名匹配的网站才能访问该 Cookie。

4. Path（路径）：指定 Cookie 的路径。只有在与该路径匹配的页面才能访问该 Cookie。

5. Expires（过期时间）：指定 Cookie 的过期时间。过了该时间后，浏览器将不再发送该 Cookie。

6. Max-Age：指定 Cookie 的最大有效期，单位为秒。与 Expires 不同，Max-Age 是从创建 Cookie 开始计算的时间。

7. Secure（安全）：指定 Cookie 是否仅通过 HTTPS 连接传输。

8. HttpOnly：指定 Cookie 是否仅能通过 HTTP 或 HTTPS 访问，而不能通过 JavaScript 访问。这有助于防止跨站脚本攻击（XSS 攻击）。

9. SameSite：指定 Cookie 是否应与跨站请求一起发送。它有三个可选值：Strict、Lax 和 None。Strict 表示仅在同一站点请求时发送 Cookie，Lax 表示在导航到网站时发送 Cookie（例如，通过链接），而 None 表示始终发送 Cookie，即使是跨站请求也会发送。

作者：zbwer
链接：www.nowcoder.com/discuss/596…
来源：牛客网