广州5k前端面试题惊呆我！！！（内容太肝，谨慎入内）

🌟 前言

欢迎来到我的技术小宇宙！🌌 这里不仅是我记录技术点滴的后花园，也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛，这里总有一些内容能触动你的好奇心。🔍

🤖 洛可可白：个人主页

🔥 个人专栏：✅前端技术 ✅后端技术

🏠 个人博客：洛可可白博客

🐱 代码获取：bestwishes0203

📷 封面壁纸：洛可可白wallpaper

在这里插入图片描述

文章目录

广州5k前端面试题惊呆我！！！（内容太肝，谨慎入内）
- - 1. 浏览器渲染原理
  - 2. https如何进行加密
  - 3. spa首屏加载慢优化
  - 4. vue双向绑定原理
  - 5. vuex设计与实现
  - 6. vue-router底层原理
  - 7. mvvm设计与实现
  - - 设计原理：
    - 实现方式：
    - 示例实现：
  - 8. async,await底层实现
  - 9. promise底层实现
  - 11. computea和watch的区别和应用场景
  - - `computed`（计算属性）：
    - `watch`（侦听属性）：
    - **应用场景**：
    - 总结：
  - 12. js垃圾回收机制
  - - 工作原理
  - 13. 前端缓存机制
  - - 浏览器缓存
    - Service Workers
    - Local Storage 和 Session Storage
    - IndexedDB
    - 应用缓存（Application Cache）
    - 缓存策略
- 🎉 往期精彩回顾

广州5k前端面试题惊呆我！！！（内容太肝，谨慎入内）

1. 浏览器渲染原理

浏览器渲染原理涉及将网页代码转换成用户可视界面的过程。以下是浏览器渲染页面的基本步骤：

加载：浏览器发起HTTP请求，从服务器获取HTML文档。
解析：浏览器解析HTML文档，创建DOM（文档对象模型）树。DOM树是由HTML元素构成的节点层次结构。
构建CSSOM：浏览器解析CSS文件和内联样式，构建CSSOM（CSS对象模型）树。CSSOM树包含了页面的样式信息。
合并DOM与CSSOM：浏览器将DOM树和CSSOM树合并，形成渲染树（render tree）。渲染树包含了所有需要显示在屏幕上的元素信息，包括样式属性。
布局：浏览器对渲染树进行布局计算，确定每个元素的位置和大小，这一过程也称为“重排”（reflow）。
绘制：浏览器将布局后的信息转换成像素，这个过程称为“重绘”（repaint）。随后，浏览器将像素数据发送到显卡，由显卡输出到显示器上。
合成：在某些情况下，浏览器会使用硬件加速来合成多个图层，这可以提高渲染效率。

在整个渲染过程中，浏览器可能会执行优化措施，如缓存、异步加载等，以提升页面加载和交互性能。了解这些原理对于前端开发者来说非常重要，它有助于诊断性能问题、优化页面加载速度和改善用户体验。

2. https如何进行加密

HTTPS（超文本传输安全协议）是一种安全的网络传输协议，它在HTTP的基础上通过SSL/TLS协议提供了数据加密、完整性验证和身份认证的功能。HTTPS的加密过程主要包括以下步骤：

握手阶段：
- 客户端向服务器发起HTTPS请求。
- 服务器响应并发送其SSL证书，该证书包含了服务器的公钥和由证书颁发机构（CA）签发的信息。
- 客户端验证服务器证书的有效性，包括证书是否过期、是否由可信CA签发等。
- 验证通过后，客户端会生成一个随机数（称为预主密钥），并使用服务器的公钥加密后发送给服务器。
密钥交换：
- 服务器使用自己的私钥解密收到的预主密钥。
- 客户端和服务器现在都有了相同的预主密钥，将使用它来生成一组对称加密的密钥（会话密钥），用于后续的数据加密通信。
加密通信：
- 使用生成的会话密钥，客户端和服务器之间的所有数据传输都将被加密。即使数据在传输过程中被拦截，攻击者也无法解密和读取数据内容，因为他们没有会话密钥。
会话结束：
- 一旦通信结束，会话密钥将被丢弃，确保每次会话都使用新的密钥，增加了安全性。

HTTPS的加密机制确保了数据传输的安全性，尤其适用于涉及敏感信息（如登录凭据、个人信息、支付信息等）的场合。通过这种方式，HTTPS提供了一种可靠的保护措施，防止数据在传输过程中被窃听或篡改。

3. spa首屏加载慢优化

SPA（单页应用）首屏加载慢是常见的性能问题，主要原因是JavaScript文件和依赖的加载、解析、执行过程可能导致渲染阻塞。以下是一些优化SPA首屏加载速度的策略：

代码分割：使用Webpack等打包工具进行代码分割，将代码拆分为多个块（chunk），按需加载，减少首屏加载时的JavaScript体积。
异步加载：将非关键的JavaScript和CSS资源设置为异步加载（例如，使用async或defer属性），确保首屏渲染不受阻塞。
懒加载：实现图片和组件的懒加载，只有当用户滚动到页面的相应位置时才加载资源。
优化资源加载：使用HTTP/2减少连接数，启用Gzip或Brotli压缩资源，减少传输数据大小。
预加载关键资源：通过<link rel="preload">预加载关键CSS文件和字体，确保它们在渲染前已加载完毕。
服务端渲染（SSR）：使用服务端渲染生成首屏HTML，减少客户端渲染时间。
缓存策略：利用浏览器缓存，对静态资源设置合理的缓存策略，减少重复加载。
优化DOM操作：减少首屏渲染所需的DOM操作，避免复杂的DOM树结构。
使用CDN：将静态资源部署到CDN上，减少资源加载时间。
性能监控：使用性能监控工具（如Lighthouse、WebPageTest）定期检查网站性能，找出瓶颈并进行优化。

通过这些策略的组合使用，可以显著提升SPA的首屏加载速度，改善用户体验。开发者应根据具体情况选择合适的优化方法，并持续监测优化效果。

4. vue双向绑定原理

Vue.js 的双向绑定是其核心特性之一，它允许开发者在表单输入和应用状态之间建立一个双向连接。Vue 实现双向绑定的原理主要依赖于响应式系统，该系统结合了观察者模式、依赖收集和发布订阅模式。以下是 Vue 双向绑定的基本原理：

数据劫持：
Vue 使用 Object.defineProperty 方法对数据对象的属性进行劫持，将每个属性转换为 getter 和 setter。这样，每当属性被访问（getter 被调用）或属性值被修改（setter 被调用）时，Vue 都能够知道。
依赖收集：
当渲染函数或计算属性被执行时，它们会访问响应式数据的属性，触发这些属性的 getter。在 getter 中，Vue 会记录当前正在执行的渲染函数或计算属性作为依赖。这个过程称为依赖收集，确保 Vue 知道哪些组件需要在数据变化时重新渲染。
观察者模式：
Vue 的响应式系统是基于观察者模式实现的。每个组件实例都对应一个观察者对象，它会在数据变化时收到通知，并执行相应的组件更新。
发布订阅：
当属性的 setter 被调用时，意味着数据发生了变化。Vue 会触发该属性的 setter，通知所有依赖于这个属性的观察者（即组件），进行相应的更新。
指令（v-model）：
Vue 提供了 v-model 指令来实现表单输入和应用状态之间的双向绑定。当用户输入时，v-model 会更新对应的数据模型，反之，当数据模型变化时，v-model 也会更新 DOM 中的输入框显示。
虚拟DOM：
Vue 在内部使用虚拟DOM来提高性能。当数据变化时，Vue 会生成一个新的虚拟DOM树，并与旧的虚拟DOM树进行比较（diff）。Vue 会找出两棵树之间的差异，并计算出最小的更新操作来应用到实际的DOM上，从而实现高效的视图更新。

通过这些机制，Vue 能够在数据变化时自动更新视图，同时在视图变化时（如用户输入）更新数据，实现所谓的双向绑定。这种机制大大简化了数据与视图同步的复杂性，使得开发者能够更加专注于应用逻辑。

5. vuex设计与实现

Vuex 是 Vue.js 应用的状态管理模式和库，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 的设计遵循了几个核心原则：

单一状态树：整个应用的状态被存储在一个对象树中，称为“state”。这使得状态的预测和管理变得更加简单。
状态管理：Vuex 提供了一套严格的规则和约定，使得状态的变化可追踪和调试。
数据流的单一方向：Vuex 应用的状态变化是可预测的，所有的状态变更都显式地通过变更状态的函数进行。

Vuex 的基本实现包括以下几个部分：

State：存储所有应用级别的状态。
Getters：允许你从 state 中派生出一些状态，例如过滤列表、计算属性值等。
Mutations：更改 Vuex 的 state 的唯一方法是提交 mutation。Mutation 是同步函数，其目的是修改 state。
Actions：类似于 mutations，但可以包含任意异步操作。Action 提交的是 mutation，而不是直接变更状态。
Mutations 和 Actions 的区别：Mutations 必须是同步函数，而 Actions 可以是异步的。Mutations 直接变更状态，而 Actions 通过提交 Mutations 来间接变更状态。
Modules：当应用变得复杂时，状态管理也会变得很复杂。Vuex 允许将 store 分割成模块（module）。每个模块拥有自己的 state、getters、mutations、actions，甚至是嵌套子模块。

在实现 Vuex 时，首先需要创建一个 store 实例，定义好 state、getters、mutations 和 actions。然后在 Vue 实例中注入 Vuex store，通过 this.$store 访问 state 和 getters，通过 this.$store.commit 和 this.$store.dispatch 触发状态变更。

例如，创建一个简单的 Vuex store：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    doubleCount: state => state.count * 2
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    incrementIfOdd({ state, commit }) {
      if (state.count % 2 !== 0) {
        commit('increment');
      }
    }
  }
});

export default store;

在 Vue 组件中使用：

export default {
  computed: {
    doubleCount() {
      return this.$store.getters.doubleCount;
    }
  },
  methods: {
    increment() {
      this.$store.commit('increment');
    },
    incrementIfOdd() {
      this.$store.dispatch('incrementIfOdd');
    }
  }
};

通过这种方式，Vuex 提供了一个清晰、结构化的方式来管理应用的状态，使得状态变化可预测、可追踪，并且易于维护。

6. vue-router底层原理

Vue Router 是 Vue.js 的官方路由管理器，它与 Vue.js 核心深度集成，使得在单页应用中构建复杂的页面路由变得简单。Vue Router 的底层原理可以从以下几个方面来理解：

路由映射：
Vue Router 允许开发者定义路由映射，即 URL 路径与组件的对应关系。在初始化时，Vue Router 会解析路由配置，创建一个路由表，用于匹配 URL 并找到对应的组件。
路由模式：
Vue Router 支持两种路由模式：Hash 模式和 History 模式。Hash 模式依赖 URL 的 hash 部分（例如 #/），而 History 模式利用 HTML5 History API 来实现干净的 URL，不需要 hash。
路由导航：
用户点击导航链接或使用编程式导航（如 this.$router.push）时，Vue Router 会根据当前 URL 和路由表来决定要渲染哪个组件。如果是 History 模式，Vue Router 还会通过 HTML5 History API 来改变 URL，而不影响页面的重新加载。
视图渲染：
Vue Router 使用一个 <router-view> 组件作为渲染目标，根据当前路由的匹配结果动态地切换组件。同时，可以使用 <router-link> 或 <nuxt-link> 组件来创建导航链接，Vue Router 会自动处理链接的激活状态。
路由守卫：
Vue Router 提供了路由守卫（Route Guards），允许在路由进入或离开时执行逻辑，如验证用户权限、记录日志等。守卫可以在全局或局部使用，支持异步操作。
嵌套路由：
Vue Router 支持嵌套路由，允许子组件根据其所在的父路由动态地渲染。这通过路由配置中的 children 属性实现，使得应用可以构建多层级的页面结构。
懒加载：
Vue Router 支持组件的懒加载，即组件直到需要渲染时才加载。这可以减少应用的初始加载时间，提升性能。
导航栈：
在某些情况下，Vue Router 会维护一个导航栈，记录用户的操作历史，支持前进和后退操作。

Vue Router 的设计使得开发者能够轻松地管理应用的路由，同时提供了丰富的功能来满足不同场景下的路由需求。通过上述原理，Vue Router 为 Vue.js 应用提供了强大的路由功能，使得开发者可以构建出具有复杂路由逻辑的单页应用。

7. mvvm设计与实现

MVVM（Model-View-ViewModel）是一种软件架构模式，广泛应用于现代前端框架中，如Vue.js、Angular和Knockout.js等。MVVM 的核心思想是将视图层（View）和业务逻辑层（Model）分离，通过ViewModel作为中介进行数据绑定和命令传递，从而实现视图和模型的自动同步。以下是MVVM设计的基本原理和实现方式：

设计原理：

模型（Model）：代表应用的数据和业务逻辑，通常与后端数据源进行交互。Model 不直接与视图相关联，而是通过 ViewModel 间接与视图通信。
视图（View）：展示数据给用户的界面。在MVVM模式中，视图只负责展示，不包含业务逻辑。视图通过数据绑定与 ViewModel 交互。
视图模型（ViewModel）：连接视图和模型的中介。ViewModel 包含了视图中所有数据的副本，以及操作这些数据的命令。ViewModel 通过数据绑定将用户在视图上的操作转换为模型的更改，同时将模型的状态更新反映到视图上。

实现方式：

数据绑定：MVVM模式通常使用数据绑定技术，如Vue.js中的双向数据绑定，来自动同步视图和 ViewModel 的数据。数据绑定可以是双向的（双向绑定）或单向的（单向数据流）。
依赖属性和命令：ViewModel中的属性被标记为依赖属性（如Vue中的data函数返回的数据），当这些属性的值发生变化时，视图会自动更新。命令（如Vue中的methods）则是ViewModel中定义的函数，用于处理用户的交互操作。
模板引擎：许多MVVM框架提供了模板引擎，允许开发者在HTML模板中使用简洁的语法来声明数据绑定和命令。例如，在Vue.js中，可以使用{{ expression }}进行文本插值，使用v-bind进行属性绑定，使用v-on或@来监听事件。
编译模板：框架会在应用初始化时编译模板，将模板中的绑定转换为相应的数据监听器和更新函数。当ViewModel中的数据变化时，监听器会触发更新函数，从而更新视图。
组件化：MVVM模式支持将视图和ViewModel进一步分解为可复用的组件。每个组件都有自己的视图模板和ViewModel逻辑，这使得应用的开发和维护更加模块化。

示例实现：

以Vue.js为例，一个简单的MVVM实现可能如下所示：

// ViewModel
const vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello MVVM!'
  },
  methods: {
    reverseMessage() {
      this.message = this.message.split('').reverse().join('');
    }
  }
});

<!-- View -->
<div id="app">
  <p>{{ message }}</p>
  <button @click="reverseMessage">Reverse Message</button>
</div>

在这个例子中，message是ViewModel中的数据，通过{{ message }}在视图中显示。点击按钮时，reverseMessage方法被触发，ViewModel中的数据更新，视图随之更新。

MVVM模式通过解耦视图和模型，简化了前端开发，使得业务逻辑和用户界面的变更更加独立和易于管理。

8. async,await底层实现

async 和 await 是 JavaScript 中用于简化异步编程的关键字。它们在 ES2017（ES8）中被引入，基于 Promise 实现，提供了一种更加直观和易于理解的方式来处理异步操作。以下是 async 和 await 的底层实现原理：

async 关键字：
- 当你在函数声明前使用 async 关键字时，该函数隐式返回一个 Promise 对象。
- async 函数内部返回的任何值都会被包装成一个已解决（fulfilled）的 Promise。
- 如果 async 函数内部抛出异常，该异常会被 Promise 捕获，并使得 Promise 变为拒绝（rejected）状态。
await 关键字：
- await 只能在 async 函数内部使用，它后面通常跟随一个 Promise 对象。
- 当执行到 await 表达式时，如果 Promise 已经解决，await 表达式的值就是 Promise 解决的值。
- 如果 Promise 还在等待中，await 会暂停 async 函数的执行，直到 Promise 完成（无论是解决还是拒绝）。
- 在等待 Promise 期间，控制权会返回给执行环境，允许其他代码运行（例如，事件循环可以继续进行）。
底层实现：
- async 和 await 的实现依赖于 Promise 的微任务（microtask）机制。
- 当遇到 await 表达式时，当前的 async 函数会暂停执行，并将当前执行上下文（包括局部变量等）保存在内存中。
- 一旦相关的 Promise 完成，之前暂停的 async 函数会恢复执行，并且 await 表达式的值会被设置为 Promise 的结果。
- 如果 await 表达式抛出异常，异常会被包装成一个新 Promise 并拒绝，这个新 Promise 会替换原来的 Promise。
错误处理：
- 使用 try...catch 语句可以捕获 async 函数中由 await 抛出的异常。
- 如果 async 函数内部没有捕获到异常，它会冒泡到外部调用者，就像普通的 Promise 一样。

以下是一个简单的 async 和 await 示例：

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

fetchData().then(data => {
  console.log('Fetched data:', data);
});

在这个例子中，fetchData 函数使用 async 关键字声明，内部使用 await 等待网络请求完成。如果请求成功，它会解析响应并返回数据。如果请求失败，它会捕获异常并记录错误。

async 和 await 的引入使得异步代码的编写和阅读更加直观，减少了回调函数和链式 Promise 的复杂性，是现代 JavaScript 异步编程的重要特性。

9. promise底层实现

Promise 是 JavaScript 中用于异步编程的一个对象，它代表了一个尚未完成但预期将来会完成的操作的最终结果。Promise 可以处于以下三种状态之一：待定（pending）、已成功（fulfilled）或已失败（rejected）。以下是 Promise 底层实现的基本概念和步骤：

构造 Promise：
- 创建一个新的 Promise 对象时，需要提供一个执行器（executor）函数，该函数接收两个参数：resolve 和 reject。
- resolve 函数用于将 Promise 状态更改为已成功，传入成功的结果值。
- reject 函数用于将 Promise 状态更改为已失败，传入失败的原因。
异步操作：
- 执行器函数内部执行异步操作，如网络请求、文件读写等。
- 根据异步操作的结果，使用 resolve 或 reject 来更新 Promise 的状态。
状态变化：
- 当 resolve 或 reject 被调用时，Promise 的状态从待定变为已成功或已失败。
- 状态变化后，会触发相应的 .then() 或 .catch() 回调函数。
链式调用：
- Promise 的 .then() 方法返回一个新的 Promise 对象，这允许将多个 Promise 操作链接在一起。
- 如果 .then() 或 .catch() 回调函数内部返回一个值，这个值会被包装成一个新的 Promise，并作为链式调用的下一个 Promise。
错误处理：
- 如果执行器函数抛出异常，或者 then 或 catch 回调函数抛出异常，Promise 状态会变为已失败，并将异常作为失败原因传递。
微任务队列：
- Promise 的处理通常在微任务（microtask）阶段执行，这意味着在当前任务执行完成后，事件循环的下一次迭代之前，Promise 的状态变化和回调函数的执行会被处理。

以下是一个简单的 Promise 实现示例：

function myPromiseExecutor(resolve, reject) {
  setTimeout(() => {
    const success = true; // 假设异步操作成功
    if (success) {
      resolve('Operation successful');
    } else {
      reject('Operation failed');
    }
  }, 1000);
}

const myPromise = new Promise(myPromiseExecutor);

myPromise.then(
  (result) => {
    console.log(result); // 'Operation successful'
  },
  (error) => {
    console.error(error); // 'Operation failed'
  }
);

在这个例子中，myPromiseExecutor 函数模拟了一个异步操作，myPromise 是一个 Promise 对象，它在异步操作完成后调用 resolve 或 reject。.then() 方法用于指定异步操作成功或失败时的回调函数。

Promise 的引入简化了异步编程的复杂性，使得异步操作的控制流程更加清晰和易于管理。

11. computea和watch的区别和应用场景

computed 和 watch 是 Vue.js 中的两个响应式系统特性，它们都与数据的响应式处理有关，但用途和工作方式有所不同。

`computed`（计算属性）：

用途：
- computed 属性是基于其他响应式数据动态计算得出的值。
- 它们是派生状态，即不需要直接修改 computed 属性的值，而是通过修改依赖的数据来间接改变。
工作方式：
- 当依赖的数据发生变化时，computed 属性会自动重新计算其值。
- computed 属性是惰性的，只有当它们的依赖项发生改变时才会重新计算。
- computed 属性具有缓存机制，只有当依赖的数据变化时才会重新计算，这有助于提高性能。
应用场景：
- 当你需要根据其他数据计算一个新值时，例如，根据两个输入字段计算结果。
- 当你需要执行复杂逻辑，而这些逻辑不应该在模板中直接编写时。

`watch`（侦听属性）：

用途：
- watch 允许你观察 Vue 实例上的一个表达式或计算属性函数，监听其变化。
- 当被侦听的数据变化时，执行一个自定义回调函数。
工作方式：
- watch 可以侦听所有类型的数据变化，包括对象的属性和数组的索引。
- watch 可以非常精确地控制数据变化时执行的操作，例如，可以指定深度遍历来侦听对象属性的变化。
- watch 不具有缓存机制，每次数据变化都会执行回调函数。
应用场景：
- 当你需要在数据变化时执行异步操作或较复杂的逻辑时。
- 当你需要在数据变化时执行副作用（如滚动到视图顶部、显示消息等）时。
- 当你需要侦听多个数据源的变化，并根据这些变化执行操作时。

总结：

如果你需要根据两个数据属性计算一个新属性，那么 computed 是最佳选择。如果你需要在数据变化时执行异步请求或复杂的状态更新，那么 watch 将更加合适。

12. js垃圾回收机制

JavaScript的垃圾回收机制是一种自动内存管理机制，它负责释放那些不再被使用的内存空间，以便这些空间可以被重新分配给新的变量或对象。这是通过垃圾回收器（Garbage Collector，简称GC）来实现的。垃圾回收器在JavaScript中是自动运行的，但了解其工作原理对于编写高效和内存优化的代码是非常重要的。

工作原理

JavaScript主要使用两种垃圾回收策略：标记-清除（Mark-Sweep）和分代回收（Generational Garbage Collection）。

标记-清除（Mark-Sweep）:
- 标记阶段：垃圾回收器遍历所有的对象，从全局对象开始，通过引用链找到所有可达的对象，并将这些对象标记为“活动”状态。
- 清除阶段：垃圾回收器遍历内存，删除那些没有被标记为“活动”的对象，释放内存空间。
分代回收（Generational Garbage Collection）:
- JavaScript的内存被分为几个“代”（Generation），每个代包含特定生命周期的对象。
- 新生代（Young Generation）：新创建的对象首先被分配在这里。这些对象通常生命周期短，频繁创建和销毁。
- 老生代（Old Generation）：长时间存活的对象会被移动到老生代。这些对象通常更稳定，不会频繁地被回收。
- DOM代：专门用于存储DOM元素和相关的事件处理器等。

13. 前端缓存机制

前端缓存机制是一种在客户端（如浏览器）上存储网页数据的技术，旨在提高用户体验和网站性能。通过缓存，可以减少重复的数据请求，加快页面加载速度，降低服务器负载，并在没有网络连接时提供离线访问的能力。前端缓存主要通过以下几种方式实现：

浏览器缓存

浏览器缓存是最常用的前端缓存形式。它利用HTTP协议的缓存控制头部（如Cache-Control、Expires、Last-Modified和ETag）来确定资源是否可以从本地缓存中加载，或者是否需要从服务器重新获取。

Cache-Control：这个头部可以指定资源的缓存策略，例如no-cache（资源可以缓存，但每次使用前都需要验证）、no-store（不缓存）、max-age（资源在指定时间内有效）等。
Expires：提供一个日期/时间，之后资源就被认为是过期的。
Last-Modified/ETag：服务器可以发送这些头部，以便在后续请求中，客户端可以通过If-Modified-Since或If-None-Match头部来验证资源是否已经被修改。