前端八股文第一篇

自我介绍：我的优势以及和这个岗位的匹配度。

为什么想进我们公司：HR想听有没有对这个岗位进行充分了解。

以前做的项目：你的思路，你的贡献，你的总结是什么。

介绍最失败的事情：有没有总结和反思。

要求介绍兴趣爱好：兴趣，爱好怎么塑造了今天的你。

你还有什么要问的：1.工作的岗位组织架构。2.未来的汇报对象以及他的职务。

1.原型和原型链

原型和原型链是JavaScript中的重要概念，用于实现对象之间的继承和属性共享。下面是对这两个概念的简要解释：

1. 原型（Prototype）：

   • 在JavaScript中，每个对象都有一个原型（prototype）。原型可以理解为对象的模板，它包含了对象共享的属性和方法。
   • 每个对象都有一个指向其原型的链接，可以通过 __proto__ 属性来访问它的原型。
   • 对象可以通过原型继承属性和方法，这意味着如果一个属性或方法不在对象本身上找到，JavaScript 引擎会继续查找对象的原型链。

2. 原型链（Prototype Chain）：

   • 原型链是一种由对象组成的层级结构，每个对象都有一个指向其原型的引用。当试图访问一个对象的属性或方法时，如果在对象本身找不到，JavaScript 引擎会沿着原型链往上查找，直到找到对应的属性或方法，或者到达原型链的顶端（Object.prototype）。
   • 如果某个对象的原型还有自己的原型，那么就会形成一条由多个对象组成的链，这就是原型链。

示例：

// 定义一个对象
let animal = {
  eats: true
};

// 创建一个对象 rabbit，并将其原型指向 animal
let rabbit = {
  jumps: true
};
rabbit.__proto__ = animal;

// 创建一个对象 longEar，并将其原型指向 rabbit
let longEar = {
  earLength: 10
};
longEar.__proto__ = rabbit;

// 访问 longEar 的属性和方法
console.log(longEar.earLength); // 10
console.log(longEar.jumps);     // true
console.log(longEar.eats);      // true，因为 longEar 的原型链中包含了 animal 对象

在这个示例中，longEar 对象通过原型链继承了 rabbit 和 animal 对象的属性和方法。

2.webpack的构建流程

https://www.bilibili.com/video/BV1MN411y7pw?p=98\&vd_source=42d274a772018e3a5c95360a8bab3e29

3.说说轮播图的思路

轮播图是网页开发中常见的组件之一，通常用于展示多张图片或内容，并以一定的方式进行切换显示。下面是实现轮播图的一般思路：

1. HTML 结构设计：

   • 使用 HTML 结构来定义轮播图的容器和轮播项（图片或内容）。
   • 通常情况下，轮播图的结构包括一个容器元素（如 <div>）和多个轮播项元素（如 <div>.<img> 或 <li> 等）。

2. CSS 样式设计：

   • 设计轮播图的布局和样式，包括容器的宽度.高度.位置.边框.背景等。
   • 对轮播项进行样式设计，包括宽度.高度.位置.显示方式等。

3. JavaScript 交互设计：

   • 编写 JavaScript 代码来实现轮播图的自动播放.手动切换.指示器等交互功能。
   • 定义变量来保存轮播图的状态，如当前显示的轮播项索引等。
   • 实现自动播放功能，使用定时器周期性地切换轮播项。
   • 实现手动切换功能，监听用户操作事件（如点击.滑动等），根据用户的操作切换到相应的轮播项。
   • 实现指示器功能，用于显示当前轮播项的索引，用户可以通过点击指示器来切换轮播项。

4. 轮播图切换动画：

   • 使用 CSS 过渡或动画效果来实现轮播图的切换动画，使切换过程更加平滑和美观。
   • 可以通过改变轮播项的位置.透明度等属性来实现不同的切换效果，如淡入淡出.滑动.渐变等。

5. 响应式设计：

   • 考虑不同设备上轮播图的显示效果，通过 CSS 媒体查询等技术实现响应式设计，使轮播图在不同设备上具有良好的显示效果和用户体验。

6. 性能优化：

   • 对轮播图的图片进行优化，如压缩.合并.懒加载等，以减少页面加载时间和提高性能。
   • 避免使用过多的 JavaScript 和复杂的动画效果，以减少页面的性能消耗。

以上是实现轮播图的一般思路，具体的实现方法和细节会根据项目需求和技术选型而有所不同。

4.redux的工作流程

Redux 是 JavaScript 应用程序状态管理的流行库，它提供了一种可预测的状态管理方案，适用于任何 JavaScript 应用程序，包括 React 应用程序。Redux 的工作流程可以总结如下：

1. 定义状态（State）：

   • 在 Redux 中，整个应用程序的状态被存储在单一的状态树中。首先，需要定义一个初始状态（initial state），它描述了应用程序在初始情况下的状态。

2. 定义动作（Actions）：

   • 动作是描述对应用程序状态进行修改的纯 JavaScript 对象。每个动作都有一个类型（type）字段，用于描述动作的种类，并且可以携带一些额外的数据（payload）。

3. 创建动作创建器（Action Creators）：

   • 动作创建器是一个函数，用于创建并返回表示特定动作的动作对象。它简化了动作的创建过程，并使代码更具可读性。

4. 定义 reducer 函数：

   • Reducer 是一个纯函数，用于根据给定的动作和当前状态来计算新状态。它接收两个参数：当前状态（state）和要处理的动作（action），并返回一个新的状态。
   • Reducer 函数应该是纯的，即不应该修改传入的参数，而是返回一个新的状态对象。

5. 创建 Store 对象：

   • Store 是 Redux 中的核心对象，用于管理应用程序的状态。它维护了应用程序的状态树，并提供了一些方法来访问状态.派发动作和注册监听器。
   • 创建 Store 时需要传入 reducer 函数作为参数，以便 Store 知道如何处理动作并更新状态。

6. 触发动作（Dispatch Actions）：

   • 使用 store.dispatch(action) 方法来派发动作。当派发动作时，Store 会调用 reducer 函数来计算新状态，并将新状态保存在状态树中。

7. 订阅状态变化（Subscribe to State Changes）：

   • 使用 store.subscribe(listener) 方法来注册一个状态变化的监听器。每当状态发生变化时，监听器会被调用，可以在监听器中执行一些额外的逻辑，如更新用户界面。

通过以上步骤，Redux 提供了一种清晰的数据流管理模式，使得状态变化可预测.可追踪，有助于构建可维护.可测试的应用程序。

5.http缓存有哪些

HTTP 缓存是 Web 开发中常用的性能优化技术之一，通过在客户端和服务器之间缓存资源，可以减少网络请求，加快页面加载速度。以下是常见的 HTTP 缓存机制：

1. 浏览器缓存：

   • 浏览器缓存是最常见的缓存机制，它通过在客户端（浏览器）中缓存资源来提高性能。
   • 浏览器缓存可以分为强缓存和协商缓存两种策略。

2. 强缓存：

   • 强缓存是浏览器直接从本地缓存中获取资源，而不向服务器发送请求。如果资源在客户端的缓存中有效，则不会发送请求，直接使用缓存的资源。
   • 强缓存通常通过设置响应头中的 Cache-Control 和 Expires 字段来实现。
   • 常见的 Cache-Control 取值有：
     • public：表示响应可以被任意缓存。
     • private：表示响应只能被单个用户缓存，不能在代理服务器中缓存。
     • max-age=<seconds>：表示资源在缓存中的有效时间，单位是秒。
   • Expires 是一个 HTTP/1.0 的字段，表示资源的过期时间，是一个绝对时间。

3. 协商缓存：

   • 协商缓存是在强缓存失效后才会向服务器发送请求，根据服务器返回的响应头判断是否需要使用缓存的策略。
   • 协商缓存通常通过设置响应头中的 Last-Modified 和 ETag 字段来实现。
   • 当浏览器再次请求资源时，会发送 If-Modified-Since 和 If-None-Match 字段，如果资源在服务器端未发生变化，则返回 304 Not Modified 状态码，浏览器直接使用缓存的资源。

4. CDN 缓存：

   • CDN（Content Delivery Network，内容分发网络）是一种网络架构，通过将内容分发到位于全球各地的服务器上，加速用户访问网站的速度。
   • CDN 服务器也会缓存静态资源，通过就近访问缓存的资源，减少网络延迟和带宽占用。

5. 服务端缓存：

   • 服务端缓存是将动态生成的内容缓存起来，以减轻服务器负载和加快响应速度。
   • 常见的服务端缓存技术包括 Memcached 和 Redis 等内存缓存系统，以及 HTTP 服务器的内置缓存功能。

通过以上不同的 HTTP 缓存机制，可以有效地提高 Web 应用程序的性能和用户体验。

6.websocket的底层协议

WebSocket 的底层协议是基于 TCP 协议的，它是一种在单个 TCP 连接上进行全双工通信的协议。WebSocket 协议通过 HTTP/HTTPS 升级头（Upgrade Header）从 HTTP/HTTPS 协议升级到 WebSocket 协议。这个升级过程允许服务器和客户端协商使用 WebSocket 协议进行通信。

一旦升级成功，WebSocket 就可以在客户端和服务器之间建立持久的连接，并允许它们通过该连接进行双向数据传输，而无需像 HTTP 那样频繁地建立和断开连接。这种持久连接的特性使得 WebSocket 更适合于实时性要求高.双向通信频繁的应用场景，例如在线游戏.即时通讯等。

7.Vue2和vue3的tree shaking的区别

在 Vue 2 和 Vue 3 中，Tree Shaking 的核心目标是移除未被使用的代码以减小最终打包文件的体积。但是，Vue 3 在 Tree Shaking 方面进行了一些改进：

1. 更好的模块组织：Vue 3 使用了 ES 模块的语法，这使得 Tree Shaking 更加有效。ES 模块具有静态导入和导出的特性，使得编译器可以更容易地识别和剔除未使用的代码。

2. 更精细的标记：Vue 3 在库代码中使用了更精细的标记，以便更好地告知 Tree Shaking 工具哪些代码是可被移除的。这些标记能够更准确地指示出哪些部分是被使用的，哪些部分是无用的。

3. 更小的运行时：Vue 3 的运行时相对于 Vue 2 更加轻量化，并且更容易进行 Tree Shaking。Vue 3 的运行时经过了重新设计和精简，使得它更容易被 Tree Shaking 工具识别和优化。

综上所述，Vue 3 在 Tree Shaking 方面相比 Vue 2 有一些改进，主要体现在更好的模块组织.更精细的标记以及更小的运行时。这些改进使得 Vue 3 在打包时能够更有效地剔除未使用的代码，从而减小最终打包文件的体积。

8.为什么要减少http的请求

减少 HTTP 请求有几个重要的原因：

1. 性能优化：每次发起 HTTP 请求都需要消耗网络资源和服务器资源，包括建立连接.传输数据.断开连接等过程。减少 HTTP 请求可以降低服务器的负载，提高网站或应用的性能。

2. 加快页面加载速度：每个 HTTP 请求都需要等待服务器响应，而浏览器在收到响应后才能继续加载页面的其他部分。因此，减少 HTTP 请求可以减少页面加载时间，提升用户体验。

3. 降低带宽成本：在移动设备等有限带宽环境下，减少 HTTP 请求可以减少数据传输量，从而降低用户的流量费用。

4. 优化资源缓存：通过减少 HTTP 请求，可以减少浏览器需要缓存的资源数量，从而提高缓存的命中率，减少不必要的网络传输。

综上所述，减少 HTTP 请求可以提高性能.加快页面加载速度.降低成本，并优化资源缓存，是 Web 性能优化的重要手段之一。

9.vue的双向数据绑定的原理

Vue.js 中的双向数据绑定是通过 Vue.js 的响应式系统实现的。其基本原理可以简单概括为以下几个步骤：

1. 数据劫持（Data Observation） ：Vue.js 通过使用 Object.defineProperty() 方法劫持（或拦截）了对象属性的 get 和 set 操作，实现对数据的监听。

2. 模板编译（Template Compilation）：Vue.js 会将模板编译成虚拟 DOM 渲染函数。在模板编译过程中，Vue.js 会解析模板中的指令和表达式，并为每个指令和表达式创建对应的更新函数。

3. 依赖收集（Dependency Collection）：在渲染函数执行过程中，如果数据被访问（即读取），则该数据与当前的渲染函数建立起了依赖关系。Vue.js 会将依赖关系记录在一个依赖收集器中。

4. 触发更新（Trigger Update） ：当数据发生变化时，通过数据劫持的 set 方法触发更新函数，更新函数会通知相关的依赖进行更新。

5. 视图更新（View Update）：通过虚拟 DOM 的对比算法，将最新的数据渲染到视图上，实现视图与数据的同步更新。

总体而言，Vue.js 的双向数据绑定通过数据劫持.模板编译.依赖收集和视图更新等机制实现，使得数据的变化能够自动反映到视图上，同时视图上的变化也能够自动更新到数据中，从而实现了数据与视图之间的双向绑定。

10.前端性能优化

前端性能优化是提高网页或应用加载速度.响应速度以及用户体验的关键。以下是一些常见的前端性能优化策略：

1. 减少 HTTP 请求：合并.压缩和缓存资源，减少页面中的 HTTP 请求次数，包括 CSS.JavaScript.图片等资源的合并与压缩，以及利用浏览器缓存机制来减少重复请求。

2. 优化图片：选择合适的图片格式和大小，尽量减小图片文件的体积，使用图片懒加载技术，以及利用 CSS Sprites 或者 SVG 精灵等技术来减少图片的 HTTP 请求。

3. 延迟加载和异步加载 ：将不是立即需要的资源延迟加载或者异步加载，例如将 JavaScript 脚本置于页面底部以延迟执行，或者使用 async 和 defer 属性来实现异步加载。

4. 优化 CSS 和 JavaScript：精简和优化 CSS 和 JavaScript 代码，减少不必要的代码和注释，尽量减少 DOM 操作和重绘重排，避免频繁的布局计算。

5. 使用 CDN 加速：利用内容分发网络（CDN）加速静态资源的传输，提高资源加载速度，减少网络延迟。

6. 缓存优化：合理利用浏览器缓存和服务端缓存，设置合适的缓存策略，减少不必要的资源请求，降低服务器负载。

7. 性能监控和优化：利用性能分析工具和监控工具来评估页面加载性能，发现潜在的性能瓶颈，并进行相应的优化。

8. 响应式设计：采用响应式设计，使网页或应用在不同设备和屏幕尺寸下都能提供良好的用户体验，避免不必要的资源加载和布局计算。

9. 服务端渲染（SSR）：对于需要 SEO 优化和快速渲染的页面，考虑使用服务端渲染技术来提高首屏加载速度和搜索引擎的收录效果。

10. 持续优化：不断监测和评估网页或应用的性能，并根据实际情况进行持续优化，及时修复性能问题，提升用户体验。